CEOS-Developers · jsomnium · 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
@@ -8,10 +8,12 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.91",
-    "@types/react": "^18.2.69",
     "@types/react-dom": "^18.2.22",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -39,5 +41,17 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.9",
+    "file-loader": "^6.2.0",
+    "tailwindcss": "^3.4.13",
+    "webpack": "^5.95.0",
+    "webpack-cli": "^5.1.4"
+  },
+  "description": "안녕하세요 🙌🏻 20기 프론트 운영진 김동혁입니다. 이번 미션에서는 드디어 투두리스트에서 벗어나 새로운 프로젝트인 **messenger** 만들기를 진행합니다.",
+  "main": "tailwind.config.js",
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
 }
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/htmlStyle.css b/public/htmlStyle.css
@@ -0,0 +1,23 @@
+html,
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'AppleSDGothicNeo', sans-serif;
+}
+
+#root {
+    width: 100%;
+    max-width: 375px;
+    height: 100%;
+    max-height: 812px;
+    border-radius: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      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`.
-    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link href="htmlStyle.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fonts-archive/AppleSDGothicNeo/AppleSDGothicNeo.css"
+    type="text/css" />
+  <title>React App</title>
+</head>
 
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
+<body class="">
+  <div id="root"></div>
+  <script src="../src/App.tsx" type="module"></script>
+</body>
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,19 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import ChatRoom from '../src/pages/chatRoom';
+import ChatListRoom from './pages/chatListRoom';
+import FriendListRoom from './pages/friendListRoom';
+
 function App() {
   return (
-    <div>
-      <h1>20기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~</h1>
-    </div>
+    <Router>
+      <Routes>
+        {/* 기본 경로: FriendListRoom => 친구 목록 */}
+        <Route path="/" element={<FriendListRoom />} />
+        <Route path="/chatRoom/:userId" element={<ChatRoom />} />
+        <Route path="/chatListRoom" element={<ChatListRoom />} />
+      </Routes>
+    </Router>
   );
 }
 

diff --git a/src/assets/addFriendIcon.svg b/src/assets/addFriendIcon.svg
diff --git a/src/assets/angryImoIcon.svg b/src/assets/angryImoIcon.svg
diff --git a/src/assets/backArrowImg.svg b/src/assets/backArrowImg.svg
diff --git a/src/assets/badImoIcon.svg b/src/assets/badImoIcon.svg
diff --git a/src/assets/battery.svg b/src/assets/battery.svg
diff --git a/src/assets/chatIcon.svg b/src/assets/chatIcon.svg
diff --git a/src/assets/chatIcon_on.svg b/src/assets/chatIcon_on.svg
diff --git a/src/assets/chatMoreIcon.svg b/src/assets/chatMoreIcon.svg
diff --git a/src/assets/defaultProfileImg.svg b/src/assets/defaultProfileImg.svg