+
+
+
+
+ )}
+
+
+ 복사가 완료되었습니다
+
+
+
+ );
+};
+
+export default MobileLayout;
diff --git a/react-messenger-23rd/src/shared/ui/StatusBar.tsx b/react-messenger-23rd/src/shared/ui/StatusBar.tsx
new file mode 100644
index 00000000..e6b8d503
--- /dev/null
+++ b/react-messenger-23rd/src/shared/ui/StatusBar.tsx
@@ -0,0 +1,27 @@
+import batteryIcon from '@/shared/assets/icons/chattingRoom/Status Bar/Elements/Battery.svg';
+import connectionIcon from '@/shared/assets/icons/chattingRoom/Status Bar/Elements/Connection.svg';
+import signalIcon from '@/shared/assets/icons/chattingRoom/Status Bar/Elements/Signal.svg';
+
+interface StatusBarProps {
+ className?: string;
+}
+
+const StatusBar = ({ className = 'bg-white' }: StatusBarProps) => {
+ const now = new Date();
+ const hours = now.getHours();
+ const minutes = String(now.getMinutes()).padStart(2, '0');
+
+ return (
+
+
+
+
+
+ {`${hours}:${minutes}`}
+
+
+ );
+};
+
+export default StatusBar;
diff --git a/react-messenger-23rd/src/widgets/chat-list/ui/BottomTabBar.tsx b/react-messenger-23rd/src/widgets/chat-list/ui/BottomTabBar.tsx
new file mode 100644
index 00000000..ef34b368
--- /dev/null
+++ b/react-messenger-23rd/src/widgets/chat-list/ui/BottomTabBar.tsx
@@ -0,0 +1,73 @@
+import { Link, useLocation } from 'react-router-dom';
+
+import rawChatRooms from '@/entities/chat-room/model/chatRooms.json';
+import type { ChatRoom } from '@/entities/chat-room/model/types';
+import navIcon from '@/shared/assets/icons/chat-list/compass-03.svg';
+import chattingIcon from '@/shared/assets/icons/chat-list/Icon.svg';
+import activeChattingIcon from '@/shared/assets/icons/chat-list/Icon-active.svg';
+import myProfileIcon from '@/shared/assets/icons/chat-list/user-circle.svg';
+import activeMyProfileIcon from '@/shared/assets/icons/chat-list/user-circle-active.svg';
+import partnerIcon from '@/shared/assets/icons/chat-list/users-01.svg';
+import activePartnerIcon from '@/shared/assets/icons/chat-list/users-01-active.svg';
+
+const CHAT_ROOMS_STORAGE_KEY = 'chat-rooms';
+const initialChatRooms = rawChatRooms as ChatRoom[];
+
+const getStoredChatRooms = (): ChatRoom[] => {
+ const storedRooms = localStorage.getItem(CHAT_ROOMS_STORAGE_KEY);
+
+ if (!storedRooms) return initialChatRooms;
+
+ return JSON.parse(storedRooms) as ChatRoom[];
+};
+
+const BottomTabBar = () => {
+ const location = useLocation();
+
+ const isChatPage = location.pathname === '/' || location.pathname.startsWith('/chat');
+ const isFriendsPage = location.pathname.startsWith('/friends');
+ const isMyProfilePage = location.pathname.startsWith('/my-profile');
+
+ const unreadCount = getStoredChatRooms().reduce((sum, room) => {
+ return sum + (room.unreadCount ?? 0);
+ }, 0);
+
+ const badgeText = unreadCount > 999 ? '999+' : unreadCount;
+
+ return (
+
+ );
+};
+
+export default BottomTabBar;
diff --git a/react-messenger-23rd/src/widgets/chat-list/ui/ChatListHeader.tsx b/react-messenger-23rd/src/widgets/chat-list/ui/ChatListHeader.tsx
new file mode 100644
index 00000000..43dfcd1b
--- /dev/null
+++ b/react-messenger-23rd/src/widgets/chat-list/ui/ChatListHeader.tsx
@@ -0,0 +1,21 @@
+import newChattingIcon from '@/shared/assets/icons/chat-list/new chatting(24_24).svg';
+import settingIcon from '@/shared/assets/icons/chat-list/settings-02.svg';
+
+const ChatListHeader = () => {
+ return (
+
+ 
+ 
+ 
+
+ 채팅
+ +
+
+
+
+
+ 
+
+
+
+
+ {/*읽지 않은 메시지 토글*/}
+
+ 읽지 않은 메시지
+
+
+
+
+ 
+
+ {/*텍스트영역*/}
+
+ {/*위쪽 (이름 + 멤버수)*/}
+
+
+ );
+};
+
+export default ChatRoomItem;
diff --git a/react-messenger-23rd/src/widgets/chat-list/ui/ChatRoomList.tsx b/react-messenger-23rd/src/widgets/chat-list/ui/ChatRoomList.tsx
new file mode 100644
index 00000000..2d3a5c4f
--- /dev/null
+++ b/react-messenger-23rd/src/widgets/chat-list/ui/ChatRoomList.tsx
@@ -0,0 +1,107 @@
+import { useState } from 'react';
+
+import rawChatRooms from '@/entities/chat-room/model/chatRooms.json';
+import type { ChatRoom } from '@/entities/chat-room/model/types';
+import type { Message } from '@/entities/message/model/types';
+
+import ChatRoomItem from './ChatRoomItem';
+
+const initialChatRooms = rawChatRooms as ChatRoom[];
+
+const MESSAGE_STORAGE_KEY = 'chat-messages';
+const CHAT_ROOMS_STORAGE_KEY = 'chat-rooms';
+
+const getMessages = (): Message[] => {
+ const stored = localStorage.getItem(MESSAGE_STORAGE_KEY);
+ if (!stored) return [];
+ return JSON.parse(stored) as Message[];
+};
+
+const getChatRooms = (): ChatRoom[] => {
+ const stored = localStorage.getItem(CHAT_ROOMS_STORAGE_KEY);
+ if (!stored) return initialChatRooms;
+ return JSON.parse(stored) as ChatRoom[];
+};
+
+const ChatRoomList = () => {
+ const [, setRefresh] = useState(false);
+
+ const allMessages = getMessages();
+ const chatRooms = getChatRooms();
+
+ const handleTogglePin = (roomId: string) => {
+ const now = Date.now();
+
+ const updatedRooms = chatRooms.map((room) => {
+ if (room.id !== roomId) return room;
+
+ if (!room.isPinned) {
+ return {
+ ...room,
+ isPinned: true,
+ pinOrder: now,
+ recentUnpinned: null,
+ };
+ }
+
+ return {
+ ...room,
+ isPinned: false,
+ pinOrder: null,
+ recentUnpinned: now,
+ };
+ });
+
+ localStorage.setItem(CHAT_ROOMS_STORAGE_KEY, JSON.stringify(updatedRooms));
+ setRefresh((prev) => !prev);
+ };
+
+ const sortedRooms = [...chatRooms].sort((a, b) => {
+ // 핀된 방이 먼저
+ if (a.isPinned !== b.isPinned) {
+ return a.isPinned ? -1 : 1;
+ }
+
+ // 둘 다 핀된 경우: 최근에 핀한 방이 위
+ if (a.isPinned && b.isPinned) {
+ return (b.pinOrder ?? 0) - (a.pinOrder ?? 0);
+ }
+
+ // 둘 다 핀이 안 된 경우: 최근에 핀 해제한 방이 위
+ const aRecentUnpinned = a.recentUnpinned ?? 0;
+ const bRecentUnpinned = b.recentUnpinned ?? 0;
+
+ if (aRecentUnpinned !== bRecentUnpinned) {
+ return bRecentUnpinned - aRecentUnpinned;
+ }
+
+ // 나머지는 기존 순서
+ return 0;
+ });
+
+ const getLastMessage = (roomId: string): Message | undefined => {
+ const roomMessages = allMessages.filter((message) => message.chatRoomId === roomId);
+
+ if (roomMessages.length === 0) return undefined;
+
+ return roomMessages[roomMessages.length - 1];
+ };
+
+ return (
+
+
+ {/*아래쪽 (메시지 + unread)*/}
+
+
+ {/*시간*/}
+ {formatChatRoomListTime(lastMessage, room)}
+ {room.name}
+ + {room.memberCount && {room.memberCount}} + + {/*핀 아이콘*/} + +
+ {/*마지막 메시지*/}
+
+ {lastMessage?.messages ?? room.lastMessage}
+ {/*unread badge(지금은 고정값)*/} + {room.unreadCount > 0 ? ( +
+ {room.unreadCount}
+
+ ) : (
+
+ 0
+
+ )}
+ -
+ {sortedRooms.map((room) => {
+ const lastMessage = getLastMessage(room.id);
+
+ return (
+
-
+
+
+ );
+ })}
+
+
+ 999+
+
+
+
+
+
+
+
+
+
+
+
+ {date}
+
+ );
+};
+
+export default DateDivider;
diff --git a/react-messenger-23rd/src/widgets/chat-room/ui/MessageInputBar.tsx b/react-messenger-23rd/src/widgets/chat-room/ui/MessageInputBar.tsx
new file mode 100644
index 00000000..ddcb748a
--- /dev/null
+++ b/react-messenger-23rd/src/widgets/chat-room/ui/MessageInputBar.tsx
@@ -0,0 +1,98 @@
+// 하단 채팅 입력창 전체 레이아웃, button부분은 enter로 채팅이 보내지게 수정해야됨.
+import type { KeyboardEvent } from 'react';
+import { useRef, useState } from 'react';
+
+import smileIcon from '@/shared/assets/icons/chat-room/face-smile.svg';
+import microPhoneIcon from '@/shared/assets/icons/chat-room/microphone-01.svg';
+import plusIcon from '@/shared/assets/icons/chat-room/plus.svg';
+import sendIcon from '@/shared/assets/icons/chattingRoom/arrow-narrow-up.svg';
+
+interface MessageInputBarProps {
+ value: string;
+ onChange: (value: string) => void;
+ onSend: () => void;
+}
+
+const MessageInputBar = ({ value, onChange, onSend }: MessageInputBarProps) => {
+ const [isComposing, setIsComposing] = useState(false);
+ const textareaRef = useRef
+
+
+
+
+