[4주차] 이가빈 과제 제출합니다.

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@tailwindcss/line-clamp": "^0.4.4",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,7 +13,9 @@
     "@types/react-dom": "^18.2.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.27.0",
     "react-scripts": "5.0.1",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +42,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.4.13"
   }
 }

src/App.tsx

@@ -1,8 +1,33 @@
+import ChatRoomPage from './pages/ChatRoomPage';
+import ChatRoomListPage from './pages/ChatRoomListPage';
+import FriendListPage from './pages/FriendListPage';
+import { Route, Routes } from 'react-router-dom';
+import MyProfilePage from './pages/MyProfilePage';
+import NotYetPage from './pages/NotYetPage';
+import { UserProvider } from './contexts/UserContext';
+import { UnreadProvider } from './contexts/UnreadContext';
+
 function App() {
   return (
-    <div>
-      <h1>20기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~</h1>
-    </div>
+    <UserProvider>
+      <UnreadProvider>
+        <div className='flex items-center justify-center h-screen bg-Gray/2'>
+          <div className='w-width h-height'>
+            <Routes>
+              <Route path='/' element={<FriendListPage />}></Route>
+              <Route path='/chat/:chatKey' element={<ChatRoomPage />}></Route>
+              <Route path='/chatlist' element={<ChatRoomListPage />}></Route>
+
+              <Route path='/friends' element={<FriendListPage />}></Route>
+              <Route path='/my' element={<MyProfilePage />}></Route>
+              <Route path='/openedChat' element={<NotYetPage />}></Route>
+              <Route path='/shopping' element={<NotYetPage />}></Route>
+              <Route path='/more' element={<NotYetPage />}></Route>
+            </Routes>
+          </div>
+        </div>
+      </UnreadProvider>
+    </UserProvider>
   );
 }