+
+ 
+
+
+
+ {user.name}
+{user.bio}
+
+
+ );
+};
+
+export const BottomNavChat = () => {
+ return (
+
+
+ 
+
+
+ 
+
+ 
+
+
+
+ );
+};
diff --git a/messenger/src/components/nav/chatRoomNav.tsx b/messenger/src/components/nav/chatRoomNav.tsx
new file mode 100644
index 00000000..a55ec23f
--- /dev/null
+++ b/messenger/src/components/nav/chatRoomNav.tsx
@@ -0,0 +1,171 @@
+import { useNavigate } from 'react-router-dom';
+import type { Room } from '../../assets/type';
+
+interface ChatRoomNavProps {
+ room: Room;
+}
+
+const ChatRoomNav = ({ room }: ChatRoomNavProps) => {
+ const navigate = useNavigate();
+ const onClickBack = () => {
+ navigate('/chat');
+ };
+
+ return (
+
+
+ 
+
+
+ 
+
+
+
+
+ {/* 왼쪽: 뒤로가기 버튼 */}
+
+
+
+ );
+};
+
+export default ChatRoomNav;
diff --git a/messenger/src/components/nav/homeTopNav.tsx b/messenger/src/components/nav/homeTopNav.tsx
new file mode 100644
index 00000000..b482a365
--- /dev/null
+++ b/messenger/src/components/nav/homeTopNav.tsx
@@ -0,0 +1,10 @@
+import TopNav from '@assets/top_nav.svg';
+import ChatTop from '@assets/chat_top.svg';
+
+export const HomeTopNav = () => {
+ return
+ {room.name}
+
+ {room.members.length}
+
+
+
+
+
+ 
+
+ );
+};
+
+export default Chat;
diff --git a/messenger/src/pages/chat/chatRoom.tsx b/messenger/src/pages/chat/chatRoom.tsx
new file mode 100644
index 00000000..6b8bd193
--- /dev/null
+++ b/messenger/src/pages/chat/chatRoom.tsx
@@ -0,0 +1,185 @@
+import { useEffect, useRef, useState } from 'react';
+import type { Message, Room, User } from '../../assets/type';
+import ChatRoomNav from '../../components/nav/chatRoomNav';
+import profile from '../../assets/profile.svg';
+import { useParams } from 'react-router-dom';
+import SendIcon from '@assets/icon-1.svg';
+import PlusIcon from '@assets/icon.svg';
+import EmojiIcon from '@assets/imoji.svg';
+
+const LOCAL_STORAGE_MESSAGES_KEY = 'chat_messages';
+
+interface ChatRoomProps {
+ me: User;
+ rooms: Room[];
+ setRooms: React.Dispatch
+ {sortedRooms.map((room) => {
+ const lastMessage = [...room.messages].sort(
+ (a, b) => b.timestamp - a.timestamp
+ )[0];
+
+ return (
+
+ navigate(`/chat/${room.id}`)}
+ className="flex items-center px-4 py-3 hover:bg-gr-50 transition cursor-pointer"
+ >
+ 
+
+
+ );
+ })}
+
+
+
+ {room.name}
+ {lastMessage && (
+
+ {formatTime(lastMessage.timestamp)}
+
+ )}
+
+
+ + {lastMessage ? `${lastMessage.text}` : '메시지가 없습니다.'} +
+채팅방을 찾을 수 없습니다.
;
+
+ const [inputValue, setInputValue] = useState('');
+
+ const [messages, setMessages] = useState
+
+ {messages.map((msg, index) => {
+ const isMe = msg.sender.id === me.id;
+ const date = new Date(msg.timestamp);
+
+ const nextMsg = messages[index + 1];
+ const showTime =
+ !nextMsg ||
+ nextMsg.sender.id !== msg.sender.id ||
+ new Date(nextMsg.timestamp).getMinutes() !== date.getMinutes();
+
+ // 날짜 표시
+ const prevMsg = messages[index - 1];
+ const showDate =
+ !prevMsg ||
+ new Date(prevMsg.timestamp).toDateString() !== date.toDateString();
+ const month = (date.getMonth() + 1).toString().padStart(2, '0');
+ const day = date.getDate().toString().padStart(2, '0');
+ const weekdays = ['일', '월', '화', '수', '목', '금', '토'];
+ const weekday = weekdays[date.getDay()];
+ const dateStr = `${month}월 ${day}일 (${weekday})`;
+
+ let hours = date.getHours();
+ const minutes = date.getMinutes().toString().padStart(2, '0');
+ const period = hours < 12 ? '오전' : '오후';
+ hours = hours % 12 || 12;
+ const timeStr = `${period} ${hours}:${minutes}`;
+
+ const avatar = msg.sender.profileImageUrl || profile;
+
+ return (
+
+
+ {/* 입력 영역 */}
+
+ {showDate && (
+
+ );
+ })}
+
+
+ )}
+
+ {dateStr}
+
+
+
+
+ {!isMe && (
+ 
+ )}
+
+
+ {!isMe && (
+
+ {showTime && (
+
+ {timeStr}
+
+ )}
+
+
+ {msg.sender.name}
+
+ )}
+
+ {msg.text}
+
+
+ 
+
+