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) => ( + + ))} +
+
+ +
+ +
+