Feat: 홈 화면 네비바 구현 (#20)

* chore: 필요 svg 아이콘 추가

* feat: 공통 레이아웃으로 서비스 width 제어

* refactor: 리액트 라우터 레이아웃 설정

* refactor: 공통 레이아웃 설정에 따른 css 조정

* feat: 네비바 형태 구현

* feat: 모달 max w값 재설정

src/App.tsx

@@ -1,10 +1,12 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import Layout from './pages/Layout';
 import LandingPage from '@/pages/landing/index';
 import SignUpPage from './pages/sign-up';
 import { ModalProvider } from './contexts/ModalContext';
+import HomePage from '@/pages/home';
+import NotFoundPage from '@/pages/NotFound';
+import Layout from '@/pages/Layout';
 
 function App() {
   const queryClient = new QueryClient();
@@ -15,14 +17,11 @@ function App() {
       <BrowserRouter>
         <ModalProvider>
           <Routes>
-            {/* 네비바 포함안됨 */}
-            <Route index element={<LandingPage />} />
-            <Route path="/signup/*" element={<SignUpPage />} />
-
-            {/* 네비바 포함함 */}
-            <Route path="/*" element={<Layout />}>
-              {/* <Route path="dashboard" element={<Dashboard />} />
-            <Route path="profile" element={<Profile />} /> */}
+            <Route path="/" element={<Layout />}>
+              <Route index element={<LandingPage />} />
+              <Route path="/signup/*" element={<SignUpPage />} />
+              <Route path="/home" element={<HomePage />} />
+              <Route path="/*" element={<NotFoundPage />} />
             </Route>
           </Routes>
         </ModalProvider>

src/components/home/Navbar.tsx

@@ -0,0 +1,74 @@
+import Button from '@/components/commons/Button';
+import HomeIcon from '@/assets/icon/homeIcon.svg?react';
+import MatchIcon from '@/assets/icon/matchIcon.svg?react';
+import FriendIcon from '@/assets/icon/friendsIcon.svg?react';
+
+interface NavbarProps {
+  modalContent: {
+    home: boolean;
+    match: boolean;
+    friend: boolean;
+  };
+  setModalContent: (content: {
+    home: boolean;
+    match: boolean;
+    friend: boolean;
+  }) => void;
+}
+
+const Navbar = ({ modalContent, setModalContent }: NavbarProps) => {
+  return (
+    <nav className="flex justify-between items-center bg-neutral fixed left-0 right-0 bottom-0 max-w-[430px] w-full h-[64px] px-8 mx-auto">
+      <Button
+        variant="icon"
+        className="flex flex-col items-center justify-center gap-1"
+        onClick={() =>
+          setModalContent({ home: true, match: false, friend: false })
+        }
+      >
+        <HomeIcon
+          className={modalContent.home ? 'text-[#ffffff]' : 'text-[#838383]'}
+        />
+        <span
+          className={`text-[10px] ${modalContent.home ? 'text-white' : 'text-textDarkGray'}`}
+        >
+          홈
+        </span>
+      </Button>
+      <Button
+        variant="icon"
+        className="flex flex-col items-center justify-center gap-1"
+        onClick={() =>
+          setModalContent({ home: false, match: true, friend: false })
+        }
+      >
+        <MatchIcon
+          className={modalContent.match ? 'text-[#ffffff]' : 'text-[#838383]'}
+        />
+        <span
+          className={`text-[10px] ${modalContent.match ? 'text-white' : 'text-textDarkGray'}`}
+        >
+          수동매칭
+        </span>
+      </Button>
+      <Button
+        variant="icon"
+        className="flex flex-col items-center justify-center gap-1"
+        onClick={() =>
+          setModalContent({ home: false, match: false, friend: true })
+        }
+      >
+        <FriendIcon
+          className={modalContent.friend ? 'text-[#ffffff]' : 'text-[#838383]'}
+        />
+        <span
+          className={`text-[10px] ${modalContent.friend ? 'text-white' : 'text-textDarkGray'}`}
+        >
+          친구
+        </span>
+      </Button>
+    </nav>
+  );
+};
+
+export default Navbar;

src/components/modal/index.tsx

@@ -9,7 +9,7 @@ export const Modal = ({ children }: ModalProps) => {
   return createPortal(
     <div
       role="dialog"
-      className={`flex flex-col gap-[16px] p-[16px] h-fit max-w-[360px] w-full z-[1000] bg-secondary absolute left-1/2 -translate-x-1/2 bottom-0 rounded-t-modal text-white`}
+      className={`flex flex-col gap-[16px] p-[16px] h-fit max-w-[430px] w-full z-[1000] bg-secondary absolute left-1/2 -translate-x-1/2 bottom-0 rounded-t-modal text-white`}
     >
       {children}
     </div>,

src/pages/Layout.tsx

@@ -2,7 +2,7 @@ import { Outlet } from 'react-router-dom';
 
 const Layout = () => {
   return (
-    <main className="max-w-[360px] w-full h-screen mx-auto">
+    <main className="max-w-[430px] w-full min-h-screen relative flex flex-col mx-auto text-white">
       <Outlet />
     </main>
   );

src/pages/home/index.tsx

@@ -0,0 +1,18 @@
+import Navbar from '@/components/home/Navbar';
+import { useState } from 'react';
+
+const HomePage = () => {
+  const [modalContent, setModalContent] = useState({
+    home: true,
+    match: false,
+    friend: false,
+  });
+
+  return (
+    <section className="w-full flex-1">
+      <Navbar modalContent={modalContent} setModalContent={setModalContent} />
+    </section>
+  );
+};
+
+export default HomePage;

src/pages/landing/index.tsx

@@ -3,9 +3,9 @@ import FirstLanding from '@/pages/landing/FirstLanding';
 
 const LandingPage = () => {
   return (
-    <main className="max-w-[360px] w-full h-screen mx-auto text-white p-[16px]">
+    <section className="flex-1 w-full p-horizontal">
       <FirstLanding />
-    </main>
+    </section>
   );
 };
 

src/pages/sign-up/UserInfoPage.tsx

@@ -3,7 +3,7 @@ import UserInfoVerification from '../../components/sign/userInfoVerification';
 const UserInfoPage = () => {
   return (
     <>
-      <div className="flex flex-col gap-[16px] text-white mt-vertical">
+      <div className="flex flex-col gap-[16px] mb-vertical">
         <h1 className="text-header font-bold">
           사진과 이름을 <br /> 등록해주세요
         </h1>

src/pages/sign-up/index.tsx

@@ -14,7 +14,7 @@ const SignUpPage = () => {
   };
 
   return (
-    <section className="max-w-[360px] w-full mx-auto p-vertical flex flex-col gap-[32px] mb-vertical">
+    <section className="flex-1 w-full flex flex-col gap-[32px] p-horizontal">
       {pathname !== '/signup/user-info' && (
         <Button variant="icon" onClick={handleBack}>
           <BackIcon />