Feat: 채팅방 디자인 작업 enhancement

Components/Chat/ChatHeader.tsx

@@ -1,5 +1,6 @@
 import { getCookie } from '@/Components/Login/Cookie';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 
 const ChatHeader = ({
 	chatId,
@@ -33,12 +34,38 @@ const ChatHeader = ({
 	};
 
 	return (
-		<>
-			<button onClick={handleBackChat}>뒤로 가기</button>
-			<span>{chatName}</span>
-			<span>{chatUsers}</span>
-			<button onClick={handleLeaveChat}>채팅방 나가기</button>
-		</>
+		<div className="w-full sm:w-[425px] h-14 flex justify-between items-center py-8 bg-gray-200">
+			<Image
+				src={'/icon_back.svg'}
+				alt="뒤로 가기"
+				width={25}
+				height={25}
+				onClick={handleBackChat}
+				className="ml-3"
+			/>
+			<div className="w-full flex justify-center items-center">
+				<span className="text-lg font-normal">{chatName}</span>
+				<div className="flex justify-center items-center mt-3">
+					<Image
+						src={'/icon_user.svg'}
+						alt="참여자 수"
+						width={12}
+						height={12}
+						onClick={handleLeaveChat}
+						className="ml-2 mr-1"
+					/>
+					<span className="text-xs">{chatUsers}</span>
+				</div>
+			</div>
+			<Image
+				src={'/icon_exit.svg'}
+				alt="나가기"
+				width={20}
+				height={20}
+				onClick={handleLeaveChat}
+				className="mr-3"
+			/>
+		</div>
 	);
 };
 

Components/Chat/ChatRoom.tsx

@@ -6,6 +6,7 @@ import { Chat, Message, chatUsersObject, User } from '@/types';
 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';
 
 const ChatRoom = ({
 	socket,
@@ -103,7 +104,7 @@ const ChatRoom = ({
 	};
 
 	return (
-		<>
+		<div className="h-screen">
 			<ChatHeader
 				chatId={chatId}
 				chatName={chatName}
@@ -113,7 +114,6 @@ const ChatRoom = ({
 				<>
 					{chatUsers.length === 2 || chatUsers.length === 1 ? (
 						<>
-							<p>1대1 채팅방 입니다.</p>
 							<RenderChats
 								messages={messages}
 								chatUsers={chatUsers}
@@ -122,7 +122,6 @@ const ChatRoom = ({
 						</>
 					) : (
 						<>
-							<p> true 그룹 채팅방 입니다.</p>
 							<RenderChats
 								messages={messages}
 								chatUsers={chatUsers}
@@ -133,7 +132,6 @@ const ChatRoom = ({
 				</>
 			) : (
 				<>
-					<p> false 오픈 채팅방 입니다. </p>
 					<RenderChats
 						messages={messages}
 						chatUsers={chatUsers}
@@ -142,14 +140,26 @@ const ChatRoom = ({
 				</>
 			)}
 
-			<input
-				type="text"
-				value={newMessage}
-				onChange={(e) => setNewMessage(e.target.value)}
-				onKeyPress={handleKeyPress}
-			/>
-			<button onClick={sendMessage}>전송</button>
-		</>
+			<div className="w-full sm:w-[425px] h-14 flex justify-evenly items-center py-8 bg-gray-100 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"
+				/>
+				<div className="flex justify-center items-center w-10 h-10 bg-pink-100 rounded-lg">
+					<Image
+						src={'/icon_send.svg'}
+						width={25}
+						height={25}
+						alt="전송"
+						className="cursor-pointer hover:shadow-lg"
+						onClick={sendMessage}
+					/>
+				</div>
+			</div>
+		</div>
 	);
 };
 

Components/Chat/Chats.tsx

@@ -21,28 +21,31 @@ const Chats = ({
 
 	return (
 		<>
-			{user.id === myId ? null : (
-				<>
-					{useModal ? (
-						<Image
-							src={user.picture}
-							width={50}
-							height={50}
-							alt="User Picture"
-							onClick={openProfile}
-						/>
-					) : (
-						<Image
-							src={user.picture}
-							width={50}
-							height={50}
-							alt="User Picture"
-						/>
-					)}
-				</>
+			{user.id === myId ? (
+				<li key={message.id} className="flex m-2 place-self-end text-white">
+					<div className="flex flex-col ml-2">
+						<p className="px-5 py-2 text-sm bg-gray-500 rounded-xl">
+							{message.text}
+						</p>
+					</div>
+				</li>
+			) : (
+				<li key={message.id} className="flex m-2 place-self-start">
+					<Image
+						src={user.picture}
+						width={50}
+						height={50}
+						alt="User Picture"
+						onClick={useModal ? openProfile : undefined}
+					/>
+					<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 ">
+							{message.text}
+						</p>
+					</div>
+				</li>
 			)}
-			<p>{user.username}</p>
-			<p>{message.text}</p>
 		</>
 	);
 };

Components/Chat/RenderChats.tsx

@@ -30,34 +30,33 @@ const RenderChats = ({
 
 	return (
 		<>
-			<ul>
+			<ul className="w-full flex flex-col items-center">
 				{messages.map((message, index) => {
 					const myUser = chatUsers.find((user) => user.id === message.userId);
 
 					if (myUser) {
 						return (
-							<li
-								key={message.id}
-								className={
-									message.userId === myId ? 'bg-pink-500' : 'bg-pink-100'
-								}
-							>
+							<React.Fragment key={message.id}>
 								{index === 0 ||
 								new Date(message.createdAt).toDateString() !==
 									new Date(messages[index - 1].createdAt).toDateString() ? (
-									<div className="h-[25px] bg-blue-300">
-										{new Date(message.createdAt).toDateString()}
-									</div>
+									<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}
 								/>
-							</li>
+							</React.Fragment>
 						);
 					}
 				})}
@@ -66,5 +65,4 @@ const RenderChats = ({
 		</>
 	);
 };
-
 export default RenderChats;

Components/Wrapper.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
 	return (
-		<section className="w-full sm:w-[425px] h-screen overflow-hidden flex flex-col mx-auto bg-orange-300">
+		<section className="w-full sm:w-[425px] h-screen overflow-hidden flex flex-col mx-auto bg-white">
 			{children}
 		</section>
 	);