From 3b7fedc580782ba5711c4842155b0f703938e73e Mon Sep 17 00:00:00 2001
From: Suhyun Park <suhyun_4951@naver.com>
Date: Wed, 11 Sep 2024 15:32:28 +0900
Subject: [PATCH 1/2] =?UTF-8?q?setting:routing,=20styles=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EC=B4=88=EC=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                                 | 69 +++++++++++----------
 src/components/theHeader/Header.tsx         |  3 +
 src/components/theLayout/Layout.tsx         | 27 ++++++++
 src/components/theNavigation/Navigation.tsx | 30 ++++-----
 src/pages/Home.tsx                          |  7 +++
 src/pages/Networking.tsx                    |  7 ---
 src/pages/myPlaylist.tsx                    | 54 +++++++++++++++-
 src/styles/GlobalStyle.tsx                  |  9 +--
 8 files changed, 146 insertions(+), 60 deletions(-)
 create mode 100644 src/components/theLayout/Layout.tsx
 create mode 100644 src/pages/Home.tsx
 delete mode 100644 src/pages/Networking.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 2dd4878..aad81c8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,48 +5,53 @@ import Login from '@/pages/Login'
 import AddPlaylist from '@/pages/AddPlaylist'
 import Bookmark from '@/pages/Bookmark'
 import MyPlaylist from '@/pages/MyPlaylist'
-import Networking from '@/pages/Networking'
+import Home from '@/pages/Home'
 import Profile from '@/pages/Profile'
 import SignUp from '@/pages/SignUp'
