From 1f5148f15a522fa9c87eb0a33dbd4978a5249c20 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 03:54:10 +0900
Subject: [PATCH 01/25] =?UTF-8?q?docs:=20=ED=8F=B4=EB=8D=94=20=EA=B5=AC?=
 =?UTF-8?q?=EC=A1=B0=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json      | 46 +++++++++++++++++++++---------------------
 package.json           |  8 +++++---
 src/App.css            | 38 ----------------------------------
 src/App.tsx            |  1 -
 src/data/chatData.json | 17 ++++++++++++++++
 src/pages/chatList.tsx |  0
 src/pages/chatRoom.tsx |  0
 7 files changed, 45 insertions(+), 65 deletions(-)
 delete mode 100644 src/App.css
 create mode 100644 src/data/chatData.json
 create mode 100644 src/pages/chatList.tsx
 create mode 100644 src/pages/chatRoom.tsx

diff --git a/package-lock.json b/package-lock.json
index c27bbe4e..7858206e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,13 +13,15 @@
         "@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",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
         "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "@types/react": "^18.3.9"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -4210,12 +4212,12 @@
       "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ=="
     },
     "node_modules/@types/react": {
-      "version": "18.2.69",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.69.tgz",
-      "integrity": "sha512-W1HOMUWY/1Yyw0ba5TkCV+oqynRjG7BnteBB+B7JmAK7iw3l2SW+VGOxL+akPweix6jk2NNJtyJKpn4TkpfK3Q==",
+      "version": "18.3.9",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.9.tgz",
+      "integrity": "sha512-+BpAVyTpJkNWWSSnaLBk6ePpHLOGJKnEQNbINNovPWzvEUyAe3e+/d494QdEh71RekM/qV7lw6jzf1HGrJyAtQ==",
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
-        "@types/scheduler": "*",
         "csstype": "^3.0.2"
       }
     },
@@ -4240,11 +4242,6 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA=="
     },
-    "node_modules/@types/scheduler": {
-      "version": "0.16.8",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
-      "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A=="
-    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@@ -14686,9 +14683,10 @@
       }
     },
     "node_modules/react": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
-      "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -14835,15 +14833,16 @@
       }
     },
     "node_modules/react-dom": {
-      "version": "18.2.0",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
-      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.0"
+        "scheduler": "^0.23.2"
       },
       "peerDependencies": {
-        "react": "^18.2.0"
+        "react": "^18.3.1"
       }
     },
     "node_modules/react-error-overlay": {
@@ -15480,9 +15479,10 @@
       }
     },
     "node_modules/scheduler": {
-      "version": "0.23.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
-      "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       }
diff --git a/package.json b/package.json
index ea335d36..71e4ce58 100644
--- a/package.json
+++ b/package.json
@@ -8,10 +8,9 @@
     "@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",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -39,5 +38,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.9"
   }
 }
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e053..00000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.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);
-  }
-}
diff --git a/src/App.tsx b/src/App.tsx
index 5381007b..14b0c705 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,6 @@
 function App() {
   return (
     <div>
-      <h1>20기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~</h1>
     </div>
   );
 }
diff --git a/src/data/chatData.json b/src/data/chatData.json
new file mode 100644
index 00000000..0cfa5c26
--- /dev/null
+++ b/src/data/chatData.json
@@ -0,0 +1,17 @@
+{
+  "users": [
+    {
+      "user_id": "",
+      "name": "",
+      "profile_picture": ""
+    }
+  ],
+  "messages": [
+    {
+      "message_id": "1",
+      "sender_id": "",
+      "message": "",
+      "timestamp": ""
+    }
+  ]
+}
diff --git a/src/pages/chatList.tsx b/src/pages/chatList.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
new file mode 100644
index 00000000..e69de29b

From 8cd88155c43a89a2ffb10d4afd19d55e763ce9df Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 19:34:25 +0900
Subject: [PATCH 02/25] =?UTF-8?q?feat:=20=EA=B8=B0=EB=B3=B8=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EC=84=A4=EC=A0=95,=20=EC=B1=84=ED=8C=85=EB=B0=A9?=
 =?UTF-8?q?=20=EB=9D=BC=EC=9A=B0=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json      |  42 +++++++++++++++++++++++++++++++++++++++++
 package.json           |   1 +
 public/favicon.ico     | Bin 3870 -> 0 bytes
 public/htmlStyle.css   |  24 +++++++++++++++++++++++
 public/index.html      |  34 ++-------------------------------
 public/logo192.png     | Bin 5347 -> 0 bytes
 public/logo512.png     | Bin 9664 -> 0 bytes
 public/manifest.json   |  25 ------------------------
 public/robots.txt      |   3 ---
 src/App.tsx            |  12 ++++++++++--
 src/index.css          |  13 -------------
 src/index.tsx          |   1 -
 src/pages/chatList.tsx |   1 +
 src/pages/chatRoom.tsx |  12 ++++++++++++
 14 files changed, 92 insertions(+), 76 deletions(-)
 delete mode 100644 public/favicon.ico
 create mode 100644 public/htmlStyle.css
 delete mode 100644 public/logo192.png
 delete mode 100644 public/logo512.png
 delete mode 100644 public/manifest.json
 delete mode 100644 public/robots.txt
 delete mode 100644 src/index.css

diff --git a/package-lock.json b/package-lock.json
index 7858206e..f4daad8b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@types/react-dom": "^18.2.22",
         "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"
@@ -3340,6 +3341,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -14863,6 +14873,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index 71e4ce58..64761e5c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "@types/react-dom": "^18.2.22",
     "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"
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index a11777cc471a4344702741ab1c8a588998b1311a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3870
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
baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@

