CEOS-Developers · songess · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024 · Mar 26, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}
diff --git a/README.md b/README.md
diff --git a/craco.config.js b/craco.config.js
@@ -0,0 +1,14 @@
+const { CracoAliasPlugin } = require('react-app-alias');
+
+module.exports = {
+  plugins: [
+    {
+      plugin: CracoAliasPlugin,
+      options: {
+        source: 'tsconfig',
+        baseUrl: './src',
+        tsConfigPath: './tsconfig.paths.json', // 위에서 작성한 tsconfig.paths.json입니다.
+      },
+    },
+  ],
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,14 +12,17 @@
     "@types/react-dom": "^18.2.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.1.8",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -39,5 +42,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.34",
+    "craco": "^0.0.3",
+    "react-app-alias": "^2.2.2"
   }
 }
diff --git a/public/HappEmo.png b/public/HappEmo.png
diff --git a/public/Introduce.png b/public/Introduce.png
diff --git a/public/behance.png b/public/behance.png
diff --git a/public/computer.png b/public/computer.png
diff --git a/public/github.png b/public/github.png
diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,10 @@
       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/variable/pretendardvariable.css"
+      rel="stylesheet"
+    />
     <title>React App</title>
   </head>
   <body>

diff --git a/public/instagram.png b/public/instagram.png
diff --git a/public/pic.png b/public/pic.png
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,13 @@
+import { router } from '@util/routes';
+import { RouterProvider } from 'react-router-dom';
+import { RecoilRoot } from 'recoil';
+
 function App() {
-	return (
-		<div>
-			<h1>19기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~</h1>
-		</div>
-	);
+  return (
+    <RecoilRoot>
+      <RouterProvider router={router} />
+    </RecoilRoot>
+  );
 }
 
 export default App;
