CEOS-Developers · Shunamo · Mar 24, 2024 · Mar 24, 2024 · Mar 24, 2024 · Mar 24, 2024
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,12 +8,19 @@
     "@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",
+    "framer-motion": "^11.0.22",
+    "json5": "^2.2.3",
+    "perfect-scrollbar": "^1.5.5",
     "react": "^18.2.0",
+    "react-custom-scrollbars": "^4.2.1",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.5",
+    "react-router": "^6.23.0",
+    "react-router-dom": "^6.23.0",
+    "react-scripts": "^5.0.1",
+    "react-transition-group": "^4.4.5",
+    "recoil": "^0.7.7",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -39,5 +46,18 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@types/babel__traverse": "^7.20.5",
+    "@types/react": "^18.2.69",
+    "@types/react-custom-scrollbars": "^4.0.13",
+    "@types/react-router": "^5.1.20",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/styled-components": "^5.1.34",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "typescript": "^5.4.3"
   }
 }
diff --git a/public/assets/Call (3).png b/public/assets/Call (3).png
diff --git a/public/assets/Call.png b/public/assets/Call.png
diff --git a/public/assets/Call1-active.png b/public/assets/Call1-active.png
diff --git a/public/assets/Call1.png b/public/assets/Call1.png
diff --git a/public/assets/Clip.svg b/public/assets/Clip.svg
diff --git a/public/assets/DeletePhoneCall.svg b/public/assets/DeletePhoneCall.svg
diff --git a/public/assets/Ellipse 1.png b/public/assets/Ellipse 1.png
diff --git a/public/assets/EndCall.png b/public/assets/EndCall.png
diff --git a/public/assets/Friend-active.png b/public/assets/Friend-active.png
diff --git a/public/assets/Friend.png b/public/assets/Friend.png
diff --git a/public/assets/Group 6 (1).svg b/public/assets/Group 6 (1).svg
diff --git a/public/assets/Group 7.svg b/public/assets/Group 7.svg
diff --git a/public/assets/Haksarang.png b/public/assets/Haksarang.png
diff --git a/public/assets/Home Indicator.png b/public/assets/Home Indicator.png
diff --git a/public/assets/Instagram.png b/public/assets/Instagram.png
diff --git a/public/assets/Message-bubble-active.png b/public/assets/Message-bubble-active.png
diff --git a/public/assets/Message-bubble.png b/public/assets/Message-bubble.png
diff --git a/public/assets/Myeonjyeop.png b/public/assets/Myeonjyeop.png
diff --git a/public/assets/Property 1=_haha.png b/public/assets/Property 1=_haha.png
diff --git a/public/assets/Property 1=angry.png b/public/assets/Property 1=angry.png
diff --git a/public/assets/Property 1=love.png b/public/assets/Property 1=love.png
diff --git a/public/assets/Property 1=thumbs up.png b/public/assets/Property 1=thumbs up.png
diff --git a/public/assets/SmallProfile.png b/public/assets/SmallProfile.png
diff --git a/public/assets/Status Bar.svg b/public/assets/Status Bar.svg
diff --git a/public/assets/Variant6.png b/public/assets/Variant6.png
diff --git a/public/assets/Vector 563.svg b/public/assets/Vector 563.svg
diff --git a/public/assets/Vector 564.svg b/public/assets/Vector 564.svg
diff --git a/public/assets/YouTube.png b/public/assets/YouTube.png
diff --git a/public/assets/back.png b/public/assets/back.png
diff --git a/public/assets/icon (1).png b/public/assets/icon (1).png
diff --git a/public/assets/icon (2).png b/public/assets/icon (2).png
diff --git a/public/assets/icon (3).png b/public/assets/icon (3).png
diff --git a/public/assets/icon.png b/public/assets/icon.png
diff --git a/public/assets/icon.svg b/public/assets/icon.svg
diff --git a/public/assets/magnifying-glass.png b/public/assets/magnifying-glass.png
diff --git a/public/assets/mute-active.png b/public/assets/mute-active.png
diff --git a/public/assets/mute.png b/public/assets/mute.png
diff --git a/public/assets/profile (1).svg b/public/assets/profile (1).svg
diff --git a/public/assets/profile (2).svg b/public/assets/profile (2).svg
diff --git a/public/assets/profile.png b/public/assets/profile.png
diff --git a/public/assets/profile.svg b/public/assets/profile.svg
diff --git a/public/assets/send icon.png b/public/assets/send icon.png
diff --git a/public/assets/size=big.png b/public/assets/size=big.png
diff --git a/public/assets/sound-active.png b/public/assets/sound-active.png
diff --git a/public/assets/sound.png b/public/assets/sound.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,43 +1,13 @@
 <!DOCTYPE html>
-<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`.
-    -->
-    <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`.
-    -->
-  </body>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" 
+  content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
+  <title>Messenger S&Y</title>
+</head> 
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+</body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,49 @@
-function App() {
-	return (
-		<div>
-			<h1>19기 프론트엔드 파이팅!!! 디자인과 사이좋게 지내요~~~</h1>
-		</div>
-	);
-}
+import React, { useState } from 'react';
+import { AnimatePresence } from 'framer-motion';
+import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom';
+import { RecoilRoot } from 'recoil'; 
+import ChatList from './components/list/ChatList';
+import ChatApp from './components/main/ChatApp'; 
+import FriendList from './components/list/FriendList';
+import GlobalStyle from './components/style/GlobalStyle';
+import MyPage from './components/list/MyPage'
+import PhoneCall from './components/list/PhoneCall';
+import ActiveCall from './components/list/ActiveCall';
+
+
+
+const AnimatedRoutes = () => {
+  const location = useLocation();  // 현재 위치를 가져옴
+  const [phoneNumber, setPhoneNumber] = useState(""); 
+
+
+
+  return (
+    <AnimatePresence mode='wait'>
+      <Routes location={location} key={location.pathname}>
+        <Route path="/" element={<ChatList />} />
+        <Route path="/chat/:userId" element={<ChatApp />} />
+        <Route path="/friends" element={<FriendList />} />
+        <Route path="/mypage" element={<MyPage/>}/>
+        <Route path="/phone" element={<PhoneCall/>}/>
+        <Route path="/active-call" element={  <ActiveCall phoneNumber={phoneNumber} />} />
+      </Routes>
+    </AnimatePresence>
+  );
+};
+
+
+
+const App: React.FC = () => {
+
+  return (
+    <RecoilRoot>
+      <Router>
+        <GlobalStyle />
+        <AnimatedRoutes />
+      </Router>
+    </RecoilRoot>
+  );
+};
 
 export default App;