Merge pull request #85 from MOVIEJOJO7/Feature/#84

Feat: 채팅방 디자인 수정 및 기능 추가
MOVIEJOJO7 · Nov 16, 2023 · 9900e66 · 9900e66
2 parents b635ab0 + 765a721
commit 9900e66
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 54 deletions.
diff --git a/Components/Chat/ChatHeader.tsx b/Components/Chat/ChatHeader.tsx
@@ -54,7 +54,7 @@ const ChatHeader = ({
 						onClick={handleLeaveChat}
 						className="ml-2 mr-1"
 					/>
-					<span className="text-xs">{chatUsers}</span>
+					<span className="text-[10px] text-users">{chatUsers}</span>
 				</div>
 			</div>
 			<Image

diff --git a/Components/Chat/ChatRoom.tsx b/Components/Chat/ChatRoom.tsx
@@ -7,6 +7,7 @@ import { DefaultEventsMap } from 'socket.io/dist/typed-events';
 import ChatHeader from '@/Components/Chat/ChatHeader';
 import RenderChats from '@/Components/Chat/RenderChats';
 import Image from 'next/image';
+import Swal from 'sweetalert2';
 
 const ChatRoom = ({
 	socket,
@@ -84,10 +85,7 @@ const ChatRoom = ({
 		if (socket?.connected) {
 			socket.on('join', (responseData) => {
 				setChatUsers([...chatUsers, ...responseData.users]);
-				socket.emit(
-					'message-to-server',
-					`${responseData.users[0]} 님이 입장하셨습니다.`,
-				);
+				Swal.fire(`${responseData.users[0]} 님이 입장하셨습니다.`);
 			});
 		}
 
@@ -102,10 +100,7 @@ const ChatRoom = ({
 		if (socket?.connected) {
 			socket.on('leave', (responseData) => {
 				setChatUsers([...chatUsers, ...responseData.users]);
-				socket.emit(
-					'message-to-server',
-					`${responseData.leaver} 님이 퇴장하셨습니다.`,
-				);
+				Swal.fire(`${responseData.leaver} 님이 퇴장하셨습니다.`);
 			});
 		}
 
@@ -131,7 +126,7 @@ const ChatRoom = ({
 	};
 
 	return (
-		<div className="h-screen">
+		<div className="h-screen overflow-y-scroll">
 			<ChatHeader
 				chatId={chatId}
 				chatName={chatName}
@@ -167,15 +162,15 @@ const ChatRoom = ({
 				</>
 			)}
 
-			<div className="w-full sm:w-[425px] h-14 flex justify-evenly items-center py-8 bg-gray-100 fixed bottom-0">
+			<div className="w-full sm:w-[425px] h-14 flex justify-evenly items-center py-8 bg-footer fixed bottom-0">
 				<input
 					type="text"
 					value={newMessage}
 					onChange={(e) => setNewMessage(e.target.value)}
 					onKeyPress={handleKeyPress}
-					className="w-4/5 px-4 py-3 rounded-2xl"
+					className="w-4/5 px-4 py-3 rounded-2xl focus:outline-none"
 				/>
-				<div className="flex justify-center items-center w-10 h-10 bg-pink-100 rounded-lg">
+				<div className="flex justify-center items-center w-10 h-10 bg-send rounded-lg">
 					<Image
 						src={'/icon_send.svg'}
 						width={25}

diff --git a/Components/Chat/Chats.tsx b/Components/Chat/Chats.tsx
@@ -35,14 +35,12 @@ const Chats = ({
 		<>
 			{user.id === myId ? (
 				<li key={message.id} className="flex m-2 place-self-end">
-					<p className="text-black">
+					<p className="text-xs self-end text-time mr-[5px]">
 						{changeTime(message.createdAt.toString())}
 					</p>
-					<div className="flex flex-col ml-2">
-						<p className="px-5 py-2 text-sm bg-gray-500 text-white rounded-xl">
-							{message.text}
-						</p>
-					</div>
+					<p className="px-5 py-2 text-sm bg-gray-500 text-white rounded-xl">
+						{message.text}
+					</p>
 				</li>
 			) : (
 				<li key={message.id} className="flex m-2 place-self-start">
@@ -52,14 +50,17 @@ const Chats = ({
 						height={50}
 						alt="User Picture"
 						onClick={useModal ? openProfile : undefined}
+						className="shadow-gray-100 shadow-md rounded-xl"
 					/>
 					<div className="flex flex-col ml-2">
 						<p className="text-xs">{user.username}</p>
-						<p className="mt-1 px-5 py-2 text-sm text-white bg-pink-200 rounded-xl ">
+						<p className="mt-1 px-5 py-2 text-sm text-white bg-pink-200 rounded-xl">
 							{message.text}
 						</p>
 					</div>
-					<p>{changeTime(message.createdAt.toString())}</p>
+					<p className="text-xs self-end ml-[5px] text-time">
+						{changeTime(message.createdAt.toString())}
+					</p>
 				</li>
 			)}
 		</>

diff --git a/Components/Chat/RenderChats.tsx b/Components/Chat/RenderChats.tsx
@@ -29,40 +29,38 @@ const RenderChats = ({
 	}, [messages.length]);
 
 	return (
-		<>
-			<ul className="w-full flex flex-col items-center">
-				{messages.map((message, index) => {
-					const myUser = chatUsers.find((user) => user.id === message.userId);
+		<ul className="w-full flex flex-col items-center mt-4 mb-16">
+			{messages.map((message, index) => {
+				const myUser = chatUsers.find((user) => user.id === message.userId);
 
-					if (myUser) {
-						return (
-							<React.Fragment key={message.id}>
-								{index === 0 ||
-								new Date(message.createdAt).toDateString() !==
-									new Date(messages[index - 1].createdAt).toDateString() ? (
-									<li
-										key={`${message.id}-date`} // 고유한 키를 생성
-										className="my-2 w-[130px] flex justify-center items-center h-8 bg-gray-200 rounded-2xl"
-									>
-										<span className="text-xs">
-											{new Date(message.createdAt).toDateString()}
-										</span>
-									</li>
-								) : null}
-								<Chats
-									key={message.id}
-									message={message}
-									user={myUser}
-									myId={myId}
-									useModal={useModal}
-								/>
-							</React.Fragment>
-						);
-					}
-				})}
-				<div ref={messageEndRef}></div>
-			</ul>
-		</>
+				if (myUser) {
+					return (
+						<React.Fragment key={message.id}>
+							{index === 0 ||
+							new Date(message.createdAt).toDateString() !==
+								new Date(messages[index - 1].createdAt).toDateString() ? (
+								<li
+									key={`${message.id}-date`}
+									className="my-2 w-[130px] flex justify-center items-center h-8 bg-gray-200 rounded-2xl shadow-gray-300 shadow-md"
+								>
+									<span className="text-xs">
+										{new Date(message.createdAt).toDateString()}
+									</span>
+								</li>
+							) : null}
+							<Chats
+								key={message.id}
+								message={message}
+								user={myUser}
+								myId={myId}
+								useModal={useModal}
+							/>
+						</React.Fragment>
+					);
+				}
+			})}
+			<div ref={messageEndRef}></div>
+		</ul>
 	);
 };
 export default RenderChats;
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -31,6 +31,10 @@ const config: Config = withMT({
 				bgfill: '#7E7E7E',
 				chat: '#5B5B5B',
 				bglight: '#EFEFEF',
+				footer: '#FFB8DA',
+				send: '#FB72B4',
+				users: '#848484',
+				time: '#7E7E7E',
 			},
 			backgroundImage: {
 				'trash-can': "url('../public/icon_trash.svg')",