diff --git a/src/assets/data/chattingRoomData.json b/src/assets/data/chattingRoomData.json
@@ -0,0 +1,204 @@
+{
+  "chattings": [
+    {
+      "id": "1",
+      "name": "플래시",
+      "img": "/pic.png",
+      "isUpdated": true,
+      "stateMessage": "오늘은 비가올거야. 막걸리 먹을사람",
+      "unReadCount": 0,
+      "chat": [
+        {
+          "chatId": "1",
+          "to": "송은수",
+          "from": "플래시",
+          "content": "내일 저녁은 햄버거를 먹을거야. 왜냐하면 어제 파스타를 먹었고 오늘은 한끼도 못먹었거든.",
+          "date": "2024-03-01",
+          "time": "19:00",
+          "isDisplay": false,
+          "isRead": true
+        },
+        {
+          "chatId": "2",
+          "to": "송은수",
+          "from": "플래시",
+          "content": "너는 먹고 싶은게 있어?",
+          "date": "2024-03-01",
+          "time": "19:00",
+          "isDisplay": true,
+          "isRead": true
+        },
+        {
+          "chatId": "3",
+          "to": "플래시",
+          "from": "송은수",
+          "content": "음...",
+          "date": "2024-03-01",
+          "time": "19:01",
+          "isDisplay": true,
+          "isRead": true
+        },
+        {
+          "chatId": "4",
+          "to": "송은수",
+          "from": "플래시",
+          "content": "현기증 나니깐 얼른 답변해줘.",
+          "date": "2024-03-02",
+          "time": "08:31",
+          "isDisplay": true,
+          "isRead": true
+        },
+        {
+          "chatId": "5",
+          "to": "플래시",
+          "from": "송은수",
+          "content": "조금만 기다려",
+          "date": "2024-03-03",
+          "time": "12:02",
+          "isDisplay": false,
+          "isRead": false
+        },
+        {
+          "chatId": "6",
+          "to": "플래시",
+          "from": "송은수",
+          "content": "고민좀 해볼게",
+          "date": "2024-03-03",
+          "time": "12:02",
+          "isDisplay": true,
+          "isRead": false
+        }
+      ]
+    },
+    {
+      "id": "2",
+      "name": "이그나이트",
+      "img": "/HappEmo.png",
+      "isUpdated": false,
+      "stateMessage": "뜨거운 감자",
+      "unReadCount": 1,
+      "chat": [
+        {
+          "chatId": "1",
+          "to": "송은수",
+          "from": "이그나이트",
+          "content": "야야야양야",
+          "date": "2024-03-01",
+          "time": "19:00",
+          "isDisplay": false,
+          "isRead": true
+        },
+        {
+          "chatId": "2",
+          "to": "송은수",
+          "from": "이그나이트",
+          "content": "하이하이하이하이",
+          "date": "2024-03-01",
+          "time": "19:01",
+          "isDisplay": false,
+          "isRead": true
+        },
+        {
+          "chatId": "3",
+          "to": "송은수",
+          "from": "이그나이트",
+          "content": "너는 먹고 싶은게 있어?",
+          "date": "2024-03-01",
+          "time": "19:00",
+          "isDisplay": true,
+          "isRead": true
+        },
+        {
+          "chatId": "4",
+          "to": "이그나이트",
+          "from": "송은수",
+          "content": "음...",
+          "date": "2024-03-01",
+          "time": "19:01",
+          "isDisplay": true,
+          "isRead": true
+        },
+        {
+          "chatId": "5",
+          "to": "송은수",
+          "from": "이그나이트",
+          "content": "걍 나가.",
+          "date": "2024-03-02",
+          "time": "08:31",
+          "isDisplay": true,
+          "isRead": true
+        }
+      ]
+    },
+    {
+      "id": "3",
+      "name": "마이크",
+      "img": "/computer.png",
+      "isUpdated": true,
+      "stateMessage": "나는야 경찰관",
+      "unReadCount": 1,
+      "chat": [
+        {
+          "chatId": "1",
+          "to": "송은수",
+          "from": "마이크",
+          "content": "mic drop let's go",
+          "date": "2024-02-11",
+          "time": "08:31",
+          "isDisplay": true,
+          "isRead": true
+        },
+        {
+          "chatId": "2",
+          "to": "송은수",
+          "from": "마이크",
+          "content": "읽씹노노",
+          "date": "2024-02-11",
+          "time": "08:34",
+          "isDisplay": true,
+          "isRead": true
+        }
+      ]
+    },
+    {
+      "id": "4",
+      "name": "몬스터",
+      "img": "/logo192.png",
+      "isUpdated": false,
+      "stateMessage": "해치지 않아요",
+      "unReadCount": 0,
+      "chat": [
+        {
+          "chatId": "1",
+          "to": "송은수",
+          "from": "몬스터",
+          "content": "걍 나가.",
+          "date": "2024-02-02",
+          "time": "08:31",
+          "isDisplay": true,
+          "isRead": true
+        },
+        {
+          "chatId": "2",
+          "to": "몬스터",
+          "from": "송은수",
+          "content": "엥",
+          "date": "2024-02-02",
+          "time": "08:31",
+          "isDisplay": false,
+          "isRead": true
+        },
+        {
+          "chatId": "3",
+          "to": "몬스터",
+          "from": "송은수",
+          "content": "무슨소리임",
+          "date": "2024-02-02",
+          "time": "08:31",
+          "isDisplay": true,
+          "isRead": true
+        }
+      ]
+    }
+  ]
+}
diff --git a/src/assets/img/HappEmo.png b/src/assets/img/HappEmo.png
diff --git a/src/assets/img/capture.png b/src/assets/img/capture.png
diff --git a/src/assets/img/pic.png b/src/assets/img/pic.png
diff --git a/src/assets/svg/arrowLeft.svg b/src/assets/svg/arrowLeft.svg
diff --git a/src/assets/svg/chat.svg b/src/assets/svg/chat.svg
diff --git a/src/assets/svg/clock.svg b/src/assets/svg/clock.svg
diff --git a/src/assets/svg/edit.svg b/src/assets/svg/edit.svg
diff --git a/src/assets/svg/emoji.svg b/src/assets/svg/emoji.svg
diff --git a/src/assets/svg/etc.svg b/src/assets/svg/etc.svg
diff --git a/src/assets/svg/friends.svg b/src/assets/svg/friends.svg
diff --git a/src/assets/svg/heart.svg b/src/assets/svg/heart.svg