Dev

.eslintrc.json

@@ -71,6 +71,7 @@
         }
       }
     ],
-    "import/no-unresolved": "off"
+    "import/no-unresolved": "off",
+    "react/react-in-jsx-scope": "off"
   }
 }

eslint.config.js

@@ -11,18 +11,18 @@ export default tseslint.config(
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
-      globals: globals.browser,
+      globals: globals.browser
     },
     plugins: {
       'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      'react-refresh': reactRefresh
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
       'react-refresh/only-export-components': [
         'warn',
-        { allowConstantExport: true },
-      ],
-    },
-  },
+        { allowConstantExport: true }
+      ]
+    }
+  }
 )

package.json

@@ -21,7 +21,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
-    "react-router-dom": "^6.26.1",
+    "react-router-dom": "^6.26.2",
     "sortablejs": "^1.15.3",
     "zustand": "^4.5.5"
   },

src/App.tsx

@@ -4,49 +4,54 @@ 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 MyPlaylist from './pages/myPlaylist'
+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>
     </>

src/components/theCommon/Category.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { css } from '@emotion/react'
+import Colors from '@/styles/Colors'
+
+const baseButtonStyle = css`
+  display: inline-flex;
+  padding: 8px 14px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  border: 1px solid ${Colors.lightBlue};
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 100%;
+  letter-spacing: -0.18px;
+  transition: background-color 0.3s ease;
+`
+
+const buttonStyle = {
+  primary: css`
+    background-color: ${Colors.lightBlue};
+    color: ${Colors.white};
+  `,
+  secondary: css`
+    background-color: ${Colors.white};
+    color: ${Colors.lightBlue};
+  `
+}
+
+const CategoryButton = ({
+  children,
+  onClick,
+  styleType = 'primary'
+}: {
+  children: React.ReactNode
+  onClick?: () => void
+  styleType?: 'primary' | 'secondary'
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      css={[baseButtonStyle, buttonStyle[styleType]]}>
+      {children}
+    </button>
+  )
+}
+
+const CategoryContainer = css`
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+`
+
+const Category = () => {
+  return (
+    <ul css={CategoryContainer}>
+      <li>
+        <CategoryButton>전체</CategoryButton>
+      </li>
+      <li>
+        <CategoryButton>상체</CategoryButton>
+      </li>
+      <li>
+        <CategoryButton>하체</CategoryButton>
+      </li>
+      <li>
+        <CategoryButton>스트레칭</CategoryButton>
+      </li>
+      <li>
+        <CategoryButton>유산소</CategoryButton>
+      </li>
+      <li>
+        <CategoryButton>전신</CategoryButton>
+      </li>
+    </ul>
+  )
+}
+
+export default Category

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

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

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`