diff --git a/public/htmlStyle.css b/public/htmlStyle.css
new file mode 100644
index 00000000..b4665fe5
--- /dev/null
+++ b/public/htmlStyle.css
@@ -0,0 +1,24 @@
+/* 페이지 전체를 가운데 정렬하고 배경색을 핑크로 설정 */
+html,
+body {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+/* 화면의 최대 가로폭과 세로폭 설정 */
+#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; /* 넘는 부분 숨기기 */
+}
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index aa069f27..c2dcc3e6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2,42 +2,12 @@
 <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`.
-    -->
+    <link href="htmlStyle.css" rel="stylesheet">
     <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.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <script src="../src/App.tsx" type="module"></script>
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5347
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
X@eDJUQo;Ye2mwlRs<JiGX2Jghdw)}T

diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6545bc15971f8f63fba70e4013df88a664..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9664
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
b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN

diff --git a/public/manifest.json b/public/manifest.json
deleted file mode 100644
index 080d6c77..00000000
--- a/public/manifest.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
diff --git a/public/robots.txt b/public/robots.txt
deleted file mode 100644
index e9e57dc4..00000000
--- a/public/robots.txt
+++ /dev/null
@@ -1,3 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *
-Disallow:
diff --git a/src/App.tsx b/src/App.tsx
index 14b0c705..d36049db 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,15 @@
+import React from 'react';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+import ChatRoom from '../src/pages/chatRoom';
+
 function App() {
   return (
-    <div>
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<ChatRoom />} /> 
+        {/* 기본 경로: ChatRoom */}
+      </Routes>
+    </Router>
   );
 }
 
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8..00000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
diff --git a/src/index.tsx b/src/index.tsx
index d10be77d..3b193169 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
 
 const root = ReactDOM.createRoot(
diff --git a/src/pages/chatList.tsx b/src/pages/chatList.tsx
index e69de29b..693da49f 100644
--- a/src/pages/chatList.tsx
+++ b/src/pages/chatList.tsx
@@ -0,0 +1 @@
+export {}
\ No newline at end of file
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index e69de29b..180310fe 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+const ChatRoom: React.FC = () => {
+  return (
+    <div>
+      <h1>채팅방</h1>
+      <p>내용 표시</p>
+    </div>
+  );
+};
+
+export default ChatRoom;
\ No newline at end of file

From 1e73df5e8db28282bd139c3768acecc9e8d648e4 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 20:27:35 +0900
Subject: [PATCH 03/25] =?UTF-8?q?feat,=20design:=20=EA=B8=B0=EB=B3=B8=20UI?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                  | 108 ++++++++++++++++-------------
 package.json                       |   5 +-
 public/htmlStyle.css               |   6 +-
 src/assets/backArrowImg.svg        |   3 +
 src/assets/defaultProfileImg.svg   |   4 ++
 src/assets/morePointImg.svg        |   5 ++
 src/components/dateDivider.tsx     |   9 +++
 src/components/myMessageBox.tsx    |   9 +++
 src/components/navBar.tsx          |   9 +++
 src/components/otherMessageBox.tsx |   9 +++
 src/components/plusButton.tsx      |   9 +++
 src/components/profileButton.tsx   |   9 +++
 src/pages/chatRoom.tsx             |  31 +++++++--
 tailwind.config.js                 |  13 ++++
 14 files changed, 170 insertions(+), 59 deletions(-)
 create mode 100644 src/assets/backArrowImg.svg
 create mode 100644 src/assets/defaultProfileImg.svg
 create mode 100644 src/assets/morePointImg.svg
 create mode 100644 src/components/dateDivider.tsx
 create mode 100644 src/components/myMessageBox.tsx
 create mode 100644 src/components/navBar.tsx
 create mode 100644 src/components/otherMessageBox.tsx
 create mode 100644 src/components/plusButton.tsx
 create mode 100644 src/components/profileButton.tsx
 create mode 100644 tailwind.config.js

diff --git a/package-lock.json b/package-lock.json
index f4daad8b..7d14648c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,8 @@
         "@types/jest": "^27.5.2",
         "@types/node": "^16.18.91",
         "@types/react-dom": "^18.2.22",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.47",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.26.2",
@@ -22,7 +24,8 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "@types/react": "^18.3.9"
+        "@types/react": "^18.3.9",
+        "tailwindcss": "^3.4.13"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -5152,9 +5155,9 @@
       }
     },
     "node_modules/autoprefixer": {
-      "version": "10.4.19",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.19.tgz",
-      "integrity": "sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==",
+      "version": "10.4.20",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
+      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
       "funding": [
         {
           "type": "opencollective",
@@ -5169,12 +5172,13 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "browserslist": "^4.23.0",
-        "caniuse-lite": "^1.0.30001599",
+        "browserslist": "^4.23.3",
+        "caniuse-lite": "^1.0.30001646",
         "fraction.js": "^4.3.7",
         "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.0",
+        "picocolors": "^1.0.1",
         "postcss-value-parser": "^4.2.0"
       },
       "bin": {
@@ -5641,9 +5645,9 @@
       "integrity": "sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow=="
     },
     "node_modules/browserslist": {
-      "version": "4.23.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
-      "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
+      "version": "4.24.0",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.0.tgz",
+      "integrity": "sha512-Rmb62sR1Zpjql25eSanFGEhAxcFwfA1K0GuQcLoaJBAcENegrQut3hYdhXFF1obQfiDyqIW/cLM5HSJ/9k884A==",
       "funding": [
         {
           "type": "opencollective",
@@ -5658,11 +5662,12 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "caniuse-lite": "^1.0.30001587",
-        "electron-to-chromium": "^1.4.668",
-        "node-releases": "^2.0.14",
-        "update-browserslist-db": "^1.0.13"
+        "caniuse-lite": "^1.0.30001663",
+        "electron-to-chromium": "^1.5.28",
+        "node-releases": "^2.0.18",
+        "update-browserslist-db": "^1.1.0"
       },
       "bin": {
         "browserslist": "cli.js"
@@ -5769,9 +5774,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001600",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz",
-      "integrity": "sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==",
+      "version": "1.0.30001664",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001664.tgz",
+      "integrity": "sha512-AmE7k4dXiNKQipgn7a2xg558IRqPN3jMQY/rOsbxDhrd0tyChwbITBfiwtnqz8bi2M5mIWbxAYBvk7W7QBUS2g==",
       "funding": [
         {
           "type": "opencollective",
@@ -5785,7 +5790,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
@@ -7025,9 +7031,10 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.715",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.715.tgz",
-      "integrity": "sha512-XzWNH4ZSa9BwVUQSDorPWAUQ5WGuYz7zJUNpNif40zFCiCl20t8zgylmreNmn26h5kiyw2lg7RfTmeMBsDklqg=="
+      "version": "1.5.29",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.29.tgz",
+      "integrity": "sha512-PF8n2AlIhCKXQ+gTpiJi0VhcHDb69kYX4MtCiivctc2QD3XuNZ/XIOlbGzt7WAjjEev0TtaH6Cu3arZExm5DOw==",
+      "license": "ISC"
     },
     "node_modules/emittery": {
       "version": "0.8.1",
@@ -7277,9 +7284,10 @@
       }
     },
     "node_modules/escalade": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz",
-      "integrity": "sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
       "engines": {
         "node": ">=6"
       }
@@ -12626,9 +12634,10 @@
       "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
     },
     "node_modules/node-releases": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
-      "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw=="
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
+      "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
+      "license": "MIT"
     },
     "node_modules/normalize-path": {
       "version": "3.0.0",
@@ -13099,9 +13108,10 @@
       "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="
     },
     "node_modules/picocolors": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
+      "license": "ISC"
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -13265,9 +13275,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.38",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
-      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "version": "8.4.47",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",
+      "integrity": "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -13282,10 +13292,11 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
         "nanoid": "^3.3.7",
-        "picocolors": "^1.0.0",
-        "source-map-js": "^1.2.0"
+        "picocolors": "^1.1.0",
+        "source-map-js": "^1.2.1"
       },
       "engines": {
         "node": "^10 || ^12 || >=14"
@@ -15847,9 +15858,10 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
-      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -16533,9 +16545,10 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
-      "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
+      "integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
+      "license": "MIT",
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -16545,7 +16558,7 @@
         "fast-glob": "^3.3.0",
         "glob-parent": "^6.0.2",
         "is-glob": "^4.0.3",
-        "jiti": "^1.19.1",
+        "jiti": "^1.21.0",
         "lilconfig": "^2.1.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
@@ -17086,9 +17099,9 @@
       }
     },
     "node_modules/update-browserslist-db": {
-      "version": "1.0.13",
-      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz",
-      "integrity": "sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
+      "integrity": "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A==",
       "funding": [
         {
           "type": "opencollective",
@@ -17103,9 +17116,10 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
+      "license": "MIT",
       "dependencies": {
-        "escalade": "^3.1.1",
-        "picocolors": "^1.0.0"
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.0"
       },
       "bin": {
         "update-browserslist-db": "cli.js"
diff --git a/package.json b/package.json
index 64761e5c..df862a9b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,8 @@
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.91",
     "@types/react-dom": "^18.2.22",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
@@ -41,6 +43,7 @@
     ]
   },
   "devDependencies": {
-    "@types/react": "^18.3.9"
+    "@types/react": "^18.3.9",
+    "tailwindcss": "^3.4.13"
   }
 }
diff --git a/public/htmlStyle.css b/public/htmlStyle.css
index b4665fe5..ac27156a 100644
--- a/public/htmlStyle.css
+++ b/public/htmlStyle.css
@@ -1,4 +1,3 @@
-/* 페이지 전체를 가운데 정렬하고 배경색을 핑크로 설정 */
 html,
 body {
     height: 100%;
@@ -10,15 +9,14 @@ body {
     align-items: center;
 }
 
-/* 화면의 최대 가로폭과 세로폭 설정 */
 #root {
     width: 100%;
     max-width: 375px;
     height: 100%;
     max-height: 812px;
-    border-radius: 20px; /* 둥근 모서리 */
+    border-radius: 20px;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     display: flex;
     flex-direction: column;
-    overflow: hidden; /* 넘는 부분 숨기기 */
+    overflow: hidden;
 }
\ No newline at end of file
diff --git a/src/assets/backArrowImg.svg b/src/assets/backArrowImg.svg
new file mode 100644
index 00000000..383ab793
--- /dev/null
+++ b/src/assets/backArrowImg.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 4.75L8 11.75L15 18.75" stroke="#8B95A1" stroke-width="1.86667" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/defaultProfileImg.svg b/src/assets/defaultProfileImg.svg
new file mode 100644
index 00000000..3b072888
--- /dev/null
+++ b/src/assets/defaultProfileImg.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.05078 7.60241C11.114 7.60241 12.7865 5.92987 12.7865 3.86669C12.7865 1.80352 11.114 0.130981 9.05078 0.130981C6.9876 0.130981 5.31506 1.80352 5.31506 3.86669C5.31506 5.92987 6.9876 7.60241 9.05078 7.60241Z" fill="#EFD546"/>
+<path d="M15.8132 18.3797C16.9804 18.3797 17.9049 17.4031 17.6528 16.3669C16.7283 12.5962 13.2546 9.79358 9.10852 9.79358C4.96246 9.79358 1.49808 12.5962 0.564281 16.3669C0.312155 17.4031 1.22728 18.3797 2.40386 18.3797H15.8132Z" fill="#EFD546"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/morePointImg.svg b/src/assets/morePointImg.svg
new file mode 100644
index 00000000..0e50923c
--- /dev/null
+++ b/src/assets/morePointImg.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="11.6668" cy="5.66667" r="1.66667" fill="#8B95A1"/>
+<circle cx="11.6667" cy="11.4999" r="1.66667" fill="#8B95A1"/>
+<circle cx="11.6667" cy="17.3332" r="1.66667" fill="#8B95A1"/>
+</svg>
diff --git a/src/components/dateDivider.tsx b/src/components/dateDivider.tsx
new file mode 100644
index 00000000..bbb99a10
--- /dev/null
+++ b/src/components/dateDivider.tsx
@@ -0,0 +1,9 @@
+const dateDivider: React.FC = () => {
+    return (
+        <div className="dateDivider">
+            2024.09.11 수요일
+        </div>
+  );
+};
+
+export default dateDivider;
\ No newline at end of file
diff --git a/src/components/myMessageBox.tsx b/src/components/myMessageBox.tsx
new file mode 100644
index 00000000..b7a485ec
--- /dev/null
+++ b/src/components/myMessageBox.tsx
@@ -0,0 +1,9 @@
+const myMessageBox: React.FC = () => {
+    return (
+        <div>
+            내가 보낸 메세지
+        </div>
+  );
+};
+
+export default myMessageBox;
\ No newline at end of file
diff --git a/src/components/navBar.tsx b/src/components/navBar.tsx
new file mode 100644
index 00000000..4ea4a656
--- /dev/null
+++ b/src/components/navBar.tsx
@@ -0,0 +1,9 @@
+const navBar: React.FC = () => {
+    return (
+        <div>
+            navBar : 시간, 와이파이 등
+        </div>
+  );
+};
+
+export default navBar;
\ No newline at end of file
diff --git a/src/components/otherMessageBox.tsx b/src/components/otherMessageBox.tsx
new file mode 100644
index 00000000..feaa5979
--- /dev/null
+++ b/src/components/otherMessageBox.tsx
@@ -0,0 +1,9 @@
+const otherMessageBox: React.FC = () => {
+    return (
+        <div>
+            상대가 보낸 메세지: 프로필 사진까지 같이 옴
+        </div>
+  );
+};
+
+export default otherMessageBox;
\ No newline at end of file
diff --git a/src/components/plusButton.tsx b/src/components/plusButton.tsx
new file mode 100644
index 00000000..06f89d15
--- /dev/null
+++ b/src/components/plusButton.tsx
@@ -0,0 +1,9 @@
+const PlusButton: React.FC = () => {
+    return (
+        <button className="w-8 h-8 rounded-lg bg-yellow-400 border-0">
+            +
+        </button>
+    );
+};
+
+export default PlusButton;
\ No newline at end of file
diff --git a/src/components/profileButton.tsx b/src/components/profileButton.tsx
new file mode 100644
index 00000000..5a8bde06
--- /dev/null
+++ b/src/components/profileButton.tsx
@@ -0,0 +1,9 @@
+const profileButton: React.FC = () => {
+    return (
+        <div>
+            profileButton
+        </div>
+  );
+};
+
+export default profileButton;
\ No newline at end of file
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 180310fe..13feaeef 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -1,12 +1,29 @@
 import React from 'react';
+import NavBar from '../components/navBar';
+import DateDivider from '../components/dateDivider';
+import MyMessageBox from '../components/myMessageBox';
+import OtherMessageBox from '../components/otherMessageBox';
+import ProfileButton from '../components/profileButton';
+import PlusButton from '../components/plusButton';
 
 const ChatRoom: React.FC = () => {
-  return (
-    <div>
-      <h1>채팅방</h1>
-      <p>내용 표시</p>
-    </div>
-  );
+    return (
+        <div className="w-full h-full flex flex-col">
+            <NavBar />
+            <div className="h-11 flex">
+                백버튼 김나나 점
+            </div>
+            <div className="flex-grow bg-aliceblue">
+                <DateDivider />
+                <MyMessageBox />
+                <ProfileButton />
+                <OtherMessageBox />
+            </div>
+            <div className="h-16">
+                <PlusButton />
+            </div>
+        </div>
+    );
 };
 
-export default ChatRoom;
\ No newline at end of file
+export default ChatRoom;
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..f913c122
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {
+      colors: {
+        aliceblue: '#f0f8ff',
+      }
+
+    },
+  },
+  plugins: [],
+}
\ No newline at end of file

From d63fcd50c69f176e2af2a77e8064b3b8a284fdb4 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 21:03:30 +0900
Subject: [PATCH 04/25] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json         | 286 +++++++++++++++++++++++++++++++++++---
 package.json              |  12 +-
 public/index.html         |   1 +
 src/assets/battery.svg    |   5 +
 src/assets/networkImg.svg |   3 +
 src/assets/wifiImg.svg    |   3 +
 src/components/navBar.tsx |  47 ++++++-
 tailwind.config.js        |   6 +-
 webpack.config.js         |  10 ++
 9 files changed, 340 insertions(+), 33 deletions(-)
 create mode 100644 src/assets/battery.svg
 create mode 100644 src/assets/networkImg.svg
 create mode 100644 src/assets/wifiImg.svg
 create mode 100644 webpack.config.js

diff --git a/package-lock.json b/package-lock.json
index 7d14648c..ac756890 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "react-messenger-19th",
       "version": "0.1.0",
+      "license": "ISC",
       "dependencies": {
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
@@ -25,7 +26,10 @@
       },
       "devDependencies": {
         "@types/react": "^18.3.9",
-        "tailwindcss": "^3.4.13"
+        "file-loader": "^6.2.0",
+        "tailwindcss": "^3.4.13",
+        "webpack": "^5.95.0",
+        "webpack-cli": "^5.1.4"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -2294,6 +2298,16 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -4074,15 +4088,6 @@
         "@types/json-schema": "*"
       }
     },
-    "node_modules/@types/eslint-scope": {
-      "version": "3.7.7",
-      "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
-      "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
-      "dependencies": {
-        "@types/eslint": "*",
-        "@types/estree": "*"
-      }
-    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -4688,6 +4693,53 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webpack-cli/configtest": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/info": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/serve": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -4747,10 +4799,11 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/acorn-import-assertions": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.9.0.tgz",
-      "integrity": "sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==",
+    "node_modules/acorn-import-attributes": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/acorn-import-attributes/-/acorn-import-attributes-1.9.5.tgz",
+      "integrity": "sha512-n02Vykv5uA3eHGM/Z2dQrcD56kL8TyDb2p1+0P83PClMnC/nc+anbQRhIOWnSq4Ke/KvDPrY3C9hDtC/A3eHnQ==",
+      "license": "MIT",
       "peerDependencies": {
         "acorn": "^8"
       }
@@ -5917,6 +5970,21 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -7069,9 +7137,10 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.16.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.16.0.tgz",
-      "integrity": "sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==",
+      "version": "5.17.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
+      "integrity": "sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==",
+      "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.2.0"
@@ -7088,6 +7157,19 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/envinfo": {
+      "version": "7.14.0",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.14.0.tgz",
+      "integrity": "sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -8155,6 +8237,16 @@
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
@@ -8197,6 +8289,7 @@
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.2.0.tgz",
       "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
+      "license": "MIT",
       "dependencies": {
         "loader-utils": "^2.0.0",
         "schema-utils": "^3.0.0"
@@ -8319,6 +8412,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -9357,6 +9460,16 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/interpret": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-3.1.1.tgz",
+      "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -9651,6 +9764,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -9828,6 +9954,16 @@
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -15020,6 +15156,19 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/rechoir": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
+      "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "resolve": "^1.20.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
     "node_modules/recursive-readdir": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
@@ -15772,6 +15921,19 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -17273,20 +17435,20 @@
       }
     },
     "node_modules/webpack": {
-      "version": "5.91.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.91.0.tgz",
-      "integrity": "sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==",
+      "version": "5.95.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.95.0.tgz",
+      "integrity": "sha512-2t3XstrKULz41MNMBF+cJ97TyHdyQ8HCt//pqErqDvNjU9YQBnZxIHa11VXsi7F3mb5/aO2tuDxdeTPdU7xu9Q==",
+      "license": "MIT",
       "dependencies": {
-        "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
         "@webassemblyjs/ast": "^1.12.1",
         "@webassemblyjs/wasm-edit": "^1.12.1",
         "@webassemblyjs/wasm-parser": "^1.12.1",
         "acorn": "^8.7.1",
-        "acorn-import-assertions": "^1.9.0",
+        "acorn-import-attributes": "^1.9.5",
         "browserslist": "^4.21.10",
         "chrome-trace-event": "^1.0.2",
-        "enhanced-resolve": "^5.16.0",
+        "enhanced-resolve": "^5.17.1",
         "es-module-lexer": "^1.2.1",
         "eslint-scope": "5.1.1",
         "events": "^3.2.0",
@@ -17318,6 +17480,62 @@
         }
       }
     },
+    "node_modules/webpack-cli": {
+      "version": "5.1.4",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
+        "colorette": "^2.0.14",
+        "commander": "^10.0.1",
+        "cross-spawn": "^7.0.3",
+        "envinfo": "^7.7.3",
+        "fastest-levenshtein": "^1.0.12",
+        "import-local": "^3.0.2",
+        "interpret": "^3.1.1",
+        "rechoir": "^0.8.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "bin": {
+        "webpack-cli": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@webpack-cli/generators": {
+          "optional": true
+        },
+        "webpack-bundle-analyzer": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/webpack-dev-middleware": {
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
@@ -17551,6 +17769,21 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webpack-merge": {
+      "version": "5.10.0",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz",
+      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -17731,6 +17964,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wildcard": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
diff --git a/package.json b/package.json
index df862a9b..d4fa6cb6 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,14 @@
   },
   "devDependencies": {
     "@types/react": "^18.3.9",
-    "tailwindcss": "^3.4.13"
-  }
+    "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/index.html b/public/index.html
index c2dcc3e6..d417263c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,6 +4,7 @@
     <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/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <title>React App</title>
   </head>
   <body>
diff --git a/src/assets/battery.svg b/src/assets/battery.svg
new file mode 100644
index 00000000..01beff5d
--- /dev/null
+++ b/src/assets/battery.svg
@@ -0,0 +1,5 @@
+<svg width="25" height="12" viewBox="0 0 25 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect opacity="0.35" x="0.838466" y="0.834804" width="21.0008" height="10.3341" rx="2.16493" stroke="#222222" stroke-width="0.999197"/>
+<path opacity="0.4" d="M23.3389 3.99927V7.99927C24.1436 7.66049 24.6669 6.8724 24.6669 5.99927C24.6669 5.12613 24.1436 4.33804 23.3389 3.99927Z" fill="#222222"/>
+<rect x="2.33887" y="2.33563" width="18" height="7.33334" rx="1.33226" fill="#222222"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/networkImg.svg b/src/assets/networkImg.svg
new file mode 100644
index 00000000..ddea4e75
--- /dev/null
+++ b/src/assets/networkImg.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="12" viewBox="0 0 17 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.001 0.660889H15.001C14.4487 0.660889 14.001 1.1086 14.001 1.66089V10.3276C14.001 10.8798 14.4487 11.3276 15.001 11.3276H16.001C16.5532 11.3276 17.0009 10.8798 17.0009 10.3276V1.66089C17.0009 1.1086 16.5532 0.660889 16.001 0.660889ZM10.3367 2.9965H11.3367C11.889 2.9965 12.3367 3.44422 12.3367 3.9965V10.3298C12.3367 10.8821 11.889 11.3298 11.3367 11.3298H10.3367C9.78445 11.3298 9.33673 10.8821 9.33673 10.3298V3.9965C9.33673 3.44422 9.78445 2.9965 10.3367 2.9965ZM6.666 5.32492H5.66601C5.11373 5.32492 4.66602 5.77264 4.66602 6.32492V10.3249C4.66602 10.8772 5.11373 11.3249 5.66601 11.3249H6.666C7.21827 11.3249 7.66599 10.8772 7.66599 10.3249V6.32492C7.66599 5.77264 7.21827 5.32492 6.666 5.32492ZM2.001 7.32512H1.00099C0.448696 7.32512 0.000976562 7.77284 0.000976562 8.32512V10.3251C0.000976562 10.8774 0.448696 11.3251 1.00099 11.3251H2.001C2.55329 11.3251 3.00101 10.8774 3.00101 10.3251V8.32512C3.00101 7.77284 2.55329 7.32512 2.001 7.32512Z" fill="#222222"/>
+</svg>
diff --git a/src/assets/wifiImg.svg b/src/assets/wifiImg.svg
new file mode 100644
index 00000000..e6c4572a
--- /dev/null
+++ b/src/assets/wifiImg.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.66608 2.61175C9.89081 2.61185 12.0305 3.46596 13.6428 4.99755C13.7642 5.11579 13.9583 5.1143 14.0779 4.99421L15.2385 3.82388C15.299 3.76296 15.3328 3.68045 15.3323 3.5946C15.3318 3.50876 15.2971 3.42665 15.2358 3.36644C11.0039 -0.685787 4.32759 -0.685787 0.0956799 3.36644C0.0343778 3.4266 -0.000404289 3.50869 -0.000969564 3.59453C-0.00153484 3.68038 0.0321633 3.76292 0.0926679 3.82388L1.25361 4.99421C1.37312 5.11448 1.56733 5.11598 1.68867 4.99755C3.30123 3.46586 5.44114 2.61174 7.66608 2.61175ZM7.66816 6.41792C8.8905 6.41785 10.0692 6.8718 10.9753 7.69157C11.0978 7.80792 11.2909 7.8054 11.4104 7.68589L12.5696 6.51556C12.6307 6.45417 12.6646 6.37089 12.6637 6.28436C12.6628 6.19782 12.6272 6.11525 12.5649 6.05512C9.80579 3.49071 5.53287 3.49071 2.77371 6.05512C2.71138 6.11525 2.67582 6.19786 2.675 6.28443C2.67418 6.37099 2.70818 6.45426 2.76935 6.51556L3.92829 7.68589C4.04776 7.8054 4.24081 7.80792 4.36336 7.69157C5.26883 6.87234 6.44662 6.41843 7.66816 6.41792ZM9.98745 8.98375C9.98923 9.07053 9.95508 9.1542 9.89308 9.21499L7.88778 11.237C7.829 11.2964 7.74886 11.3299 7.66523 11.3299C7.58161 11.3299 7.50147 11.2964 7.44268 11.237L5.43705 9.21499C5.37509 9.15415 5.34101 9.07046 5.34284 8.98368C5.34468 8.8969 5.38228 8.81473 5.44675 8.75656C6.72741 7.67429 8.60305 7.67429 9.88371 8.75656C9.94814 8.81477 9.98568 8.89698 9.98745 8.98375Z" fill="#222222"/>
+</svg>
diff --git a/src/components/navBar.tsx b/src/components/navBar.tsx
index 4ea4a656..c8554f07 100644
--- a/src/components/navBar.tsx
+++ b/src/components/navBar.tsx
@@ -1,9 +1,46 @@
-const navBar: React.FC = () => {
+import React, { useState, useEffect } from 'react';
+
+const NavBar: React.FC = () => {
+    const [time, setTime] = useState<string>("");
+
+    // 시간 업데이트 함수
+    const updateTime = () => {
+        const currentTime = new Date();
+        let hours = currentTime.getHours(); // H
+        const minutes = currentTime.getMinutes().toString().padStart(2, '0'); // 분
+
+        // 12시간 형식으로 변환
+        hours = hours % 12;
+        hours = hours ? hours : 12; // 0시를 12시로 변환
+
+        const newTime = `${hours.toString().padStart(2, '0')}:${minutes}`;
+        setTime(newTime); // 시간 초기화
+    };
+
+    // 1분마다 시간 업데이트
+    useEffect(() => {
+        updateTime(); // 첫 랜더링시 호출
+        const intervalId = setInterval(updateTime, 60000); // 1분마다 업데이트
+
+        return () => clearInterval(intervalId);
+        // 컴포넌트가 언마운트될 때 인터벌 제거.. 사실 자세히 모르겠음 다시 공부해보자
+    }, []);
+
     return (
-        <div>
-            navBar : 시간, 와이파이 등
+        <div className="w-full flex justify-between items-center p-2">
+            {/* 시간 표시 */}
+            <div className="text-lg font-medium">
+                {time} 
+            </div>
+
+            {/* 우측 아이콘 표시 */}
+            <div className="flex space-x-2">
+                <img src="/assets/networkImg.svg" alt="Signal" className="w-5 h-5" />
+                <img src="/assets/wifiImg.svg" alt="WiFi" className="w-5 h-5" />
+                <img src="/assets/battery.svg" alt="Battery" className="w-5 h-5" />
+            </div>
         </div>
-  );
+    );
 };
 
-export default navBar;
\ No newline at end of file
+export default NavBar;
diff --git a/tailwind.config.js b/tailwind.config.js
index f913c122..eb91bc05 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,12 +1,12 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: [
+  ],
   theme: {
     extend: {
       colors: {
-        aliceblue: '#f0f8ff',
+        aliceblue: '#f0f8ff', /* 색상 커스텀 가능한듯 */
       }
-
     },
   },
   plugins: [],
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 00000000..87dcb34e
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/,
+        use: 'file-loader',
+      },
+    ],
+  },
+};

From 796ee334260eac3858e3f6256e1effc768c0bb81 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 21:57:17 +0900
Subject: [PATCH 05/25] =?UTF-8?q?feat:=20=EC=82=AC=EC=9A=A9=EC=9E=90?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EB=9E=9C=EB=8D=94=EB=A7=81=20?=
 =?UTF-8?q?=EB=90=98=EB=8A=94=20=EA=B2=83=20=EB=B3=80=EA=B2=BD=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chatHeader.tsx      | 13 ++++++
 src/components/dateDivider.tsx     | 18 +++++---
 src/components/myMessageBox.tsx    | 20 ++++++---
 src/components/navBar.tsx          |  6 +--
 src/components/otherMessageBox.tsx | 20 ++++++---
 src/data/chatData.json             | 33 +++++++++-----
 src/pages/chatRoom.tsx             | 71 ++++++++++++++++++++++++++----
 tailwind.config.js                 |  3 ++
 8 files changed, 143 insertions(+), 41 deletions(-)
 create mode 100644 src/components/chatHeader.tsx

diff --git a/src/components/chatHeader.tsx b/src/components/chatHeader.tsx
new file mode 100644
index 00000000..df8c2426
--- /dev/null
+++ b/src/components/chatHeader.tsx
@@ -0,0 +1,13 @@
+const chatHeader: React.FC = () => {
+    return (
+        <div className="h-11 flex">
+            <img src={require('../assets/backArrowImg.svg').default} alt="backArrowImg" />
+            <div>
+                김나나
+            </div>
+            <img src={require('../assets/morePointImg.svg').default} alt="morePointImg" />
+        </div>
+  );
+};
+
+export default chatHeader;
\ No newline at end of file
diff --git a/src/components/dateDivider.tsx b/src/components/dateDivider.tsx
index bbb99a10..d69aeef9 100644
--- a/src/components/dateDivider.tsx
+++ b/src/components/dateDivider.tsx
@@ -1,9 +1,15 @@
-const dateDivider: React.FC = () => {
-    return (
-        <div className="dateDivider">
-            2024.09.11 수요일
-        </div>
+// DateDivider 컴포넌트에 전달되는 props 타입 정의
+type DateDividerProps = {
+  date: string;  // date prop을 문자열로 받을 수 있도록 설정
+};
+
+// DateDivider 컴포넌트: 날짜 구분자를 표시
+const DateDivider: React.FC<DateDividerProps> = ({ date }) => {
+  return (
+    <div className="text-gray-500 text-center py-2">
+      {date}
+    </div>
   );
 };
 
-export default dateDivider;
\ No newline at end of file
+export default DateDivider;
diff --git a/src/components/myMessageBox.tsx b/src/components/myMessageBox.tsx
index b7a485ec..7160dfce 100644
--- a/src/components/myMessageBox.tsx
+++ b/src/components/myMessageBox.tsx
@@ -1,9 +1,17 @@
-const myMessageBox: React.FC = () => {
-    return (
-        <div>
-            내가 보낸 메세지
-        </div>
+// MyMessageBox 컴포넌트에 전달되는 props 타입 정의
+type MyMessageBoxProps = {
+  message: string;
+  timestamp: string;
+};
+
+// MyMessageBox 컴포넌트: 사용자가 보낸 메시지 표시
+const MyMessageBox: React.FC<MyMessageBoxProps> = ({ message, timestamp }) => {
+  return (
+    <div className="bg-blue-100 p-2 rounded-lg text-right">
+      <p>{message}</p>
+      <span className="text-xs text-gray-500">{timestamp}</span>
+    </div>
   );
 };
 
-export default myMessageBox;
\ No newline at end of file
+export default MyMessageBox;
diff --git a/src/components/navBar.tsx b/src/components/navBar.tsx
index c8554f07..a4ebca64 100644
--- a/src/components/navBar.tsx
+++ b/src/components/navBar.tsx
@@ -35,9 +35,9 @@ const NavBar: React.FC = () => {
 
             {/* 우측 아이콘 표시 */}
             <div className="flex space-x-2">
-                <img src="/assets/networkImg.svg" alt="Signal" className="w-5 h-5" />
-                <img src="/assets/wifiImg.svg" alt="WiFi" className="w-5 h-5" />
-                <img src="/assets/battery.svg" alt="Battery" className="w-5 h-5" />
+                <img src={require('../assets/networkImg.svg').default} alt="Battery" />
+                <img src={require('../assets/wifiImg.svg').default} alt="Battery" />
+                <img src={require('../assets/battery.svg').default} alt="Battery" />
             </div>
         </div>
     );
diff --git a/src/components/otherMessageBox.tsx b/src/components/otherMessageBox.tsx
index feaa5979..3e459dc4 100644
--- a/src/components/otherMessageBox.tsx
+++ b/src/components/otherMessageBox.tsx
@@ -1,9 +1,17 @@
-const otherMessageBox: React.FC = () => {
-    return (
-        <div>
-            상대가 보낸 메세지: 프로필 사진까지 같이 옴
-        </div>
+// OtherMessageBox 컴포넌트에 전달되는 props 타입 정의
+type OtherMessageBoxProps = {
+  message: string;
+  timestamp: string;
+};
+
+// OtherMessageBox 컴포넌트: 상대방이 보낸 메시지 표시
+const OtherMessageBox: React.FC<OtherMessageBoxProps> = ({ message, timestamp }) => {
+  return (
+    <div className="bg-gray-100 p-2 rounded-lg text-left">
+      <p>{message}</p>
+      <span className="text-xs text-gray-500">{timestamp}</span>
+    </div>
   );
 };
 
-export default otherMessageBox;
\ No newline at end of file
+export default OtherMessageBox;
diff --git a/src/data/chatData.json b/src/data/chatData.json
index 0cfa5c26..a0ecf5bf 100644
--- a/src/data/chatData.json
+++ b/src/data/chatData.json
@@ -1,17 +1,28 @@
 {
-  "users": [
-    {
-      "user_id": "",
-      "name": "",
-      "profile_picture": ""
-    }
-  ],
   "messages": [
     {
-      "message_id": "1",
-      "sender_id": "",
-      "message": "",
-      "timestamp": ""
+      "messageId": 1,
+      "senderId": 1,
+      "message": "나나야 우리 낼 모임 누구누구 온댔지?",
+      "timestamp": "2024.09.11 오후 9:47"
+    },
+    {
+      "messageId": 2,
+      "senderId": 2,
+      "message": "나랑 너랑 미미랑 오랜지랑 루비님이랑 로로님이랑 디디랑 음 그리고 또 누구였더라",
+      "timestamp": "2024.09.11 오후 9:47"
+    },
+    {
+      "messageId": 3,
+      "senderId": 2,
+      "message": "선우야 나 드디어 생일이다~",
+      "timestamp": "2024.09.12 오후 9:47"
+    },
+    {
+      "messageId": 4,
+      "senderId": 1,
+      "message": "생일 축하해 ㅎㅎ",
+      "timestamp": "2024.09.12 오후 9:48"
     }
   ]
 }
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 13feaeef..536903b6 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -1,26 +1,79 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import NavBar from '../components/navBar';
 import DateDivider from '../components/dateDivider';
 import MyMessageBox from '../components/myMessageBox';
 import OtherMessageBox from '../components/otherMessageBox';
 import ProfileButton from '../components/profileButton';
 import PlusButton from '../components/plusButton';
+import ChatHeader from '../components/chatHeader';
+import messagesData from '../data/chatData.json';
+
+// Message 타입 정의 : 타입 스크립트 쓰니까 편하네요!!!
+type Message = {
+    messageId: number;
+    // 메세지 아이디를 따로 저장해두면 좋을 것 같아서 일단 넣어줬습니다! 습관 비스무리한..
+    senderId: number;
+    // 사용자 전환 시 메세지 디자인도 변경도 변경됩니다. 이를 위해 senderId를 넣어줬습니다!
+    message: string;
+    // 메세지 내용은 string으로 저장했습니다!
+    timestamp: string;
+    // 일단 시간을 데이터로 저장하기 위해 string으로 저장했습니다!
+};
 
 const ChatRoom: React.FC = () => {
+    // 현재 사용자 ID 상태 (기본값: 1)
+    const [userId, setUserId] = useState<number>(1);
+
+    // 메시지 데이터 상태 (초기값: 빈 배열)
+    const [messages, setMessages] = useState<Message[]>([]);
+
+    // 컴포넌트 첫 랜더링시 JSON 데이터를 상태에 설정함
+    useEffect(() => {
+        setMessages(messagesData.messages);
+    }, []);
+
+    // 버튼 클릭 시 사용자 ID 변경
+    const toggleUserId = () => {
+        setUserId(userId === 1 ? 2 : 1);
+    };
+
     return (
         <div className="w-full h-full flex flex-col">
             <NavBar />
-            <div className="h-11 flex">
-                백버튼 김나나 점
-            </div>
-            <div className="flex-grow bg-aliceblue">
-                <DateDivider />
-                <MyMessageBox />
-                <ProfileButton />
-                <OtherMessageBox />
+            <ChatHeader />
+
+            {/* 채팅 메세지 메인 Body */ }
+            <div className="flex-grow bg-aliceblue p-4">
+                {/* 메시지 리스트 순회하면서 각각 렌더링 */}
+                {messages.map((message) => (
+                <div key={message.messageId}>
+                    {/* 날짜 구분자 (timestamp에서 날짜 부분만 추출되도록 일단 했습니다!) */}
+                    <DateDivider date={message.timestamp.split(' ')[0]} />
+                    
+                    {/* senderId와 userId 동일 여부에 따라 메시지 박스를 렌더링했습니다! */}
+                    {message.senderId === userId ? (
+                    <MyMessageBox message={message.message} timestamp={message.timestamp} />
+                    ) : (
+                    <OtherMessageBox message={message.message} timestamp={message.timestamp} />
+                    )}
+
+                    {/* 상대방 메시지일 때만 메시지 아래에 프로필이 렌더링 되도록 했습니다! */}
+                    {message.senderId !== userId && <ProfileButton />}
+                        
+                    
+                </div>
+                ))}
+
+                {/* 임시로 유저 Id 변경 버튼을 만들었습니다! 이 기능을 다른 버튼에 넣으면 될듯합니다 */}
+                    <button onClick={toggleUserId} className="bg-gray-200 p-2">
+                    {userId === 1 ? "Switch to User 2" : "Switch to User 1"}
+                    </button>
             </div>
+
+            {/* 하단 입력 영역 */}
             <div className="h-16">
                 <PlusButton />
+                <div>메시지 입력하기</div>
             </div>
         </div>
     );
diff --git a/tailwind.config.js b/tailwind.config.js
index eb91bc05..eade96ac 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,6 +4,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        sans: ['"Apple SD Gothic Neo"', 'sans-serif'],
+      },
       colors: {
         aliceblue: '#f0f8ff', /* 색상 커스텀 가능한듯 */
       }

From fb60e8dd177031846f0f4800a0d9141e02320827 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 22:18:35 +0900
Subject: [PATCH 06/25] =?UTF-8?q?feat:=20=EB=A9=94=EC=84=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=A0=84=EC=86=A1=20=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/shopIcon.svg  |  3 +++
 src/assets/smileIcon.svg |  3 +++
 src/pages/chatRoom.tsx   | 46 +++++++++++++++++++++++++++++++++++++---
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/shopIcon.svg
 create mode 100644 src/assets/smileIcon.svg

diff --git a/src/assets/shopIcon.svg b/src/assets/shopIcon.svg
new file mode 100644
index 00000000..54a9db8d
--- /dev/null
+++ b/src/assets/shopIcon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 5.03901H13.35L13.9842 1.27353C14.0317 0.991707 13.9736 0.701046 13.8226 0.46549C13.6716 0.229933 13.4402 0.068775 13.1792 0.0174695C12.9181 -0.033836 12.6489 0.0289133 12.4308 0.191913C12.2126 0.354913 12.0634 0.604812 12.0158 0.886634L11.3167 5.03901H8.01667L8.65083 1.27353C8.67436 1.13399 8.6722 0.990803 8.64448 0.85216C8.61676 0.713516 8.56402 0.582125 8.48927 0.46549C8.41452 0.348854 8.31922 0.249257 8.20882 0.172385C8.09842 0.0955138 7.97508 0.0428734 7.84583 0.0174695C7.71659 -0.0079344 7.58398 -0.00560441 7.45557 0.0243267C7.32716 0.0542578 7.20547 0.111204 7.09745 0.191913C6.87928 0.354913 6.73002 0.604812 6.6825 0.886634L5.98333 5.03901H2.33333C2.06812 5.03901 1.81376 5.15276 1.62623 5.35525C1.43869 5.55773 1.33333 5.83236 1.33333 6.11872C1.33333 6.40507 1.43869 6.6797 1.62623 6.88218C1.81376 7.08467 2.06812 7.19842 2.33333 7.19842H5.62L5.01417 10.7974H1C0.734784 10.7974 0.48043 10.9112 0.292893 11.1137C0.105357 11.3162 0 11.5908 0 11.8772C0 12.1635 0.105357 12.4381 0.292893 12.6406C0.48043 12.8431 0.734784 12.9569 1 12.9569H4.65L4.01583 16.7223C3.99178 16.8622 3.99353 17.0057 4.02101 17.1448C4.04848 17.2839 4.10113 17.4157 4.17593 17.5328C4.25073 17.6498 4.3462 17.7497 4.45688 17.8268C4.56755 17.9039 4.69123 17.9567 4.82083 17.982C4.88003 17.9926 4.94002 17.9971 5 17.9955C5.23418 17.9953 5.46087 17.9064 5.64057 17.7443C5.82027 17.5822 5.94157 17.3571 5.98333 17.1083L6.68333 12.9569H9.98333L9.34917 16.7223C9.32511 16.8622 9.32687 17.0057 9.35434 17.1448C9.38181 17.2839 9.43446 17.4157 9.50926 17.5328C9.58406 17.6498 9.67954 17.7497 9.79021 17.8268C9.90088 17.9039 10.0246 17.9567 10.1542 17.982C10.2135 17.9941 10.2738 18.0002 10.3342 18C10.5683 17.9998 10.795 17.9109 10.9747 17.7488C11.1544 17.5867 11.2757 17.3616 11.3175 17.1128L12.0167 12.9569H15.6667C15.9319 12.9569 16.1862 12.8431 16.3738 12.6406C16.5613 12.4381 16.6667 12.1635 16.6667 11.8772C16.6667 11.5908 16.5613 11.3162 16.3738 11.1137C16.1862 10.9112 15.9319 10.7974 15.6667 10.7974H12.38L12.9858 7.19842H17C17.2652 7.19842 17.5196 7.08467 17.7071 6.88218C17.8946 6.6797 18 6.40507 18 6.11872C18 5.83236 17.8946 5.55773 17.7071 5.35525C17.5196 5.15276 17.2652 5.03901 17 5.03901ZM10.3475 10.7974H7.04667L7.6525 7.19842H10.9533L10.3475 10.7974Z" fill="#B0B8C1"/>
+</svg>
diff --git a/src/assets/smileIcon.svg b/src/assets/smileIcon.svg
new file mode 100644
index 00000000..24c707db
--- /dev/null
+++ b/src/assets/smileIcon.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0C7.21997 0 5.47991 0.527841 3.99987 1.51677C2.51983 2.50571 1.36628 3.91131 0.685088 5.55585C0.00389956 7.20038 -0.17433 9.00998 0.172936 10.7558C0.520203 12.5016 1.37737 14.1053 2.63604 15.364C3.89471 16.6226 5.49836 17.4798 7.24419 17.8271C8.99002 18.1743 10.7996 17.9961 12.4442 17.3149C14.0887 16.6337 15.4943 15.4802 16.4832 14.0001C17.4722 12.5201 18 10.78 18 9C17.9975 6.61382 17.0485 4.3261 15.3612 2.63882C13.6739 0.95154 11.3862 0.00251984 9 0ZM5.88462 6.23077C6.09001 6.23077 6.29078 6.29167 6.46156 6.40578C6.63233 6.51989 6.76543 6.68207 6.84403 6.87183C6.92263 7.06158 6.94319 7.27038 6.90313 7.47182C6.86306 7.67326 6.76415 7.8583 6.61892 8.00353C6.47369 8.14876 6.28865 8.24767 6.08721 8.28774C5.88577 8.32781 5.67697 8.30724 5.48722 8.22864C5.29746 8.15004 5.13528 8.01694 5.02117 7.84617C4.90706 7.67539 4.84616 7.47462 4.84616 7.26923C4.84616 6.99381 4.95557 6.72968 5.15031 6.53493C5.34506 6.34018 5.6092 6.23077 5.88462 6.23077ZM13.0604 11.4231C12.1699 12.9626 10.6901 13.8462 9 13.8462C7.30991 13.8462 5.8301 12.9635 4.93962 11.4231C4.88953 11.3443 4.85589 11.2562 4.84074 11.164C4.82558 11.0719 4.82922 10.9776 4.85144 10.887C4.87365 10.7963 4.91398 10.711 4.97 10.6363C5.02602 10.5616 5.09657 10.499 5.17741 10.4523C5.25824 10.4056 5.3477 10.3757 5.44039 10.3644C5.53308 10.3532 5.62709 10.3608 5.71676 10.3868C5.80643 10.4128 5.88992 10.4567 5.96219 10.5158C6.03446 10.5749 6.09403 10.648 6.13731 10.7308C6.78375 11.848 7.79971 12.4615 9 12.4615C10.2003 12.4615 11.2163 11.8471 11.8627 10.7308C11.906 10.648 11.9655 10.5749 12.0378 10.5158C12.1101 10.4567 12.1936 10.4128 12.2832 10.3868C12.3729 10.3608 12.4669 10.3532 12.5596 10.3644C12.6523 10.3757 12.7418 10.4056 12.8226 10.4523C12.9034 10.499 12.974 10.5616 13.03 10.6363C13.086 10.711 13.1264 10.7963 13.1486 10.887C13.1708 10.9776 13.1744 11.0719 13.1593 11.164C13.1441 11.2562 13.1105 11.3443 13.0604 11.4231ZM12.1154 8.30769C11.91 8.30769 11.7092 8.24679 11.5384 8.13268C11.3677 8.01857 11.2346 7.85639 11.156 7.66663C11.0774 7.47688 11.0568 7.26808 11.0969 7.06664C11.1369 6.86519 11.2359 6.68016 11.3811 6.53493C11.5263 6.38969 11.7114 6.29079 11.9128 6.25072C12.1142 6.21065 12.323 6.23122 12.5128 6.30982C12.7025 6.38841 12.8647 6.52152 12.9788 6.69229C13.0929 6.86307 13.1538 7.06384 13.1538 7.26923C13.1538 7.54465 13.0444 7.80878 12.8497 8.00353C12.6549 8.19828 12.3908 8.30769 12.1154 8.30769Z" fill="#B0B8C1"/>
+</svg>
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 536903b6..bf9cf2be 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -37,6 +37,37 @@ const ChatRoom: React.FC = () => {
         setUserId(userId === 1 ? 2 : 1);
     };
 
+    // 입력된 메시지 상태 (메시지 입력값 저장)
+    const [inputMessage, setInputMessage] = useState<string>("");
+
+    // 메시지 입력 시 마다 호출됨 (input 값 변화 추적)
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setInputMessage(e.target.value);
+        // 인풋의 value를 그대로 추적해서 inputMessage 상태에 담습니다!
+    };
+
+    // Enter 키 입력 시 메시지를 상태에 추가함 (사실 전송의 기능을 수행합니다!)
+    const sendMessage = (e: React.KeyboardEvent<HTMLInputElement>) => {
+        if (e.key === 'Enter' && inputMessage.trim()) {
+            // 현재 시간을 타임스탬프로 저장
+            const newTimestamp = new Date().toLocaleString();
+
+            // 입력된 메세지 기반으로 새 메세지를 생성합니다!
+            const newMessage: Message = {
+                messageId: messages.length + 1,  // 메시지 ID는 기존 메시지 수에 +1
+                senderId: userId,  // 현재 사용자 ID를 저장함
+                message: inputMessage,  // 입력된 메시지 내용 저장
+                timestamp: newTimestamp,  // 현재 시간
+            };
+
+            // 기존 메시지에 새 메시지 추가
+            setMessages([...messages, newMessage]);
+
+            // 입력창 초기화.. 까먹을뻔
+            setInputMessage("");
+        }
+    };
+
     return (
         <div className="w-full h-full flex flex-col">
             <NavBar />
@@ -60,7 +91,6 @@ const ChatRoom: React.FC = () => {
                     {/* 상대방 메시지일 때만 메시지 아래에 프로필이 렌더링 되도록 했습니다! */}
                     {message.senderId !== userId && <ProfileButton />}
                         
-                    
                 </div>
                 ))}
 
@@ -71,9 +101,19 @@ const ChatRoom: React.FC = () => {
             </div>
 
             {/* 하단 입력 영역 */}
-            <div className="h-16">
+            <div className="h-16 flex items-center px-4">
+                {/* 좌측의 추가 버튼 */}
                 <PlusButton />
-                <div>메시지 입력하기</div>
+
+                {/* 메시지 입력 영역 (Enter 키 입력 시 메시지 등록) */}
+                <input
+                    type="text"
+                    placeholder="메시지를 입력하세요"
+                    value={inputMessage}
+                    onChange={handleInputChange}  // onChange로 입력값 변경 추적
+                    onKeyDown={sendMessage}  // onKeyPress가 사용이 안된다네요? 왜지
+                    className="flex-grow p-2 border rounded"
+                />
             </div>
         </div>
     );

From fdc967f7b1c6a2927b1ab0272948bca2b3f34e65 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 22:36:24 +0900
Subject: [PATCH 07/25] =?UTF-8?q?feat:=20=EB=A9=94=EC=84=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=A0=84=EC=86=A1=20=EC=8B=9C=20=ED=95=98=EB=8B=A8=20=EC=8A=A4?=
 =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/chatRoom.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index bf9cf2be..88c8badf 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import NavBar from '../components/navBar';
 import DateDivider from '../components/dateDivider';
 import MyMessageBox from '../components/myMessageBox';
@@ -46,6 +46,19 @@ const ChatRoom: React.FC = () => {
         // 인풋의 value를 그대로 추적해서 inputMessage 상태에 담습니다!
     };
 
+    // 스크롤을 적용을 위한 useRef. DOM 조작에는 Ref가 제일 효율적이라고 하네요!
+    const messageScrollRef = useRef<HTMLDivElement>(null);
+
+    // 메시지 전송 시 스크롤 하단 이동
+    const scrollToBottom = () => {
+        messageScrollRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    // 메시지 추가 시 (전송 시) 스크롤 하단 이동 함수 실행
+    useEffect(() => {
+        scrollToBottom();
+    }, [messages]);
+
     // Enter 키 입력 시 메시지를 상태에 추가함 (사실 전송의 기능을 수행합니다!)
     const sendMessage = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter' && inputMessage.trim()) {
@@ -74,7 +87,7 @@ const ChatRoom: React.FC = () => {
             <ChatHeader />
 
             {/* 채팅 메세지 메인 Body */ }
-            <div className="flex-grow bg-aliceblue p-4">
+            <div className="flex-grow bg-aliceblue p-4 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 160px)' }}>
                 {/* 메시지 리스트 순회하면서 각각 렌더링 */}
                 {messages.map((message) => (
                 <div key={message.messageId}>
@@ -98,6 +111,9 @@ const ChatRoom: React.FC = () => {
                     <button onClick={toggleUserId} className="bg-gray-200 p-2">
                     {userId === 1 ? "Switch to User 2" : "Switch to User 1"}
                     </button>
+
+                {/* 스크롤 하단 이동을 위한 빈 태그 '타겟 요소'. 메세지 추가시 이 요소로 스크롤이 이동됨! */}
+                <div ref={messageScrollRef} />
             </div>
 
             {/* 하단 입력 영역 */}

From 468dbb354f93b3cc6f4a355dbf3f6e666d83d95a Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 23:28:23 +0900
Subject: [PATCH 08/25] =?UTF-8?q?feat:=20DateDivider=20=EB=9E=9C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81=20=EC=A1=B0=EA=B1=B4=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 날짜가 다른 경우에만 Date Divider 랜더링되도록
2. 날짜 안 나오는거 수정
---
 src/pages/chatRoom.tsx | 57 +++++++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 88c8badf..0619cc43 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -63,7 +63,8 @@ const ChatRoom: React.FC = () => {
     const sendMessage = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter' && inputMessage.trim()) {
             // 현재 시간을 타임스탬프로 저장
-            const newTimestamp = new Date().toLocaleString();
+            const now = new Date();
+            const newTimestamp = `${formatDate(now)}`;  // 날짜와 시간 저장
 
             // 입력된 메세지 기반으로 새 메세지를 생성합니다!
             const newMessage: Message = {
@@ -81,6 +82,17 @@ const ChatRoom: React.FC = () => {
         }
     };
 
+    // 이전 메시지의 날짜를 추적할 변수 (컴포넌트 외부에서 관리)
+    let previousDate = "";
+
+    // 날짜를 yyyy.MM.dd 형식으로 변환하는 함수
+    const formatDate = (date: Date) => {
+        const year = date.getFullYear();
+        const month = (date.getMonth() + 1).toString().padStart(2, '0');  // 2자리 월
+        const day = date.getDate().toString().padStart(2, '0');  // 2자리 일
+        return `${year}.${month}.${day}`;
+    };
+
     return (
         <div className="w-full h-full flex flex-col">
             <NavBar />
@@ -89,28 +101,33 @@ const ChatRoom: React.FC = () => {
             {/* 채팅 메세지 메인 Body */ }
             <div className="flex-grow bg-aliceblue p-4 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 160px)' }}>
                 {/* 메시지 리스트 순회하면서 각각 렌더링 */}
-                {messages.map((message) => (
-                <div key={message.messageId}>
-                    {/* 날짜 구분자 (timestamp에서 날짜 부분만 추출되도록 일단 했습니다!) */}
-                    <DateDivider date={message.timestamp.split(' ')[0]} />
-                    
-                    {/* senderId와 userId 동일 여부에 따라 메시지 박스를 렌더링했습니다! */}
-                    {message.senderId === userId ? (
-                    <MyMessageBox message={message.message} timestamp={message.timestamp} />
-                    ) : (
-                    <OtherMessageBox message={message.message} timestamp={message.timestamp} />
-                    )}
-
-                    {/* 상대방 메시지일 때만 메시지 아래에 프로필이 렌더링 되도록 했습니다! */}
-                    {message.senderId !== userId && <ProfileButton />}
-                        
-                </div>
-                ))}
+                {messages.map((message) => {
+                    const currentDate = message.timestamp.split(' ')[0];  // 날짜 부분만 추출
+                    const showDateDivider = currentDate !== previousDate;  // 날짜가 다르면 DateDivider 렌더링
+                    previousDate = currentDate;  // 이전 날짜 업데이트
+
+                    return (
+                        <div key={message.messageId}>
+                            {/* 날짜 구분자 (현재 날짜와 이전 메시지 날짜가 다를 때만 렌더링) */}
+                            {showDateDivider && <DateDivider date={currentDate} />}
+
+                            {/* senderId와 userId 동일 여부에 따라 메시지 박스를 렌더링했습니다! */}
+                            {message.senderId === userId ? (
+                                <MyMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
+                            ) : (
+                                <OtherMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
+                            )}
+
+                            {/* 상대방 메시지일 때만 메시지 아래에 프로필이 렌더링 되도록 했습니다! */}
+                            {message.senderId !== userId && <ProfileButton />}
+                        </div>
+                    );
+                })}
 
                 {/* 임시로 유저 Id 변경 버튼을 만들었습니다! 이 기능을 다른 버튼에 넣으면 될듯합니다 */}
-                    <button onClick={toggleUserId} className="bg-gray-200 p-2">
+                <button onClick={toggleUserId} className="bg-gray-200 p-2">
                     {userId === 1 ? "Switch to User 2" : "Switch to User 1"}
-                    </button>
+                </button>
 
                 {/* 스크롤 하단 이동을 위한 빈 태그 '타겟 요소'. 메세지 추가시 이 요소로 스크롤이 이동됨! */}
                 <div ref={messageScrollRef} />

From 6cbb0fabbe748aacb5bf1f240011012b8d0fa50d Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Fri, 27 Sep 2024 23:41:45 +0900
Subject: [PATCH 09/25] =?UTF-8?q?style:=20=EB=A9=94=EC=84=B8=EC=A7=80?=
 =?UTF-8?q?=EB=B0=95=EC=8A=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chatHeader.tsx      | 29 +++++++++++++++++++----------
 src/components/myMessageBox.tsx    | 17 +++++++++++------
 src/components/otherMessageBox.tsx | 25 +++++++++++++++++++------
 src/components/profileButton.tsx   |  2 +-
 tailwind.config.js                 |  2 ++
 5 files changed, 52 insertions(+), 23 deletions(-)

diff --git a/src/components/chatHeader.tsx b/src/components/chatHeader.tsx
index df8c2426..457aadbe 100644
--- a/src/components/chatHeader.tsx
+++ b/src/components/chatHeader.tsx
@@ -1,13 +1,22 @@
-const chatHeader: React.FC = () => {
+const ChatHeader: React.FC = () => {
     return (
-        <div className="h-11 flex">
-            <img src={require('../assets/backArrowImg.svg').default} alt="backArrowImg" />
-            <div>
-                김나나
-            </div>
-            <img src={require('../assets/morePointImg.svg').default} alt="morePointImg" />
-        </div>
-  );
+        <div className="h-11 flex justify-between items-center px-4">
+        {/* 왼쪽 뒤로가기 버튼 */}
+        <div className="flex items-center">
+            <img src={require('../assets/backArrowImg.svg').default} alt="backArrowImg" className="w-4 h-4" />
+        </div>
+
+        {/* 중앙 이름 */}
+        <div className="text-lg font-semibold">
+            김나나
+        </div>
+
+        {/* 오른쪽 더보기 버튼 */}
+        <div className="flex items-center">
+            <img src={require('../assets/morePointImg.svg').default} alt="morePointImg" className="w-4 h-4" />
+        </div>
+        </div>
+    );
 };
 
-export default chatHeader;
\ No newline at end of file
+export default ChatHeader;
diff --git a/src/components/myMessageBox.tsx b/src/components/myMessageBox.tsx
index 7160dfce..8b94b538 100644
--- a/src/components/myMessageBox.tsx
+++ b/src/components/myMessageBox.tsx
@@ -6,12 +6,17 @@ type MyMessageBoxProps = {
 
 // MyMessageBox 컴포넌트: 사용자가 보낸 메시지 표시
 const MyMessageBox: React.FC<MyMessageBoxProps> = ({ message, timestamp }) => {
-  return (
-    <div className="bg-blue-100 p-2 rounded-lg text-right">
-      <p>{message}</p>
-      <span className="text-xs text-gray-500">{timestamp}</span>
-    </div>
-  );
+    return (
+        <div className="flex justify-end mb-2">
+        {/* 타임스탬프 */}
+        <span className="text-xs text-gray-500 mr-2 self-end">{timestamp}</span>
+      
+        {/* 메시지 박스 */}
+        <div className="bg-yellow-100 text-gray-900 px-4 py-2 rounded-xl border border-yellow-300 max-w-xs">
+            <p className="text-sm">{message}</p>
+        </div>
+        </div>
+    );
 };
 
 export default MyMessageBox;
diff --git a/src/components/otherMessageBox.tsx b/src/components/otherMessageBox.tsx
index 3e459dc4..e05b5e70 100644
--- a/src/components/otherMessageBox.tsx
+++ b/src/components/otherMessageBox.tsx
@@ -6,12 +6,25 @@ type OtherMessageBoxProps = {
 
 // OtherMessageBox 컴포넌트: 상대방이 보낸 메시지 표시
 const OtherMessageBox: React.FC<OtherMessageBoxProps> = ({ message, timestamp }) => {
-  return (
-    <div className="bg-gray-100 p-2 rounded-lg text-left">
-      <p>{message}</p>
-      <span className="text-xs text-gray-500">{timestamp}</span>
-    </div>
-  );
+    return (
+      <div className="flex items-start mb-3">
+        {/* 프로필 아이콘 */}
+        <div className="flex-shrink-0 mr-2">
+          <div className="w-8 h-8 bg-yellow-200 rounded-full flex items-center justify-center">
+            {/* 프로필 아이콘 이미지 대신 아이콘 모양 */}
+            <svg className="w-4 h-4 text-yellow-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+            </svg>
+          </div>
+        </div>
+
+        {/* 메시지 박스 */}
+        <div className="bg-gray-100 p-3 rounded-lg text-left max-w-xs">
+          <p className="text-sm">{message}</p>
+          <span className="text-xs text-gray-500">{timestamp}</span>
+        </div>
+      </div>
+    );
 };
 
 export default OtherMessageBox;
diff --git a/src/components/profileButton.tsx b/src/components/profileButton.tsx
index 5a8bde06..c4b81e8e 100644
--- a/src/components/profileButton.tsx
+++ b/src/components/profileButton.tsx
@@ -1,7 +1,7 @@
 const profileButton: React.FC = () => {
     return (
         <div>
-            profileButton
+            *
         </div>
   );
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index eade96ac..afadf7b9 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,6 +9,8 @@ module.exports = {
       },
       colors: {
         aliceblue: '#f0f8ff', /* 색상 커스텀 가능한듯 */
+        mainYellow: 'rgba(239, 213, 70, 1)',
+        paleYellow: 'rgba(255, 252, 223, 1)',
       }
     },
   },

From 2b60e0e513973781ed88a5b188f567303666928a Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 28 Sep 2024 14:12:55 +0900
Subject: [PATCH 10/25] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=82=AC=EC=9A=A9=EC=9E=90=20?=
 =?UTF-8?q?=EC=A0=84=ED=99=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/defaultProfileImg.svg   |  9 +++++----
 src/assets/myProfileImg.svg        |  5 +++++
 src/components/otherMessageBox.tsx |  9 ---------
 src/components/profileButton.tsx   | 26 ++++++++++++++++++++------
 src/pages/chatRoom.tsx             | 14 ++++++--------
 5 files changed, 36 insertions(+), 27 deletions(-)
 create mode 100644 src/assets/myProfileImg.svg

diff --git a/src/assets/defaultProfileImg.svg b/src/assets/defaultProfileImg.svg
index 3b072888..5d953bce 100644
--- a/src/assets/defaultProfileImg.svg
+++ b/src/assets/defaultProfileImg.svg
@@ -1,4 +1,5 @@
-<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.05078 7.60241C11.114 7.60241 12.7865 5.92987 12.7865 3.86669C12.7865 1.80352 11.114 0.130981 9.05078 0.130981C6.9876 0.130981 5.31506 1.80352 5.31506 3.86669C5.31506 5.92987 6.9876 7.60241 9.05078 7.60241Z" fill="#EFD546"/>
-<path d="M15.8132 18.3797C16.9804 18.3797 17.9049 17.4031 17.6528 16.3669C16.7283 12.5962 13.2546 9.79358 9.10852 9.79358C4.96246 9.79358 1.49808 12.5962 0.564281 16.3669C0.312155 17.4031 1.22728 18.3797 2.40386 18.3797H15.8132Z" fill="#EFD546"/>
-</svg>
\ No newline at end of file
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22.5" cy="22.5" r="22.25" fill="#FFFCDF" stroke="#EFD546" stroke-width="0.5"/>
+<path d="M21.9536 18.9758C24.4629 18.9758 26.497 16.9417 26.497 14.4324C26.497 11.9231 24.4629 9.88898 21.9536 9.88898C19.4443 9.88898 17.4102 11.9231 17.4102 14.4324C17.4102 16.9417 19.4443 18.9758 21.9536 18.9758Z" fill="#EFD546"/>
+<path d="M30.1782 32.0835C31.5978 32.0835 32.7221 30.8957 32.4155 29.6355C31.2912 25.0495 27.0664 21.6409 22.0239 21.6409C16.9814 21.6409 12.7679 25.0495 11.6322 29.6355C11.3256 30.8957 12.4386 32.0835 13.8695 32.0835H30.1782Z" fill="#EFD546"/>
+</svg>
diff --git a/src/assets/myProfileImg.svg b/src/assets/myProfileImg.svg
new file mode 100644
index 00000000..c98be5c7
--- /dev/null
+++ b/src/assets/myProfileImg.svg
@@ -0,0 +1,5 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22.5" cy="22.5" r="22.5" fill="#EFD546"/>
+<path d="M21.9536 18.9758C24.4629 18.9758 26.497 16.9417 26.497 14.4324C26.497 11.9231 24.4629 9.88898 21.9536 9.88898C19.4443 9.88898 17.4102 11.9231 17.4102 14.4324C17.4102 16.9417 19.4443 18.9758 21.9536 18.9758Z" fill="#FFFCDF"/>
+<path d="M30.1782 32.0835C31.5978 32.0835 32.7221 30.8957 32.4155 29.6355C31.2912 25.0495 27.0664 21.6409 22.0239 21.6409C16.9814 21.6409 12.7679 25.0495 11.6322 29.6355C11.3256 30.8957 12.4386 32.0835 13.8695 32.0835H30.1782Z" fill="#FFFCDF"/>
+</svg>
diff --git a/src/components/otherMessageBox.tsx b/src/components/otherMessageBox.tsx
index e05b5e70..4981fe6c 100644
--- a/src/components/otherMessageBox.tsx
+++ b/src/components/otherMessageBox.tsx
@@ -8,15 +8,6 @@ type OtherMessageBoxProps = {
 const OtherMessageBox: React.FC<OtherMessageBoxProps> = ({ message, timestamp }) => {
     return (
       <div className="flex items-start mb-3">
-        {/* 프로필 아이콘 */}
-        <div className="flex-shrink-0 mr-2">
-          <div className="w-8 h-8 bg-yellow-200 rounded-full flex items-center justify-center">
-            {/* 프로필 아이콘 이미지 대신 아이콘 모양 */}
-            <svg className="w-4 h-4 text-yellow-600" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
-            </svg>
-          </div>
-        </div>
 
         {/* 메시지 박스 */}
         <div className="bg-gray-100 p-3 rounded-lg text-left max-w-xs">
diff --git a/src/components/profileButton.tsx b/src/components/profileButton.tsx
index c4b81e8e..73d90e16 100644
--- a/src/components/profileButton.tsx
+++ b/src/components/profileButton.tsx
@@ -1,9 +1,23 @@
-const profileButton: React.FC = () => {
-    return (
-        <div>
-            *
-        </div>
+import React from 'react';
+
+interface ProfileButtonProps {
+  toggleUserId: () => void;
+}
+
+const ProfileButton: React.FC<ProfileButtonProps> = ({ toggleUserId }) => {
+  return (
+    <button
+      onClick={toggleUserId}
+      className="w-[45px] h-[45px] rounded-full bg-gray-200 flex items-center justify-center"
+    >
+      {/* 프로필 이미지 */}
+      <img
+        src={require('../assets/defaultProfileImg.svg').default}
+        alt="Profile"
+        className="w-[35px] h-[35px]"
+      />
+    </button>
   );
 };
 
-export default profileButton;
\ No newline at end of file
+export default ProfileButton;
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 0619cc43..4420fedd 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -3,10 +3,10 @@ import NavBar from '../components/navBar';
 import DateDivider from '../components/dateDivider';
 import MyMessageBox from '../components/myMessageBox';
 import OtherMessageBox from '../components/otherMessageBox';
-import ProfileButton from '../components/profileButton';
 import PlusButton from '../components/plusButton';
 import ChatHeader from '../components/chatHeader';
 import messagesData from '../data/chatData.json';
+import ProfileButton from '../components/profileButton';
 
 // Message 타입 정의 : 타입 스크립트 쓰니까 편하네요!!!
 type Message = {
@@ -119,20 +119,18 @@ const ChatRoom: React.FC = () => {
                             )}
 
                             {/* 상대방 메시지일 때만 메시지 아래에 프로필이 렌더링 되도록 했습니다! */}
-                            {message.senderId !== userId && <ProfileButton />}
+                            {message.senderId !== userId && <ProfileButton toggleUserId={toggleUserId} />}
+                            
                         </div>
+                        
                     );
                 })}
 
-                {/* 임시로 유저 Id 변경 버튼을 만들었습니다! 이 기능을 다른 버튼에 넣으면 될듯합니다 */}
-                <button onClick={toggleUserId} className="bg-gray-200 p-2">
-                    {userId === 1 ? "Switch to User 2" : "Switch to User 1"}
-                </button>
-
                 {/* 스크롤 하단 이동을 위한 빈 태그 '타겟 요소'. 메세지 추가시 이 요소로 스크롤이 이동됨! */}
                 <div ref={messageScrollRef} />
             </div>
 
+            
             {/* 하단 입력 영역 */}
             <div className="h-16 flex items-center px-4">
                 {/* 좌측의 추가 버튼 */}
@@ -152,4 +150,4 @@ const ChatRoom: React.FC = () => {
     );
 };
 
-export default ChatRoom;
+export default ChatRoom;
\ No newline at end of file

From 18f5fc3c359370dbcca2e702ccb26985d9ea5d47 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sun, 29 Sep 2024 13:49:51 +0900
Subject: [PATCH 11/25] =?UTF-8?q?style:=20=ED=8C=A8=EB=94=A9=20=EB=93=B1?=
 =?UTF-8?q?=20UI=20=EA=B7=9C=EA=B2=A9=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                  | 29 ++++++++-------
 src/components/chatHeader.tsx      | 26 +++++++-------
 src/components/dateDivider.tsx     | 11 ++++--
 src/components/myMessageBox.tsx    | 16 ++++-----
 src/components/navBar.tsx          | 10 +++---
 src/components/otherMessageBox.tsx |  6 ++--
 src/pages/chatRoom.tsx             | 57 +++++++++++++++---------------
 tailwind.config.js                 | 14 ++++++--
 8 files changed, 94 insertions(+), 75 deletions(-)

diff --git a/public/index.html b/public/index.html
index d417263c..c5c1141f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,14 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <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/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
-    <title>React App</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="../src/App.tsx" type="module"></script>
-  </body>
-</html>
+
+<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/tailwindcss@2.2.19/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>
+
+<body class="font-appleSD">
+  <div id="root"></div>
+  <script src="../src/App.tsx" type="module"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/components/chatHeader.tsx b/src/components/chatHeader.tsx
index 457aadbe..26b0e05c 100644
--- a/src/components/chatHeader.tsx
+++ b/src/components/chatHeader.tsx
@@ -1,20 +1,20 @@
 const ChatHeader: React.FC = () => {
     return (
-        <div className="h-11 flex justify-between items-center px-4">
-        {/* 왼쪽 뒤로가기 버튼 */}
-        <div className="flex items-center">
-            <img src={require('../assets/backArrowImg.svg').default} alt="backArrowImg" className="w-4 h-4" />
-        </div>
+        <div className="h-11 flex justify-between items-center px-5 py-2">
+            {/* 왼쪽 뒤로가기 버튼 */}
+            <div className="flex items-center">
+                <img src={require('../assets/backArrowImg.svg').default} alt="backArrowImg" className="w-6 h-6" />
+            </div>
 
-        {/* 중앙 이름 */}
-        <div className="text-lg font-semibold">
-            김나나
-        </div>
+            {/* 중앙 이름 */}
+            <div className="text-base font-semibold">
+                김나나
+            </div>
 
-        {/* 오른쪽 더보기 버튼 */}
-        <div className="flex items-center">
-            <img src={require('../assets/morePointImg.svg').default} alt="morePointImg" className="w-4 h-4" />
-        </div>
+            {/* 오른쪽 더보기 버튼 */}
+            <div className="flex items-center">
+                <img src={require('../assets/morePointImg.svg').default} alt="morePointImg" className="w-6 h-6" />
+            </div>
         </div>
     );
 };
diff --git a/src/components/dateDivider.tsx b/src/components/dateDivider.tsx
index d69aeef9..62ae5e86 100644
--- a/src/components/dateDivider.tsx
+++ b/src/components/dateDivider.tsx
@@ -6,8 +6,15 @@ type DateDividerProps = {
 // DateDivider 컴포넌트: 날짜 구분자를 표시
 const DateDivider: React.FC<DateDividerProps> = ({ date }) => {
   return (
-    <div className="text-gray-500 text-center py-2">
-      {date}
+    <div className="flex items-center justify-center w-full my-4">
+      {/* 왼쪽 선 */}
+      <div className="flex-grow border-t border-gray-200"></div>
+
+      {/* 날짜 텍스트 */}
+      <span className="px-2 text-gray-400 text-xs">{date}</span>
+
+      {/* 오른쪽 선 */}
+      <div className="flex-grow border-t border-gray-200"></div>
     </div>
   );
 };
diff --git a/src/components/myMessageBox.tsx b/src/components/myMessageBox.tsx
index 8b94b538..1b3ae400 100644
--- a/src/components/myMessageBox.tsx
+++ b/src/components/myMessageBox.tsx
@@ -7,14 +7,14 @@ type MyMessageBoxProps = {
 // MyMessageBox 컴포넌트: 사용자가 보낸 메시지 표시
 const MyMessageBox: React.FC<MyMessageBoxProps> = ({ message, timestamp }) => {
     return (
-        <div className="flex justify-end mb-2">
-        {/* 타임스탬프 */}
-        <span className="text-xs text-gray-500 mr-2 self-end">{timestamp}</span>
-      
-        {/* 메시지 박스 */}
-        <div className="bg-yellow-100 text-gray-900 px-4 py-2 rounded-xl border border-yellow-300 max-w-xs">
-            <p className="text-sm">{message}</p>
-        </div>
+        <div className="flex justify-end mb-2 py-2">
+            {/* 타임스탬프 */}
+            <span className="text-xs text-gray-400 mr-2 self-end">{timestamp}</span>
+        
+            {/* 메시지 박스 */}
+            <div className="bg-yellow-50 text-gray-900 px-4 py-2 rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl border border-yellow-200 max-w-xs">
+                <p className="text-sm font-semibold">{message}</p>
+            </div>
         </div>
     );
 };
diff --git a/src/components/navBar.tsx b/src/components/navBar.tsx
index a4ebca64..837d49f8 100644
--- a/src/components/navBar.tsx
+++ b/src/components/navBar.tsx
@@ -27,16 +27,16 @@ const NavBar: React.FC = () => {
     }, []);
 
     return (
-        <div className="w-full flex justify-between items-center p-2">
+        <div className="w-full flex justify-between items-center px-7 py-3">
             {/* 시간 표시 */}
-            <div className="text-lg font-medium">
-                {time} 
+            <div className="text-sm font-semibold px-1 ">
+                {time}
             </div>
 
             {/* 우측 아이콘 표시 */}
             <div className="flex space-x-2">
-                <img src={require('../assets/networkImg.svg').default} alt="Battery" />
-                <img src={require('../assets/wifiImg.svg').default} alt="Battery" />
+                <img src={require('../assets/networkImg.svg').default} alt="Network" />
+                <img src={require('../assets/wifiImg.svg').default} alt="WiFi" />
                 <img src={require('../assets/battery.svg').default} alt="Battery" />
             </div>
         </div>
diff --git a/src/components/otherMessageBox.tsx b/src/components/otherMessageBox.tsx
index 4981fe6c..ecbff555 100644
--- a/src/components/otherMessageBox.tsx
+++ b/src/components/otherMessageBox.tsx
@@ -10,9 +10,9 @@ const OtherMessageBox: React.FC<OtherMessageBoxProps> = ({ message, timestamp })
       <div className="flex items-start mb-3">
 
         {/* 메시지 박스 */}
-        <div className="bg-gray-100 p-3 rounded-lg text-left max-w-xs">
-          <p className="text-sm">{message}</p>
-          <span className="text-xs text-gray-500">{timestamp}</span>
+        <div className="bg-gray-50 p-3 rounded-tl-2xl rounded-tr-2xl rounded-br-2xl text-left max-w-xs border border-gray-200">
+          <p className="text-sm font-semibold">{message}</p>
+          <span className="text-xs text-gray-400">{timestamp}</span>
         </div>
       </div>
     );
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 4420fedd..9a44c9d6 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -99,36 +99,35 @@ const ChatRoom: React.FC = () => {
             <ChatHeader />
 
             {/* 채팅 메세지 메인 Body */ }
-            <div className="flex-grow bg-aliceblue p-4 overflow-y-auto" style={{ maxHeight: 'calc(100vh - 160px)' }}>
-                {/* 메시지 리스트 순회하면서 각각 렌더링 */}
-                {messages.map((message) => {
-                    const currentDate = message.timestamp.split(' ')[0];  // 날짜 부분만 추출
-                    const showDateDivider = currentDate !== previousDate;  // 날짜가 다르면 DateDivider 렌더링
-                    previousDate = currentDate;  // 이전 날짜 업데이트
-
-                    return (
-                        <div key={message.messageId}>
-                            {/* 날짜 구분자 (현재 날짜와 이전 메시지 날짜가 다를 때만 렌더링) */}
-                            {showDateDivider && <DateDivider date={currentDate} />}
-
-                            {/* senderId와 userId 동일 여부에 따라 메시지 박스를 렌더링했습니다! */}
-                            {message.senderId === userId ? (
-                                <MyMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
-                            ) : (
-                                <OtherMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
-                            )}
-
-                            {/* 상대방 메시지일 때만 메시지 아래에 프로필이 렌더링 되도록 했습니다! */}
-                            {message.senderId !== userId && <ProfileButton toggleUserId={toggleUserId} />}
-                            
-                        </div>
-                        
-                    );
-                })}
-
-                {/* 스크롤 하단 이동을 위한 빈 태그 '타겟 요소'. 메세지 추가시 이 요소로 스크롤이 이동됨! */}
-                <div ref={messageScrollRef} />
+            <div className="flex-grow bg-aliceblue px-5 overflow-y-auto space-y-3" style={{ maxHeight: 'calc(100vh - 160px)' }}>
+            {/* 메시지 리스트 순회하면서 각각 렌더링 */}
+            {messages.map((message) => {
+                const currentDate = message.timestamp.split(' ')[0];  // 날짜 부분만 추출
+                const showDateDivider = currentDate !== previousDate;  // 날짜가 다르면 DateDivider 렌더링
+                previousDate = currentDate;  // 이전 날짜 업데이트
+
+                return (
+                    <div key={message.messageId}>
+                        {/* 날짜 구분자 (현재 날짜와 이전 메시지 날짜가 다를 때만 렌더링) */}
+                        {showDateDivider && <DateDivider date={currentDate} />}
+
+                        {/* senderId와 userId 동일 여부에 따라 메시지 박스를 렌더링 */}
+                        {message.senderId === userId ? (
+                            <MyMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
+                        ) : (
+                            <OtherMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
+                        )}
+
+                        {/* 상대방 메시지일 때만 메시지 아래에 프로필 렌더링 */}
+                        {message.senderId !== userId && <ProfileButton toggleUserId={toggleUserId} />}
             </div>
+        );
+    })}
+
+    {/* 스크롤 하단 이동을 위한 빈 태그 '타겟 요소'. */}
+    <div ref={messageScrollRef} />
+</div>
+
 
             
             {/* 하단 입력 영역 */}
diff --git a/tailwind.config.js b/tailwind.config.js
index afadf7b9..4bf3511d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,18 +1,26 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  mode: 'jit',
   content: [
+    './src/**/*.{js,jsx,ts,tsx}',
+    './public/index.html',
   ],
   theme: {
     extend: {
       fontFamily: {
-        sans: ['"Apple SD Gothic Neo"', 'sans-serif'],
+        appleSD: ['Apple SD Gothic Neo', 'sans-serif'],
       },
       colors: {
-        aliceblue: '#f0f8ff', /* 색상 커스텀 가능한듯 */
         mainYellow: 'rgba(239, 213, 70, 1)',
         paleYellow: 'rgba(255, 252, 223, 1)',
+        grey50: 'rgba(249, 250, 251, 1)',
+        grey100: 'rgba(242, 244, 246, 1)',
+        grey200: 'rgba(229, 232, 235, 1)',
+        grey400: 'rgba(176, 184, 193, 1)',
+        grey800: 'rgba(51, 61, 75, 1)',
+        mainFont: 'rgba(51, 61, 75, 1)',
       }
     },
   },
   plugins: [],
-}
\ No newline at end of file
+}

From f1aa703e025104f089887455161535e16cef1c77 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sun, 29 Sep 2024 14:19:29 +0900
Subject: [PATCH 12/25] =?UTF-8?q?style:=20=EC=83=81=EC=84=B8=20=EA=B7=9C?=
 =?UTF-8?q?=EA=B2=A9=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/plusButtonImg.svg     |  5 +++++
 src/components/plusButton.tsx    |  4 ++--
 src/components/profileButton.tsx |  3 +--
 src/pages/chatRoom.tsx           | 21 ++++++++++-----------
 4 files changed, 18 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/plusButtonImg.svg

diff --git a/src/assets/plusButtonImg.svg b/src/assets/plusButtonImg.svg
new file mode 100644
index 00000000..5a3cd268
--- /dev/null
+++ b/src/assets/plusButtonImg.svg
@@ -0,0 +1,5 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.00012207" width="30" height="30" rx="10" fill="#EFD546"/>
+<path d="M15.0005 8.00018V22.0002" stroke="white" stroke-width="2" stroke-linecap="round"/>
+<path d="M22.0005 15.0002L8.00049 15.0002" stroke="white" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/plusButton.tsx b/src/components/plusButton.tsx
index 06f89d15..14189f23 100644
--- a/src/components/plusButton.tsx
+++ b/src/components/plusButton.tsx
@@ -1,7 +1,7 @@
 const PlusButton: React.FC = () => {
     return (
-        <button className="w-8 h-8 rounded-lg bg-yellow-400 border-0">
-            +
+        <button className="rounded-lg">
+            <img src={require('../assets/plusButtonImg.svg').default} alt="Network" />
         </button>
     );
 };
diff --git a/src/components/profileButton.tsx b/src/components/profileButton.tsx
index 73d90e16..08bb0e3d 100644
--- a/src/components/profileButton.tsx
+++ b/src/components/profileButton.tsx
@@ -8,13 +8,12 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({ toggleUserId }) => {
   return (
     <button
       onClick={toggleUserId}
-      className="w-[45px] h-[45px] rounded-full bg-gray-200 flex items-center justify-center"
+      className="w-9 rounded-full"
     >
       {/* 프로필 이미지 */}
       <img
         src={require('../assets/defaultProfileImg.svg').default}
         alt="Profile"
-        className="w-[35px] h-[35px]"
       />
     </button>
   );
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 9a44c9d6..484b279b 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -120,18 +120,16 @@ const ChatRoom: React.FC = () => {
 
                         {/* 상대방 메시지일 때만 메시지 아래에 프로필 렌더링 */}
                         {message.senderId !== userId && <ProfileButton toggleUserId={toggleUserId} />}
+                    </div>
+                );
+            })}
+            {/* 스크롤 하단 이동을 위한 빈 태그 '타겟 요소'. */}
+            <div ref={messageScrollRef} />
             </div>
-        );
-    })}
+        
+            {/* 하단 입력 영역, 그림자가 안나타남 */}
+            <div className="z-10 flex items-center px-5 py-4 space-x-2 shadow-md bg-white">
 
-    {/* 스크롤 하단 이동을 위한 빈 태그 '타겟 요소'. */}
-    <div ref={messageScrollRef} />
-</div>
-
-
-            
-            {/* 하단 입력 영역 */}
-            <div className="h-16 flex items-center px-4">
                 {/* 좌측의 추가 버튼 */}
                 <PlusButton />
 
@@ -142,7 +140,8 @@ const ChatRoom: React.FC = () => {
                     value={inputMessage}
                     onChange={handleInputChange}  // onChange로 입력값 변경 추적
                     onKeyDown={sendMessage}  // onKeyPress가 사용이 안된다네요? 왜지
-                    className="flex-grow p-2 border rounded"
+                    className="flex w-full px-4 h-8 rounded-3xl bg-gray-100 placeholder-gray-400 placeholder:text-xs"
+                    // placeholder 사이즈 조정이 안됨 ㅠㅠ    
                 />
             </div>
         </div>

From b89b7ae5b4f5f62b83ab1d39b1b5d16d23eca6f8 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sun, 29 Sep 2024 15:02:51 +0900
Subject: [PATCH 13/25] =?UTF-8?q?feat:=20=EC=9A=94=EC=9D=BC=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/dateDivider.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/dateDivider.tsx b/src/components/dateDivider.tsx
index 62ae5e86..6a8ebd8c 100644
--- a/src/components/dateDivider.tsx
+++ b/src/components/dateDivider.tsx
@@ -3,15 +3,27 @@ type DateDividerProps = {
   date: string;  // date prop을 문자열로 받을 수 있도록 설정
 };
 
+// 요일을 구하는 함수
+const getDayOfWeek = (dateString: string): string => {
+  const daysOfWeek = ['일', '월', '화', '수', '목', '금', '토'];
+  const date = new Date(dateString);  // dateString을 Date 객체로 변환
+  const dayOfWeek = date.getDay();  // 요일을 숫자로 가져옴 (0: 일요일, 1: 월요일, ... 6: 토요일)
+  return daysOfWeek[dayOfWeek];  // 숫자에 해당하는 요일 반환
+};
+
 // DateDivider 컴포넌트: 날짜 구분자를 표시
 const DateDivider: React.FC<DateDividerProps> = ({ date }) => {
+  const dayOfWeek = getDayOfWeek(date);  // 요일 계산
+
   return (
     <div className="flex items-center justify-center w-full my-4">
       {/* 왼쪽 선 */}
       <div className="flex-grow border-t border-gray-200"></div>
 
-      {/* 날짜 텍스트 */}
-      <span className="px-2 text-gray-400 text-xs">{date}</span>
+      {/* 날짜와 요일 텍스트 */}
+      <span className="px-2 text-gray-400 text-xs">
+        {date} {dayOfWeek}요일
+      </span>
 
       {/* 오른쪽 선 */}
       <div className="flex-grow border-t border-gray-200"></div>

From 5ebef57d32cf71e5b52a5e54833b2a218b48f98e Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sun, 29 Sep 2024 15:45:52 +0900
Subject: [PATCH 14/25] =?UTF-8?q?style:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?=
 =?UTF-8?q?=EB=84=88=EB=B9=84=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/myMessageBox.tsx    |  4 ++--
 src/components/otherMessageBox.tsx | 14 ++++++++++----
 src/components/profileButton.tsx   |  3 ++-
 src/pages/chatRoom.tsx             | 12 ++++++++----
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/src/components/myMessageBox.tsx b/src/components/myMessageBox.tsx
index 1b3ae400..3b3e272e 100644
--- a/src/components/myMessageBox.tsx
+++ b/src/components/myMessageBox.tsx
@@ -9,10 +9,10 @@ const MyMessageBox: React.FC<MyMessageBoxProps> = ({ message, timestamp }) => {
     return (
         <div className="flex justify-end mb-2 py-2">
             {/* 타임스탬프 */}
-            <span className="text-xs text-gray-400 mr-2 self-end">{timestamp}</span>
+            <span className="whitespace-nowrap text-xs text-gray-400 mr-2 self-end">{timestamp}</span>
         
             {/* 메시지 박스 */}
-            <div className="bg-yellow-50 text-gray-900 px-4 py-2 rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl border border-yellow-200 max-w-xs">
+            <div className="bg-yellow-50 text-gray-900 px-4 py-2 rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl border border-yellow-200 max-w-xs break-words">
                 <p className="text-sm font-semibold">{message}</p>
             </div>
         </div>
diff --git a/src/components/otherMessageBox.tsx b/src/components/otherMessageBox.tsx
index ecbff555..fd4186b0 100644
--- a/src/components/otherMessageBox.tsx
+++ b/src/components/otherMessageBox.tsx
@@ -7,13 +7,19 @@ type OtherMessageBoxProps = {
 // OtherMessageBox 컴포넌트: 상대방이 보낸 메시지 표시
 const OtherMessageBox: React.FC<OtherMessageBoxProps> = ({ message, timestamp }) => {
     return (
-      <div className="flex items-start mb-3">
+      <div className="flex items-start mb-2 space-x-2">
 
         {/* 메시지 박스 */}
-        <div className="bg-gray-50 p-3 rounded-tl-2xl rounded-tr-2xl rounded-br-2xl text-left max-w-xs border border-gray-200">
-          <p className="text-sm font-semibold">{message}</p>
-          <span className="text-xs text-gray-400">{timestamp}</span>
+        <div className="max-w-[224px] bg-gray-50 py-2 px-4 rounded-tl-2xl rounded-tr-2xl rounded-br-2xl text-left border border-gray-200 break-words">
+          <p className="text-sm font-semibold">
+            {message}
+          </p>
         </div>
+
+        {/* 시간 표시 */}
+        <span className="whitespace-nowrap text-xs text-gray-400 self-end">
+          {timestamp}
+        </span>
       </div>
     );
 };
diff --git a/src/components/profileButton.tsx b/src/components/profileButton.tsx
index 08bb0e3d..9b57fdce 100644
--- a/src/components/profileButton.tsx
+++ b/src/components/profileButton.tsx
@@ -8,12 +8,13 @@ const ProfileButton: React.FC<ProfileButtonProps> = ({ toggleUserId }) => {
   return (
     <button
       onClick={toggleUserId}
-      className="w-9 rounded-full"
+      className="w-9 h-9 rounded-full flex-shrink-0"  // 크기 고정 및 축소 방지
     >
       {/* 프로필 이미지 */}
       <img
         src={require('../assets/defaultProfileImg.svg').default}
         alt="Profile"
+        className='w-9 h-9'  // 크기 고정
       />
     </button>
   );
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 484b279b..25ad7fa9 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -115,13 +115,17 @@ const ChatRoom: React.FC = () => {
                         {message.senderId === userId ? (
                             <MyMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
                         ) : (
-                            <OtherMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
-                        )}
+                            <div className="flex items-start space-x-3">  {/* 좌측에 프로필, 우측에 메시지 박스 배치 */}
+                                {/* 상대방 메시지일 때 좌측에 프로필 렌더링 */}
+                                <ProfileButton toggleUserId={toggleUserId} />
 
-                        {/* 상대방 메시지일 때만 메시지 아래에 프로필 렌더링 */}
-                        {message.senderId !== userId && <ProfileButton toggleUserId={toggleUserId} />}
+                                {/* 메시지 박스 */}
+                                <OtherMessageBox message={message.message} timestamp={message.timestamp.split(' ')[1]} />
+                            </div>
+                        )}
                     </div>
                 );
+
             })}
             {/* 스크롤 하단 이동을 위한 빈 태그 '타겟 요소'. */}
             <div ref={messageScrollRef} />

From 42b05e1035dd74afc30a187a2f0d5b6e58bbca4d Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 17:19:30 +0900
Subject: [PATCH 15/25] =?UTF-8?q?feat:=20=ED=95=84=EC=9A=94=ED=95=9C=20ico?=
 =?UTF-8?q?n=20=EC=B6=94=EA=B0=80,=20=EA=B0=84=EB=8B=A8=20UI=20=EA=B5=AC?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                        |  6 +++++-
 src/assets/angryImoIcon.svg        |  3 +++
 src/assets/badImoIcon.svg          |  0
 src/assets/chatIcon.svg            |  4 ++++
 src/assets/chatIcon_on.svg         |  4 ++++
 src/assets/chatMoreIcon.svg        |  3 +++
 src/assets/etcIcon.svg             |  4 ++++
 src/assets/friendIcon.svg          |  5 +++++
 src/assets/friendIcon_on.svg       |  5 +++++
 src/assets/glassesIcon.svg         |  4 ++++
 src/assets/goodImoIcon.svg         |  3 +++
 src/assets/happyImoIcon.svg        |  3 +++
 src/assets/heartImoIcon.svg        | 11 +++++++++++
 src/assets/openChatIcon.svg        |  4 ++++
 src/assets/presentIcon.svg         |  4 ++++
 src/assets/settingIcon.svg         |  3 +++
 src/components/chatRomList.tsx     | 29 +++++++++++++++++++++++++++++
 src/components/otherMessageBox.tsx |  2 +-
 src/components/viewList.tsx        | 12 ++++++++++++
 src/pages/chatList.tsx             | 29 ++++++++++++++++++++++++++++-
 src/pages/friendList.tsx           |  8 ++++++++
 21 files changed, 143 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/angryImoIcon.svg
 create mode 100644 src/assets/badImoIcon.svg
 create mode 100644 src/assets/chatIcon.svg
 create mode 100644 src/assets/chatIcon_on.svg
 create mode 100644 src/assets/chatMoreIcon.svg
 create mode 100644 src/assets/etcIcon.svg
 create mode 100644 src/assets/friendIcon.svg
 create mode 100644 src/assets/friendIcon_on.svg
 create mode 100644 src/assets/glassesIcon.svg
 create mode 100644 src/assets/goodImoIcon.svg
 create mode 100644 src/assets/happyImoIcon.svg
 create mode 100644 src/assets/heartImoIcon.svg
 create mode 100644 src/assets/openChatIcon.svg
 create mode 100644 src/assets/presentIcon.svg
 create mode 100644 src/assets/settingIcon.svg
 create mode 100644 src/components/chatRomList.tsx
 create mode 100644 src/components/viewList.tsx
 create mode 100644 src/pages/friendList.tsx

diff --git a/src/App.tsx b/src/App.tsx
index d36049db..aaf02c1e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,16 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import ChatRoom from '../src/pages/chatRoom';
+import ChatList from '../src/pages/chatList';
+import FriendList from './pages/friendList';
 
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<ChatRoom />} /> 
+        <Route path="/" element={<ChatRoom />} />
+        <Route path="/chatList" element={<ChatList />} />
+        <Route path="/friendList" element={<FriendList />} />
         {/* 기본 경로: ChatRoom */}
       </Routes>
     </Router>
diff --git a/src/assets/angryImoIcon.svg b/src/assets/angryImoIcon.svg
new file mode 100644
index 00000000..3b692db2
--- /dev/null
+++ b/src/assets/angryImoIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36628 6.91131 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89471 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12C20.9975 9.61382 20.0485 7.3261 18.3612 5.63882C16.6739 3.95154 14.3862 3.00252 12 3ZM7.84616 13.0385C7.84616 12.8331 7.90706 12.6323 8.02117 12.4615C8.13528 12.2907 8.29746 12.1576 8.48722 12.079C8.67697 12.0004 8.88577 11.9799 9.08721 12.02C9.28865 12.06 9.47369 12.1589 9.61892 12.3042C9.76415 12.4494 9.86306 12.6344 9.90313 12.8359C9.94319 13.0373 9.92263 13.2461 9.84403 13.4359C9.76543 13.6256 9.63233 13.7878 9.46156 13.9019C9.29078 14.016 9.09001 14.0769 8.88462 14.0769C8.6092 14.0769 8.34506 13.9675 8.15031 13.7728C7.95557 13.578 7.84616 13.3139 7.84616 13.0385ZM14.6533 17.2295C14.5516 17.3823 14.3933 17.4885 14.2134 17.5247C14.0334 17.5609 13.8464 17.5241 13.6936 17.4225C13.1311 17.0487 12.6923 16.8462 12 16.8462C11.3077 16.8462 10.8689 17.0487 10.3064 17.4225C10.1536 17.5204 9.96838 17.5543 9.79074 17.517C9.61311 17.4796 9.45724 17.374 9.35671 17.2229C9.25618 17.0717 9.21902 16.8872 9.25325 16.7089C9.28748 16.5306 9.39035 16.373 9.53971 16.2698C10.2692 15.7843 10.9667 15.4615 12 15.4615C13.0333 15.4615 13.7308 15.7843 14.4603 16.2698C14.6131 16.3715 14.7193 16.5297 14.7555 16.7097C14.7917 16.8897 14.7549 17.0767 14.6533 17.2295ZM15.1154 14.0769C14.91 14.0769 14.7092 14.016 14.5384 13.9019C14.3677 13.7878 14.2346 13.6256 14.156 13.4359C14.0774 13.2461 14.0568 13.0373 14.0969 12.8359C14.1369 12.6344 14.2359 12.4494 14.3811 12.3042C14.5263 12.1589 14.7114 12.06 14.9128 12.02C15.1142 11.9799 15.323 12.0004 15.5128 12.079C15.7025 12.1576 15.8647 12.2907 15.9788 12.4615C16.0929 12.6323 16.1538 12.8331 16.1538 13.0385C16.1538 13.3139 16.0444 13.578 15.8497 13.7728C15.6549 13.9675 15.3908 14.0769 15.1154 14.0769ZM16.5381 9.11481L12.3842 11.884C12.2705 11.9599 12.1368 12.0004 12 12.0004C11.8632 12.0004 11.7295 11.9599 11.6158 11.884L7.46193 9.11481C7.38624 9.06435 7.32123 8.99948 7.27062 8.9239C7.22 8.84831 7.18477 8.7635 7.16693 8.67431C7.14909 8.58511 7.14899 8.49327 7.16664 8.40404C7.1843 8.3148 7.21935 8.22992 7.26981 8.15423C7.37171 8.00137 7.53017 7.89526 7.71031 7.85923C7.79951 7.84139 7.89135 7.84129 7.98058 7.85895C8.06982 7.8766 8.1547 7.91166 8.23039 7.96211L12 10.4761L15.7696 7.96644C15.8453 7.91598 15.9302 7.88093 16.0194 7.86327C16.1087 7.84562 16.2005 7.84572 16.2897 7.86356C16.3789 7.8814 16.4637 7.91663 16.5393 7.96725C16.6149 8.01786 16.6797 8.08287 16.7302 8.15856C16.7807 8.23424 16.8157 8.31913 16.8334 8.40836C16.851 8.4976 16.8509 8.58944 16.8331 8.67863C16.8152 8.76783 16.78 8.85264 16.7294 8.92822C16.6788 9.0038 16.6138 9.06868 16.5381 9.11913V9.11481Z" fill="#EFAB46"/>
+</svg>
diff --git a/src/assets/badImoIcon.svg b/src/assets/badImoIcon.svg
new file mode 100644
index 00000000..e69de29b
diff --git a/src/assets/chatIcon.svg b/src/assets/chatIcon.svg
new file mode 100644
index 00000000..94863493
--- /dev/null
+++ b/src/assets/chatIcon.svg
@@ -0,0 +1,4 @@
+<svg width="60" height="49" viewBox="0 0 60 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.8412 6C28.1276 5.99964 26.4427 6.43918 24.948 7.27651C23.4532 8.11383 22.1987 9.32086 21.3048 10.7819C20.4108 12.2429 19.9074 13.9089 19.8427 15.6203C19.7779 17.3316 20.1542 19.0309 20.9353 20.5551L19.9303 23.5573C19.8201 23.8841 19.8034 24.2352 19.8821 24.5709C19.9608 24.9067 20.1318 25.2139 20.3758 25.4577C20.6198 25.7016 20.9272 25.8725 21.2631 25.9512C21.5991 26.0299 21.9504 26.0132 22.2774 25.903L25.2812 24.9023C26.628 25.5895 28.1132 25.9626 29.625 25.9935C31.1369 26.0244 32.636 25.7124 34.0098 25.0809C35.3837 24.4494 36.5963 23.5148 37.5567 22.3474C38.5171 21.1801 39.2002 19.8103 39.5546 18.3411C39.909 16.8719 39.9256 15.3415 39.603 13.865C39.2804 12.3885 38.6271 11.0043 37.6922 9.81649C36.7573 8.62866 35.5651 7.66812 34.2052 7.00708C32.8454 6.34605 31.3533 6.00173 29.8412 6ZM29.8412 23.7739C28.4734 23.7744 27.1296 23.4145 25.9453 22.7306C25.7765 22.6327 25.5848 22.581 25.3896 22.5806C25.27 22.5809 25.1511 22.6002 25.0376 22.638L22.2783 23.5573L23.1981 20.7995C23.2479 20.6502 23.2654 20.4921 23.2494 20.3355C23.2334 20.179 23.1844 20.0276 23.1055 19.8914C22.2477 18.4094 21.9033 16.686 22.1257 14.9885C22.348 13.291 23.1247 11.7142 24.3352 10.5028C25.5457 9.29148 27.1223 8.51323 28.8205 8.28882C30.5188 8.06442 32.2436 8.40641 33.7275 9.26173C35.2114 10.1171 36.3714 11.4379 37.0275 13.0194C37.6836 14.6008 37.7992 16.3545 37.3563 18.0083C36.9134 19.6621 35.9368 21.1236 34.578 22.1661C33.2192 23.2085 31.5542 23.7737 29.8412 23.7739Z" fill="#8B95A1"/>
+<path d="M28.8407 44.77H28.0157V39.754H26.8827V44.286H26.0687V35.387H26.8827V39.061H28.0157V35.156H28.8407V44.77ZM25.4087 38.335H23.5607V38.577C23.5607 40.348 24.6057 41.514 25.5737 42.031L25.0787 42.658C24.2977 42.174 23.3737 41.162 23.1317 40.227C22.9117 41.239 22.0647 42.339 21.1517 42.9L20.6567 42.339C21.7567 41.657 22.7137 40.392 22.7137 38.599V38.335H20.8437V37.631H25.4087V38.335ZM21.8447 36.707V35.981H24.3747V36.707H21.8447ZM38.1713 42.955C38.1713 44.044 37.0053 44.726 34.9373 44.726C32.8803 44.726 31.7253 44.044 31.7253 42.955C31.7253 41.855 32.8803 41.162 34.9373 41.162C37.0053 41.162 38.1713 41.855 38.1713 42.955ZM38.1053 35.156V41.14H37.2693V35.156H38.1053ZM37.2803 42.955C37.2803 42.273 36.4223 41.866 34.9373 41.866C33.4853 41.866 32.6163 42.273 32.6163 42.955C32.6163 43.626 33.4853 44.022 34.9373 44.022C36.4223 44.022 37.2803 43.626 37.2803 42.955ZM36.1913 39.534L36.2793 40.227C35.1683 40.392 33.0343 40.491 31.6373 40.491H30.7463V35.816H35.2343V36.509H31.5823V37.73H35.1353V38.412H31.5823V39.787H31.8903C33.1883 39.787 35.0253 39.732 36.1913 39.534Z" fill="#6B7684"/>
+</svg>
diff --git a/src/assets/chatIcon_on.svg b/src/assets/chatIcon_on.svg
new file mode 100644
index 00000000..fc2897e5
--- /dev/null
+++ b/src/assets/chatIcon_on.svg
@@ -0,0 +1,4 @@
+<svg width="60" height="49" viewBox="0 0 60 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5833 15.7459C39.5836 17.4724 39.137 19.1695 38.2869 20.6722C37.4367 22.1749 36.212 23.4318 34.732 24.3207C33.252 25.2097 31.567 25.7002 29.8411 25.7448C28.1152 25.7893 26.4072 25.3862 24.8833 24.5747L21.6092 25.6661C21.3381 25.7565 21.0473 25.7696 20.7691 25.704C20.491 25.6383 20.2367 25.4966 20.0346 25.2945C19.8326 25.0924 19.6908 24.8381 19.6252 24.56C19.5595 24.2819 19.5727 23.991 19.6631 23.7199L20.7544 20.4459C20.0411 19.1048 19.6427 17.6188 19.5894 16.1007C19.5361 14.5826 19.8294 13.0723 20.447 11.6845C21.0645 10.2967 21.9901 9.06777 23.1536 8.09108C24.317 7.1144 25.6876 6.41559 27.1614 6.0477C28.6352 5.67981 30.1734 5.65252 31.6594 5.96789C33.1453 6.28325 34.5399 6.933 35.7372 7.86779C36.9345 8.80259 37.9031 9.99787 38.5695 11.3629C39.236 12.728 39.5826 14.2269 39.5833 15.7459Z" fill="#4E5968"/>
+<path d="M28.9947 44.869H27.7737V39.952H26.9597V44.418H25.7497V35.244H26.9597V38.918H27.7737V35.068H28.9947V44.869ZM25.4637 41.91L24.7487 42.823C24.1107 42.449 23.2857 41.525 23.0327 40.656C22.8017 41.569 21.9877 42.581 21.1957 43.043L20.4147 42.174C21.6907 41.349 22.3397 40.304 22.4167 38.544H20.7997V37.521H25.2217V38.544H23.6707C23.7587 40.271 24.4077 41.294 25.4637 41.91ZM24.3307 36.839H21.7677V35.816H24.3307V36.839ZM38.3143 42.9C38.3143 44.044 37.0383 44.759 34.8383 44.759C32.6493 44.759 31.3843 44.044 31.3843 42.9C31.3843 41.723 32.6493 40.997 34.8383 40.997C37.0383 40.997 38.3143 41.723 38.3143 42.9ZM38.2593 35.068V40.81H36.9723V35.068H38.2593ZM36.9613 42.9C36.9613 42.35 36.1693 42.02 34.8383 42.02C33.5293 42.02 32.7373 42.35 32.7373 42.9C32.7373 43.428 33.5293 43.747 34.8383 43.747C36.1693 43.747 36.9613 43.428 36.9613 42.9ZM35.9493 39.226L36.0813 40.205C35.0913 40.414 32.9023 40.502 31.6373 40.502H30.7133V35.717H35.2893V36.74H31.9783V37.565H35.1133V38.588H31.9783V39.479C33.1443 39.523 34.8493 39.446 35.9493 39.226Z" fill="#4E5968"/>
+</svg>
diff --git a/src/assets/chatMoreIcon.svg b/src/assets/chatMoreIcon.svg
new file mode 100644
index 00000000..81233267
--- /dev/null
+++ b/src/assets/chatMoreIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 11.5C21 11.7705 20.8925 12.03 20.7012 12.2212C20.51 12.4125 20.2505 12.52 19.98 12.52H13.52V18.98C13.52 19.2505 13.4125 19.51 13.2212 19.7012C13.03 19.8925 12.7705 20 12.5 20C12.2295 20 11.97 19.8925 11.7788 19.7012C11.5875 19.51 11.48 19.2505 11.48 18.98V12.52H5.02C4.74948 12.52 4.49004 12.4125 4.29875 12.2212C4.10746 12.03 4 11.7705 4 11.5C4 11.2295 4.10746 10.97 4.29875 10.7788C4.49004 10.5875 4.74948 10.48 5.02 10.48H11.48V4.02C11.48 3.74948 11.5875 3.49004 11.7788 3.29875C11.97 3.10746 12.2295 3 12.5 3C12.7705 3 13.03 3.10746 13.2212 3.29875C13.4125 3.49004 13.52 3.74948 13.52 4.02V10.48H19.98C20.2505 10.48 20.51 10.5875 20.7012 10.7788C20.8925 10.97 21 11.2295 21 11.5Z" fill="#8B95A1"/>
+</svg>
diff --git a/src/assets/etcIcon.svg b/src/assets/etcIcon.svg
new file mode 100644
index 00000000..9e977292
--- /dev/null
+++ b/src/assets/etcIcon.svg
@@ -0,0 +1,4 @@
+<svg width="59" height="49" viewBox="0 0 59 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.875 15.5C30.875 15.7967 30.787 16.0867 30.6222 16.3334C30.4574 16.58 30.2231 16.7723 29.949 16.8858C29.6749 16.9994 29.3733 17.0291 29.0824 16.9712C28.7914 16.9133 28.5241 16.7704 28.3143 16.5607C28.1046 16.3509 27.9617 16.0836 27.9038 15.7926C27.8459 15.5017 27.8756 15.2001 27.9892 14.926C28.1027 14.6519 28.295 14.4176 28.5416 14.2528C28.7883 14.088 29.0783 14 29.375 14C29.7728 14 30.1544 14.158 30.4357 14.4393C30.717 14.7206 30.875 15.1022 30.875 15.5ZM23 14C22.7033 14 22.4133 14.088 22.1666 14.2528C21.92 14.4176 21.7277 14.6519 21.6142 14.926C21.5006 15.2001 21.4709 15.5017 21.5288 15.7926C21.5867 16.0836 21.7296 16.3509 21.9393 16.5607C22.1491 16.7704 22.4164 16.9133 22.7074 16.9712C22.9983 17.0291 23.2999 16.9994 23.574 16.8858C23.8481 16.7723 24.0824 16.58 24.2472 16.3334C24.412 16.0867 24.5 15.7967 24.5 15.5C24.5 15.1022 24.342 14.7206 24.0607 14.4393C23.7794 14.158 23.3978 14 23 14ZM35.75 14C35.4533 14 35.1633 14.088 34.9166 14.2528C34.67 14.4176 34.4777 14.6519 34.3642 14.926C34.2507 15.2001 34.2209 15.5017 34.2788 15.7926C34.3367 16.0836 34.4796 16.3509 34.6893 16.5607C34.8991 16.7704 35.1664 16.9133 35.4574 16.9712C35.7483 17.0291 36.0499 16.9994 36.324 16.8858C36.5981 16.7723 36.8324 16.58 36.9972 16.3334C37.162 16.0867 37.25 15.7967 37.25 15.5C37.25 15.1022 37.092 14.7206 36.8107 14.4393C36.5294 14.158 36.1478 14 35.75 14Z" fill="#8B95A1"/>
+<path d="M23.4846 44.77H22.6486V39.38H19.8106V38.665H22.6486V35.156H23.4846V44.77ZM21.1966 41.36L21.2956 42.086C20.2286 42.284 18.4136 42.416 16.6976 42.383L16.0376 42.372V36.113H20.5696V36.817H16.8736V41.657C18.3036 41.712 20.1296 41.569 21.1966 41.36ZM32.7822 40.909H29.9002V42.867H33.8382V43.571H25.1592V42.867H29.0642V40.909H26.2042V35.816H27.0512V37.587H31.9462V35.816H32.7822V40.909ZM31.9462 40.216V38.28H27.0512V40.216H31.9462ZM42.5308 44.77H41.6948V35.156H42.5308V44.77ZM39.7038 36.179C39.6598 39.303 37.7458 41.69 35.2598 42.867L34.7758 42.207C37.2068 41.14 38.6368 39.05 38.8128 36.883H35.1278V36.179H39.7038Z" fill="#6B7684"/>
+</svg>
diff --git a/src/assets/friendIcon.svg b/src/assets/friendIcon.svg
new file mode 100644
index 00000000..56d37a0e
--- /dev/null
+++ b/src/assets/friendIcon.svg
@@ -0,0 +1,5 @@
+<svg width="59" height="49" viewBox="0 0 59 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.429 14.08C31.3534 14.08 32.9135 12.5199 32.9135 10.5955C32.9135 8.67112 31.3534 7.11108 29.429 7.11108C27.5046 7.11108 25.9446 8.67112 25.9446 10.5955C25.9446 12.5199 27.5046 14.08 29.429 14.08Z" stroke="#8B95A1" stroke-width="2" stroke-linecap="round"/>
+<path d="M37.5 24.8889C37.5 20.4695 34.1179 16.8889 29.9405 16.8889C25.763 16.8889 22.3889 20.4695 22.3889 24.8889H37.5Z" stroke="#8B95A1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.0214 37.884H23.8104V37.95C23.8104 39.182 24.9984 40.205 26.2084 40.491L25.7574 41.162C24.9104 40.909 23.7884 40.073 23.3814 39.193C23.1064 40.051 22.0504 41.052 20.9394 41.448L20.4884 40.777C21.7644 40.392 22.9634 39.193 22.9634 37.961V37.884H20.7744V37.191H26.0214V37.884ZM28.4854 44.539H22.0284V41.657H22.8644V43.835H28.4854V44.539ZM28.2544 42.218H27.4184V35.156H28.2544V42.218ZM24.7014 36.278H22.0834V35.574H24.7014V36.278ZM37.464 35.871C37.464 37.18 37.431 38.643 37.112 40.128H38.597V40.832H34.67V44.77H33.834V40.832H29.918V40.128H36.276C36.54 39.094 36.595 37.51 36.595 36.564H30.941V35.871H37.464Z" fill="#6B7684"/>
+</svg>
diff --git a/src/assets/friendIcon_on.svg b/src/assets/friendIcon_on.svg
new file mode 100644
index 00000000..aed4633e
--- /dev/null
+++ b/src/assets/friendIcon_on.svg
@@ -0,0 +1,5 @@
+<svg width="59" height="49" viewBox="0 0 59 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M29.4224 13.7689C31.585 13.7689 33.3381 12.0157 33.3381 9.85309C33.3381 7.69047 31.585 5.93732 29.4224 5.93732C27.2597 5.93732 25.5066 7.69047 25.5066 9.85309C25.5066 12.0157 27.2597 13.7689 29.4224 13.7689Z" fill="#4E5968"/>
+<path d="M36.5109 25.0657C37.7344 25.0657 38.7034 24.042 38.4391 22.9559C37.4701 19.0034 33.829 16.0657 29.4831 16.0657C25.1372 16.0657 21.5058 19.0034 20.527 22.9559C20.2627 24.042 21.222 25.0657 22.4552 25.0657H36.5109Z" fill="#4E5968"/>
+<path d="M20.7414 38.0145V36.9915H25.9114V38.0145H23.9974C24.1404 39.2685 25.1194 39.9615 26.1424 40.2475C25.9224 40.5885 25.7244 40.9185 25.5044 41.2485C24.7344 41.0175 23.7334 40.2695 23.3374 39.4445C22.9964 40.3245 21.9954 41.2045 21.0384 41.5125L20.3894 40.5225C21.6764 40.0935 22.5014 39.2685 22.6334 38.0145H20.7414ZM28.6724 44.6255H21.8194V41.7435H23.1174V43.6025H28.6724V44.6255ZM28.4084 42.1615H27.1324V35.0335H28.4084V42.1615ZM21.9074 36.4525V35.4405H24.7344V36.4525H21.9074ZM37.552 35.5615C37.552 37.1455 37.453 38.6195 37.233 39.7415H38.685V40.7645H34.879V44.8345H33.592V40.7645H29.83V39.7415H36.012C36.188 38.8945 36.276 37.7945 36.276 36.5955H30.919V35.5615H37.552Z" fill="#4E5968"/>
+</svg>
diff --git a/src/assets/glassesIcon.svg b/src/assets/glassesIcon.svg
new file mode 100644
index 00000000..7153750d
--- /dev/null
+++ b/src/assets/glassesIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10.875" cy="10.875" r="7.875" stroke="#8B95A1" stroke-width="2"/>
+<path d="M21 21L17 17" stroke="#8B95A1" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/assets/goodImoIcon.svg b/src/assets/goodImoIcon.svg
new file mode 100644
index 00000000..fd191122
--- /dev/null
+++ b/src/assets/goodImoIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5172 7.8608C20.3362 7.65658 20.1136 7.49304 19.8643 7.38104C19.6149 7.26904 19.3444 7.21115 19.0709 7.2112H14.571V5.9312C14.571 5.08251 14.2324 4.26858 13.6296 3.66846C13.0268 3.06834 12.2093 2.7312 11.3569 2.7312C11.2374 2.73112 11.1203 2.76415 11.0187 2.82661C10.9171 2.88907 10.835 2.97847 10.7815 3.0848L7.74573 9.1312H4.28567C3.94469 9.1312 3.61767 9.26606 3.37656 9.5061C3.13545 9.74615 3 10.0717 3 10.4112V17.4512C3 17.7907 3.13545 18.1163 3.37656 18.3563C3.61767 18.5963 3.94469 18.7312 4.28567 18.7312H18.1066C18.5765 18.7314 19.0302 18.5608 19.3826 18.2514C19.735 17.9421 19.9619 17.5153 20.0207 17.0512L20.9849 9.3712C21.0191 9.10082 20.9951 8.82629 20.9144 8.56587C20.8338 8.30545 20.6984 8.0651 20.5172 7.8608ZM4.28567 10.4112H7.49984V17.4512H4.28567V10.4112Z" fill="#5998EF"/>
+</svg>
diff --git a/src/assets/happyImoIcon.svg b/src/assets/happyImoIcon.svg
new file mode 100644
index 00000000..4cd2a859
--- /dev/null
+++ b/src/assets/happyImoIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3C10.22 3 8.47991 3.52784 6.99987 4.51677C5.51983 5.50571 4.36628 6.91131 3.68509 8.55585C3.0039 10.2004 2.82567 12.01 3.17294 13.7558C3.5202 15.5016 4.37737 17.1053 5.63604 18.364C6.89471 19.6226 8.49836 20.4798 10.2442 20.8271C11.99 21.1743 13.7996 20.9961 15.4442 20.3149C17.0887 19.6337 18.4943 18.4802 19.4832 17.0001C20.4722 15.5201 21 13.78 21 12C20.9975 9.61382 20.0485 7.3261 18.3612 5.63882C16.6739 3.95154 14.3862 3.00252 12 3ZM8.88462 9.23077C9.09001 9.23077 9.29078 9.29167 9.46156 9.40578C9.63233 9.51989 9.76543 9.68207 9.84403 9.87183C9.92263 10.0616 9.9432 10.2704 9.90313 10.4718C9.86306 10.6733 9.76415 10.8583 9.61892 11.0035C9.47369 11.1488 9.28865 11.2477 9.08721 11.2877C8.88577 11.3278 8.67697 11.3072 8.48722 11.2286C8.29746 11.15 8.13528 11.0169 8.02117 10.8462C7.90706 10.6754 7.84616 10.4746 7.84616 10.2692C7.84616 9.99381 7.95557 9.72968 8.15031 9.53493C8.34506 9.34018 8.6092 9.23077 8.88462 9.23077ZM16.0604 14.4231C15.1699 15.9626 13.6901 16.8462 12 16.8462C10.3099 16.8462 8.8301 15.9635 7.93962 14.4231C7.88953 14.3443 7.85589 14.2562 7.84074 14.164C7.82558 14.0719 7.82923 13.9777 7.85144 13.887C7.87365 13.7963 7.91398 13.711 7.97 13.6363C8.02602 13.5616 8.09657 13.499 8.17741 13.4523C8.25824 13.4056 8.3477 13.3757 8.44039 13.3644C8.53308 13.3532 8.62709 13.3608 8.71676 13.3868C8.80643 13.4128 8.88992 13.4567 8.96219 13.5158C9.03446 13.5749 9.09403 13.648 9.13731 13.7308C9.78375 14.848 10.7997 15.4615 12 15.4615C13.2003 15.4615 14.2163 14.8471 14.8627 13.7308C14.906 13.648 14.9655 13.5749 15.0378 13.5158C15.1101 13.4567 15.1936 13.4128 15.2832 13.3868C15.3729 13.3608 15.4669 13.3532 15.5596 13.3644C15.6523 13.3757 15.7418 13.4056 15.8226 13.4523C15.9034 13.499 15.974 13.5616 16.03 13.6363C16.086 13.711 16.1264 13.7963 16.1486 13.887C16.1708 13.9777 16.1744 14.0719 16.1593 14.164C16.1441 14.2562 16.1105 14.3443 16.0604 14.4231ZM15.1154 11.3077C14.91 11.3077 14.7092 11.2468 14.5384 11.1327C14.3677 11.0186 14.2346 10.8564 14.156 10.6666C14.0774 10.4769 14.0568 10.2681 14.0969 10.0666C14.1369 9.86519 14.2359 9.68016 14.3811 9.53493C14.5263 9.3897 14.7114 9.29079 14.9128 9.25072C15.1142 9.21065 15.323 9.23122 15.5128 9.30982C15.7025 9.38841 15.8647 9.52152 15.9788 9.69229C16.0929 9.86307 16.1538 10.0638 16.1538 10.2692C16.1538 10.5446 16.0444 10.8088 15.8497 11.0035C15.6549 11.1983 15.3908 11.3077 15.1154 11.3077Z" fill="#7BCB6D"/>
+</svg>
diff --git a/src/assets/heartImoIcon.svg b/src/assets/heartImoIcon.svg
new file mode 100644
index 00000000..695dfbff
--- /dev/null
+++ b/src/assets/heartImoIcon.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_22_3881)">
+<circle cx="12" cy="12" r="12" fill="#E5E8EB"/>
+<path d="M21 9.84489C21 15.3149 12.6597 19.7425 12.3046 19.9254C12.2109 19.9744 12.1063 20 12 20C11.8937 20 11.7891 19.9744 11.6954 19.9254C11.3403 19.7425 3 15.3149 3 9.84489C3.00149 8.56039 3.52687 7.32892 4.46088 6.42064C5.39489 5.51236 6.66125 5.00145 7.98214 5C9.64152 5 11.0944 5.69391 12 6.86685C12.9056 5.69391 14.3585 5 16.0179 5C17.3387 5.00145 18.6051 5.51236 19.5391 6.42064C20.4731 7.32892 20.9985 8.56039 21 9.84489Z" fill="#FF5A4B"/>
+</g>
+<defs>
+<clipPath id="clip0_22_3881">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/openChatIcon.svg b/src/assets/openChatIcon.svg
new file mode 100644
index 00000000..242d0c2a
--- /dev/null
+++ b/src/assets/openChatIcon.svg
@@ -0,0 +1,4 @@
+<svg width="60" height="49" viewBox="0 0 60 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40.1979 21.6139C40.7088 20.5028 40.9539 19.288 40.9137 18.0657C40.8736 16.8434 40.5493 15.6473 39.9667 14.5721C39.384 13.4968 38.5589 12.5721 37.5568 11.8712C36.5547 11.1702 35.4031 10.7122 34.1932 10.5336C33.3112 8.65121 31.7206 7.19392 29.7684 6.47957C27.8162 5.76521 25.6607 5.85174 23.772 6.72029C21.8833 7.58883 20.4147 9.16893 19.6864 11.116C18.9581 13.063 19.0292 15.2191 19.8842 17.1139L19.2429 19.2946C19.1479 19.6177 19.1417 19.9605 19.2249 20.2869C19.3081 20.6132 19.4777 20.9112 19.7159 21.1494C19.9541 21.3875 20.252 21.5572 20.5784 21.6404C20.9048 21.7236 21.2476 21.7174 21.5707 21.6224L23.7513 20.9811C24.4291 21.2918 25.1475 21.5045 25.8851 21.613C26.7582 23.5103 28.3488 24.9835 30.3074 25.7088C32.266 26.434 34.4324 26.3522 36.3307 25.4811L38.5114 26.1224C38.8345 26.2174 39.1773 26.2236 39.5037 26.1404C39.83 26.0571 40.128 25.8875 40.3662 25.6494C40.6043 25.4112 40.7739 25.1132 40.8572 24.7869C40.9404 24.4605 40.9342 24.1177 40.8392 23.7946L40.1979 21.6139ZM23.8535 18.6524C23.7459 18.6522 23.6389 18.6677 23.5357 18.6983L21.5932 19.2692L22.166 17.3258C22.2482 17.044 22.2169 16.7412 22.0789 16.4821C21.441 15.2934 21.2516 13.915 21.5452 12.5983C21.8388 11.2816 22.5958 10.1143 23.6782 9.30918C24.7606 8.50404 26.0963 8.11471 27.4418 8.21218C28.7873 8.30965 30.0529 8.88742 31.008 9.84016C31.9631 10.7929 32.5439 12.0571 32.6447 13.4024C32.7454 14.7476 32.3594 16.0843 31.5569 17.1687C30.7544 18.253 29.5889 19.0129 28.2729 19.3097C26.957 19.6065 25.5782 19.4204 24.3879 18.7855C24.2236 18.6975 24.0399 18.6518 23.8535 18.6524ZM37.9995 20.9774C37.8614 21.2365 37.8301 21.5393 37.9123 21.8211L38.4832 23.7646L36.5435 23.1992C36.26 23.1156 35.9548 23.1469 35.6942 23.2864C34.4847 23.9331 33.0807 24.1156 31.7462 23.7996C30.4116 23.4837 29.2384 22.6911 28.4473 21.5708C30.4019 21.2177 32.1506 20.1385 33.3426 18.5497C34.5345 16.961 35.0816 14.9802 34.8739 13.0049C35.6434 13.27 36.3463 13.6989 36.934 14.2622C37.5216 14.8254 37.98 15.5094 38.2775 16.2671C38.5751 17.0247 38.7046 17.8379 38.6573 18.6505C38.6099 19.463 38.3868 20.2557 38.0032 20.9736L37.9995 20.9774Z" fill="#8B95A1"/>
+<path d="M19.3486 38.379C19.3486 39.853 18.1386 40.854 16.2906 40.975V42.801H20.2286V43.505H11.5496V42.801H15.4546V40.975C13.6176 40.843 12.4186 39.853 12.4186 38.379C12.4186 36.795 13.8046 35.761 15.8726 35.761C17.9736 35.761 19.3486 36.795 19.3486 38.379ZM18.5456 38.39C18.5456 37.235 17.5006 36.465 15.8726 36.465C14.2776 36.465 13.2326 37.235 13.2326 38.39C13.2326 39.545 14.2776 40.304 15.8726 40.304C17.4896 40.304 18.5456 39.545 18.5456 38.39ZM28.7782 39.424H21.9802V38.731H23.4432L23.1902 36.927L24.0592 36.828L24.2462 38.731H26.5232L26.7432 36.817L27.6122 36.905L27.3152 38.731H28.7782V39.424ZM28.8002 44.473H22.1452V41.888H22.9812V43.769H28.8002V44.473ZM29.7462 41.063H21.0672V40.359H29.7462V41.063ZM28.8442 36.465H21.9142V35.772H28.8442V36.465ZM38.6917 44.77H37.8667V39.754H36.7337V44.286H35.9197V35.387H36.7337V39.061H37.8667V35.156H38.6917V44.77ZM35.2597 38.335H33.4117V38.577C33.4117 40.348 34.4567 41.514 35.4247 42.031L34.9297 42.658C34.1487 42.174 33.2247 41.162 32.9827 40.227C32.7627 41.239 31.9157 42.339 31.0027 42.9L30.5077 42.339C31.6077 41.657 32.5647 40.392 32.5647 38.599V38.335H30.6947V37.631H35.2597V38.335ZM31.6957 36.707V35.981H34.2257V36.707H31.6957ZM48.0223 42.955C48.0223 44.044 46.8563 44.726 44.7883 44.726C42.7313 44.726 41.5763 44.044 41.5763 42.955C41.5763 41.855 42.7313 41.162 44.7883 41.162C46.8563 41.162 48.0223 41.855 48.0223 42.955ZM47.9563 35.156V41.14H47.1203V35.156H47.9563ZM47.1313 42.955C47.1313 42.273 46.2733 41.866 44.7883 41.866C43.3363 41.866 42.4673 42.273 42.4673 42.955C42.4673 43.626 43.3363 44.022 44.7883 44.022C46.2733 44.022 47.1313 43.626 47.1313 42.955ZM46.0423 39.534L46.1303 40.227C45.0193 40.392 42.8853 40.491 41.4883 40.491H40.5973V35.816H45.0853V36.509H41.4333V37.73H44.9863V38.412H41.4333V39.787H41.7413C43.0393 39.787 44.8763 39.732 46.0423 39.534Z" fill="#6B7684"/>
+</svg>
diff --git a/src/assets/presentIcon.svg b/src/assets/presentIcon.svg
new file mode 100644
index 00000000..4adbc6cc
--- /dev/null
+++ b/src/assets/presentIcon.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="14.0001" cy="14" r="12.8333" fill="#6B7684"/>
+<path d="M19.9231 10.9207H17.5619C17.5882 10.8976 17.6151 10.8752 17.6407 10.8507C17.8451 10.6619 18.0098 10.4312 18.1246 10.1731C18.2394 9.91498 18.3017 9.63504 18.3077 9.35074C18.3165 9.03974 18.2642 8.73013 18.1538 8.44094C18.0434 8.15174 17.8773 7.88906 17.6658 7.66902C17.4543 7.44897 17.2017 7.27621 16.9237 7.16134C16.6456 7.04647 16.3479 6.99191 16.0488 7.00101C15.7754 7.00713 15.506 7.0719 15.2577 7.19126C15.0094 7.31062 14.7875 7.48199 14.6058 7.69466C14.3544 7.99766 14.15 8.33962 14 8.70819C13.85 8.33962 13.6456 7.99766 13.3942 7.69466C13.2125 7.48199 12.9906 7.31062 12.7423 7.19126C12.494 7.0719 12.2246 7.00713 11.9512 7.00101C11.6521 6.99191 11.3544 7.04647 11.0763 7.16134C10.7983 7.27621 10.5457 7.44897 10.3342 7.66902C10.1227 7.88906 9.9566 8.15174 9.84622 8.44094C9.73584 8.73013 9.68347 9.03974 9.69231 9.35074C9.69829 9.63504 9.76062 9.91498 9.87539 10.1731C9.99016 10.4312 10.1549 10.6619 10.3593 10.8507C10.3849 10.8738 10.4118 10.8962 10.4381 10.9207H8.07692C7.79131 10.9207 7.51739 11.0387 7.31542 11.2488C7.11346 11.4588 7 11.7436 7 12.0407V14.2805C7 14.5775 7.11346 14.8624 7.31542 15.0724C7.51739 15.2824 7.79131 15.4004 8.07692 15.4004V19.8801C8.07692 20.1771 8.19038 20.462 8.39235 20.672C8.59431 20.882 8.86823 21 9.15385 21H13.1923C13.2637 21 13.3322 20.9705 13.3827 20.918C13.4332 20.8655 13.4615 20.7943 13.4615 20.7201V14.2805H8.07692V12.0407H13.4615V14.2805H14.5385V12.0407H19.9231V14.2805H14.5385V20.7201C14.5385 20.7943 14.5668 20.8655 14.6173 20.918C14.6678 20.9705 14.7363 21 14.8077 21H18.8462C19.1318 21 19.4057 20.882 19.6077 20.672C19.8096 20.462 19.9231 20.1771 19.9231 19.8801V15.4004C20.2087 15.4004 20.4826 15.2824 20.6846 15.0724C20.8865 14.8624 21 14.5775 21 14.2805V12.0407C21 11.7436 20.8865 11.4588 20.6846 11.2488C20.4826 11.0387 20.2087 10.9207 19.9231 10.9207ZM11.0728 10.0108C10.9786 9.92214 10.9031 9.81419 10.851 9.69374C10.7989 9.57328 10.7713 9.44293 10.7699 9.31085C10.7665 9.15609 10.7928 9.00218 10.8474 8.85814C10.9019 8.7141 10.9835 8.58283 11.0874 8.47201C11.1914 8.36119 11.3155 8.27305 11.4526 8.21277C11.5897 8.15248 11.737 8.12126 11.8859 8.12093H11.9188C12.0459 8.12235 12.1712 8.15107 12.287 8.20527C12.4029 8.25948 12.5067 8.338 12.5919 8.43591C13.1566 9.09946 13.3559 10.1998 13.4259 10.8801C12.7689 10.808 11.7115 10.6009 11.0728 10.0108ZM16.9286 10.0108C16.2898 10.5988 15.2297 10.8059 14.5728 10.8787C14.6529 10.1431 14.875 9.06586 15.4135 8.43661C15.4987 8.3387 15.6025 8.26018 15.7183 8.20597C15.8342 8.15177 15.9595 8.12305 16.0865 8.12163H16.1195C16.2684 8.1226 16.4156 8.15445 16.5524 8.21533C16.6893 8.27621 16.8131 8.36489 16.9166 8.47617C17.0201 8.58744 17.1012 8.71908 17.1551 8.86337C17.2091 9.00766 17.2348 9.16169 17.2308 9.31645C17.2286 9.44763 17.2005 9.57695 17.1483 9.69638C17.0961 9.81582 17.0208 9.92284 16.9272 10.0108H16.9286Z" fill="white"/>
+</svg>
diff --git a/src/assets/settingIcon.svg b/src/assets/settingIcon.svg
new file mode 100644
index 00000000..6805ab58
--- /dev/null
+++ b/src/assets/settingIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.9838 2.54161C14.0711 2.71093 14.0928 2.92777 14.1361 3.36144C14.2182 4.1823 14.2593 4.59274 14.4311 4.81793C14.649 5.10358 15.0034 5.25038 15.3595 5.20248C15.6402 5.16472 15.9594 4.90352 16.5979 4.38113C16.9352 4.10515 17.1038 3.96716 17.2853 3.90918C17.5158 3.83555 17.7652 3.84798 17.9872 3.94419C18.162 4.01994 18.3161 4.17402 18.6243 4.4822L19.5178 5.37567C19.8259 5.68385 19.98 5.83794 20.0558 6.01275C20.152 6.23478 20.1644 6.48415 20.0908 6.71464C20.0328 6.89612 19.8948 7.06478 19.6188 7.4021C19.0964 8.0406 18.8352 8.35984 18.7975 8.64056C18.7496 8.99662 18.8964 9.35102 19.182 9.56893C19.4072 9.74072 19.8176 9.78176 20.6385 9.86385C21.0722 9.90722 21.2891 9.92891 21.4584 10.0162C21.6734 10.1272 21.841 10.3123 21.9299 10.5373C22 10.7145 22 10.9324 22 11.3682V12.6319C22 13.0676 22 13.2855 21.93 13.4626C21.841 13.6877 21.6734 13.8729 21.4583 13.9838C21.289 14.0711 21.0722 14.0928 20.6386 14.1361L20.6386 14.1361C19.818 14.2182 19.4077 14.2592 19.1825 14.4309C18.8967 14.6489 18.7499 15.0034 18.7979 15.3596C18.8357 15.6402 19.0968 15.9593 19.619 16.5976C19.8949 16.9348 20.0328 17.1034 20.0908 17.2848C20.1645 17.5154 20.152 17.7648 20.0558 17.9869C19.98 18.1617 19.826 18.3157 19.5179 18.6238L18.6243 19.5174C18.3162 19.8255 18.1621 19.9796 17.9873 20.0554C17.7652 20.1516 17.5159 20.164 17.2854 20.0904C17.1039 20.0324 16.9352 19.8944 16.5979 19.6184L16.5979 19.6184C15.9594 19.096 15.6402 18.8348 15.3595 18.7971C15.0034 18.7492 14.649 18.896 14.4311 19.1816C14.2593 19.4068 14.2183 19.8173 14.1362 20.6383C14.0928 21.0722 14.0711 21.2891 13.9837 21.4585C13.8728 21.6735 13.6877 21.8409 13.4628 21.9299C13.2856 22 13.0676 22 12.6316 22H11.3682C10.9324 22 10.7145 22 10.5373 21.9299C10.3123 21.841 10.1272 21.6734 10.0162 21.4584C9.92891 21.2891 9.90722 21.0722 9.86385 20.6385C9.78176 19.8176 9.74072 19.4072 9.56892 19.182C9.35101 18.8964 8.99663 18.7496 8.64057 18.7975C8.35985 18.8352 8.04059 19.0964 7.40208 19.6189L7.40206 19.6189C7.06473 19.8949 6.89607 20.0329 6.71458 20.0908C6.4841 20.1645 6.23474 20.152 6.01272 20.0558C5.8379 19.9801 5.6838 19.826 5.37561 19.5178L4.48217 18.6243C4.17398 18.3162 4.01988 18.1621 3.94414 17.9873C3.84794 17.7652 3.8355 17.5159 3.90913 17.2854C3.96711 17.1039 4.10511 16.9352 4.3811 16.5979C4.90351 15.9594 5.16471 15.6402 5.20247 15.3594C5.25037 15.0034 5.10357 14.649 4.81792 14.4311C4.59273 14.2593 4.1823 14.2182 3.36143 14.1361C2.92776 14.0928 2.71093 14.0711 2.54161 13.9838C2.32656 13.8728 2.15902 13.6877 2.07005 13.4627C2 13.2855 2 13.0676 2 12.6318V11.3683C2 10.9324 2 10.7144 2.07008 10.5372C2.15905 10.3123 2.32654 10.1272 2.54152 10.0163C2.71088 9.92891 2.92777 9.90722 3.36155 9.86384H3.36155H3.36156C4.18264 9.78173 4.59319 9.74068 4.81842 9.56881C5.10395 9.35092 5.2507 8.99664 5.20287 8.64066C5.16514 8.35987 4.90385 8.04052 4.38128 7.40182C4.10516 7.06435 3.96711 6.89561 3.90914 6.71405C3.83557 6.48364 3.848 6.23438 3.94413 6.01243C4.01988 5.83754 4.17403 5.68339 4.48233 5.37509L5.37565 4.48177L5.37566 4.48177C5.68385 4.17357 5.83795 4.01947 6.01277 3.94373C6.23478 3.84753 6.48414 3.8351 6.71463 3.90872C6.89612 3.9667 7.06481 4.10472 7.4022 4.38076C8.04061 4.9031 8.35982 5.16427 8.64044 5.20207C8.99661 5.25003 9.35113 5.10319 9.56907 4.81742C9.74077 4.59227 9.78181 4.18195 9.86387 3.36131C9.90722 2.92776 9.9289 2.71098 10.0162 2.5417C10.1271 2.32658 10.3123 2.15898 10.5374 2.07001C10.7145 2 10.9324 2 11.3681 2H12.6318C13.0676 2 13.2855 2 13.4627 2.07005C13.6877 2.15902 13.8728 2.32656 13.9838 2.54161ZM12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z" fill="#8B95A1"/>
+</svg>
diff --git a/src/components/chatRomList.tsx b/src/components/chatRomList.tsx
new file mode 100644
index 00000000..29a37a93
--- /dev/null
+++ b/src/components/chatRomList.tsx
@@ -0,0 +1,29 @@
+const ChatRoomList: React.FC = () => {
+    return (
+        <div>
+            <div>
+                IMG
+            </div>
+            <div>
+                <div>
+                    김나나
+                </div>
+                <div>
+                    생일 축하해 ㅎㅎ
+                </div>
+            </div>
+
+            <div>
+                <div>
+                    9월 12일
+                </div>
+                <div>
+                    2
+                </div>
+            </div>
+
+        </div>
+    );
+};
+
+export default ChatRoomList;
diff --git a/src/components/otherMessageBox.tsx b/src/components/otherMessageBox.tsx
index fd4186b0..66e1198e 100644
--- a/src/components/otherMessageBox.tsx
+++ b/src/components/otherMessageBox.tsx
@@ -11,7 +11,7 @@ const OtherMessageBox: React.FC<OtherMessageBoxProps> = ({ message, timestamp })
 
         {/* 메시지 박스 */}
         <div className="max-w-[224px] bg-gray-50 py-2 px-4 rounded-tl-2xl rounded-tr-2xl rounded-br-2xl text-left border border-gray-200 break-words">
-          <p className="text-sm font-semibold">
+          <p className="text-sm font-semibold appleSD">
             {message}
           </p>
         </div>
diff --git a/src/components/viewList.tsx b/src/components/viewList.tsx
new file mode 100644
index 00000000..64c9b49f
--- /dev/null
+++ b/src/components/viewList.tsx
@@ -0,0 +1,12 @@
+const ViewList: React.FC = () => {
+    return (
+        <div className="flex justify-center space-x-7">
+            <img src={require('../assets/friendIcon.svg').default} alt="Friend" />
+            <img src={require('../assets/chatIcon.svg').default} alt="ChatRoom" />
+            <img src={require('../assets/openChatIcon.svg').default} alt="OpenChat" />
+            <img src={require('../assets/etcIcon.svg').default} alt="Etc" />
+        </div>
+    );
+};
+
+export default ViewList;
diff --git a/src/pages/chatList.tsx b/src/pages/chatList.tsx
index 693da49f..4ab70a66 100644
--- a/src/pages/chatList.tsx
+++ b/src/pages/chatList.tsx
@@ -1 +1,28 @@
-export {}
\ No newline at end of file
+import React from 'react';
+import NavBar from '../components/navBar';
+import ViewList from '../components/viewList';
+import ChatRoomList from '../components/chatRomList';
+
+const ChatList:React.FC = () => {
+    return <div>
+        <NavBar/>
+
+        <div className='flex items-center space-x-48 h-14'>
+            <div className='text-xl font-semibold'>
+                채팅
+            </div>
+            <div className='flex justify-center space-x-4'>
+                <img src={require('../assets/glassesIcon.svg').default} alt="search" />
+                <img src={require('../assets/chatMoreIcon.svg').default} alt="moreChat" />
+                <img src={require('../assets/settingIcon.svg').default} alt="setting" />
+            </div>
+        </div>
+
+        <div> {/*채팅목록 컴포넌트*/}
+            <ChatRoomList/>
+        </div>
+
+        <ViewList/>
+    </div>
+}
+export default ChatList;
\ No newline at end of file
diff --git a/src/pages/friendList.tsx b/src/pages/friendList.tsx
new file mode 100644
index 00000000..696d3b10
--- /dev/null
+++ b/src/pages/friendList.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+const FriendList:React.FC = () => {
+    return <div>
+        d
+    </div>
+}
+export default FriendList;
\ No newline at end of file

From fef40b5aad7e4d74ee65cef9ba86a4abeb5372c3 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:11:23 +0900
Subject: [PATCH 16/25] =?UTF-8?q?feat:=20=EB=A1=9C=EC=BB=AC=20=EC=8A=A4?=
 =?UTF-8?q?=ED=86=A0=EB=A6=AC=EC=A7=80=EC=97=90=EC=84=9C=20=EB=A9=94?=
 =?UTF-8?q?=EC=84=B8=EC=A7=80=20=EB=B6=88=EB=9F=AC=EC=98=A4=EA=B3=A0=20?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=ED=95=98=EB=8A=94=20=EA=B8=B0=EB=8A=A5=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                            | 2 +-
 src/App.tsx                                  | 8 ++++----
 src/pages/{chatList.tsx => chatListRoom.tsx} | 8 +++-----
 src/pages/chatRoom.tsx                       | 9 +++++++++
 src/pages/friendList.tsx                     | 8 --------
 src/pages/friendListRoom.tsx                 | 8 ++++++++
 6 files changed, 25 insertions(+), 18 deletions(-)
 rename src/pages/{chatList.tsx => chatListRoom.tsx} (83%)
 delete mode 100644 src/pages/friendList.tsx
 create mode 100644 src/pages/friendListRoom.tsx

diff --git a/public/index.html b/public/index.html
index c5c1141f..999564d1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,7 +11,7 @@
   <title>React App</title>
 </head>
 
-<body class="font-appleSD">
+<body class="">
   <div id="root"></div>
   <script src="../src/App.tsx" type="module"></script>
 </body>
diff --git a/src/App.tsx b/src/App.tsx
index aaf02c1e..3c0d9895 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import ChatRoom from '../src/pages/chatRoom';
-import ChatList from '../src/pages/chatList';
-import FriendList from './pages/friendList';
+import ChatListRoom from './pages/chatListRoom';
+import FriendListRoom from './pages/friendListRoom';
 
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<ChatRoom />} />
-        <Route path="/chatList" element={<ChatList />} />
-        <Route path="/friendList" element={<FriendList />} />
+        <Route path="/chatListRoom" element={<ChatListRoom />} />
+        <Route path="/friendListRoom" element={<FriendListRoom />} />
         {/* 기본 경로: ChatRoom */}
       </Routes>
     </Router>
diff --git a/src/pages/chatList.tsx b/src/pages/chatListRoom.tsx
similarity index 83%
rename from src/pages/chatList.tsx
rename to src/pages/chatListRoom.tsx
index 4ab70a66..75f2a1fa 100644
--- a/src/pages/chatList.tsx
+++ b/src/pages/chatListRoom.tsx
@@ -3,7 +3,7 @@ import NavBar from '../components/navBar';
 import ViewList from '../components/viewList';
 import ChatRoomList from '../components/chatRomList';
 
-const ChatList:React.FC = () => {
+const ChatListRoom:React.FC = () => {
     return <div>
         <NavBar/>
 
@@ -18,11 +18,9 @@ const ChatList:React.FC = () => {
             </div>
         </div>
 
-        <div> {/*채팅목록 컴포넌트*/}
-            <ChatRoomList/>
-        </div>
+        <ChatRoomList/>
 
         <ViewList/>
     </div>
 }
-export default ChatList;
\ No newline at end of file
+export default ChatListRoom;
\ No newline at end of file
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 25ad7fa9..984087b3 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -59,6 +59,12 @@ const ChatRoom: React.FC = () => {
         scrollToBottom();
     }, [messages]);
 
+    // 로컬 스토리지에 메세지 업로드
+    const updateLocalStorage = (newMessage: Message) => {
+        localStorage.setItem('chatMessages', JSON.stringify(newMessage));
+        console.log(newMessage);
+    }
+
     // Enter 키 입력 시 메시지를 상태에 추가함 (사실 전송의 기능을 수행합니다!)
     const sendMessage = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'Enter' && inputMessage.trim()) {
@@ -77,6 +83,9 @@ const ChatRoom: React.FC = () => {
             // 기존 메시지에 새 메시지 추가
             setMessages([...messages, newMessage]);
 
+            // 메세지 업로드 -> 잘 동작을 안함.. 해결하기ㅠㅠ
+            updateLocalStorage(newMessage);
+
             // 입력창 초기화.. 까먹을뻔
             setInputMessage("");
         }
diff --git a/src/pages/friendList.tsx b/src/pages/friendList.tsx
deleted file mode 100644
index 696d3b10..00000000
--- a/src/pages/friendList.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-
-const FriendList:React.FC = () => {
-    return <div>
-        d
-    </div>
-}
-export default FriendList;
\ No newline at end of file
diff --git a/src/pages/friendListRoom.tsx b/src/pages/friendListRoom.tsx
new file mode 100644
index 00000000..401d364a
--- /dev/null
+++ b/src/pages/friendListRoom.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+const FriendListRoom:React.FC = () => {
+    return <div>
+        d
+    </div>
+}
+export default FriendListRoom;
\ No newline at end of file

From bd87c55f6a34c2af7a610286af261c8e2e6f6f7e Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:21:24 +0900
Subject: [PATCH 17/25] =?UTF-8?q?style:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chatRomList.tsx  | 29 -----------------------------
 src/components/chatRoomList.tsx | 24 ++++++++++++++++++++++++
 src/pages/chatListRoom.tsx      |  4 ++--
 3 files changed, 26 insertions(+), 31 deletions(-)
 delete mode 100644 src/components/chatRomList.tsx
 create mode 100644 src/components/chatRoomList.tsx

diff --git a/src/components/chatRomList.tsx b/src/components/chatRomList.tsx
deleted file mode 100644
index 29a37a93..00000000
--- a/src/components/chatRomList.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-const ChatRoomList: React.FC = () => {
-    return (
-        <div>
-            <div>
-                IMG
-            </div>
-            <div>
-                <div>
-                    김나나
-                </div>
-                <div>
-                    생일 축하해 ㅎㅎ
-                </div>
-            </div>
-
-            <div>
-                <div>
-                    9월 12일
-                </div>
-                <div>
-                    2
-                </div>
-            </div>
-
-        </div>
-    );
-};
-
-export default ChatRoomList;
diff --git a/src/components/chatRoomList.tsx b/src/components/chatRoomList.tsx
new file mode 100644
index 00000000..05d300a4
--- /dev/null
+++ b/src/components/chatRoomList.tsx
@@ -0,0 +1,24 @@
+const ChatRoomList: React.FC = () => {
+    return (
+        <div className="flex items-center px-4 py-3 space-x-4">
+            {/* 프로필 이미지 */}
+            <img 
+                src={require('../assets/defaultProfileImg.svg').default} 
+                alt="profile"
+            />
+
+            {/* 이름과 메시지 */}
+            <div className="flex-1">
+                <div className="text-gray-700 font-semibold text-base">김나나</div>
+                <div className="text-gray-500 text-xs">생일 축하해 ㅎㅎ</div>
+            </div>
+
+            {/* 날짜 */}
+            <div className="text-gray-400 text-sm">
+                9월 12일
+            </div>
+        </div>
+    );
+};
+
+export default ChatRoomList;
diff --git a/src/pages/chatListRoom.tsx b/src/pages/chatListRoom.tsx
index 75f2a1fa..d5c4adce 100644
--- a/src/pages/chatListRoom.tsx
+++ b/src/pages/chatListRoom.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import NavBar from '../components/navBar';
 import ViewList from '../components/viewList';
-import ChatRoomList from '../components/chatRomList';
+import ChatRoomList from '../components/chatRoomList';
 
 const ChatListRoom:React.FC = () => {
     return <div>
         <NavBar/>
 
         <div className='flex items-center space-x-48 h-14'>
-            <div className='text-xl font-semibold'>
+            <div className="text-xl font-semibold ml-5">
                 채팅
             </div>
             <div className='flex justify-center space-x-4'>

From 27990f62acc7ca14796f9297f970292a4a595b33 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 20:50:03 +0900
Subject: [PATCH 18/25] =?UTF-8?q?style:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/{viewList.tsx => bottomViewList.tsx} |  7 ++++---
 src/pages/chatListRoom.tsx                          | 12 +++++++-----
 2 files changed, 11 insertions(+), 8 deletions(-)
 rename src/components/{viewList.tsx => bottomViewList.tsx} (63%)

diff --git a/src/components/viewList.tsx b/src/components/bottomViewList.tsx
similarity index 63%
rename from src/components/viewList.tsx
rename to src/components/bottomViewList.tsx
index 64c9b49f..e36a4093 100644
--- a/src/components/viewList.tsx
+++ b/src/components/bottomViewList.tsx
@@ -1,6 +1,7 @@
-const ViewList: React.FC = () => {
+const BottomViewList: React.FC = () => {
     return (
-        <div className="flex justify-center space-x-7">
+        <div className="w-full h-20 flex justify-center items-center space-x-7 pb-6">
+            {/* 상단 그림자 추가 하기*/}
             <img src={require('../assets/friendIcon.svg').default} alt="Friend" />
             <img src={require('../assets/chatIcon.svg').default} alt="ChatRoom" />
             <img src={require('../assets/openChatIcon.svg').default} alt="OpenChat" />
@@ -9,4 +10,4 @@ const ViewList: React.FC = () => {
     );
 };
 
-export default ViewList;
+export default BottomViewList;
diff --git a/src/pages/chatListRoom.tsx b/src/pages/chatListRoom.tsx
index d5c4adce..f72633da 100644
--- a/src/pages/chatListRoom.tsx
+++ b/src/pages/chatListRoom.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import NavBar from '../components/navBar';
-import ViewList from '../components/viewList';
+import BottomViewList from '../components/bottomViewList';
 import ChatRoomList from '../components/chatRoomList';
 
 const ChatListRoom:React.FC = () => {
-    return <div>
+    return <div className='w-full h-full flex flex-col '>
         <NavBar/>
 
         <div className='flex items-center space-x-48 h-14'>
-            <div className="text-xl font-semibold ml-5">
+            <div className="text-xl font-semibold ml-5 text-gray-700">
                 채팅
             </div>
             <div className='flex justify-center space-x-4'>
@@ -18,9 +18,11 @@ const ChatListRoom:React.FC = () => {
             </div>
         </div>
 
-        <ChatRoomList/>
+        <div className='flex-1'>
+            <ChatRoomList/>
+        </div>
 
-        <ViewList/>
+        <BottomViewList/>
     </div>
 }
 export default ChatListRoom;
\ No newline at end of file

From 49afc606a996a1d3741ba84aa6ffed3c6b460f7d Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:12:52 +0900
Subject: [PATCH 19/25] =?UTF-8?q?feat:=20=EC=B9=9C=EA=B5=AC=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/addFriendIcon.svg                 |  3 +
 src/assets/{presentIcon.svg => giftIcon.svg} |  0
 src/assets/searchIcon.svg                    |  4 ++
 src/pages/friendListRoom.tsx                 | 61 ++++++++++++++++++--
 4 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/addFriendIcon.svg
 rename src/assets/{presentIcon.svg => giftIcon.svg} (100%)
 create mode 100644 src/assets/searchIcon.svg

diff --git a/src/assets/addFriendIcon.svg b/src/assets/addFriendIcon.svg
new file mode 100644
index 00000000..a2b02eab
--- /dev/null
+++ b/src/assets/addFriendIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23 13.3938C23 13.6704 22.886 13.9357 22.6831 14.1313C22.4802 14.3269 22.205 14.4368 21.918 14.4368H21.1967V15.1322C21.1967 15.4088 21.0827 15.6741 20.8798 15.8697C20.6769 16.0654 20.4017 16.1753 20.1148 16.1753C19.8278 16.1753 19.5526 16.0654 19.3497 15.8697C19.1468 15.6741 19.0328 15.4088 19.0328 15.1322V14.4368H18.3115C18.0246 14.4368 17.7494 14.3269 17.5465 14.1313C17.3436 13.9357 17.2296 13.6704 17.2296 13.3938C17.2296 13.1171 17.3436 12.8518 17.5465 12.6562C17.7494 12.4606 18.0246 12.3507 18.3115 12.3507H19.0328V11.6553C19.0328 11.3787 19.1468 11.1134 19.3497 10.9178C19.5526 10.7222 19.8278 10.6123 20.1148 10.6123C20.4017 10.6123 20.6769 10.7222 20.8798 10.9178C21.0827 11.1134 21.1967 11.3787 21.1967 11.6553V12.3507H21.918C22.205 12.3507 22.4802 12.4606 22.6831 12.6562C22.886 12.8518 23 13.1171 23 13.3938ZM18.0582 18.2857C18.2428 18.4976 18.3325 18.7714 18.3077 19.0471C18.2828 19.3227 18.1454 19.5776 17.9256 19.7556C17.7059 19.9335 17.4218 20.02 17.1358 19.9961C16.8499 19.9721 16.5856 19.8396 16.401 19.6278C15.1666 18.211 12.9919 16.5229 9.65586 16.5229C7.05105 16.5229 4.65542 17.6251 2.91076 19.6278C2.72616 19.8396 2.46181 19.9721 2.17588 19.9961C1.88996 20.02 1.60586 19.9335 1.38611 19.7556C1.16635 19.5776 1.02892 19.3227 1.00407 19.0471C0.979213 18.7714 1.06896 18.4976 1.25357 18.2857C2.42904 16.9171 3.93708 15.8496 5.64361 15.1783C4.58242 14.374 3.8077 13.2707 3.42726 12.0221C3.04683 10.7735 3.0796 9.44164 3.52102 8.21184C3.96244 6.98203 4.79055 5.91546 5.89011 5.16057C6.98967 4.40567 8.30598 4 9.65586 4C11.0057 4 12.3221 4.40567 13.4216 5.16057C14.5212 5.91546 15.3493 6.98203 15.7907 8.21184C16.2321 9.44164 16.2649 10.7735 15.8845 12.0221C15.504 13.2707 14.7293 14.374 13.6681 15.1783C15.3748 15.8494 16.8829 16.9169 18.0582 18.2857ZM9.65586 14.4368C10.5118 14.4368 11.3486 14.1921 12.0603 13.7337C12.772 13.2752 13.3267 12.6236 13.6543 11.8612C13.9818 11.0989 14.0675 10.26 13.9005 9.45062C13.7335 8.64129 13.3214 7.89787 12.7161 7.31437C12.1108 6.73087 11.3397 6.3335 10.5002 6.17252C9.66066 6.01153 8.79048 6.09415 7.99968 6.40994C7.20887 6.72573 6.53295 7.26049 6.05741 7.94661C5.58186 8.63273 5.32804 9.43939 5.32804 10.2646C5.32923 11.3708 5.78558 12.4313 6.59694 13.2135C7.40831 13.9957 8.50842 14.4357 9.65586 14.4368Z" fill="#8B95A1"/>
+</svg>
diff --git a/src/assets/presentIcon.svg b/src/assets/giftIcon.svg
similarity index 100%
rename from src/assets/presentIcon.svg
rename to src/assets/giftIcon.svg
diff --git a/src/assets/searchIcon.svg b/src/assets/searchIcon.svg
new file mode 100644
index 00000000..7153750d
--- /dev/null
+++ b/src/assets/searchIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10.875" cy="10.875" r="7.875" stroke="#8B95A1" stroke-width="2"/>
+<path d="M21 21L17 17" stroke="#8B95A1" stroke-width="2" stroke-linecap="round"/>
+</svg>
diff --git a/src/pages/friendListRoom.tsx b/src/pages/friendListRoom.tsx
index 401d364a..92a531d0 100644
--- a/src/pages/friendListRoom.tsx
+++ b/src/pages/friendListRoom.tsx
@@ -1,8 +1,59 @@
 import React from 'react';
+import NavBar from '../components/navBar';
+import BottomViewList from '../components/bottomViewList';
 
-const FriendListRoom:React.FC = () => {
-    return <div>
-        d
-    </div>
+const FriendListRoom: React.FC = () => {
+    return (
+        <div className="w-full h-full flex flex-col">
+            <NavBar />
+            <div className="flex-1 px-5">
+                <div className="flex items-center justify-center space-x-44 my-1 h-12">
+                    <p className="text-xl font-semibold text-gray-700">친구</p>
+                    <div className="flex space-x-4">
+                        <img src={require('../assets/searchIcon.svg').default} alt="Search" />
+                        <img src={require('../assets/addFriendIcon.svg').default} alt="Add Friend" />
+                        <img src={require('../assets/settingIcon.svg').default} alt="Settings" />
+                    </div>
+                </div>
+
+                {/* 본인 프로필 */}
+                <div className="flex items-center py-4 border-b border-gray-100">
+                    <img src={require('../assets/myProfileImg.svg').default} alt="My Profile" className="w-10 h-10" />
+                    <span className="ml-4 font-semibold text-base text-gray-700">선우</span>
+                </div>
+
+                {/* 생일인 친구 */}
+                <div className="mt-4 border-b border-gray-100">
+                    <div className="text-gray-500 mb-2 text-xs">
+                        생일인 친구
+                    </div>
+                    <div className="flex items-center justify-between py-2">
+                        <div className="flex items-center">
+                            <img src={require('../assets/defaultProfileImg.svg').default} alt="Search" className="w-8 h-8" />
+                            <p className="ml-4 text-gray-700 text-base font-semibold">
+                                김나나
+                            </p>
+                        </div>
+                        <img src={require('../assets/giftIcon.svg').default} alt="Gift" />
+                    </div>
+                </div>
+
+                {/* 친구 목록 */}
+                <div className="mt-4">
+                    <div className="text-gray-500 mb-2 text-xs">
+                        친구 4
+                    </div>
+                    <div className="flex items-center py-2">
+                            <img src={require('../assets/defaultProfileImg.svg').default} alt="Search" className="w-8 h-8" />
+                        <p className="ml-4 text-gray-700 text-base font-semibold">
+                            권미미
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <BottomViewList />
+        </div>
+    );
 }
-export default FriendListRoom;
\ No newline at end of file
+
+export default FriendListRoom;

From 06444b48f58f52e442b75ea9c74d6d4f75ba8eaa Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:32:13 +0900
Subject: [PATCH 20/25] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=EC=97=90=20=EB=94=B0=EB=9D=BC=20=EC=95=84=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                       |  6 +++---
 src/components/bottomViewList.tsx | 34 ++++++++++++++++++++++++++++---
 src/data/chatData.json            |  4 ++++
 3 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 3c0d9895..f5af7d7d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,10 +8,10 @@ function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<ChatRoom />} />
+        {/* 기본 경로: FriendListRoom => 친구 목록 */}
+        <Route path="/" element={<FriendListRoom />} />
+        <Route path="/chatRoom" element={<ChatRoom />} />
         <Route path="/chatListRoom" element={<ChatListRoom />} />
-        <Route path="/friendListRoom" element={<FriendListRoom />} />
-        {/* 기본 경로: ChatRoom */}
       </Routes>
     </Router>
   );
diff --git a/src/components/bottomViewList.tsx b/src/components/bottomViewList.tsx
index e36a4093..66dd3ab8 100644
--- a/src/components/bottomViewList.tsx
+++ b/src/components/bottomViewList.tsx
@@ -1,9 +1,37 @@
+import React, { useState } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+
 const BottomViewList: React.FC = () => {
+    const location = useLocation();
+    const [selectedIcon, setSelectedIcon] = useState(location.pathname);
+    // useLocation으로 초기 경로 가져와 현재 선택된 아이콘 저장
+
+    const handleTabClick = (icon: string) => {
+        setSelectedIcon(icon);
+    };
+
     return (
         <div className="w-full h-20 flex justify-center items-center space-x-7 pb-6">
-            {/* 상단 그림자 추가 하기*/}
-            <img src={require('../assets/friendIcon.svg').default} alt="Friend" />
-            <img src={require('../assets/chatIcon.svg').default} alt="ChatRoom" />
+            <Link to="/" onClick={() => handleTabClick('/')}>
+                <img
+                    src={
+                        selectedIcon === '/'
+                            ? require('../assets/friendIcon_on.svg').default
+                            : require('../assets/friendIcon.svg').default
+                    }
+                    alt="Friend"
+                />
+            </Link>
+            <Link to="/chatListRoom" onClick={() => handleTabClick('/chatListRoom')}>
+                <img
+                    src={
+                        selectedIcon === '/chatListRoom'
+                            ? require('../assets/chatIcon_on.svg').default
+                            : require('../assets/chatIcon.svg').default
+                    }
+                    alt="ChatRoom"
+                />
+            </Link>
             <img src={require('../assets/openChatIcon.svg').default} alt="OpenChat" />
             <img src={require('../assets/etcIcon.svg').default} alt="Etc" />
         </div>
diff --git a/src/data/chatData.json b/src/data/chatData.json
index a0ecf5bf..eb30e9e5 100644
--- a/src/data/chatData.json
+++ b/src/data/chatData.json
@@ -3,24 +3,28 @@
     {
       "messageId": 1,
       "senderId": 1,
+      "senderName": "최선우",
       "message": "나나야 우리 낼 모임 누구누구 온댔지?",
       "timestamp": "2024.09.11 오후 9:47"
     },
     {
       "messageId": 2,
       "senderId": 2,
+      "senderName": "최선우",
       "message": "나랑 너랑 미미랑 오랜지랑 루비님이랑 로로님이랑 디디랑 음 그리고 또 누구였더라",
       "timestamp": "2024.09.11 오후 9:47"
     },
     {
       "messageId": 3,
       "senderId": 2,
+      "senderName": "최선우",
       "message": "선우야 나 드디어 생일이다~",
       "timestamp": "2024.09.12 오후 9:47"
     },
     {
       "messageId": 4,
       "senderId": 1,
+      "senderName": "최선우",
       "message": "생일 축하해 ㅎㅎ",
       "timestamp": "2024.09.12 오후 9:48"
     }

From e33c683213a134e9b23037cb8adca46ce258aa77 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 21:51:20 +0900
Subject: [PATCH 21/25] =?UTF-8?q?feat:=20=EC=9C=A0=EC=A0=80=20json=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=20=EA=B8=B0=EB=B0=98=20=EB=9E=9C=EB=8D=94?=
 =?UTF-8?q?=EB=A7=81,=20=EC=83=9D=EC=9D=BC=EC=9D=B8=20=EC=B9=9C=EA=B5=AC?=
 =?UTF-8?q?=20=ED=95=84=ED=84=B0=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/userData.json       | 37 ++++++++++++++
 src/pages/friendListRoom.tsx | 94 +++++++++++++++++++++++++-----------
 2 files changed, 103 insertions(+), 28 deletions(-)
 create mode 100644 src/data/userData.json

diff --git a/src/data/userData.json b/src/data/userData.json
new file mode 100644
index 00000000..45a318ff
--- /dev/null
+++ b/src/data/userData.json
@@ -0,0 +1,37 @@
+[
+    {
+        "id": 1,
+        "name": "선우",
+        "birthday": "1990-11-01"
+    },
+    {
+        "id": 2,
+        "name": "문현준",
+        "birthday": "1990-11-02"
+    },
+    {
+        "id": 3,
+        "name": "이상혁",
+        "birthday": "1991-11-02"
+    },
+    {
+        "id": 4,
+        "name": "최우제",
+        "birthday": "1990-11-03"
+    },
+    {
+        "id": 4,
+        "name": "이민형",
+        "birthday": "1990-11-03"
+    },
+    {
+        "id": 4,
+        "name": "류민석",
+        "birthday": "1990-11-04"
+    },
+    {
+        "id": 4,
+        "name": "루비",
+        "birthday": "1990-11-04"
+    }
+]
diff --git a/src/pages/friendListRoom.tsx b/src/pages/friendListRoom.tsx
index 92a531d0..1ab2ec74 100644
--- a/src/pages/friendListRoom.tsx
+++ b/src/pages/friendListRoom.tsx
@@ -1,8 +1,46 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import NavBar from '../components/navBar';
 import BottomViewList from '../components/bottomViewList';
+import userData from '../data/userData.json'; // 사용자 데이터 JSON 파일
 
 const FriendListRoom: React.FC = () => {
+    // 사용자 ID 상태 (기본값: 1)
+    const [userId] = useState<number>(1);
+    
+    // 사용자 프로필 상태
+    const [userProfile, setUserProfile] = useState<{ id: number, name: string } | null>(null);
+    
+    // 생일인 친구 목록 상태
+    const [birthdayFriends, setBirthdayFriends] = useState<{ id: number, name: string }[]>([]);
+    
+    // 친구 목록 상태
+    const [friends, setFriends] = useState<{ id: number, name: string }[]>([]);
+
+    // 컴포넌트가 처음 렌더링될 때 사용자 데이터를 불러오는 useEffect
+    useEffect(() => {
+        // 사용자 데이터에서 현재 사용자 ID에 해당하는 프로필 찾기
+        const profile = userData.find(user => user.id === userId);
+        if (profile) {
+            setUserProfile(profile); // 프로필 상태 업데이트
+        }
+
+        // 오늘 날짜 가져오기
+        const today = new Date();
+        const todayString = `${today.getMonth() + 1}-${today.getDate()}`; // MM-DD 형식으로 변환
+
+        // 생일인 친구 목록과 친구 목록 설정
+        const birthdayFriendsList = userData.filter(friend => {
+            const friendBirthday = new Date(friend.birthday);
+            const friendBirthdayString = `${friendBirthday.getMonth() + 1}-${friendBirthday.getDate()}`;
+            return friendBirthdayString === todayString; // 생일이 오늘인 친구 필터링
+        });
+
+        const friendsList = userData.filter(friend => friend.id !== userId); // 현재 사용자를 제외한 친구 목록
+
+        setBirthdayFriends(birthdayFriendsList); // 생일인 친구 목록 상태 업데이트
+        setFriends(friendsList); // 친구 목록 상태 업데이트
+    }, [userId]); // userId가 변경될 때마다 다시 실행
+
     return (
         <div className="w-full h-full flex flex-col">
             <NavBar />
@@ -17,43 +55,43 @@ const FriendListRoom: React.FC = () => {
                 </div>
 
                 {/* 본인 프로필 */}
-                <div className="flex items-center py-4 border-b border-gray-100">
-                    <img src={require('../assets/myProfileImg.svg').default} alt="My Profile" className="w-10 h-10" />
-                    <span className="ml-4 font-semibold text-base text-gray-700">선우</span>
-                </div>
+                {userProfile && ( // 사용자 프로필이 있을 경우에만 렌더링
+                    <div className="flex items-center py-4 border-b border-gray-100">
+                        <img src={require('../assets/myProfileImg.svg').default} alt="My Profile" className="w-10 h-10" />
+                        <span className="ml-4 font-semibold text-base text-gray-700">{userProfile.name}</span>
+                    </div>
+                )}
 
                 {/* 생일인 친구 */}
-                <div className="mt-4 border-b border-gray-100">
-                    <div className="text-gray-500 mb-2 text-xs">
-                        생일인 친구
-                    </div>
-                    <div className="flex items-center justify-between py-2">
-                        <div className="flex items-center">
-                            <img src={require('../assets/defaultProfileImg.svg').default} alt="Search" className="w-8 h-8" />
-                            <p className="ml-4 text-gray-700 text-base font-semibold">
-                                김나나
-                            </p>
-                        </div>
-                        <img src={require('../assets/giftIcon.svg').default} alt="Gift" />
+                {birthdayFriends.length > 0 && ( // 생일인 친구가 있을 경우에만 렌더링
+                    <div className="mt-4 border-b border-gray-100">
+                        <div className="text-gray-500 mb-2 text-xs">생일인 친구</div>
+                        {birthdayFriends.map(friend => (
+                            <div key={friend.id} className="flex items-center justify-between py-2">
+                                <div className="flex items-center">
+                                    <img src={require('../assets/defaultProfileImg.svg').default} alt="Friend" className="w-8 h-8" />
+                                    <p className="ml-4 text-gray-700 text-base font-semibold">{friend.name}</p>
+                                </div>
+                                <img src={require('../assets/giftIcon.svg').default} alt="Gift" />
+                            </div>
+                        ))}
                     </div>
-                </div>
+                )}
 
                 {/* 친구 목록 */}
                 <div className="mt-4">
-                    <div className="text-gray-500 mb-2 text-xs">
-                        친구 4
-                    </div>
-                    <div className="flex items-center py-2">
-                            <img src={require('../assets/defaultProfileImg.svg').default} alt="Search" className="w-8 h-8" />
-                        <p className="ml-4 text-gray-700 text-base font-semibold">
-                            권미미
-                        </p>
-                    </div>
+                    <div className="text-gray-500 mb-2 text-xs">친구 {friends.length}</div>
+                    {friends.map(friend => (
+                        <div key={friend.id} className="flex items-center py-2">
+                            <img src={require('../assets/defaultProfileImg.svg').default} alt="Friend" className="w-8 h-8" />
+                            <p className="ml-4 text-gray-700 text-base font-semibold">{friend.name}</p>
+                        </div>
+                    ))}
                 </div>
             </div>
             <BottomViewList />
         </div>
     );
-}
+};
 
 export default FriendListRoom;

From b915ac0876175ac2dc77dbfa9f1056d54619f915 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 22:15:28 +0900
Subject: [PATCH 22/25] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EA=B5=AC=ED=98=84=20(1)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                     |  2 +-
 src/components/chatRoomList.tsx | 36 +++++++++++++++++++++++++----
 src/data/chatData.json          | 16 +++++++++----
 src/data/userData.json          |  8 +++----
 src/pages/chatListRoom.tsx      | 41 +++++++++++++++++++--------------
 5 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f5af7d7d..4c707e02 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,7 +10,7 @@ function App() {
       <Routes>
         {/* 기본 경로: FriendListRoom => 친구 목록 */}
         <Route path="/" element={<FriendListRoom />} />
-        <Route path="/chatRoom" element={<ChatRoom />} />
+        <Route path="/chatRoom/:userId" element={<ChatRoom />} />
         <Route path="/chatListRoom" element={<ChatListRoom />} />
       </Routes>
     </Router>
diff --git a/src/components/chatRoomList.tsx b/src/components/chatRoomList.tsx
index 05d300a4..5536be2e 100644
--- a/src/components/chatRoomList.tsx
+++ b/src/components/chatRoomList.tsx
@@ -1,6 +1,32 @@
-const ChatRoomList: React.FC = () => {
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import messagesData from '../data/chatData.json';
+import userData from '../data/userData.json';
+
+interface ChatRoomProps {
+    userId: number;
+}
+
+const ChatRoomList: React.FC<ChatRoomProps> = ({ userId }) => {
+    const navigate = useNavigate();
+
+    // 해당 userId에 맞는 채팅방 데이터를 찾기
+    const chatRoom = messagesData.messages.filter(message => message.senderId === userId);
+
+    // 가장 최근 메시지 가져오기
+    const latestMessage = chatRoom[chatRoom.length - 1]; // 가장 최근 메시지
+
+    // userId에 맞는 사용자 이름 찾기
+    const user = userData.find(user => user.id === userId);
+    const userName = user ? user.name : `사용자 ${userId}`; // 사용자 이름이 없으면 기본 이름 사용
+
+    // 클릭 시 해당 사용자의 ChatRoom으로 라우팅
+    const handleClick = () => {
+        navigate(`/chatRoom/${userId}`);
+    };
+
     return (
-        <div className="flex items-center px-4 py-3 space-x-4">
+        <div className="flex items-center px-4 py-3 space-x-4" onClick={handleClick} style={{ cursor: 'pointer' }}>
             {/* 프로필 이미지 */}
             <img 
                 src={require('../assets/defaultProfileImg.svg').default} 
@@ -9,13 +35,13 @@ const ChatRoomList: React.FC = () => {
 
             {/* 이름과 메시지 */}
             <div className="flex-1">
-                <div className="text-gray-700 font-semibold text-base">김나나</div>
-                <div className="text-gray-500 text-xs">생일 축하해 ㅎㅎ</div>
+                <div className="text-gray-700 font-semibold text-base">{userName}</div>
+                <div className="text-gray-500 text-xs">{latestMessage ? latestMessage.message : "메시지가 없습니다."}</div>
             </div>
 
             {/* 날짜 */}
             <div className="text-gray-400 text-sm">
-                9월 12일
+                {latestMessage ? latestMessage.timestamp.split(' ')[0] : "날짜 없음"}
             </div>
         </div>
     );
diff --git a/src/data/chatData.json b/src/data/chatData.json
index eb30e9e5..2c6d72cc 100644
--- a/src/data/chatData.json
+++ b/src/data/chatData.json
@@ -3,30 +3,38 @@
     {
       "messageId": 1,
       "senderId": 1,
-      "senderName": "최선우",
       "message": "나나야 우리 낼 모임 누구누구 온댔지?",
       "timestamp": "2024.09.11 오후 9:47"
     },
     {
       "messageId": 2,
       "senderId": 2,
-      "senderName": "최선우",
       "message": "나랑 너랑 미미랑 오랜지랑 루비님이랑 로로님이랑 디디랑 음 그리고 또 누구였더라",
       "timestamp": "2024.09.11 오후 9:47"
     },
     {
       "messageId": 3,
       "senderId": 2,
-      "senderName": "최선우",
       "message": "선우야 나 드디어 생일이다~",
       "timestamp": "2024.09.12 오후 9:47"
     },
     {
       "messageId": 4,
       "senderId": 1,
-      "senderName": "최선우",
       "message": "생일 축하해 ㅎㅎ",
       "timestamp": "2024.09.12 오후 9:48"
+    },
+    {
+      "messageId": 5,
+      "senderId": 1,
+      "message": "대상혁!",
+      "timestamp": "2024.11.02 오후 9:20"
+    },
+    {
+      "messageId": 5,
+      "senderId": 3,
+      "message": "감사합니다",
+      "timestamp": "2024.11.02 오후 9:25"
     }
   ]
 }
diff --git a/src/data/userData.json b/src/data/userData.json
index 45a318ff..58701087 100644
--- a/src/data/userData.json
+++ b/src/data/userData.json
@@ -20,18 +20,18 @@
         "birthday": "1990-11-03"
     },
     {
-        "id": 4,
+        "id": 5,
         "name": "이민형",
         "birthday": "1990-11-03"
     },
     {
-        "id": 4,
+        "id": 6,
         "name": "류민석",
         "birthday": "1990-11-04"
     },
     {
-        "id": 4,
-        "name": "루비",
+        "id": 7,
+        "name": "김나나",
         "birthday": "1990-11-04"
     }
 ]
diff --git a/src/pages/chatListRoom.tsx b/src/pages/chatListRoom.tsx
index f72633da..6a9f46c1 100644
--- a/src/pages/chatListRoom.tsx
+++ b/src/pages/chatListRoom.tsx
@@ -3,26 +3,33 @@ import NavBar from '../components/navBar';
 import BottomViewList from '../components/bottomViewList';
 import ChatRoomList from '../components/chatRoomList';
 
-const ChatListRoom:React.FC = () => {
-    return <div className='w-full h-full flex flex-col '>
-        <NavBar/>
+const ChatListRoom: React.FC = () => {
+    const userIds = [1, 3]; // 목록에 랜더링할 사용자 ID
 
-        <div className='flex items-center space-x-48 h-14'>
-            <div className="text-xl font-semibold ml-5 text-gray-700">
-                채팅
+    return (
+        <div className='w-full h-full flex flex-col'>
+            <NavBar />
+
+            <div className='flex items-center space-x-48 h-14'>
+                <div className="text-xl font-semibold ml-5 text-gray-700">
+                    채팅
+                </div>
+                <div className='flex justify-center space-x-4'>
+                    <img src={require('../assets/glassesIcon.svg').default} alt="search" />
+                    <img src={require('../assets/chatMoreIcon.svg').default} alt="moreChat" />
+                    <img src={require('../assets/settingIcon.svg').default} alt="setting" />
+                </div>
             </div>
-            <div className='flex justify-center space-x-4'>
-                <img src={require('../assets/glassesIcon.svg').default} alt="search" />
-                <img src={require('../assets/chatMoreIcon.svg').default} alt="moreChat" />
-                <img src={require('../assets/settingIcon.svg').default} alt="setting" />
+
+            <div className='flex-1'>
+                {userIds.map(userId => (
+                    <ChatRoomList key={userId} userId={userId} />
+                ))}
             </div>
-        </div>
 
-        <div className='flex-1'>
-            <ChatRoomList/>
+            <BottomViewList />
         </div>
+    );
+};
 
-        <BottomViewList/>
-    </div>
-}
-export default ChatListRoom;
\ No newline at end of file
+export default ChatListRoom;

From 6e2f87c810c5a3e96df7a1921367b834c9ac8934 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 22:47:42 +0900
Subject: [PATCH 23/25] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EA=B5=AC=ED=98=84=20(2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/data/chatData.json     | 12 ------------
 src/pages/chatListRoom.tsx |  2 +-
 src/pages/chatRoom.tsx     | 21 +++++++++++++--------
 3 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/data/chatData.json b/src/data/chatData.json
index 2c6d72cc..a0ecf5bf 100644
--- a/src/data/chatData.json
+++ b/src/data/chatData.json
@@ -23,18 +23,6 @@
       "senderId": 1,
       "message": "생일 축하해 ㅎㅎ",
       "timestamp": "2024.09.12 오후 9:48"
-    },
-    {
-      "messageId": 5,
-      "senderId": 1,
-      "message": "대상혁!",
-      "timestamp": "2024.11.02 오후 9:20"
-    },
-    {
-      "messageId": 5,
-      "senderId": 3,
-      "message": "감사합니다",
-      "timestamp": "2024.11.02 오후 9:25"
     }
   ]
 }
diff --git a/src/pages/chatListRoom.tsx b/src/pages/chatListRoom.tsx
index 6a9f46c1..3659828d 100644
--- a/src/pages/chatListRoom.tsx
+++ b/src/pages/chatListRoom.tsx
@@ -4,7 +4,7 @@ import BottomViewList from '../components/bottomViewList';
 import ChatRoomList from '../components/chatRoomList';
 
 const ChatListRoom: React.FC = () => {
-    const userIds = [1, 3]; // 목록에 랜더링할 사용자 ID
+    const userIds = [1]; // 목록에 랜더링할 사용자 ID
 
     return (
         <div className='w-full h-full flex flex-col'>
diff --git a/src/pages/chatRoom.tsx b/src/pages/chatRoom.tsx
index 984087b3..c0784b47 100644
--- a/src/pages/chatRoom.tsx
+++ b/src/pages/chatRoom.tsx
@@ -29,7 +29,12 @@ const ChatRoom: React.FC = () => {
 
     // 컴포넌트 첫 랜더링시 JSON 데이터를 상태에 설정함
     useEffect(() => {
-        setMessages(messagesData.messages);
+        const storedMessages = localStorage.getItem('ChatData');
+        if (storedMessages) {
+            setMessages(JSON.parse(storedMessages));
+        } else {
+            setMessages(messagesData.messages); // JSON에서 초기 데이터 설정
+        }
     }, []);
 
     // 버튼 클릭 시 사용자 ID 변경
@@ -60,10 +65,9 @@ const ChatRoom: React.FC = () => {
     }, [messages]);
 
     // 로컬 스토리지에 메세지 업로드
-    const updateLocalStorage = (newMessage: Message) => {
-        localStorage.setItem('chatMessages', JSON.stringify(newMessage));
-        console.log(newMessage);
-    }
+    const updateLocalStorage = (newMessages: Message[]) => {
+        localStorage.setItem('ChatData', JSON.stringify(newMessages));
+    };
 
     // Enter 키 입력 시 메시지를 상태에 추가함 (사실 전송의 기능을 수행합니다!)
     const sendMessage = (e: React.KeyboardEvent<HTMLInputElement>) => {
@@ -81,10 +85,11 @@ const ChatRoom: React.FC = () => {
             };
 
             // 기존 메시지에 새 메시지 추가
-            setMessages([...messages, newMessage]);
+            const updatedMessages = [...messages, newMessage];
+            setMessages(updatedMessages);
 
             // 메세지 업로드 -> 잘 동작을 안함.. 해결하기ㅠㅠ
-            updateLocalStorage(newMessage);
+            updateLocalStorage(updatedMessages);
 
             // 입력창 초기화.. 까먹을뻔
             setInputMessage("");
@@ -161,4 +166,4 @@ const ChatRoom: React.FC = () => {
     );
 };
 
-export default ChatRoom;
\ No newline at end of file
+export default ChatRoom;

From 9411d139d844ddf181be502635431563fad15aa4 Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sat, 2 Nov 2024 22:53:25 +0900
Subject: [PATCH 24/25] =?UTF-8?q?feat:=20=EB=92=A4=EB=A1=9C=EA=B0=80?=
 =?UTF-8?q?=EA=B8=B0=20=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chatHeader.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/chatHeader.tsx b/src/components/chatHeader.tsx
index 26b0e05c..bdb605c0 100644
--- a/src/components/chatHeader.tsx
+++ b/src/components/chatHeader.tsx
@@ -1,8 +1,17 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
 const ChatHeader: React.FC = () => {
+    const navigate = useNavigate();
+
+    const handleBackClick = () => {
+        navigate('/chatListRoom'); // chatListRoom 경로로 이동
+    };
+
     return (
         <div className="h-11 flex justify-between items-center px-5 py-2">
             {/* 왼쪽 뒤로가기 버튼 */}
-            <div className="flex items-center">
+            <div className="flex items-center" onClick={handleBackClick} style={{ cursor: 'pointer' }}>
                 <img src={require('../assets/backArrowImg.svg').default} alt="backArrowImg" className="w-6 h-6" />
             </div>
 

From 868b96fa89ff9218572c5d174e052ed3518ba93b Mon Sep 17 00:00:00 2001
From: Jisu <92006284+jsomnium@users.noreply.github.com>
Date: Sun, 3 Nov 2024 13:42:44 +0900
Subject: [PATCH 25/25] =?UTF-8?q?style:=20=EC=B9=9C=EA=B5=AC=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=95=ED=99=95?=
 =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/htmlStyle.css               | 1 +
 src/components/otherMessageBox.tsx | 2 +-
 src/pages/friendListRoom.tsx       | 6 +++---
 tailwind.config.js                 | 2 +-
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/public/htmlStyle.css b/public/htmlStyle.css
index ac27156a..06ece866 100644
--- a/public/htmlStyle.css
+++ b/public/htmlStyle.css
@@ -7,6 +7,7 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
+    font-family: 'AppleSDGothicNeo', sans-serif;
 }
 
 #root {
diff --git a/src/components/otherMessageBox.tsx b/src/components/otherMessageBox.tsx
index 66e1198e..3a95a10f 100644
--- a/src/components/otherMessageBox.tsx
+++ b/src/components/otherMessageBox.tsx
@@ -11,7 +11,7 @@ const OtherMessageBox: React.FC<OtherMessageBoxProps> = ({ message, timestamp })
 
         {/* 메시지 박스 */}
         <div className="max-w-[224px] bg-gray-50 py-2 px-4 rounded-tl-2xl rounded-tr-2xl rounded-br-2xl text-left border border-gray-200 break-words">
-          <p className="text-sm font-semibold appleSD">
+          <p className="text-sm font-semibold font-appleSD">
             {message}
           </p>
         </div>
diff --git a/src/pages/friendListRoom.tsx b/src/pages/friendListRoom.tsx
index 1ab2ec74..74a8fd98 100644
--- a/src/pages/friendListRoom.tsx
+++ b/src/pages/friendListRoom.tsx
@@ -64,8 +64,8 @@ const FriendListRoom: React.FC = () => {
 
                 {/* 생일인 친구 */}
                 {birthdayFriends.length > 0 && ( // 생일인 친구가 있을 경우에만 렌더링
-                    <div className="mt-4 border-b border-gray-100">
-                        <div className="text-gray-500 mb-2 text-xs">생일인 친구</div>
+                    <div className="mt-3 border-b border-gray-100 pb-2">
+                        <div className="text-gray-500 mb-1 text-xs">생일인 친구</div>
                         {birthdayFriends.map(friend => (
                             <div key={friend.id} className="flex items-center justify-between py-2">
                                 <div className="flex items-center">
@@ -79,7 +79,7 @@ const FriendListRoom: React.FC = () => {
                 )}
 
                 {/* 친구 목록 */}
-                <div className="mt-4">
+                <div className="mt-2">
                     <div className="text-gray-500 mb-2 text-xs">친구 {friends.length}</div>
                     {friends.map(friend => (
                         <div key={friend.id} className="flex items-center py-2">
diff --git a/tailwind.config.js b/tailwind.config.js
index 4bf3511d..d8e66d95 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,7 +8,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        appleSD: ['Apple SD Gothic Neo', 'sans-serif'],
+        appleSD: ['AppleSDGothicNeo', 'sans-serif'],
       },
       colors: {
         mainYellow: 'rgba(239, 213, 70, 1)',