+
+ );
+};
+
+export default ChatListContents;
diff --git a/src/components/ChatList/ChatListItem.tsx b/src/components/ChatList/ChatListItem.tsx
new file mode 100644
index 00000000..be7acdd4
--- /dev/null
+++ b/src/components/ChatList/ChatListItem.tsx
@@ -0,0 +1,105 @@
+import { useNavigate } from "react-router-dom";
+
+// icons
+import { ReactComponent as CameraIcon } from "../../assets/icons/camera_gray.svg";
+import { ReactComponent as PinnedIcon } from "../../assets/icons/pin.svg";
+import { ReactComponent as PinIcon } from "../../assets/icons/pin2.svg";
+
+// data & recoil
+import userData from "../../data/UserData.json";
+import { chattingInterface } from "../../types/interface";
+import useHandleTime from "../../hooks/useHandleTime";
+import { useState } from "react";
+
+interface ChatListItemProps {
+ chatting: chattingInterface;
+ isPinned: boolean;
+ handleTogglePin: () => void;
+}
+
+const ChatListItem: React.FC
+
+
+ Messages
+ Requests
+
+
+ {filteredFollowers.map(
+ (chatting) =>
+ chatting.id !== undefined && ( // id가 undefined가 아닌 항목만 렌더링
+ handlePinToggle(chatting.id)}
+ />
+ ),
+ )}
+
+
+
+ );
+};
+
+export default ChatListItem;
diff --git a/src/components/ChatList/TopBar.tsx b/src/components/ChatList/TopBar.tsx
new file mode 100644
index 00000000..9b590a45
--- /dev/null
+++ b/src/components/ChatList/TopBar.tsx
@@ -0,0 +1,29 @@
+import { useNavigate } from "react-router-dom";
+// icons
+import { ReactComponent as BackIcon } from "../../assets/icons/back.svg";
+import { ReactComponent as ArrowIcon } from "../../assets/icons/arrow.svg";
+import { ReactComponent as EditIcon } from "../../assets/icons/edit.svg";
+
+const TopBar = () => {
+ const navigate = useNavigate();
+
+ return (
+ <>
+
+
+
+
+
+ {isSlided && (
+
+
+ ![]({require("../../assets/images/")
+
+ gotoChatRoom()}
+ className="flex flex-grow cursor-pointer flex-col"
+ >
+
+
+
+ gotoChatRoom()}
+ className="flex flex-grow cursor-pointer flex-col"
+ >
+
+
+ {follower.userName}
+
+ {isPinned &&
+
+
+
+ {lastMessage}
+
+
+ {lastModified}
+
+
+
+
+
+ );
+};
+export default Chattings;
diff --git a/src/components/ChatRoom/EmotionBox.tsx b/src/components/ChatRoom/EmotionBox.tsx
new file mode 100644
index 00000000..5db1a579
--- /dev/null
+++ b/src/components/ChatRoom/EmotionBox.tsx
@@ -0,0 +1,44 @@
+import heart from "../../assets/icons/emotion_heart.svg";
+import joy from "../../assets/icons/emotion_joy.svg";
+import surprise from "../../assets/icons/emotion_surprise.svg";
+import tear from "../../assets/icons/emotion_tear.svg";
+import angry from "../../assets/icons/emotion_angry.svg";
+import thumbup from "../../assets/icons/emotion_thumbup.svg";
+import plus from "../../assets/icons/emotion_add.svg";
+
+interface EmotionBoxProps {
+ onSelectEmotion: (emotionId: number) => void; // 선택된 감정을 처리하는 함수 prop
+}
+
+const EmotionBox: React.FC
+ {currentChatting.chatList.length > 0 ? (
+ // 이전 대화내역이 있을 때
+ currentChatting.chatList.map((chat, index) =>
+ chat.sender === users.me.id ? (
+ handleLongPress(index, e)}
+ isSelected={selectedMessage === index}
+ selectedEmotion={selectedEmotions[index] || null}
+ emotionBoxRef={emotionBoxRef}
+ />
+ ),
+ )
+ ) : (
+ // 이전 대화내역이 없을 때
+
+
+ 
+
+
+ )}
+
+ {users.other.userName}
+
+ {users.other.userId}
+ 735 followers 174 posts
+
+ hongik_university also follows
+
+
+
+ Inquire
+
+
+ View profile
+
+
+
+ 
onSelectEmotion(item.id)}
+ className="cursor-pointer"
+ />
+ ))}
+
+
+
+ );
+};
+
+export default EmotionBox;
diff --git a/src/components/ChatRoom/EmotionRemained.tsx b/src/components/ChatRoom/EmotionRemained.tsx
new file mode 100644
index 00000000..10cc5d77
--- /dev/null
+++ b/src/components/ChatRoom/EmotionRemained.tsx
@@ -0,0 +1,39 @@
+import heart from "../../assets/icons/emotion_heart.svg";
+import joy from "../../assets/icons/emotion_joy.svg";
+import surprise from "../../assets/icons/emotion_surprise.svg";
+import tear from "../../assets/icons/emotion_tear.svg";
+import angry from "../../assets/icons/emotion_angry.svg";
+import thumbup from "../../assets/icons/emotion_thumbup.svg";
+import plus from "../../assets/icons/emotion_add.svg";
+
+interface EmotionRemainedProps {
+ emotionId: number;
+ isMine: boolean;
+}
+
+const EmotionRemained: React.FC
+ Tap and hold to super react
+
+
+ {emotionList.map((item) => (
+
+ 
+
+ );
+};
+
+export default EmotionRemained;
diff --git a/src/components/ChatRoom/InputBox.tsx b/src/components/ChatRoom/InputBox.tsx
new file mode 100644
index 00000000..e8e71c2e
--- /dev/null
+++ b/src/components/ChatRoom/InputBox.tsx
@@ -0,0 +1,114 @@
+import { useRef, useState } from "react";
+
+// icons
+import { ReactComponent as CameraIcon } from "../../assets/icons/camera.svg";
+import { ReactComponent as MicIcon } from "../../assets/icons/mic.svg";
+import { ReactComponent as PictureIcon } from "../../assets/icons/picture.svg";
+import { ReactComponent as GIFIcon } from "../../assets/icons/gif.svg";
+import { ReactComponent as SendButton } from "../../assets/icons/send_button.svg";
+
+interface InputBoxProps {
+ sendChat: (message: string | File, type: "text" | "image") => void;
+}
+
+const InputBox: React.FC
+
+ );
+};
+
+export default InputBox;
diff --git a/src/components/ChatRoom/MyChat.tsx b/src/components/ChatRoom/MyChat.tsx
new file mode 100644
index 00000000..a04791c0
--- /dev/null
+++ b/src/components/ChatRoom/MyChat.tsx
@@ -0,0 +1,60 @@
+// component
+import EmotionRemained from "./EmotionRemained";
+
+interface MyChatProps {
+ message: string;
+ isLastChat: boolean;
+ /*감정 관련 */
+ selectedEmotion: number | null;
+}
+
+const MyChat: React.FC
+
+
+
+ {inputText.trim() === "" ? (
+ <>
+
+
+ {isImageMessage ? (
+ // 이미지 메시지인 경우
+ 
+ ) : (
+ // 텍스트 메시지인 경우
+
+
+
+ );
+};
+
+export default MyChat;
diff --git a/src/components/ChatRoom/ReceivedChat.tsx b/src/components/ChatRoom/ReceivedChat.tsx
new file mode 100644
index 00000000..21f4f182
--- /dev/null
+++ b/src/components/ChatRoom/ReceivedChat.tsx
@@ -0,0 +1,104 @@
+// components
+import EmotionBox from "./EmotionBox";
+import EmotionRemained from "./EmotionRemained";
+
+// recoil
+import { useRecoilValue } from "recoil";
+import { emotionBoxState } from "../../recoil/atom";
+
+// hooks
+import useHandleEmotionSelect from "../../hooks/useHandleEmotionSelect";
+
+import "animate.css";
+
+interface ReceivedChatProps {
+ message: string;
+ profileImg: string;
+ isLastChat: boolean;
+ /* 감정 달기 관련 */
+ onMouseDown: (e: React.MouseEvent
+ {message}
+
+ )}
+ {selectedEmotion && (
+ <>
+
+
+
+ )}
+
+ {showEmotionBox && isSelected && (
+
+ ) : (
+
+ )}
+
+
+
+ );
+};
+
+export default ReceivedChat;
diff --git a/src/components/ChatRoom/TopBar.tsx b/src/components/ChatRoom/TopBar.tsx
new file mode 100644
index 00000000..86d2bd6f
--- /dev/null
+++ b/src/components/ChatRoom/TopBar.tsx
@@ -0,0 +1,70 @@
+// icons
+import { ReactComponent as ProfileCircle } from "../../assets/icons/ellipse.svg";
+import { ReactComponent as BackIcon } from "../../assets/icons/back.svg";
+import { ReactComponent as ArrowIcon } from "../../assets/icons/arrow.svg";
+import { ReactComponent as PhoneIcon } from "../../assets/icons/phone.svg";
+import { ReactComponent as VideoIcon } from "../../assets/icons/videocam.svg";
+
+// recoil
+import { userState } from "../../recoil/atom";
+import { useRecoilState } from "recoil";
+import { userInterface } from "../../types/interface";
+import { useNavigate } from "react-router-dom";
+
+const TopBar = () => {
+ const [users, setUsers] = useRecoilState<{
+ me: userInterface;
+ other: userInterface;
+ }>(userState);
+
+ // 유저 전환
+ const handleChangeUser = () => {
+ setUsers((prevState) => ({
+ me: prevState.other,
+ other: prevState.me,
+ }));
+ };
+
+ const navigate = useNavigate();
+
+ return (
+ <>
+
+
+ )}
+
+ {isLastChat ? (
+
+ ) : (
+
+ )}
+
+
+ {isImageMessage ? (
+ // 이미지 메시지인 경우
+
+ ) : (
+ // 텍스트 메시지인 경우
+
+
+
+ {message}
+
+ )}
+
+ {selectedEmotion && (
+ <>
+
+
+
+ )}
+
+ navigate(-1)}
+ className="mr-[1.19rem] h-6 w-6 cursor-pointer"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {users.other.userName}
+
+ {users.other.userId}
+
+ + + ); +}; + +export default TopBar; diff --git a/src/components/FollowList/FollowContents.tsx b/src/components/FollowList/FollowContents.tsx new file mode 100644 index 00000000..4e5b7f6d --- /dev/null +++ b/src/components/FollowList/FollowContents.tsx @@ -0,0 +1,21 @@ +import userData from "../../data/UserData.json"; +import Follower from "./Follower"; + +const FollowContents = () => { + const users = userData.users.slice(1); + + return ( + <> +
+
+
+ );
+};
+
+export default FollowContents;
diff --git a/src/components/FollowList/Follower.tsx b/src/components/FollowList/Follower.tsx
new file mode 100644
index 00000000..9c8ae531
--- /dev/null
+++ b/src/components/FollowList/Follower.tsx
@@ -0,0 +1,69 @@
+import { useNavigate } from "react-router-dom";
+import { userInterface } from "../../types/interface";
+
+// recoil
+import { useRecoilState, useSetRecoilState } from "recoil";
+import {
+ chattingState,
+ currentChattingState,
+ userState,
+} from "../../recoil/atom";
+
+import userData from "../../data/UserData.json";
+
+interface FollowerProps {
+ user: userInterface;
+}
+
+const Follower: React.FC
+ All followers
+
+ {users.map((user) => (
+
+
+
+ {user.userName}
+
+ {user.userId}
+
+
+ gotoChatRoom()}
+ className="h-6 w-[4.4375rem] cursor-pointer rounded-[0.3125rem] bg-Gray200 px-[0.625rem] py-[0.3125rem] text-xs"
+ >
+ Message
+
+
+
+ );
+};
+
+export default Follower;
diff --git a/src/components/FollowList/TopBar.tsx b/src/components/FollowList/TopBar.tsx
new file mode 100644
index 00000000..71638430
--- /dev/null
+++ b/src/components/FollowList/TopBar.tsx
@@ -0,0 +1,23 @@
+const TopBar = () => {
+ return (
+ <>
+
+ jngynjng
+
+
+
+ 2.5M follower
+
+
+ 3 following
+
+
+ subscription
+
+
+
+
+ );
+};
+
+export default TopBar;
diff --git a/src/components/MyProfile/MyContents.tsx b/src/components/MyProfile/MyContents.tsx
new file mode 100644
index 00000000..88bba4d2
--- /dev/null
+++ b/src/components/MyProfile/MyContents.tsx
@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { ReactComponent as GridIcon } from "../../assets/icons/grid.svg";
+import { ReactComponent as GridIcon2 } from "../../assets/icons/grid2.svg";
+import { ReactComponent as TaggedIcon } from "../../assets/icons/tagged.svg";
+import { ReactComponent as TaggedIcon2 } from "../../assets/icons/tagged2.svg";
+
+import content1 from "../../assets/images/content1.png";
+import content2 from "../../assets/images/content2.png";
+import content3 from "../../assets/images/content3.png";
+import none_tagged from "../../assets/images/none_tagged.png";
+
+const MyContents = () => {
+ const [currentTab, setCurrentTab] = useState(0);
+ const tab = [
+ {
+ id: 1,
+ icon: currentTab == 0 ?
+ 
+ 
+ 
+
+ ),
+ },
+ {
+ id: 2,
+ icon: currentTab == 1 ?
+ 
+
+ ),
+ },
+ ];
+
+ const handleTab = (index: number) => {
+ setCurrentTab(index);
+ };
+
+ return (
+ <>
+
+ 내가 태그된 사진과 동영상
+
+
+ 사람들이 회원님을 사진 및 동영상에 태그하면
+
+ 태그된 사진 및 동영상이 여기에 표시됩니다. +
+ + 태그된 사진 및 동영상이 여기에 표시됩니다. +
+
+
+ );
+};
+
+export default MyContents;
diff --git a/src/components/MyProfile/MyInfo.tsx b/src/components/MyProfile/MyInfo.tsx
new file mode 100644
index 00000000..0a802dcf
--- /dev/null
+++ b/src/components/MyProfile/MyInfo.tsx
@@ -0,0 +1,42 @@
+import { useNavigate } from "react-router-dom";
+import { ReactComponent as ProfileImg } from "../../assets/images/profile_img.svg";
+
+const MyInfo = () => {
+ const navigate = useNavigate();
+
+ return (
+ <>
+
+ {tab.map((tab, index) => (
+ handleTab(index)}
+ >
+ {tab.icon}
+
+ ))}
+
+
+ {/* {tab[currentTab].content}
*/}
+
+
+
+
+ {tab[0].content}
+ {tab[1].content}
+
+
+
+ );
+};
+
+export default MyInfo;
diff --git a/src/components/MyProfile/TopBar.tsx b/src/components/MyProfile/TopBar.tsx
new file mode 100644
index 00000000..8caa2b45
--- /dev/null
+++ b/src/components/MyProfile/TopBar.tsx
@@ -0,0 +1,22 @@
+import { ReactComponent as ArrowIcon } from "../../assets/icons/arrow.svg";
+import { ReactComponent as PlusIcon } from "../../assets/icons/plus.svg";
+import { ReactComponent as MenuIcon } from "../../assets/icons/menu.svg";
+
+const TopBar = () => {
+ return (
+ <>
+
+
+
+
+ 3
+ Posts
+ navigate("/followlist")}
+ className="flex cursor-pointer flex-col items-center"
+ >
+
+ 2.5M
+ Followers
+
+
+ 3
+ Follwings
+
+ 장윤정
+
+
+ 안녕하세요!!
+
+
+ Edit Your Profile
+
+
+
+
+
+ );
+};
+
+export default TopBar;
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
new file mode 100644
index 00000000..da0d06d2
--- /dev/null
+++ b/src/components/common/Footer.tsx
@@ -0,0 +1,49 @@
+import { useLocation, useNavigate } from "react-router-dom";
+
+// icons
+import { ReactComponent as HomeIcon } from "../../assets/icons/home.svg";
+import { ReactComponent as SearchIcon } from "../../assets/icons/search.svg";
+import { ReactComponent as MessageIcon } from "../../assets/icons/message.svg";
+import { ReactComponent as MessageIconActive } from "../../assets/icons/message_active.svg";
+import { ReactComponent as ProfileIcon } from "../../assets/icons/profile.svg";
+import { ReactComponent as ProfileIconActive } from "../../assets/icons/profile_active.svg";
+import { ReactComponent as MoreIcon } from "../../assets/icons/more.svg";
+
+const Footer = () => {
+ const navigate = useNavigate();
+ const location = useLocation();
+ const isChatListActive = location.pathname === "/chatlist";
+ return (
+ <>
+ jngynjng
+
+ navigate("/chatlist")}
+ />
+ ) : (
+ navigate("/chatlist")}
+ />
+ )}
+ {isChatListActive ? (
+ navigate("/")}
+ />
+ ) : (
+ navigate("/")}
+ />
+ )}
+
+
+ );
+};
+
+export default Footer;
diff --git a/src/components/common/StatusBar.tsx b/src/components/common/StatusBar.tsx
new file mode 100644
index 00000000..29cc8ec0
--- /dev/null
+++ b/src/components/common/StatusBar.tsx
@@ -0,0 +1,18 @@
+import { ReactComponent as Info } from "../../assets/icons/info.svg";
+
+const StatusBar = () => {
+ const now = new Date();
+ const hour = now.getHours();
+ const minute = now.getMinutes();
+
+ return (
+
+
+ {hour}:{minute}
+
+
+ );
+};
+
+export default StatusBar;
diff --git a/src/custom.d.ts b/src/custom.d.ts
new file mode 100644
index 00000000..a8dc3cc3
--- /dev/null
+++ b/src/custom.d.ts
@@ -0,0 +1,12 @@
+declare module "*.svg" {
+ import React = require("react");
+
+ export const ReactComponent: REact.FC
+
+
+ );
+};
+
+export default ChatListPage;
diff --git a/src/pages/ChatRoomPage.tsx b/src/pages/ChatRoomPage.tsx
new file mode 100644
index 00000000..af832c02
--- /dev/null
+++ b/src/pages/ChatRoomPage.tsx
@@ -0,0 +1,43 @@
+import { useEffect } from "react";
+import { useParams } from "react-router-dom";
+
+// components
+import TopBar from "../components/ChatRoom/TopBar";
+import Chattings from "../components/ChatRoom/Chattings";
+
+import userData from "../data/UserData.json";
+
+// recoil
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { emotionBoxState, userState } from "../recoil/atom";
+
+const ChatRoomPage = () => {
+ const { chatroomId } = useParams(); // 경로로부터 chatroom id
+ const followerId: number = parseInt(chatroomId || "1", 10);
+ const showEmotionBox = useRecoilValue(emotionBoxState); // 배경 블러처리를 위한 감정 박스 표시 상태
+
+ const setCurrentUsers = useSetRecoilState(userState);
+
+ useEffect(() => {
+ setCurrentUsers(() => ({
+ me: userData.users[0],
+ other: userData.users[followerId],
+ }));
+ }, [followerId, setCurrentUsers]);
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default ChatRoomPage;
diff --git a/src/pages/FollowListPage.tsx b/src/pages/FollowListPage.tsx
new file mode 100644
index 00000000..5a114ba8
--- /dev/null
+++ b/src/pages/FollowListPage.tsx
@@ -0,0 +1,17 @@
+import TopBar from "../components/FollowList/TopBar";
+import FollowContents from "../components/FollowList/FollowContents";
+import Footer from "../components/common/Footer";
+
+const FollowListPage = () => {
+ return (
+ <>
+
+
+ {showEmotionBox && ( // 블러 배경
+
+ )}
+
+
+
+ );
+};
+
+export default FollowListPage;
diff --git a/src/pages/MyProfilePage.tsx b/src/pages/MyProfilePage.tsx
new file mode 100644
index 00000000..2974f121
--- /dev/null
+++ b/src/pages/MyProfilePage.tsx
@@ -0,0 +1,19 @@
+import TopBar from "../components/MyProfile/TopBar";
+import MyInfo from "../components/MyProfile/MyInfo";
+import MyContents from "../components/MyProfile/MyContents";
+import Footer from "../components/common/Footer";
+
+const MyProfilePage = () => {
+ return (
+ <>
+
+
+
+ );
+};
+
+export default MyProfilePage;
diff --git a/src/recoil/atom.ts b/src/recoil/atom.ts
new file mode 100644
index 00000000..dc14b20b
--- /dev/null
+++ b/src/recoil/atom.ts
@@ -0,0 +1,48 @@
+import { atom } from "recoil";
+import userData from "../data/UserData.json";
+import chattingData from "../data/ChattingData.json";
+import { recoilPersist } from "recoil-persist";
+import type { chattingInterface, userInterface } from "../types/interface";
+
+const { persistAtom } = recoilPersist({
+ key: "chattings",
+ storage: localStorage,
+});
+
+export const userState = atom<{ me: userInterface; other: userInterface }>({
+ key: "userState",
+ default: {
+ me: userData.users[0],
+ other: userData.users[1],
+ },
+});
+
+export const chattingState = atom