-import Header from '@/components/theHeader/Header'
-import Navigation from './components/theNavigation/Navigation'
+import Layout from '@/components/theLayout/Layout'
 
 function App() {
   return (
     <>
       <GlobalStyles />
       <BrowserRouter>
-        <Header />
-        <Navigation />
         <Routes>
           <Route
-            path="/login"
-            element={<Login />}
-          />
-          <Route
-            path="/signup"
-            element={<SignUp />}
-          />
-          <Route
-            path="/addplaylist"
-            element={<AddPlaylist />}
-          />
-          <Route
-            path="/bookmark"
-            element={<Bookmark />}
-          />
-          <Route
-            path="/myplaylist"
-            element={<MyPlaylist />}
-          />
-          <Route
-            path="/networking"
-            element={<Networking />}
-          />
-          <Route
-            path="/profile"
-            element={<Profile />}
-          />
+            path="/"
+            element={<Layout />}>
+            <Route
+              index
+              element={<Home />}
+            />
+            <Route
+              path="/login"
+              element={<Login />}
+            />
+            <Route
+              path="/signup"
+              element={<SignUp />}
+            />
+            <Route
+              path="/addplaylist"
+              element={<AddPlaylist />}
+            />
+            <Route
+              path="/bookmark"
+              element={<Bookmark />}
+            />
+            <Route
+              path="/myplaylist"
+              element={<MyPlaylist />}
+            />
+            <Route
+              path="/home"
+              element={<Home />}
+            />
+            <Route
+              path="/profile"
+              element={<Profile />}
+            />
+          </Route>
         </Routes>
       </BrowserRouter>
     </>
diff --git a/src/components/theHeader/Header.tsx b/src/components/theHeader/Header.tsx
index 42cd5ff..3309323 100644
--- a/src/components/theHeader/Header.tsx
+++ b/src/components/theHeader/Header.tsx
@@ -1,4 +1,5 @@
 import { css } from '@emotion/react'
+import Colors from '@/styles/Colors'
 
 const Header = () => {
   return (
@@ -17,10 +18,12 @@ const header = css`
   top: 0;
   left: 0;
   z-index: 100;
+  color: ${Colors.white};
 `
 
 const title = css`
   font-size: 20px;
+  color: ${Colors.black};
 `
 
 export default Header
diff --git a/src/components/theLayout/Layout.tsx b/src/components/theLayout/Layout.tsx
new file mode 100644
index 0000000..6ffe5ae
--- /dev/null
+++ b/src/components/theLayout/Layout.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import { Outlet } from 'react-router-dom'
+import Header from '@/components/theHeader/Header'
+import Navigation from '@/components/theNavigation/Navigation'
+import { css } from '@emotion/react'
+
+const Layout = () => {
+  return (
+    <>
+      <div css={pageContainer}>
+        <Header />
+        <main>
+          <Outlet />
+        </main>
+        <Navigation />
+      </div>
+    </>
+  )
+}
+const pageContainer = css`
+  position: relative;
+  width: 100%;
+  max-width: 430px;
+  height: 100%;
+  margin: 0 auto;
+`
+export default Layout
diff --git a/src/components/theNavigation/Navigation.tsx b/src/components/theNavigation/Navigation.tsx
index fd223f7..3390e8c 100644
--- a/src/components/theNavigation/Navigation.tsx
+++ b/src/components/theNavigation/Navigation.tsx
@@ -7,27 +7,27 @@ import {
 } from 'react-icons/cg'
 import { css } from '@emotion/react'
 import Colors from '@/styles/Colors'
-import { Link } from 'react-router-dom'
+import { NavLink } from 'react-router-dom'
 
 const Navigation = () => {
   return (
     <>
       <div css={navbar}>
-        <Link to="/networking">
+        <NavLink to="/home">
           <CgHome css={icon} />
-        </Link>
-        <Link to="/myplaylist">
+        </NavLink>
+        <NavLink to="/myplaylist">
           <CgStack css={icon} />
-        </Link>
-        <Link to="/addplaylist">
+        </NavLink>
+        <NavLink to="/addplaylist">
           <CgMathPlus css={icon} />
-        </Link>
-        <Link to="/bookmark">
+        </NavLink>
+        <NavLink to="/bookmark">
           <CgBookmark css={icon} />
-        </Link>
-        <Link to="/profile">
+        </NavLink>
+        <NavLink to="/profile">
           <CgProfile css={icon} />
-        </Link>
+        </NavLink>
       </div>
     </>
   )
@@ -39,13 +39,15 @@ const navbar = css`
   align-items: center;
   height: 72px;
   position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 390px;
+  width: 430px;
   background-color: ${Colors.black};
   color: ${Colors.lightGrey};
   opacity: 0.8;
   z-index: 100;
+  border-radius: 10px;
+  .active {
+    color: ${Colors.white};
+  }
 `
 
 const icon = css`
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..30a3853
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Home = () => {
+  return <div>Home</div>
+}
+
+export default Home
diff --git a/src/pages/Networking.tsx b/src/pages/Networking.tsx
deleted file mode 100644
index 69c38d0..0000000
--- a/src/pages/Networking.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react'
-
-const Networking = () => {
-  return <div>Networking</div>
-}
-
-export default Networking
diff --git a/src/pages/myPlaylist.tsx b/src/pages/myPlaylist.tsx
index cb758c8..e58969d 100644
--- a/src/pages/myPlaylist.tsx
+++ b/src/pages/myPlaylist.tsx
@@ -1,7 +1,59 @@
 import React from 'react'
 
 const MyPlaylist = () => {
-  return <div>MyPlaylist</div>
+  return (
+    <>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+      <div>MyPlaylist</div>
+    </>
+  )
 }
 
 export default MyPlaylist
diff --git a/src/styles/GlobalStyle.tsx b/src/styles/GlobalStyle.tsx
index 7673e40..f81745e 100644
--- a/src/styles/GlobalStyle.tsx
+++ b/src/styles/GlobalStyle.tsx
@@ -146,8 +146,8 @@ const GlobalStyles = () => (
       }
       body,
       #root {
-        width: 390px;
-        height: 844px;
+        width: 100%;
+        height: 100%;
         font-family:
           'Pretendard Variable',
           Pretendard,
@@ -166,11 +166,8 @@ const GlobalStyles = () => (
           sans-serif;
         font-size: ${fontSize.md};
         font-weight: ${fontWeight.medium};
-        background-color: ${Colors.black};
-        color: ${Colors.black};
-      }
-      #root {
         background-color: ${Colors.white};
+        color: ${Colors.black};
       }
       html {
         font-size: 16px;

From 4ece8c1e7bc5c6a6a57dd60c0d3fb72159d92484 Mon Sep 17 00:00:00 2001
From: nanafromjeju <nanafromjeju@gmail.com>
Date: Wed, 11 Sep 2024 15:47:28 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=EB=A1=9C=EC=BB=AC=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EC=82=AC=ED=95=AD=20=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 50 +++++++-------------------------------------------
 1 file changed, 7 insertions(+), 43 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 2dd4878..d8b87e9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,54 +1,18 @@
-import '@/App.css'
-import GlobalStyles from '@/styles/GlobalStyle'
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import Login from '@/pages/Login'
-import AddPlaylist from '@/pages/AddPlaylist'
-import Bookmark from '@/pages/Bookmark'
-import MyPlaylist from '@/pages/MyPlaylist'
-import Networking from '@/pages/Networking'
-import Profile from '@/pages/Profile'
-import SignUp from '@/pages/SignUp'
-import Header from '@/components/theHeader/Header'
-import Navigation from './components/theNavigation/Navigation'
+import './App.css'
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
+import Home from './pages/Home'
 
 function App() {
   return (
     <>
-      <GlobalStyles />
-      <BrowserRouter>
-        <Header />
-        <Navigation />
+      <Router>
         <Routes>
           <Route
-            path="/login"
-            element={<Login />}
-          />
-          <Route
-            path="/signup"
-            element={<SignUp />}
-          />
-          <Route
-            path="/addplaylist"
-            element={<AddPlaylist />}
-          />
-          <Route
-            path="/bookmark"
-            element={<Bookmark />}
-          />
-          <Route
-            path="/myplaylist"
-            element={<MyPlaylist />}
-          />
-          <Route
-            path="/networking"
-            element={<Networking />}
-          />
-          <Route
-            path="/profile"
-            element={<Profile />}
+            path="/"
+            element={<Home />}
           />
         </Routes>
-      </BrowserRouter>
+      </Router>
     </>
   )
 }