CEOS-Developers · ryu-won · Sep 26, 2024 · Sep 27, 2024 · Sep 27, 2024 · Sep 27, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
+    "@tanstack/react-query": "^5.59.16",
+    "@tanstack/react-query-devtools": "^5.59.16",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,7 +15,12 @@
     "@types/react-dom": "^18.2.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
+    "react-query": "^3.39.3",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.1.13",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +47,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-icons": "^2.2.7",
+    "@types/styled-components": "^5.1.34",
+    "tailwindcss": "^3.4.13"
   }
 }
diff --git a/public/Profile_image.svg b/public/Profile_image.svg
diff --git a/public/fakedata/messagesData.json b/public/fakedata/messagesData.json
@@ -0,0 +1,42 @@
+[
+  {
+    "id": 1,
+    "text": "머하밍??",
+    "sender": "CEOS",
+    "receiver": "김류원",
+    "time": "2024-10-31T12:34:56.000Z",
+    "chatRoomId": "CEOS"
+  },
+  {
+    "id": 2,
+    "text": "과제중🤮🤮",
+    "sender": "김류원",
+    "receiver": "CEOS",
+    "time": "2024-10-31T12:35:56.000Z",
+    "chatRoomId": "CEOS"
+  },
+  {
+    "id": 3,
+    "text": "🤦‍♀️🤦‍♀️",
+    "sender": "CEOS",
+    "receiver": "김류원",
+    "time": "2024-10-31T12:36:56.000Z",
+    "chatRoomId": "CEOS"
+  },
+  {
+    "id": 4,
+    "text": "차은우가 보낸 메세지",
+    "sender": "차은우",
+    "receiver": "김류원",
+    "time": "2024-10-31T12:37:56.000Z",
+    "chatRoomId": "차은우"
+  },
+  {
+    "id": 5,
+    "text": "뷔가 보낸 메세지",
+    "sender": "뷔",
+    "receiver": "김류원",
+    "time": "2024-10-31T12:38:56.000Z",
+    "chatRoomId": "뷔"
+  }
+]
diff --git a/public/fakedata/users.json b/public/fakedata/users.json
@@ -0,0 +1,50 @@
+[
+  {
+    "id": 0,
+    "name": "김류원",
+    "profilePic": "/Profile_image.svg",
+    "facebook": "https://www.facebook.com/",
+    "instagram": "https://www.instagram.com/"
+  },
+  {
+    "id": 1,
+    "name": "CEOS",
+    "profilePic": "/Profile_image.svg",
+    "facebook": "https://www.facebook.com/clubceos/",
+    "instagram": "https://www.instagram.com/ceos.sinchon/",
+    "description": "IT 연합 동아리"
+  },
+
+  {
+    "id": 2,
+    "name": "차은우",
+    "profilePic": "/Profile_image.svg",
+    "facebook": "https://www.facebook.com/",
+    "instagram": "https://www.instagram.com/",
+    "description": "차은우! 차은우! 차은우!"
+  },
+  {
+    "id": 3,
+    "name": "송강",
+    "profilePic": "/Profile_image.svg",
+    "facebook": "https://www.facebook.com/",
+    "instagram": "https://www.instagram.com/",
+    "description": "스위트홈에서 잘생김"
+  },
+  {
+    "id": 4,
+    "name": "뷔",
+    "profilePic": "/Profile_image.svg",
+    "facebook": "https://www.facebook.com/",
+    "instagram": "https://www.instagram.com/",
+    "description": "그냥 잘생김"
+  },
+  {
+    "id": 5,
+    "name": "서강준",
+    "profilePic": "/Profile_image.svg",
+    "facebook": "https://www.facebook.com/",
+    "instagram": "https://www.instagram.com/",
+    "description": "정글의법칙에서도 잘생김"
+  }
+]
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,11 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"
+      rel="stylesheet"
+    />
+
     <title>React App</title>
   </head>
   <body>

diff --git a/src/images.d.ts b/src/images.d.ts
@@ -0,0 +1,4 @@
+declare module "*.svg" {
+  const content: any;
+  export default content;
+}
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+body {
+  font-family: "Pretendard";
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,35 @@
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  useMatch,
+} from "react-router-dom";
+import ChatRoom from "./pages/ChatRoom";
+import ProfileDetail from "./pages/ProfileDetail";
+import { useState } from "react";
+import BottomNav from "./components/BottomNav";
+import { ReactQueryDevtools } from "react-query/devtools";
+
+import Home from "./pages/Home";
+import ChatList from "./pages/ChatList";
+
 function App() {
+  const chatRoomMatch = useMatch("/chat-room/:sender");
+
   return (
-    <div>
-      <h1>20기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~</h1>
-    </div>
+    <>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/chat-room/:sender" element={<ChatRoom />} />
+        <Route path="/chat-list" element={<ChatList />} />
+      </Routes>
+      <div className=" md:max-w-[375px] mx-auto">
+        {" "}
+        {chatRoomMatch ? null : <BottomNav></BottomNav>}
+      </div>
-      <div className=" md:max-w-[375px] mx-auto">
-        {" "}
-        {chatRoomMatch ? null : <BottomNav></BottomNav>}
-      </div>
+      <div className=" md:max-w-[375px] mx-auto">
+        {!chatRoomMatch && <BottomNav />}
+      </div>
-      <div className=" md:max-w-[375px] mx-auto">
-        {" "}
-        {chatRoomMatch ? null : <BottomNav></BottomNav>}
-      </div>
+      <div className=" md:max-w-[375px] mx-auto">
+        {!chatRoomMatch && <BottomNav />}
+      </div>
+
+      <ReactQueryDevtools />
+    </>
   );
 }
 

diff --git a/src/api.tsx b/src/api.tsx
@@ -0,0 +1,9 @@
+export function fetchUsers() {
+  return fetch("/fakedata/users.json").then((response) => response.json());
+}
+
+export function fetchMessages() {
+  return fetch("/fakedata/messagesData.json").then((response) =>
+    response.json()
+  );
+}
diff --git a/src/assets/Back.svg b/src/assets/Back.svg
diff --git a/src/assets/Story.svg b/src/assets/Story.svg
diff --git a/src/assets/call.svg b/src/assets/call.svg
diff --git a/src/assets/cancel.svg b/src/assets/cancel.svg
diff --git a/src/assets/chat.svg b/src/assets/chat.svg
diff --git a/src/assets/edit.svg b/src/assets/edit.svg
diff --git a/src/assets/home.svg b/src/assets/home.svg
diff --git a/src/assets/person_plus.svg b/src/assets/person_plus.svg
diff --git a/src/assets/plus.svg b/src/assets/plus.svg
diff --git a/src/assets/profile_facebook.svg b/src/assets/profile_facebook.svg