CEOS-Developers · hiwon-lee · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 2024 · Sep 26, 2024
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,7 @@
 # dependencies
 /node_modules
 /.pnp
+/.vscode
 .pnp.js
 
 # testing

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',
+      },
+    },
+  ],
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^7.1.0",
+    "@reduxjs/toolkit": "^2.2.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,14 +14,17 @@
     "@types/react-dom": "^18.2.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-redux": "^9.1.2",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.13",
     "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 +44,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "craco": "^0.0.3",
+    "craco-alias": "^3.0.1",
+    "react-app-alias": "^2.2.2",
+    "tailwindcss": "^3.4.13"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -2,19 +2,38 @@
 <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" />
+    <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" />
+    <link
+      rel="stylesheet"
+      href="%PUBLIC_URL%/reset.css"
+    />
+    <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" />
+    <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.

diff --git a/public/reset.css b/public/reset.css
@@ -0,0 +1,134 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+  background-color: #252423;
+  /* color: whitesmoke; */
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+button {
+  all: unset;
+}
diff --git a/src/App.css b/src/App.css
@@ -1,38 +1,34 @@
-.App {
-  text-align: center;
-}
+:root {
+  --main-color: #5b5fc7;
+  --secondary-color: #fbded8;
+  --accent-color: #d6e3e9;
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
+  --pink-light: #e6ced0;
+  --pink-dark: #53151a;
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
+  --gray-50: #f1f1f1;
+  --gray-70: #e3e3e3;
+  --gray-100: #dfdfdf;
+  --gray-500: #919191;
+  --gray-700: #676767;
+  --gray-900: #212121;
 
-.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;
+  --font-small: 10px;
+  --font-caption: 12px;
+  --font-body: 14px;
+  --font-subtitle: 16px;
+  --font-title: 18px;
+  --font-largeHeading: 22px;
+  --font-heading: 24px;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.App {
+  font-family: 'Inter', sans-serif; /* Set font to Inter */
+  width: 375px;
+  height: 100vh;
+  /* max-height: 812px; */
+  /* margin: 1.25rem; */
+  /* box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); */
+  margin: 0 auto;
+  background-color: #ffffff;
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,53 @@
+import Chat from './pages/Chat';
+import './App.css';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Members from './pages/Members';
+import Team from './pages/Team';
+import More from './pages/More';
+import Notice from '@pages/Notice';
+import ChatRoom from '@pages/Chat/ChatRoom';
+import MemberProfile from '@pages/Members/MemberProfile';
+
 function App() {
   return (
-    <div>
-      <h1>20기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~</h1>
+    <div className="App">
+      <BrowserRouter>
+        <Routes>
+          <Route
+            path="/"
+            element={<Members />}
+          ></Route>
+          <Route
+            path="/members"
+            element={<Members />}
+          ></Route>
+          <Route
+            path="/members/:userId"
+            element={<MemberProfile />}
+          ></Route>
+          <Route
+            path="/notice"
+            element={<Notice />}
+          ></Route>
+          <Route
+            path="/chat"
+            element={<Chat />}
+          ></Route>
+          <Route
+            path="/chat/:userId"
+            element={<ChatRoom />}
+          />{' '}
+          {/* 각 대화 방 경로 */}
+          <Route
+            path="/team"
+            element={<Team />}
+          ></Route>
+          <Route
+            path="/more"
+            element={<More />}
+          ></Route>
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

diff --git a/src/assets/addCircle.svg b/src/assets/addCircle.svg
diff --git a/src/assets/chat.png b/src/assets/chat.png
diff --git a/src/assets/emoji.svg b/src/assets/emoji.svg
diff --git a/src/assets/emotion/angry.png b/src/assets/emotion/angry.png
diff --git a/src/assets/emotion/awesome.png b/src/assets/emotion/awesome.png
diff --git a/src/assets/emotion/heart.png b/src/assets/emotion/heart.png
diff --git a/src/assets/emotion/smile.png b/src/assets/emotion/smile.png
diff --git a/src/assets/emotion/surprise.png b/src/assets/emotion/surprise.png
diff --git a/src/assets/images.js b/src/assets/images.js
@@ -0,0 +1,7 @@
+import CHAT from './menu/chat.png';
+import MEMBERS from './menu/members.png';
+import MORE from './menu/more.png';
+import NOTICE from './menu/notice.png';
+import TEAM from './menu/team.png';
+
+export { CHAT };
diff --git a/src/assets/insta.png b/src/assets/insta.png
diff --git a/src/assets/mail.png b/src/assets/mail.png
diff --git a/src/assets/menu/chat.png b/src/assets/menu/chat.png
diff --git a/src/assets/menu/members.png b/src/assets/menu/members.png
diff --git a/src/assets/menu/more.png b/src/assets/menu/more.png
diff --git a/src/assets/menu/notice.png b/src/assets/menu/notice.png
diff --git a/src/assets/menu/team.png b/src/assets/menu/team.png
diff --git a/src/assets/mute.png b/src/assets/mute.png
diff --git a/src/assets/phone.png b/src/assets/phone.png
diff --git a/src/assets/pin.png b/src/assets/pin.png
diff --git a/src/assets/prevButton.png b/src/assets/prevButton.png
diff --git a/src/assets/profile.png b/src/assets/profile.png
diff --git a/src/assets/search.png b/src/assets/search.png
diff --git a/src/assets/status.svg b/src/assets/status.svg