+
+
+
+
+
+
+
+
+
+
+ {date}
+
+
+ );
+});
diff --git a/react-messenger-23rd/src/components/MessageBubble.tsx b/react-messenger-23rd/src/components/MessageBubble.tsx
new file mode 100644
index 00000000..9cbb66c1
--- /dev/null
+++ b/react-messenger-23rd/src/components/MessageBubble.tsx
@@ -0,0 +1,113 @@
+import { memo, useCallback } from "react";
+import Avatar from "@/components/Avatar";
+import { formatTime } from "@/utils/formatTime";
+import IconHeart from "@/assets/icons/icon_heart.svg?react";
+
+interface MessageBubbleProps {
+ messageId: number;
+ content: string;
+ timestamp: string;
+ isMine: boolean;
+ senderName?: string;
+ senderImage?: string;
+ showSender: boolean;
+ showTime: boolean;
+ reactions: string[];
+ onReaction: (messageId: number) => void;
+}
+
+function ReactionBadge({
+ count,
+ onClick,
+}: {
+ count: number;
+ onClick: () => void;
+}) {
+ return (
+
+ );
+}
+
+export default memo(function MessageBubble({
+ messageId,
+ content,
+ timestamp,
+ isMine,
+ senderName,
+ senderImage,
+ showSender,
+ showTime,
+ reactions,
+ onReaction,
+}: MessageBubbleProps) {
+ const time = formatTime(timestamp);
+ const hasReaction = reactions.length > 0;
+
+ const handleDoubleClick = useCallback(() => onReaction(messageId), [onReaction, messageId]);
+
+ if (isMine) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ {showTime && (
+
+ {time}
+
+ )}
+
+ {hasReaction && (
+
+ {content}
+
+
+ {showSender ? (
+
+ );
+});
diff --git a/react-messenger-23rd/src/components/MessageInput.tsx b/react-messenger-23rd/src/components/MessageInput.tsx
new file mode 100644
index 00000000..415be584
--- /dev/null
+++ b/react-messenger-23rd/src/components/MessageInput.tsx
@@ -0,0 +1,73 @@
+import { useState, useRef, useCallback, memo } from "react";
+import IconPlus from "@/assets/icons/icon_plus.svg?react";
+import IconEmoji from "@/assets/icons/icon_emoji.svg?react";
+import IconThumbsUp from "@/assets/icons/icon_thumbs_up.svg?react";
+import IconSend from "@/assets/icons/icon_send.svg?react";
+
+interface MessageInputProps {
+ onSend: (content: string) => void;
+}
+
+export default memo(function MessageInput({ onSend }: MessageInputProps) {
+ const [text, setText] = useState("");
+ const textareaRef = useRef
+ {showSender && (
+
+ {senderName}
+
+ )}
+
+
+
+
+
+ {hasReaction && (
+
+ {content}
+
+ {showTime && (
+
+ {time}
+
+ )}
+
+
+ );
+});
diff --git a/react-messenger-23rd/src/components/SearchBar.tsx b/react-messenger-23rd/src/components/SearchBar.tsx
new file mode 100644
index 00000000..ad0b8cf4
--- /dev/null
+++ b/react-messenger-23rd/src/components/SearchBar.tsx
@@ -0,0 +1,23 @@
+import IconSearch from "@/assets/icons/icon_search.svg?react";
+
+interface SearchBarProps {
+ value: string;
+ onChange: (value: string) => void;
+}
+
+export default function SearchBar({ value, onChange }: SearchBarProps) {
+ return (
+
+
+
+
+
+ {text.trim() ? (
+
+ ) : (
+
+ )}
+
+
+ );
+}
diff --git a/react-messenger-23rd/src/components/StatusBar.tsx b/react-messenger-23rd/src/components/StatusBar.tsx
new file mode 100644
index 00000000..3bf8c44b
--- /dev/null
+++ b/react-messenger-23rd/src/components/StatusBar.tsx
@@ -0,0 +1,30 @@
+import { useState, useEffect, memo } from "react";
+import IconCellular from "@/assets/icons/icon_cellular.svg?react";
+import IconWifi from "@/assets/icons/icon_wifi.svg?react";
+import IconBattery from "@/assets/icons/icon_battery.svg?react";
+
+export default memo(function StatusBar() {
+ const [now, setNow] = useState(new Date());
+
+ useEffect(() => {
+ const timer = setInterval(() => setNow(new Date()), 1000);
+ return () => clearInterval(timer);
+ }, []);
+
+ const time = `${now.getHours()}:${String(now.getMinutes()).padStart(2, "0")}`;
+
+ return (
+
+
+ onChange(e.target.value)}
+ placeholder="검색"
+ className="flex-1 bg-transparent text-body1-sb text-content-primary placeholder-content-hint outline-none"
+ />
+
+
+
+ );
+});
diff --git a/react-messenger-23rd/src/data/chatRooms.json b/react-messenger-23rd/src/data/chatRooms.json
new file mode 100644
index 00000000..f062648c
--- /dev/null
+++ b/react-messenger-23rd/src/data/chatRooms.json
@@ -0,0 +1,13 @@
+[
+ { "id": 1, "name": "엄마", "participantIds": [0, 1] },
+ { "id": 2, "name": "최혜정", "participantIds": [0, 2] },
+ { "id": 3, "name": "오카방", "participantIds": [0, 3] },
+ { "id": 4, "name": "쩝", "participantIds": [0, 4] },
+ {
+ "id": 5,
+ "name": "이름이엄청나게길어질경우에는원채영바보",
+ "participantIds": [0, 5]
+ },
+ { "id": 6, "name": "영원이", "participantIds": [0, 6] },
+ { "id": 7, "name": "홍길동", "participantIds": [0, 7] }
+]
diff --git a/react-messenger-23rd/src/data/friends.json b/react-messenger-23rd/src/data/friends.json
new file mode 100644
index 00000000..1cc34e1e
--- /dev/null
+++ b/react-messenger-23rd/src/data/friends.json
@@ -0,0 +1,6 @@
+{
+ "friendIds": [1, 2, 3, 4, 5],
+ "recommendedIds": [6, 7, 8, 9],
+ "storyIds": [2, 3, 5, 6, 7],
+ "myHasStory": true
+}
diff --git a/react-messenger-23rd/src/data/messages.json b/react-messenger-23rd/src/data/messages.json
new file mode 100644
index 00000000..652ed2ed
--- /dev/null
+++ b/react-messenger-23rd/src/data/messages.json
@@ -0,0 +1,42 @@
+[
+ {
+ "id": 1,
+ "chatRoomId": 1,
+ "senderId": 0,
+ "content": "엄마 나 오늘 늦어",
+ "timestamp": "2025-03-15T17:20:00",
+ "reactions": []
+ },
+ {
+ "id": 2,
+ "chatRoomId": 1,
+ "senderId": 1,
+ "content": "일단 알겠어",
+ "timestamp": "2025-03-15T17:24:00",
+ "reactions": []
+ },
+ {
+ "id": 3,
+ "chatRoomId": 2,
+ "senderId": 0,
+ "content": "텍스트텍스트텍스트",
+ "timestamp": "2025-03-15T17:24:00",
+ "reactions": []
+ },
+ {
+ "id": 4,
+ "chatRoomId": 2,
+ "senderId": 2,
+ "content": "텍스트텍스트텍스트텍스트텍스트텍스트",
+ "timestamp": "2025-03-15T17:24:00",
+ "reactions": []
+ },
+ {
+ "id": 5,
+ "chatRoomId": 2,
+ "senderId": 2,
+ "content": "텍스트텍스트텍스트텍스트텍스트텍스트텍텍텍",
+ "timestamp": "2025-03-15T17:25:00",
+ "reactions": []
+ }
+]
diff --git a/react-messenger-23rd/src/data/users.json b/react-messenger-23rd/src/data/users.json
new file mode 100644
index 00000000..b9f52e1e
--- /dev/null
+++ b/react-messenger-23rd/src/data/users.json
@@ -0,0 +1,31 @@
+[
+ {
+ "id": 0,
+ "name": "홍엽",
+ "profileImage": "",
+ "statusMessage": "",
+ "location": "서울특별시, 마포구",
+ "school": "홍익대학교",
+ "birthday": "2000년 11월 30일",
+ "postCount": 2
+ },
+ { "id": 1, "name": "엄마", "profileImage": "", "statusMessage": "" },
+ {
+ "id": 2,
+ "name": "최혜정",
+ "profileImage": "",
+ "statusMessage": "오늘도 화이팅!"
+ },
+ { "id": 3, "name": "오카방", "profileImage": "", "statusMessage": "" },
+ { "id": 4, "name": "쩝", "profileImage": "", "statusMessage": "" },
+ {
+ "id": 5,
+ "name": "아빠",
+ "profileImage": "",
+ "statusMessage": "건강하게 지내자"
+ },
+ { "id": 6, "name": "영원이", "profileImage": "", "statusMessage": "" },
+ { "id": 7, "name": "홍길동", "profileImage": "", "statusMessage": "" },
+ { "id": 8, "name": "이지은", "profileImage": "", "statusMessage": "" },
+ { "id": 9, "name": "박서준", "profileImage": "", "statusMessage": "" }
+]
diff --git a/react-messenger-23rd/src/fonts/PretendardVariable.woff2 b/react-messenger-23rd/src/fonts/PretendardVariable.woff2
new file mode 100644
index 00000000..49c54b51
Binary files /dev/null and b/react-messenger-23rd/src/fonts/PretendardVariable.woff2 differ
diff --git a/react-messenger-23rd/src/index.css b/react-messenger-23rd/src/index.css
new file mode 100644
index 00000000..fc1ba60d
--- /dev/null
+++ b/react-messenger-23rd/src/index.css
@@ -0,0 +1,99 @@
+@import "tailwindcss";
+
+@layer base {
+ body {
+ background-color: var(--color-gray-02);
+ }
+}
+
+@font-face {
+ font-family: "Pretendard Variable";
+ font-weight: 100 900;
+ font-style: normal;
+ src: url("@/fonts/PretendardVariable.woff2") format("woff2");
+ font-display: swap;
+}
+
+@theme {
+ --font-sans:
+ "Pretendard Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;
+
+ --color-main: #0963f4;
+ --color-main-dark: #0a53c8;
+ --color-sub: #518fff;
+
+ --color-gray-08: #1b1c1c;
+ --color-gray-07: #4e545e;
+ --color-gray-06: #7f8591;
+ --color-gray-05: #b0b8c5;
+ --color-gray-04: #c7cedb;
+ --color-gray-03: #dce3ee;
+ --color-gray-02: #ebeff7;
+ --color-gray-01: #f4f6fb;
+ --color-gray-00: #fbfcff;
+ --color-white: #ffffff;
+
+ /* Semantic */
+ --color-primary: var(--color-main);
+ --color-primary-dark: var(--color-main-dark);
+
+ --color-content-primary: var(--color-gray-08);
+ --color-content-secondary: var(--color-gray-07);
+ --color-content-tertiary: var(--color-gray-06);
+ --color-content-hint: var(--color-gray-05);
+
+ --color-surface-muted: var(--color-gray-03);
+ --color-surface-subtle: var(--color-gray-01);
+ --color-surface-input: var(--color-gray-00);
+
+ --color-line: var(--color-gray-04);
+ --color-line-subtle: var(--color-gray-02);
+
+ --color-surface-pressed: var(--color-gray-01);
+ --color-surface-reaction: #cbd3e0;
+
+ --color-content-inactive: #cbd3e0;
+
+ /* Typography - Head */
+ --text-h1-logo: 1.5rem; /* 24px */
+ --text-h1-logo--line-height: 100%;
+ --text-h1-logo--font-weight: 700;
+
+ --text-h1: 1.5rem; /* 24px */
+ --text-h1--line-height: 140%;
+ --text-h1--font-weight: 500;
+
+ --text-h2: 1.25rem; /* 20px */
+ --text-h2--line-height: 100%;
+ --text-h2--font-weight: 500;
+
+ /* Typography - Body */
+ --text-body1-sb: 1rem; /* 16px */
+ --text-body1-sb--line-height: 140%;
+ --text-body1-sb--font-weight: 500;
+
+ --text-body2-r: 0.875rem; /* 14px */
+ --text-body2-r--line-height: 140%;
+ --text-body2-r--font-weight: 300;
+
+ --text-body2-m: 0.875rem; /* 14px */
+ --text-body2-m--line-height: 140%;
+ --text-body2-m--font-weight: 400;
+
+ --text-body3-r: 0.8125rem; /* 13px */
+ --text-body3-r--line-height: 100%;
+ --text-body3-r--font-weight: 300;
+
+ --text-body3-m: 0.8125rem; /* 13px */
+ --text-body3-m--line-height: 140%;
+ --text-body3-m--font-weight: 400;
+
+ /* Typography - Caption */
+ --text-caption1: 0.75rem; /* 12px */
+ --text-caption1--line-height: 140%;
+ --text-caption1--font-weight: 400;
+
+ --text-caption2: 0.6875rem; /* 11px */
+ --text-caption2--line-height: 100%;
+ --text-caption2--font-weight: 400;
+}
diff --git a/react-messenger-23rd/src/main.tsx b/react-messenger-23rd/src/main.tsx
new file mode 100644
index 00000000..bef5202a
--- /dev/null
+++ b/react-messenger-23rd/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ {time}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/react-messenger-23rd/src/pages/ChatRoomPage.tsx b/react-messenger-23rd/src/pages/ChatRoomPage.tsx
new file mode 100644
index 00000000..c5fe1396
--- /dev/null
+++ b/react-messenger-23rd/src/pages/ChatRoomPage.tsx
@@ -0,0 +1,132 @@
+import { useEffect, useRef, useCallback } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { useChatStore } from "@/stores/useChatStore";
+import { useUserStore } from "@/stores/useUserStore";
+import StatusBar from "@/components/StatusBar";
+import ChatHeader from "@/components/ChatHeader";
+import MessageBubble from "@/components/MessageBubble";
+import MessageInput from "@/components/MessageInput";
+import DateSeparator from "@/components/DateSeparator";
+import { formatDate } from "@/utils/formatDate";
+
+export default function ChatRoomPage() {
+ const { id } = useParams<{ id: string }>();
+ const navigate = useNavigate();
+ const chatRoomId = id ? parseInt(id, 10) : null;
+
+ const {
+ chatRooms,
+ setActiveChatRoom,
+ getMessagesByChatRoomId,
+ sendMessage,
+ addReaction,
+ } = useChatStore();
+ const { currentUserId, switchUser, getUserById } = useUserStore();
+
+ const messagesEndRef = useRef
+
+ + 대화 +
+ +
+
+
+ {/* Chat List */}
+
+ {filteredRooms.map((room) => {
+ const lastMsg = getLastMessage(room.id);
+ const participant = room.participantIds.find(
+ (id) => id !== currentUserId,
+ );
+ const user =
+ participant !== undefined ? getUserById(participant) : undefined;
+
+ return (
+ handleRoomClick(room.id)}
+ />
+ );
+ })}
+
+
+ {/* Bottom Nav */}
+
+
+ );
+}
diff --git a/react-messenger-23rd/src/pages/FriendsPage.tsx b/react-messenger-23rd/src/pages/FriendsPage.tsx
new file mode 100644
index 00000000..f3da606e
--- /dev/null
+++ b/react-messenger-23rd/src/pages/FriendsPage.tsx
@@ -0,0 +1,243 @@
+import { useReducer } from "react";
+import { useNavigate } from "react-router-dom";
+import { useUserStore } from "@/stores/useUserStore";
+import StatusBar from "@/components/StatusBar";
+import BottomNav from "@/components/BottomNav";
+import friendsData from "@/data/friends.json";
+import type { User } from "@/types";
+import IconAddFriend from "@/assets/icons/icon_add_friend.svg?react";
+import IconAddStory from "@/assets/icons/icon_add_story.svg?react";
+import IconFacebook from "@/assets/icons/icon_facebook.svg?react";
+import IconNotification from "@/assets/icons/icon_notification.svg?react";
+import IconUserChat from "@/assets/icons/icon_user_chat.svg?react";
+import IconUserMe from "@/assets/icons/icon_user_me.svg?react";
+import IconUserStory from "@/assets/icons/icon_user_story.svg?react";
+import IconUp from "@/assets/icons/icon_up.svg?react";
+import IconDown from "@/assets/icons/icon_down.svg?react";
+
+// 스토리 아이템 (내 스토리)
+const MyStoryItem = ({ hasStory }: { hasStory: boolean }) => (
+
+
+
+
+ {messages.map((msg, index) => {
+ const isMine = msg.senderId === currentUserId;
+ const sender = getUserById(msg.senderId);
+ const msgDate = formatDate(msg.timestamp);
+ const prevMsg = messages[index - 1];
+ const nextMsg = messages[index + 1];
+ const prevDate = prevMsg ? formatDate(prevMsg.timestamp) : "";
+ const showDate = msgDate !== prevDate;
+
+ const showSender =
+ !isMine && (!prevMsg || prevMsg.senderId !== msg.senderId || showDate);
+
+ const isLastInGroup =
+ !nextMsg ||
+ nextMsg.senderId !== msg.senderId ||
+ formatDate(nextMsg.timestamp) !== msgDate;
+
+ const isConsecutive =
+ !showDate && prevMsg?.senderId === msg.senderId;
+
+ return (
+
+
+ {showDate &&
+ );
+ })}
+
+
+
+);
+
+// 스토리 아이템 (친구)
+const FriendStoryItem = ({ user }: { user: User }) => (
+
+
+
+ 내 스토리
+
+
+ {hasStory ? (
+
+ ) : (
+
+ )}
+
+ {hasStory && (
+
+ )}
+
+
+);
+
+// 친구 목록 아이템
+const FriendListItem = ({ user }: { user: User }) => (
+
+
+
+ {user.name}
+
+
+
+);
+
+// 추천 친구 아이템
+const RecommendedItem = ({ user }: { user: User }) => (
+
+
+ {user.statusMessage && (
+
+
+
+ {user.name}
+
+
+
+ {user.statusMessage}
+
+
+ )}
+
+
+);
+
+interface SectionState {
+ friendsExpanded: boolean;
+ recommendedExpanded: boolean;
+}
+
+type SectionAction =
+ | { type: "TOGGLE_FRIENDS" }
+ | { type: "TOGGLE_RECOMMENDED" };
+
+function sectionReducer(state: SectionState, action: SectionAction): SectionState {
+ switch (action.type) {
+ case "TOGGLE_FRIENDS":
+ return { ...state, friendsExpanded: !state.friendsExpanded };
+ case "TOGGLE_RECOMMENDED":
+ return { ...state, recommendedExpanded: !state.recommendedExpanded };
+ }
+}
+
+export default function FriendsPage() {
+ const navigate = useNavigate();
+ const { getUserById } = useUserStore();
+ const currentUser = getUserById(0);
+ const [{ friendsExpanded, recommendedExpanded }, dispatch] = useReducer(
+ sectionReducer,
+ { friendsExpanded: true, recommendedExpanded: true },
+ );
+
+ const friends = friendsData.friendIds
+ .map((id) => getUserById(id))
+ .filter((u): u is User => u !== undefined);
+
+ const recommended = friendsData.recommendedIds
+ .map((id) => getUserById(id))
+ .filter((u): u is User => u !== undefined);
+
+ const storyFriends = friendsData.storyIds
+ .map((id) => getUserById(id))
+ .filter((u): u is User => u !== undefined);
+
+ return (
+
+
+
+
+
+
+
+ {user.name}
+
+
+ 함께 아는 친구 10명
+
+
+
+
+ );
+}
diff --git a/react-messenger-23rd/src/pages/MyProfilePage.tsx b/react-messenger-23rd/src/pages/MyProfilePage.tsx
new file mode 100644
index 00000000..6409a60f
--- /dev/null
+++ b/react-messenger-23rd/src/pages/MyProfilePage.tsx
@@ -0,0 +1,209 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useUserStore } from "@/stores/useUserStore";
+import { useChatStore } from "@/stores/useChatStore";
+import StatusBar from "@/components/StatusBar";
+import friendsData from "@/data/friends.json";
+import IconBack from "@/assets/icons/icon_back.svg?react";
+import IconEditProfile from "@/assets/icons/icon_edit_profile.svg?react";
+import IconEtc from "@/assets/icons/icon_etc.svg?react";
+import IconFacebook from "@/assets/icons/icon_facebook.svg?react";
+import IconMessenger from "@/assets/icons/icon_messenger.svg?react";
+import IconUserMe from "@/assets/icons/icon_user_me.svg?react";
+import IconUp from "@/assets/icons/icon_up.svg?react";
+import IconDown from "@/assets/icons/icon_down.svg?react";
+import IconLocation from "@/assets/icons/icon_location.svg?react";
+import IconJob from "@/assets/icons/icon_job.svg?react";
+import IconBirthday from "@/assets/icons/icon_birthday.svg?react";
+import emptyPostImg from "@/assets/images/empty-post.jpg";
+
+export default function MyProfilePage() {
+ const navigate = useNavigate();
+ const { getUserById, currentUserId } = useUserStore();
+ const { chatRooms, setActiveChatRoom } = useChatStore();
+ const currentUser = getUserById(0);
+ const [infoExpanded, setInfoExpanded] = useState(true);
+ const [postsExpanded, setPostsExpanded] = useState(true);
+
+ const friendCount = friendsData.friendIds.length;
+ const postCount = currentUser?.postCount ?? 0;
+
+ const handleChatWithMe = () => {
+ const myRoom = chatRooms.find(
+ (r) =>
+ r.participantIds.length === 2 &&
+ r.participantIds.includes(0) &&
+ r.participantIds.includes(currentUserId),
+ );
+ if (myRoom) {
+ setActiveChatRoom(myRoom.id);
+ navigate(`/chat/${myRoom.id}`);
+ }
+ };
+
+ return (
+
+
+ messenger
+
+
+
+
+
+
+
+
+
+ {/* 내 프로필 */}
+
+
+ navigate("/profile")}
+ >
+
+
+ {/* 스토리 섹션 */}
+
+
+
+
+
+ {currentUser?.name}
+
+
+
+
+ {/* 친구 섹션 */}
+
+
+
+ {/* 추천 친구 섹션 */}
+
+
+
+ {friendsExpanded && (
+
+
+ 친구
+
+
+ {friends.length}
+
+
+
+
+ {friends.map((friend) => (
+
+ )}
+
+
+
+
+ 추천 친구
+
+
+
+
+ {recommendedExpanded && (
+
+ {recommended.map((user) => (
+
+ )}
+
+
+ );
+}
diff --git a/react-messenger-23rd/src/stores/useChatStore.ts b/react-messenger-23rd/src/stores/useChatStore.ts
new file mode 100644
index 00000000..0c808d0e
--- /dev/null
+++ b/react-messenger-23rd/src/stores/useChatStore.ts
@@ -0,0 +1,108 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import type { Message, ChatRoom } from "@/types";
+import messagesData from "@/data/messages.json";
+import chatRoomsData from "@/data/chatRooms.json";
+
+interface ChatState {
+ messages: Message[];
+ chatRooms: ChatRoom[];
+ activeChatRoomId: number | null;
+ lastReadMessageId: Record
+
+
+
+ {/* 스크롤 영역 */}
+
+
+
+
+
+
+
+
+
+ {/* 흰색 카드 */}
+
+
+
+
+
+ {/* 이름 + 상태 + 친구수 + 버튼 */}
+
+
+
+
+ {/* 개인정보 + 게시물 */}
+
+
+ {currentUser?.name}
+
+
+ {/* 상태 메시지 */}
+
+
+ {/* 버튼 */}
+
+
+ {currentUser?.statusMessage || "상태 메시지를 입력해주세요"}
+
+
+
+ {/* 친구 수 · 게시물 수 */}
+
+
+
+
+ {friendCount}
+
+
+ 친구
+
+
+ ·
+
+
+ {postCount}
+
+
+ 게시물
+
+
+
+
+
+
+
+ {/* 개인정보 섹션 */}
+
+
+
+
+ {/* 게시물 섹션 */}
+
+
+ 개인정보
+
+
+
+
+ {infoExpanded && (
+
+ {currentUser?.location && (
+
+ )}
+
+
+
+ {currentUser.location}
+
+
+ )}
+ {currentUser?.school && (
+
+
+
+ {currentUser.school}
+
+
+ )}
+ {currentUser?.birthday && (
+
+
+
+ {currentUser.birthday}
+
+
+ )}
+
+
+
+
+ 게시물
+
+
+
+
+ {postsExpanded && (
+
+ {Array.from({ length: 6 }).map((_, i) => (
+ 
+ ))}
+
+ )}
+