From 110940523ef126e225a5ef6ebef67d52ea157872 Mon Sep 17 00:00:00 2001 From: Ju <68391427+VictoryJu@users.noreply.github.com> Date: Mon, 18 Nov 2024 00:12:41 +0900 Subject: [PATCH] =?UTF-8?q?Next.js=2014=20app=20router=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=20=EA=B5=AC=EC=A1=B0=20=EA=B0=9C=EC=84=A0=ED=99=94=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=20(#44)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [fix]: yarn -> pnpm settings * [fix]: react-query ssr logic apply * [fix]: yarn -> pnpm 구성하면서 husky 수정 * [feat]: next.js metadata export warning message off * [fix]: 루트 폴더를 app 폴더로 수정 * [fix]: husky * [fix]: 쿠키값 서버사이드에서 가져오게 변경 및 기타 파일 패스수정 * [fix]: 메타데이터 설정 변경 * [refact]: Chat 페이지 폴더구조 최적화 * Revert [fix]: 루트 폴더를 app 폴더로 수정 This reverts commit 115e3fe88b6caaf84af0514921443860149ee2db * [fix]: 사용하지않는 컴포넌트 제거 --- .eslintrc.cjs | 10 +- .husky/pre-commit | 4 +- .yarnrc.yml | 1 - .../[id]/_components/chat-message.module.scss | 0 .../chat/[id]/_components/chat-message.tsx | 2 +- .../[id]/_components/chat-room.module.scss | 0 app/chat/[id]/_components/chat-room.tsx | 104 + .../chat/[id]/_hooks/use-chat.ts | 6 +- app/chat/[id]/page.tsx | 16 + .../_components/chat-container.module.scss | 0 app/chat/_components/chat-container.tsx | 25 + .../chat-item/chat-item.module.scss | 0 .../chat/_components/chat-item/chat-item.tsx | 20 +- .../chat/_components/chat-item/chat-items.tsx | 14 +- .../chat-list-edit/chat-list-edit.module.scss | 0 .../chat-list-edit/chat-list-edit.tsx | 14 +- .../chat-list/chat-list.module.scss | 0 .../chat/_components/chat-list/chat-list.tsx | 21 +- app/chat/page.tsx | 5 + app/get-query-client.ts | 33 + {src/app => app}/layout.tsx | 17 +- {src/app/(routes) => app}/location/page.tsx | 0 {src/app => app}/not-found.tsx | 2 +- app/page.tsx | 7 + {src/app/(routes) => app}/payment/page.tsx | 2 +- app/provider.tsx | 16 + .../reservation/[reservationId]/page.tsx | 0 .../app/(routes) => app}/reservation/page.tsx | 0 {src/app/(routes) => app}/review/page.tsx | 0 {src/app/(routes) => app}/version/page.tsx | 0 global.d.ts | 19 + {src/mocks => mocks}/api/index.js | 0 {src/mocks => mocks}/api/reservation.js | 0 {src/mocks => mocks}/browser.js | 0 {src/mocks => mocks}/handler.js | 0 {src/mocks => mocks}/index.js | 0 package.json | 13 +- pnpm-lock.yaml | 5684 +++++++++++++++ src/app/(routes)/chat-list/page.tsx | 12 - src/app/page.tsx | 6 - src/app/provider.tsx | 12 - src/components/Chat/ChatRooms/ChatRooms.tsx | 31 - src/components/ReviewInfo/ReviewInfo.tsx | 8 +- .../{ => ui}/common/Button/Button.module.scss | 0 .../{ => ui}/common/Button/Button.tsx | 0 .../common/Calendar/Calendar.module.scss | 0 .../{ => ui}/common/Calendar/Calendar.tsx | 6 +- .../ContentField/ContentField.module.scss | 0 .../common/ContentField/ContentField.tsx | 0 .../common/Divider/Divider.module.scss | 0 .../{ => ui}/common/Divider/Divider.tsx | 0 .../common/Dropdown/Dropdown.module.scss | 0 .../{ => ui}/common/Dropdown/Dropdown.tsx | 4 +- .../ui}/icons/icon/ArrowDownNoTail.tsx | 0 .../ui}/icons/icon/ArrowLeftTail.tsx | 0 .../ui}/icons/icon/ArrowRightIcon.tsx | 0 .../ui}/icons/icon/CalendarIcon.tsx | 0 .../ui}/icons/icon/CameraIcon.tsx | 0 .../ui}/icons/icon/CheckboxIcon.tsx | 0 .../ui}/icons/icon/DeleteXIcon.tsx | 0 .../ui}/icons/icon/DotsVertical.tsx | 0 .../ui}/icons/icon/EditIcon.tsx | 0 .../ui}/icons/icon/MarkerIcon.tsx | 0 .../ui}/icons/icon/PlusIcon.tsx | 0 .../ui}/icons/icon/RadioActiveIcon.tsx | 0 .../ui}/icons/icon/RadioIcon.tsx | 0 .../ui}/icons/icon/SearchIcon.tsx | 0 .../ui}/icons/icon/SelectedCheckboxIcon.tsx | 0 .../ui}/icons/icon/SelectedIcon.tsx | 0 .../ui}/icons/icon/TargetIcon.tsx | 0 .../ui}/icons/icon/UnSelectedIcon.tsx | 0 .../ui}/icons/icon/UploadIcon.tsx | 0 src/{ => components/ui}/icons/icon/index.ts | 0 .../ui}/icons/logo/ErrorLogoIcon.tsx | 0 .../ui}/icons/logo/ReactLogoIcon.tsx | 0 .../ui}/icons/logo/ViteLogoIcon.tsx | 0 src/{ => components/ui}/icons/logo/index.ts | 0 src/{ => components/ui}/icons/types.ts | 0 src/pagesss/Chat/ChatRoom/ChatRoom.tsx | 102 - src/pagesss/Chat/ChatRoom/index.tsx | 13 - src/pagesss/Chat/ChatRooms/index.tsx | 7 - src/pagesss/Error/ErrorPage.tsx | 3 +- src/pagesss/Location/Location/Location.tsx | 18 +- src/pagesss/Payment/Payment/Payment.tsx | 16 +- .../Reservation/Detail/DetailReservation.tsx | 12 +- src/pagesss/Reservation/Index/Index.tsx | 11 +- src/pagesss/Review/Review.tsx | 16 +- src/{interfaces => types}/reservation.ts | 0 tsconfig.json | 44 +- tsconfig.node.json | 11 - yarn.lock | 6203 ----------------- 91 files changed, 6031 insertions(+), 6539 deletions(-) delete mode 100644 .yarnrc.yml rename src/components/Chat/ChatRoom/ChatMessage.module.scss => app/chat/[id]/_components/chat-message.module.scss (100%) rename src/components/Chat/ChatRoom/ChatMessage.tsx => app/chat/[id]/_components/chat-message.tsx (94%) rename src/pagesss/Chat/ChatRoom/ChatRoom.module.scss => app/chat/[id]/_components/chat-room.module.scss (100%) create mode 100644 app/chat/[id]/_components/chat-room.tsx rename src/hooks/useChat.ts => app/chat/[id]/_hooks/use-chat.ts (94%) create mode 100644 app/chat/[id]/page.tsx rename src/components/Chat/ChatRooms/ChatRooms.module.scss => app/chat/_components/chat-container.module.scss (100%) create mode 100644 app/chat/_components/chat-container.tsx rename src/components/Chat/ChatRooms/ChatItemBase/ChatItemBase.module.scss => app/chat/_components/chat-item/chat-item.module.scss (100%) rename src/components/Chat/ChatRooms/ChatItemBase/ChatItemBase.tsx => app/chat/_components/chat-item/chat-item.tsx (78%) rename src/components/Chat/ChatRooms/ChatRoomItems.tsx => app/chat/_components/chat-item/chat-items.tsx (74%) rename src/components/Chat/ChatRoomsEdit/ChatRoomsEdit.module.scss => app/chat/_components/chat-list-edit/chat-list-edit.module.scss (100%) rename src/components/Chat/ChatRoomsEdit/ChatRoomsEdit.tsx => app/chat/_components/chat-list-edit/chat-list-edit.tsx (85%) rename src/components/Chat/ChatRooms/ChatRoomList.module.scss => app/chat/_components/chat-list/chat-list.module.scss (100%) rename src/components/Chat/ChatRooms/ChatRoomList.tsx => app/chat/_components/chat-list/chat-list.tsx (60%) create mode 100644 app/chat/page.tsx create mode 100644 app/get-query-client.ts rename {src/app => app}/layout.tsx (51%) rename {src/app/(routes) => app}/location/page.tsx (100%) rename {src/app => app}/not-found.tsx (98%) create mode 100644 app/page.tsx rename {src/app/(routes) => app}/payment/page.tsx (85%) create mode 100644 app/provider.tsx rename {src/app/(routes) => app}/reservation/[reservationId]/page.tsx (100%) rename {src/app/(routes) => app}/reservation/page.tsx (100%) rename {src/app/(routes) => app}/review/page.tsx (100%) rename {src/app/(routes) => app}/version/page.tsx (100%) create mode 100644 global.d.ts rename {src/mocks => mocks}/api/index.js (100%) rename {src/mocks => mocks}/api/reservation.js (100%) rename {src/mocks => mocks}/browser.js (100%) rename {src/mocks => mocks}/handler.js (100%) rename {src/mocks => mocks}/index.js (100%) create mode 100644 pnpm-lock.yaml delete mode 100644 src/app/(routes)/chat-list/page.tsx delete mode 100644 src/app/page.tsx delete mode 100644 src/app/provider.tsx delete mode 100644 src/components/Chat/ChatRooms/ChatRooms.tsx rename src/components/{ => ui}/common/Button/Button.module.scss (100%) rename src/components/{ => ui}/common/Button/Button.tsx (100%) rename src/components/{ => ui}/common/Calendar/Calendar.module.scss (100%) rename src/components/{ => ui}/common/Calendar/Calendar.tsx (95%) rename src/components/{ => ui}/common/ContentField/ContentField.module.scss (100%) rename src/components/{ => ui}/common/ContentField/ContentField.tsx (100%) rename src/components/{ => ui}/common/Divider/Divider.module.scss (100%) rename src/components/{ => ui}/common/Divider/Divider.tsx (100%) rename src/components/{ => ui}/common/Dropdown/Dropdown.module.scss (100%) rename src/components/{ => ui}/common/Dropdown/Dropdown.tsx (97%) rename src/{ => components/ui}/icons/icon/ArrowDownNoTail.tsx (100%) rename src/{ => components/ui}/icons/icon/ArrowLeftTail.tsx (100%) rename src/{ => components/ui}/icons/icon/ArrowRightIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/CalendarIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/CameraIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/CheckboxIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/DeleteXIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/DotsVertical.tsx (100%) rename src/{ => components/ui}/icons/icon/EditIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/MarkerIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/PlusIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/RadioActiveIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/RadioIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/SearchIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/SelectedCheckboxIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/SelectedIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/TargetIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/UnSelectedIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/UploadIcon.tsx (100%) rename src/{ => components/ui}/icons/icon/index.ts (100%) rename src/{ => components/ui}/icons/logo/ErrorLogoIcon.tsx (100%) rename src/{ => components/ui}/icons/logo/ReactLogoIcon.tsx (100%) rename src/{ => components/ui}/icons/logo/ViteLogoIcon.tsx (100%) rename src/{ => components/ui}/icons/logo/index.ts (100%) rename src/{ => components/ui}/icons/types.ts (100%) delete mode 100644 src/pagesss/Chat/ChatRoom/ChatRoom.tsx delete mode 100644 src/pagesss/Chat/ChatRoom/index.tsx delete mode 100644 src/pagesss/Chat/ChatRooms/index.tsx rename src/{interfaces => types}/reservation.ts (100%) delete mode 100644 tsconfig.node.json delete mode 100644 yarn.lock diff --git a/.eslintrc.cjs b/.eslintrc.cjs index d6c9537..2d5bbff 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -15,4 +15,12 @@ module.exports = { { allowConstantExport: true }, ], }, -} + overrides: [ + { + files: ['app/**/layout.tsx'], + rules: { + 'react-refresh/only-export-components': 'off', + }, + }, + ], +}; diff --git a/.husky/pre-commit b/.husky/pre-commit index dc0378c..3ff7e6c 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -1,4 +1,4 @@ -#!/bin/sh +#!/usr/bin/env sh . "$(dirname "$0")/_/husky.sh" -yarn lint-staged \ No newline at end of file +pnpm lint-staged diff --git a/.yarnrc.yml b/.yarnrc.yml deleted file mode 100644 index 3186f3f..0000000 --- a/.yarnrc.yml +++ /dev/null @@ -1 +0,0 @@ -nodeLinker: node-modules diff --git a/src/components/Chat/ChatRoom/ChatMessage.module.scss b/app/chat/[id]/_components/chat-message.module.scss similarity index 100% rename from src/components/Chat/ChatRoom/ChatMessage.module.scss rename to app/chat/[id]/_components/chat-message.module.scss diff --git a/src/components/Chat/ChatRoom/ChatMessage.tsx b/app/chat/[id]/_components/chat-message.tsx similarity index 94% rename from src/components/Chat/ChatRoom/ChatMessage.tsx rename to app/chat/[id]/_components/chat-message.tsx index 67f869b..8883580 100644 --- a/src/components/Chat/ChatRoom/ChatMessage.tsx +++ b/app/chat/[id]/_components/chat-message.tsx @@ -1,4 +1,4 @@ -import styles from './ChatMessage.module.scss'; +import styles from './chat-message.module.scss'; interface ChatMessageProps { isSender: boolean; diff --git a/src/pagesss/Chat/ChatRoom/ChatRoom.module.scss b/app/chat/[id]/_components/chat-room.module.scss similarity index 100% rename from src/pagesss/Chat/ChatRoom/ChatRoom.module.scss rename to app/chat/[id]/_components/chat-room.module.scss diff --git a/app/chat/[id]/_components/chat-room.tsx b/app/chat/[id]/_components/chat-room.tsx new file mode 100644 index 0000000..a364921 --- /dev/null +++ b/app/chat/[id]/_components/chat-room.tsx @@ -0,0 +1,104 @@ +'use client'; +import { CameraIcon, UploadIcon } from '@/components/ui/icons/icon'; +import ArrowLeftTailIcon from '@/components/ui/icons/icon/ArrowLeftTail'; +import DotsVerticalIcon from '@/components/ui/icons/icon/DotsVertical'; +import { useAuthStore } from '@/stores/useAuthStore'; +import { useRouter } from 'next/navigation'; +import { useEffect, useRef, useState } from 'react'; +import { useChat } from '../_hooks/use-chat'; +import ChatMessage from './chat-message'; +import styles from './chat-room.module.scss'; + +interface ChatRoomProps { + chatRoomId: string; + storeName: string; +} + +const ChatRoom = ({ chatRoomId, storeName }: ChatRoomProps) => { + const senderUuid = useAuthStore((state) => state.uuid); + const { push } = useRouter(); + + const [chatMessageContent, setChatMessageContent] = useState(''); + + const messageEndRef = useRef(null); + const textareaRef = useRef(null); + + const { messages, sendMessage } = useChat(chatRoomId); + + const chatMessageType = 'TEXT'; + + const adjustHeight = () => { + if (textareaRef.current) { + const scrollHeight = textareaRef.current.scrollHeight; + const lineHeight = 29; // leading-[29px]와 일치 + const maxHeight = lineHeight * 2; // 최대 2줄 + textareaRef.current.style.height = `${Math.min(scrollHeight, maxHeight)}px`; + } + }; + + const handleSocketMessage = () => { + sendMessage({ + chatRoomId, + user: senderUuid, + chatMessageType, + chatMessageContent, + }); + setChatMessageContent(''); + }; + + useEffect(() => { + if (textareaRef.current) { + adjustHeight(); + } + if (messageEndRef.current) { + messageEndRef.current.scrollIntoView({ behavior: 'smooth' }); + } + }, [messages]); + + return ( + <> +
+ push('/chat-list')} + width={24} + height={24} + /> +
{storeName}
+ +
+
+ {messages.map((message) => ( + + ))} +
+
+ +
+ +
+