+ 
+
+ );
+}
+
+export default ChatRoomComponent;
\ No newline at end of file
diff --git a/src/components/ChatRoomListPage/Header.tsx b/src/components/ChatRoomListPage/Header.tsx
new file mode 100644
index 0000000..7edbc05
--- /dev/null
+++ b/src/components/ChatRoomListPage/Header.tsx
@@ -0,0 +1,25 @@
+import searchIcon from "../../assets/ChatRoom/search.svg";
+import menuIcon from "../../assets/ChatRoom/menu.svg";
+import newChatIcon from "../../assets/ChatRoomList/newChat_icon.svg";
+import settingIcon from "../../assets/ChatRoomList/setting_icon.svg";
+
+const Header = () => {
+
+ return (
+
+ {user?.userName || '(알 수 없음)'}
+ {lastMessage?.text}
+
+
+ {lastMessage ? formatTimeForChatList(lastMessage.timestamp) : ''}
+ {unread > 0 && (
+
+ {unread}
+
+ )}
+
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/ChatRoomPage/ChatBar.tsx b/src/components/ChatRoomPage/ChatBar.tsx
new file mode 100644
index 0000000..5c5da20
--- /dev/null
+++ b/src/components/ChatRoomPage/ChatBar.tsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import addIcon from "../../assets/ChatRoom/addMedia.svg";
+import emoticon from "../../assets/ChatRoom/emoticonbtn.svg";
+import sendIcon from "../../assets/ChatRoom/sendbtn.svg";
+
+const ChatBar = ({ onSendMessage }: { onSendMessage: (message: string) => void }) => {
+ const [message, setMessage] = useState('');
+ const [isInputFocused, setIsInputFocused] = useState(false);
+
+ // 메시지 전송 핸들러
+ const handleSendMessage = () => {
+ if (message.trim() !== '') {
+ onSendMessage(message);
+ setMessage('');
+ setIsInputFocused(false);
+ }
+ };
+
+ // 엔터로 메시지 전송
+ const handleKeyDown = (e: React.KeyboardEvent
+
+
+ + 채팅 +
+
+ 
+ 
+ 
+
+
+ 
+
+ );
+}
+
+export default ChatBar;
diff --git a/src/components/ChatRoomPage/Header.tsx b/src/components/ChatRoomPage/Header.tsx
new file mode 100644
index 0000000..2517b25
--- /dev/null
+++ b/src/components/ChatRoomPage/Header.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import backIcon from "../../assets/ChatRoom/back.svg";
+import searchIcon from "../../assets/ChatRoom/search.svg";
+import menuIcon from "../../assets/ChatRoom/menu.svg";
+
+interface HeaderProps {
+ opponentUser: { userId: number, userName: string };
+}
+
+const Header: React.FC
+ setMessage(e.target.value)}
+ onKeyDown={handleKeyDown}
+ onFocus={() => setIsInputFocused(true)}
+ onBlur={() => {
+ if (!message.trim()) setIsInputFocused(false);
+ }}
+ placeholder="메시지 입력하기"
+ style={{
+ transition: 'width 0.3s ease-in-out',
+ width: isInputFocused ? '284px' : '308px',
+ }}
+ className={`transition-all duration-300 w-inputWidth h-inputHeight rounded-full placeholder-Gray/4 font-['Pretendard'] pl-[12px] pr-[40px] bg-Gray/5`}
+ />
+
+ {/* 이모티콘 버튼 */}
+
+
+ {/* 전송 아이콘 */}
+
+
+ 
+
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/ChatRoomPage/MessageList.tsx b/src/components/ChatRoomPage/MessageList.tsx
new file mode 100644
index 0000000..ea58771
--- /dev/null
+++ b/src/components/ChatRoomPage/MessageList.tsx
@@ -0,0 +1,185 @@
+import React, { useEffect, useRef, useState } from 'react';
+import profileIcon from "../../assets/ChatRoom/profile.svg";
+import { formatTime } from '../../utils/ClockUtils';
+import { useUser } from '../../contexts/UserContext';
+import heartIcon from "../../assets/Reactions/heart.svg";
+import smileIcon from "../../assets/Reactions/smile.svg";
+import ohIcon from "../../assets/Reactions/oh.svg";
+import tearIcon from "../../assets/Reactions/tear.svg";
+import angerIcon from "../../assets/Reactions/angry.svg";
+import thumbIcon from "../../assets/Reactions/thumb.svg";
+import plusIcon from "../../assets/Reactions/plus.svg";
+
+interface Message {
+ senderId: number;
+ text: string;
+ timestamp: Date;
+ emoji?: string;
+}
+
+interface MessageListProps {
+ messages: Message[];
+}
+
+// 메시지 그룹화 함수
+const groupMessages = (messages: Message[]) => {
+ return messages.reduce((arr, message, index) => {
+ const timeKey = formatTime(message.timestamp);
+ const prevMessage = messages[index - 1];
+ const isSameSender = prevMessage && prevMessage?.senderId === message.senderId;
+ const isSameMinute = prevMessage && formatTime(prevMessage.timestamp) === timeKey;
+
+ if (!isSameSender || !isSameMinute) {
+ arr.push({ timeKey, senderId: message.senderId, messages: [message] });
+ } else {
+ arr[arr.length - 1].messages.push(message);
+ }
+
+ return arr;
+ }, [] as { timeKey: string; senderId: number; messages: Message[] }[]);
+};
+
+const MessageList: React.FC
+ 
+
+
+ + {opponentUser.userName} +
+
+
+ 
+
+
+ {groupedMessages.map((group, groupIndex) => {
+ const shouldDisplayTime = group.timeKey !== lastTimeDisplayed;
+ lastTimeDisplayed = group.timeKey;
+
+ return (
+
+ );
+};
+
+export default MessageList;
\ No newline at end of file
diff --git a/src/components/FriendListPage/Birthday.tsx b/src/components/FriendListPage/Birthday.tsx
new file mode 100644
index 0000000..f1e371e
--- /dev/null
+++ b/src/components/FriendListPage/Birthday.tsx
@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import profileIcon from "../../assets/ChatRoom/profile.svg";
+import foldIcon from "../../assets/FriendList/up_arrow.svg";
+import unfoldIcon from "../../assets/FriendList/down_arrow.svg";
+
+const Birthday = () => {
+ const [isFolded, setIsFolded] = useState(false);
+
+ const toggleFold = () => {
+ setIsFolded(!isFolded);
+ };
+
+ return (
+
+ {shouldDisplayTime && (
+
+ );
+ })}
+
+
+ {group.timeKey}
+
+ )}
+
+{group.messages.map((message, idx) => {
+ const messageIndex = groupIndex * 100 + idx;
+ const isCurrentUser = message.senderId === currentUser?.userId;
+
+ return (
+ handleDoubleClick(messageIndex, e)}
+ style={{ userSelect: 'none'}}
+ >
+ {/* 상대방 메시지 렌더링 */}
+ {!isCurrentUser && (
+
+ );
+})}
+
+ {idx === 0 && (
+
+ )}
+
+ {/* 본인 메시지 렌더링 */}
+ {isCurrentUser && (
+
+
+
+ )}
+ + {opponentUser?.userName || '(알 수 없음)'} +
+
+
+ {/* 리액션 바 */}
+ {showReactions === messageIndex && (
+ + {message.text} +
+ {reactions[messageIndex] && ( +
+
+ )}
+
+ 
+
+
+ {[heartIcon, smileIcon, ohIcon, tearIcon, angerIcon, thumbIcon].map((emoji, i) => (
+ handleSelectEmoji(messageIndex, emoji)}
+ >
+ 
+
+ ))}
+ 
+
+ )}
+
+
+ )}
+ + {message.text} +
+ {reactions[messageIndex] && ( +
+
+ )}
+
+
+
+
+
+ );
+}
+
+export default Birthday;
\ No newline at end of file
diff --git a/src/components/FriendListPage/FriendList.tsx b/src/components/FriendListPage/FriendList.tsx
new file mode 100644
index 0000000..03e9ff7
--- /dev/null
+++ b/src/components/FriendListPage/FriendList.tsx
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import profileIcon from "../../assets/ChatRoom/profile.svg";
+import foldIcon from "../../assets/FriendList/up_arrow.svg";
+import unfoldIcon from "../../assets/FriendList/down_arrow.svg";
+import { UserData } from '../../lib/UserData';
+import { useUser } from '../../contexts/UserContext';
+
+const FriendList: React.FC = () => {
+ const [isFolded, setIsFolded] = useState(false);
+ const navigate = useNavigate();
+ const { currentUser } = useUser();
+
+ const toggleFold = () => {
+ setIsFolded(!isFolded);
+ };
+
+ const handleProfileClick = (userId: number) => {
+ if (!currentUser) return;
+
+ // chatKey 생성
+ const chatKey = `${Math.min(currentUser.userId, userId)}_${Math.max(currentUser.userId, userId)}`;
+
+ // 클릭한 채팅방으로 이동
+ navigate(`/chat/${chatKey}`);
+ };
+
+ return (
+
+ 
+
+ 생일인 친구
+
+
+ );
+}
+
+export default FriendList;
\ No newline at end of file
diff --git a/src/components/FriendListPage/Header.tsx b/src/components/FriendListPage/Header.tsx
new file mode 100644
index 0000000..868d5cd
--- /dev/null
+++ b/src/components/FriendListPage/Header.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import searchIcon from "../../assets/ChatRoom/search.svg";
+import addIcon from "../../assets/MyProfile/add_friend.svg";
+import musicIcon from "../../assets/MyProfile/music.svg";
+import settingIcon from "../../assets/ChatRoomList/setting_icon.svg";
+
+const Header = () => {
+ return (
+
+
+
+ {!isFolded && (
+ 친구
+
+ {UserData.filter(user => user.userId !== currentUser?.userId).map((user) => (
+
+ )}
+ handleProfileClick(user.userId)}
+ >
+
+
+ ))}
+ + {user.userName} +
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/FriendListPage/Peong.tsx b/src/components/FriendListPage/Peong.tsx
new file mode 100644
index 0000000..a7fa3c5
--- /dev/null
+++ b/src/components/FriendListPage/Peong.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import profileIcon from "../../assets/ChatRoom/profile.svg";
+import foldIcon from "../../assets/FriendList/up_arrow.svg";
+import unfoldIcon from "../../assets/FriendList/down_arrow.svg";
+import makeIcon from "../../assets/FriendList/make_peong.svg";
+import peongIcon from "../../assets/FriendList/peong_bg.svg";
+
+const Peong = () => {
+ const [isFolded, setIsFolded] = useState(false);
+
+ const toggleFold = () => {
+ setIsFolded(!isFolded);
+ };
+
+ return (
+
+
+
+ + 친구 +
+
+
+
+ 
+
+
+
+
+
+ );
+}
+
+export default Peong;
\ No newline at end of file
diff --git a/src/components/FriendListPage/UpdatedProfile.tsx b/src/components/FriendListPage/UpdatedProfile.tsx
new file mode 100644
index 0000000..157b77a
--- /dev/null
+++ b/src/components/FriendListPage/UpdatedProfile.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import profileIcon from "../../assets/ChatRoom/profile.svg";
+import foldIcon from "../../assets/FriendList/up_arrow.svg";
+import unfoldIcon from "../../assets/FriendList/down_arrow.svg";
+import redDotIcon from "../../assets/FriendList/redDot.svg";
+
+const UpdatedProfile = () => {
+ const [isFolded, setIsFolded] = useState(false);
+
+ const toggleFold = () => {
+ setIsFolded(!isFolded);
+ };
+
+ return (
+
+
+
+ {!isFolded && (
+ 펑 1
+
+
+ )}
+
+ 
+
+ 만들기
+
+ 
+
+
+
+ CEOS
+
+ );
+}
+
+export default UpdatedProfile;
\ No newline at end of file
diff --git a/src/components/MyProfilePage/Header.tsx b/src/components/MyProfilePage/Header.tsx
new file mode 100644
index 0000000..c8b716a
--- /dev/null
+++ b/src/components/MyProfilePage/Header.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import backIcon from "../../assets/ChatRoom/back.svg";
+import searchIcon from "../../assets/ChatRoom/search.svg";
+import addIcon from "../../assets/MyProfile/add_friend.svg";
+import musicIcon from "../../assets/MyProfile/music.svg";
+import settingIcon from "../../assets/ChatRoomList/setting_icon.svg";
+
+const Header = () => {
+
+ const navigate = useNavigate();
+
+ const handleBackClick = () => {
+ navigate(-1);
+ }
+ return (
+
+
+
+ {!isFolded && (
+ 업데이트한 프로필 3
+
+
+ )}
+
+ 
+
+
+
+
+ CEOS
+
+
+
+
+
+ CEOS
+
+
+
+
+
+
+ CEOS
+
+
+
+ CEOS
+
+
+
+ CEOS
+
+
+
+ CEOS
+
+
+ );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/MyProfilePage/ProfileInfo.tsx b/src/components/MyProfilePage/ProfileInfo.tsx
new file mode 100644
index 0000000..d5173ff
--- /dev/null
+++ b/src/components/MyProfilePage/ProfileInfo.tsx
@@ -0,0 +1,25 @@
+import arrowIcon from "../../assets/MyProfile/right_arrow.svg";
+
+interface ProfileInfoProps {
+ title: string;
+ content: string;
+}
+
+const ProfileInfo: React.FC
+
+
+
+ + 프로필 +
+
+
+
+
+
+
+
+
+ 
+
+ );
+}
+
+export default ProfileInfo;
\ No newline at end of file
diff --git a/src/components/MyProfilePage/UserProfile.tsx b/src/components/MyProfilePage/UserProfile.tsx
new file mode 100644
index 0000000..92fc03f
--- /dev/null
+++ b/src/components/MyProfilePage/UserProfile.tsx
@@ -0,0 +1,38 @@
+import { useNavigate } from 'react-router-dom';
+import profileIcon from "../../assets/MyProfile/my_profile.svg";
+import multiProfileIcon from "../../assets/MyProfile/multiProfile.svg";
+import { useUser } from '../../contexts/UserContext';
+
+const UserProfile = () => {
+ const navigate = useNavigate();
+ const { currentUser, toggleUser } = useUser();
+
+ const handleProfileClick = () => {
+ navigate('/my');
+ };
+
+ return (
+
+
+ + {title} +
++ {content} +
+
+ 
{
+ e.stopPropagation(); // 부모 클릭 이벤트 방지
+ toggleUser(); // 전역 상태에서 유저 토글
+ }}
+ className='cursor-pointer'
+ />
+
+ );
+}
+
+export default UserProfile;
\ No newline at end of file
diff --git a/src/components/common/HomeIndicatior.tsx b/src/components/common/HomeIndicatior.tsx
new file mode 100644
index 0000000..73a1bdf
--- /dev/null
+++ b/src/components/common/HomeIndicatior.tsx
@@ -0,0 +1,13 @@
+import indicator from "../../assets/Common/HomeIndicator.svg";
+
+const HomeIndicator = () => {
+ return (
+
+
+
+ + {currentUser?.userName} +
+
+
+ );
+}
+
+export default HomeIndicator;
diff --git a/src/components/common/Line.tsx b/src/components/common/Line.tsx
new file mode 100644
index 0000000..8fdcaf7
--- /dev/null
+++ b/src/components/common/Line.tsx
@@ -0,0 +1,8 @@
+const Line = () => {
+ return (
+
+ 
+
+
+
+ );
+}
+
+export default Line;
diff --git a/src/components/common/NavBar.tsx b/src/components/common/NavBar.tsx
new file mode 100644
index 0000000..ea2079f
--- /dev/null
+++ b/src/components/common/NavBar.tsx
@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { ReactComponent as FriendIcon } from "../../assets/ChatRoomList/friend_icon.svg";
+import { ReactComponent as ChatIcon } from "../../assets/ChatRoomList/chatting_icon.svg";
+import { ReactComponent as OpenedChatIcon } from "../../assets/ChatRoomList/openedChat_icon.svg";
+import { ReactComponent as ShoppingIcon } from "../../assets/ChatRoomList/shopping_icon.svg";
+import { ReactComponent as MoreIcon } from "../../assets/ChatRoomList/more_icon.svg";
+import { useUnread } from '../../contexts/UnreadContext';
+
+const NavBar: React.FC = () => {
+ const basicBtnStyle = "text-[9px] font-['Pretendard'] flex flex-col items-center cursor-pointer";
+ const navigate = useNavigate();
+ const location = useLocation();
+ const [activePath, setActivePath] = useState(location.pathname);
+ const { totalUnread } = useUnread();
+
+ useEffect(() => {
+ setActivePath(location.pathname);
+ }, [location]);
+
+ const onBtnClick = (path: string) => {
+ setActivePath(path);
+ navigate(path);
+ }
+
+ const getBtnStyle = (path: string) => {
+ return activePath === path
+ ? `text-Purple/1 ${basicBtnStyle}`
+ : `text-Gray/2 ${basicBtnStyle}`;
+ }
+
+ const getIconStyle = (path: string) => {
+ return activePath === path ? "#AB78FF" : "#666666";
+ }
+
+ return (
+
+
+ );
+}
+
+export default NavBar;
diff --git a/src/components/common/TopBar.tsx b/src/components/common/TopBar.tsx
new file mode 100644
index 0000000..7bea561
--- /dev/null
+++ b/src/components/common/TopBar.tsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect } from 'react';
+import { currentTime } from '../../utils/ClockUtils';
+import BatteryIcon from '../../assets/TopBar/Battery.svg';
+import WifiIcon from '../../assets/TopBar/Wifi.svg';
+import NetworkIcon from '../../assets/TopBar/CellularConnection.svg';
+
+const TopBar = () => {
+ const [time, setTime] = useState(currentTime());
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTime(currentTime());
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, []);
+
+ return (
+ onBtnClick("/friends")} className={getBtnStyle("/friends")} style={{color: getIconStyle("/friends")}}>
+
+ onBtnClick("/chatlist")} className={`${getBtnStyle("/chatlist")} relative`} style={{color: getIconStyle("/chatlist")}}>
+
+
+ {totalUnread}
+
+ )}
+ 채팅
+ onBtnClick("/openedChat")} className={getBtnStyle("/openedChat")} style={{color: getIconStyle("/openedChat")}}>
+
+ onBtnClick("/shopping")} className={getBtnStyle("/shopping")} style={{color: getIconStyle("/shopping")}}>
+
+ onBtnClick("/more")} className={getBtnStyle("/more")} style={{color: getIconStyle("/more")}}>
+
+
+ {/* 현재 시간 표시 */}
+
+ );
+}
+
+export default TopBar;
diff --git a/src/contexts/UnreadContext.tsx b/src/contexts/UnreadContext.tsx
new file mode 100644
index 0000000..9af8edd
--- /dev/null
+++ b/src/contexts/UnreadContext.tsx
@@ -0,0 +1,49 @@
+import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
+import { useUser } from './UserContext';
+import { UserData } from '../lib/UserData';
+
+interface UnreadContextType {
+ totalUnread: number;
+ calculateUnread: () => void;
+}
+
+const UnreadContext = createContext
+ {time}
+
+ {/* 상단바 아이콘 */}
+
+ 
+ 
+ 
+
+
+ handleChatRoomClick(user.userId)}
+ unread={unread[user.userId] || 0}
+ />
+ )
+ ))}
+
+ );
+}
+
+export default ChatRoomListPage;
diff --git a/src/pages/ChatRoomPage.tsx b/src/pages/ChatRoomPage.tsx
new file mode 100644
index 0000000..33ff25a
--- /dev/null
+++ b/src/pages/ChatRoomPage.tsx
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import ChatBar from '../components/ChatRoomPage/ChatBar';
+import Header from '../components/ChatRoomPage/Header';
+import HomeIndicator from '../components/common/HomeIndicatior';
+import TopBar from '../components/common/TopBar';
+import MessageList from '../components/ChatRoomPage/MessageList';
+import { MessageData } from '../lib/MessageData';
+import { UserData } from '../lib/UserData';
+import { useUser } from '../contexts/UserContext';
+
+interface Message {
+ senderId: number;
+ text: string;
+ timestamp: Date;
+}
+
+const ChatRoomPage: React.FC = () => {
+ const { chatKey } = useParams<{ chatKey: string }>();
+ const { currentUser } = useUser();
+ const [messages, setMessages] = useState
+
+ 상대방 정보를 찾을 수 없습니다.
;
+
+ return (
+
+
+ );
+}
+
+export default ChatRoomPage;
diff --git a/src/pages/FriendListPage.tsx b/src/pages/FriendListPage.tsx
new file mode 100644
index 0000000..2a57344
--- /dev/null
+++ b/src/pages/FriendListPage.tsx
@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from 'react';
+import HomeIndicator from '../components/common/HomeIndicatior';
+import TopBar from '../components/common/TopBar';
+import NavBar from '../components/common/NavBar';
+import Header from '../components/FriendListPage/Header';
+import UserProfile from '../components/MyProfilePage/UserProfile';
+import UpdatedProfile from '../components/FriendListPage/UpdatedProfile';
+import Peong from '../components/FriendListPage/Peong';
+import Birthday from '../components/FriendListPage/Birthday';
+import FriendList from '../components/FriendListPage/FriendList';
+import Line from '../components/common/Line';
+
+const FriendListPage = () => {
+ return (
+
+
+
+
+ );
+}
+
+export default FriendListPage;
diff --git a/src/pages/MyProfilePage.tsx b/src/pages/MyProfilePage.tsx
new file mode 100644
index 0000000..db7726e
--- /dev/null
+++ b/src/pages/MyProfilePage.tsx
@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import HomeIndicator from '../components/common/HomeIndicatior';
+import TopBar from '../components/common/TopBar';
+import NavBar from '../components/common/NavBar';
+import Header from '../components/MyProfilePage/Header';
+import UserProfile from '../components/MyProfilePage/UserProfile';
+import Line from '../components/common/Line';
+import ProfileInfo from '../components/MyProfilePage/ProfileInfo';
+import { useUser } from '../contexts/UserContext';
+
+const MyProfilePage = () => {
+ const { currentUser } = useUser();
+
+ return (
+
+
+
+
+
+
+
+
+ )}
+
+ );
+}
+
+export default MyProfilePage;
diff --git a/src/pages/NotYetPage.tsx b/src/pages/NotYetPage.tsx
new file mode 100644
index 0000000..7714aff
--- /dev/null
+++ b/src/pages/NotYetPage.tsx
@@ -0,0 +1,27 @@
+import HomeIndicator from '../components/common/HomeIndicatior';
+import TopBar from '../components/common/TopBar';
+import NavBar from '../components/common/NavBar';
+import Icon from "../assets/Common/shield_warning.svg";
+
+const NotYetPage = () => {
+ return (
+
+
+
+
+ );
+}
+
+export default NotYetPage;
diff --git a/src/utils/ClockUtils.tsx b/src/utils/ClockUtils.tsx
new file mode 100644
index 0000000..667a939
--- /dev/null
+++ b/src/utils/ClockUtils.tsx
@@ -0,0 +1,72 @@
+// 현재 시간 포맷 (상단바)
+export const currentTime = () => {
+ return new Date().toLocaleTimeString('ko-KR', {
+ hour: '2-digit',
+ minute: '2-digit',
+ hour12: false,
+ });
+};
+
+// 타임스탬프 포맷
+export const formatTime = (date: any): string => {
+ // Date 객체가 아닌 경우
+ if (!(date instanceof Date) || isNaN(date.getTime())) {
+ return 'Invalid date';
+ }
+
+ const now = new Date();
+ const diffInTime = now.getTime() - date.getTime();
+ const diffInDays = Math.floor(diffInTime / (1000 * 60 * 60 * 24));
+
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ const ampm = hours >= 12 ? '오후' : '오전';
+ const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
+ const timeString = `${ampm} ${formattedHours}:${minutes < 10 ? '0' : ''}${minutes}`;
+
+ if (diffInDays === 0) {
+ return timeString;
+ } else if (diffInDays === 1) {
+ return `(어제) ${timeString}`;
+ } else if (diffInDays === 2) {
+ return `(그저께) ${timeString}`;
+ } else if (diffInDays <= 3) {
+ return `(${diffInDays}일 전) ${timeString}`;
+ } else {
+ const month = date.getMonth() + 1;
+ const day = date.getDate();
+ return `(${month}/${day}) ${timeString}`;
+ }
+};
+
+// 채팅 리스트용 타임스탬프
+export const formatTimeForChatList = (date: any): string => {
+ // Date 객체가 아닌 경우
+ if (!(date instanceof Date) || isNaN(date.getTime())) {
+ return 'Invalid date';
+ }
+
+ const now = new Date();
+ const diffInTime = now.getTime() - date.getTime();
+ const diffInDays = Math.floor(diffInTime / (1000 * 60 * 60 * 24));
+
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ const ampm = hours >= 12 ? '오후' : '오전';
+ const formattedHours = hours % 12 === 0 ? 12 : hours % 12;
+ const timeString = `${ampm} ${formattedHours}:${minutes < 10 ? '0' : ''}${minutes}`;
+
+ if (diffInDays === 0) {
+ return timeString;
+ } else if (diffInDays === 1) {
+ return `어제`;
+ } else if (diffInDays === 2) {
+ return `그저께`;
+ } else if (diffInDays <= 3) {
+ return `${diffInDays}일 전)`;
+ } else {
+ const month = date.getMonth() + 1;
+ const day = date.getDate();
+ return `${month}/${day}`;
+ }
+};
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..f3a28fe
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,42 @@
+/** @type {import('tailwindcss').Config} */
+
+module.exports = {
+ content: [ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
+ theme: {
+ colors: {
+ 'Purple/1': '#AB78FF',
+ 'Purple/2': '#B98FFF',
+ 'Purple/3': '#D3B8FF',
+ 'White': '#FFFFFF',
+ 'Gray/2': '#666666',
+ 'Gray/3': '#999999',
+ 'Gray/4' : "#CCCCCC",
+ 'Gray/5': '#EDEDED',
+ 'Black': '#000000',
+ },
+ extend: {
+ width: {
+ 'width': '375px',
+ 'inputWidth':'308px',
+ },
+ height: {
+ 'height': '812px',
+ 'topBarHeight': '52px',
+ 'headerHeight': '48px',
+ 'messageAreaHeight':'631px',
+ 'chatBarHeight': '68px',
+ 'inputHeight': '40px',
+ 'indicatorHeight': '13px',
+ 'navBarHeight': '70px',
+ 'ChatRoomComponentHeight': '76px',
+ 'profileTitleHeight': '86px',
+ },
+ }
+ },
+ plugins: [
+ require("tailwind-scrollbar-hide"),
+ require('@tailwindcss/line-clamp'),
+ ],
+}
+
+
diff --git a/tsconfig.json b/tsconfig.json
index a273b0c..1152a63 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,7 @@
"jsx": "react-jsx"
},
"include": [
- "src"
+ "src",
+ "src/custom.d.ts",
]
}
+ 
+
+ + 서비스 준비중입니다.
++ 보다 나은 서비스 제공을 위하여 페이지 준비중에 있습니다.
++ 빠른 시일 내에 준비하여 찾아뵙겠습니다.
+
+
+