[4주차] 김지원 미션 제출합니다.

package.json

@@ -3,13 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
+    "fork-ts-checker-webpack-plugin": "^9.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
+    "react-router-dom": "^6.16.0",
+    "react-scripts": "^5.0.1",
+    "styled-components": "^6.0.8",
+    "styled-reset": "^4.5.1",
+    "typescript": "^4.0.5",
+    "zustand": "^4.4.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -34,5 +36,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.5",
+    "@types/node": "^20.6.5",
+    "@types/react": "^18.2.22",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.27"
   }
 }

src/App.css

@@ -1,38 +1,10 @@
-.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;
-  }
+@font-face {
+  font-family: "Pretendard-Regular";
+  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/[email protected]/Pretendard-Regular.woff")
+    format("woff");
+  font-style: normal;
 }
 
-.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);
-  }
+.App {
+  font-family: "Pretendard-Regular";
 }

src/App.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import "./App.css";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { styled, createGlobalStyle } from "styled-components";
+
+import Chat from "./pages/chat/Chat";
+import ChatRoom from "./pages/chatroom/ChatRoom";
+import Friend from "./pages/friend/Friend";
+import MyPage from "pages/mypage/MyPage";
+import ChatSearch from "pages/chat/ChatSearch";
+import FriendSearch from "pages/friend/FriendSearch";
+
+const App: React.FC = () => {
+  return (
+    <BrowserRouter>
+      <Wrapper>
+        <StatusBarImage src="/assets/status_bar.svg" alt="back img" />
+        <Container>
+          <Routes>
+            <Route path="/" element={<Friend />} />
+            <Route path="/friendsearch" element={<FriendSearch />} />
+            <Route path="/chat" element={<Chat />} />
+            <Route path="/chatsearch" element={<ChatSearch />} />
+            <Route path="/mypage" element={<MyPage />} />
+            <Route path="/chatroom/:chatId" element={<ChatRoom />} />
+          </Routes>
+        </Container>
+        <HomeImage src="/assets/home.svg" alt="home img" />
+      </Wrapper>
+      <GlobalStyles />
+    </BrowserRouter>
+  );
+};
+
+export default App;
+
+const Wrapper = styled.div``;
+
+const Container = styled.div``;
+
+export const GlobalStyles = createGlobalStyle`
+  *::-webkit-scrollbar {
+    width: 0;
+  }
+  body {
+    background-color: #f6f6f6;
+    font-family: "Pretendard-Regular";
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+  }
+
+  #root {
+    background-color: white;
+  }
+`;
+
+const StatusBarImage = styled.img``;
+
+const HomeImage = styled.img``;