+
+ );
+}
diff --git a/messenger-whatsapp/src/components/chat/Bubble.tsx b/messenger-whatsapp/src/components/chat/Bubble.tsx
new file mode 100644
index 00000000..a492fbdc
--- /dev/null
+++ b/messenger-whatsapp/src/components/chat/Bubble.tsx
@@ -0,0 +1,86 @@
+import clsx from "clsx";
+import SentTail from "@/assets/chat_tail_sent.svg?react";
+import ReceivedTail from "@/assets/chat_tail_received.svg?react";
+import { useMultiLineDetection } from "@/hooks/useMultiLineDetection";
+import { formatTime } from "@/utils/formatTime";
+
+interface BubbleProps {
+ message: string;
+ timestamp: number;
+ showTime: boolean;
+ isSent: boolean;
+ unreadCount: number;
+ senderName?: string;
+}
+
+// text-body-03: font-size 14px, line-height 150% = 21px + padding 8px*2 = 37px
+const SINGLE_LINE_HEIGHT = 37;
+
+export default function Bubble({
+ message,
+ timestamp,
+ showTime,
+ isSent,
+ unreadCount,
+ senderName,
+}: BubbleProps) {
+ const { ref, isMultiLine } = useMultiLineDetection(SINGLE_LINE_HEIGHT);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/messenger-whatsapp/src/components/chat/ChatRoomItem.tsx b/messenger-whatsapp/src/components/chat/ChatRoomItem.tsx
new file mode 100644
index 00000000..a6aa4dba
--- /dev/null
+++ b/messenger-whatsapp/src/components/chat/ChatRoomItem.tsx
@@ -0,0 +1,118 @@
+import { useNavigate } from "react-router-dom";
+import type { ChatRoom } from "@/store/useChatStore";
+import { useChatStore } from "@/store/useChatStore";
+import { useFriendsStore } from "@/store/useFriendsStore";
+import { formatLastMessageTime } from "@/utils/formatTime";
+import { useSwipeGesture } from "@/hooks/useSwipeGesture";
+import { MY_ID } from "@/constants/userId";
+import { getRoomName } from "@/utils/chatUtils";
+import ChatThumbnail from "@/components/chat/ChatThumbnail";
+import FavoriteDefault from "@/assets/chat_fav.svg?react";
+import FavoriteActive from "@/assets/chat_fav_filled.svg?react";
+
+interface ChatRoomItemProps {
+ chatRoom: ChatRoom;
+ onSwipeOpen?: (id: number) => void;
+ openId?: number | null;
+}
+
+const ChatRoomItem = ({ chatRoom, onSwipeOpen, openId }: ChatRoomItemProps) => {
+ const navigate = useNavigate();
+ const { messages, currentUserId, favorites, toggleFavorite } = useChatStore();
+ const { friends } = useFriendsStore();
+
+ const participants = friends.filter(
+ (f) => f.id !== currentUserId && chatRoom.participantIds.includes(f.id),
+ );
+ const roomMessages = messages.filter((m) => m.chatRoomId === chatRoom.id);
+ const lastMessage = roomMessages[roomMessages.length - 1];
+ const roomName = getRoomName(friends, chatRoom.participantIds, currentUserId);
+ const unreadCount = roomMessages.filter((m) => !m.readBy.includes(MY_ID)).length;
+ const isFavorite = favorites.includes(chatRoom.id);
+
+ const {
+ offsetX,
+ animating,
+ dragged,
+ offsetRef,
+ close,
+ handleTouchStart,
+ handleTouchMove,
+ handleTouchEnd,
+ handleMouseDown,
+ } = useSwipeGesture({
+ actionWidth: 51,
+ threshold: 25,
+ itemId: chatRoom.id,
+ openId,
+ onOpen: onSwipeOpen ?? (() => {}),
+ });
+
+ const handleContentClick = () => {
+ if (dragged.current) return;
+ if (offsetRef.current !== 0) { close(); return; }
+ navigate(`/chat/${chatRoom.id}`);
+ };
+
+ const handleFavoriteClick = () => {
+ toggleFavorite(chatRoom.id);
+ close();
+ };
+
+ return (
+
+ {senderName && (
+ {senderName}
+ )}
+
+
+
+
+ {message}
+ {isSent ? (
+
+
+
+ {unreadCount > 0 && (
+
+ {unreadCount}
+
+ )}
+
+ {formatTime(timestamp)}
+
+
+
+
+ );
+};
+
+export default ChatRoomItem;
diff --git a/messenger-whatsapp/src/components/chat/ChatThumbnail.tsx b/messenger-whatsapp/src/components/chat/ChatThumbnail.tsx
new file mode 100644
index 00000000..7d9ddbe3
--- /dev/null
+++ b/messenger-whatsapp/src/components/chat/ChatThumbnail.tsx
@@ -0,0 +1,49 @@
+import clsx from "clsx";
+import type { Friend } from "@/store/useFriendsStore";
+import Avatar from "@/components/common/Avatar";
+
+interface ChatThumbnailProps {
+ participants: Friend[];
+}
+
+function ThumbnailAvatar({ user, className }: { user?: Friend; className?: string }) {
+ return (
+
+
+
+
+
+
+
+ {roomName}
+
+
+ + {lastMessage?.text ?? ""} +
+
+ {lastMessage && (
+
+ {formatLastMessageTime(lastMessage.timestamp)}
+
+ )}
+ {unreadCount > 0 ? (
+
+ {unreadCount}
+
+ ) : (
+
+ )}
+
+
+
+ );
+ }
+
+ if (count === 3) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/messenger-whatsapp/src/components/chip/ChatDate.tsx b/messenger-whatsapp/src/components/chip/ChatDate.tsx
new file mode 100644
index 00000000..8a9c1c68
--- /dev/null
+++ b/messenger-whatsapp/src/components/chip/ChatDate.tsx
@@ -0,0 +1,13 @@
+import { getFormattedDate } from "@/utils/formatTime";
+
+interface ChipDateProps {
+ date: Date;
+}
+
+const ChipDate = ({ date }: ChipDateProps) => (
+
+ {getFormattedDate(date)}
+
+);
+
+export default ChipDate;
diff --git a/messenger-whatsapp/src/components/chip/ChatFilter.tsx b/messenger-whatsapp/src/components/chip/ChatFilter.tsx
new file mode 100644
index 00000000..4f668950
--- /dev/null
+++ b/messenger-whatsapp/src/components/chip/ChatFilter.tsx
@@ -0,0 +1,67 @@
+import clsx from "clsx";
+
+export type FilterType = "all" | "unread" | "group" | "favorites";
+
+interface Chip {
+ type: FilterType;
+ label: string;
+ badge?: number;
+}
+
+interface ChipFilterProps {
+ active: FilterType;
+ onChange: (type: FilterType) => void;
+ unreadMessageCount: number;
+ groupCount: number;
+}
+
+function formatBadge(n: number) {
+ if (n > 300) return "300+";
+ return String(n);
+}
+
+export default function ChipFilter({
+ active,
+ onChange,
+ unreadMessageCount,
+ groupCount,
+}: ChipFilterProps) {
+ const chips: Chip[] = [
+ { type: "all", label: "모두" },
+ { type: "unread", label: "읽지 않음", badge: unreadMessageCount },
+ { type: "group", label: "그룹", badge: groupCount },
+ { type: "favorites", label: "즐겨찾기" },
+ ];
+
+ return (
+
+ {chips.map(({ type, label, badge }) => {
+ const isActive = active === type;
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/messenger-whatsapp/src/components/common/Avatar.tsx b/messenger-whatsapp/src/components/common/Avatar.tsx
new file mode 100644
index 00000000..e4a4d103
--- /dev/null
+++ b/messenger-whatsapp/src/components/common/Avatar.tsx
@@ -0,0 +1,38 @@
+import clsx from "clsx";
+import DefaultProfile from "@/assets/profile_default.svg?react";
+import MeProfile from "@/assets/profile_reverse.svg?react";
+
+interface AvatarProps {
+ src?: string;
+ alt?: string;
+ className?: string;
+ variant?: "default" | "me";
+}
+
+export default function Avatar({
+ src,
+ alt,
+ className,
+ variant = "default",
+}: AvatarProps) {
+ return (
+
+ {src ? (
+ 
+ ) : variant === "me" ? (
+
+ );
+}
diff --git a/messenger-whatsapp/src/components/common/BottomNav.tsx b/messenger-whatsapp/src/components/common/BottomNav.tsx
new file mode 100644
index 00000000..0fcee756
--- /dev/null
+++ b/messenger-whatsapp/src/components/common/BottomNav.tsx
@@ -0,0 +1,47 @@
+import { useLocation, useNavigate } from "react-router-dom";
+import FriendsDefault from "@/assets/bottomnav_friends_default.svg?react";
+import FriendsActive from "@/assets/bottomnav_friends_active.svg?react";
+import ChatDefault from "@/assets/bottomnav_chat_default.svg?react";
+import ChatActive from "@/assets/bottomnav_chat_active.svg?react";
+import ProfileDefault from "@/assets/bottomnav_profile_default.svg?react";
+import ProfileActive from "@/assets/bottomnav_profile_active.svg?react";
+
+const NAV_ITEMS = [
+ {
+ navigateTo: "/",
+ isActive: (p: string) => p === "/" || (p.startsWith("/profile/") && p !== "/profile/edit"),
+ Default: FriendsDefault,
+ Active: FriendsActive,
+ },
+ {
+ navigateTo: "/chat",
+ isActive: (p: string) => p.startsWith("/chat"),
+ Default: ChatDefault,
+ Active: ChatActive,
+ },
+ {
+ navigateTo: "/profile",
+ isActive: (p: string) => p === "/profile" || p === "/profile/edit",
+ Default: ProfileDefault,
+ Active: ProfileActive,
+ },
+];
+
+export default function BottomNav() {
+ const { pathname } = useLocation();
+ const navigate = useNavigate();
+
+ return (
+
+ {NAV_ITEMS.map(({ navigateTo, isActive, Default, Active }) => {
+ const active = isActive(pathname);
+ const Icon = active ? Active : Default;
+ return (
+
+ );
+ })}
+
+ );
+}
diff --git a/messenger-whatsapp/src/components/common/Input.tsx b/messenger-whatsapp/src/components/common/Input.tsx
new file mode 100644
index 00000000..20285a7c
--- /dev/null
+++ b/messenger-whatsapp/src/components/common/Input.tsx
@@ -0,0 +1,78 @@
+import { useEffect, useRef, useState } from "react";
+import clsx from "clsx";
+import PlusIcon from "@/assets/input_add.svg?react";
+import EmojiIcon from "@/assets/emoji.svg?react";
+import SendIcon from "@/assets/send.svg?react";
+
+interface InputBoxProps {
+ onSend: (message: string) => void;
+}
+
+const MAX_HEIGHT = 160; // max-h-40 = 160px
+
+export default function InputBox({ onSend }: InputBoxProps) {
+ const [value, setValue] = useState("");
+ const textareaRef = useRef
+
+
+
+
+