✨ feat: nav bar 조건부 랜더링 Team-inglo#39

naarang · Oct 24, 2024 · 2034208 · 2034208
1 parent 82e4565
commit 2034208
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 38 deletions.
diff --git a/src/components/Common/Navbar.tsx b/src/components/Common/Navbar.tsx
@@ -22,7 +22,7 @@ const Navbar = () => {
       svg: SearchIcon,
     },
     {
-      path: '/documents',
+      path: '/application',
       svg: DocumentsIcon,
     },
     {
@@ -32,22 +32,24 @@ const Navbar = () => {
   ];
 
   return (
-    <section className="w-full py-6 px-12 bg-navbarGradient rounded-[2rem]">
-      <div className="flex justify-between items-center">
-        {routes.map((route, index) => {
-          const IconComponent = route.svg;
-          return (
-            <button key={index} onClick={() => navigate(route.path)}>
-              {route.path == '/profile' ? (
-                <IconComponent stroke={getIconColor(route.path)} />
-              ) : (
-                <IconComponent fill={getIconColor(route.path)} />
-              )}
-            </button>
-          );
-        })}
-      </div>
-    </section>
+    <div className="flex justify-center items-center z-50">
+      <section className="fixed bottom-0 w-full py-6 px-12 bg-navbarGradient rounded-t-[2rem]">
+        <div className="flex justify-between items-center">
+          {routes.map((route, index) => {
+            const IconComponent = route.svg;
+            return (
+              <button key={index} onClick={() => navigate(route.path)}>
+                {route.path == '/profile' ? (
+                  <IconComponent stroke={getIconColor(route.path)} />
+                ) : (
+                  <IconComponent fill={getIconColor(route.path)} />
+                )}
+              </button>
+            );
+          })}
+        </div>
+      </section>
+    </div>
   );
 };
 

diff --git a/src/components/Profile/DeleteAccount.tsx b/src/components/Profile/DeleteAccount.tsx
@@ -5,7 +5,7 @@ type DeleteAccountProps = {
 const DeleteAccount = ({ onDeleteButton }: DeleteAccountProps) => {
   return (
     <>
-      <div className="pt-3 px-6 pb-[3.125rem] flex justify-center items-center">
+      <div className="pt-3 px-6 pb-[3.125rem] mb-10 flex justify-center items-center">
         <button
           className="bg-[#FF6F61] p-4 flex justify-center items-center rounded-[2rem] button-1 text-white"
           onClick={() => onDeleteButton(true)}

diff --git a/src/router.tsx b/src/router.tsx
@@ -1,42 +1,71 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
+
+import ScrollToTop from '@/components/Common/ScrollToTop';
+import Navbar from '@/components/Common/Navbar';
+
 import HomePage from '@/pages/Home/HomePage';
 import SigninPage from '@/pages/Signin/SigninPage';
 import SignupPage from '@/pages/Signup/SignupPage';
 import InformationPage from '@/pages/Information/InformationPage';
 import ApplicationDocumentsPage from '@/pages/ApplicationDocuments/ApplicationDocumentsPage';
-import WriteDocumentsPage from '@/pages/WriteDocuments/WriteDocumentsPage';
 import PostSearchPage from '@/pages/PostSearch/PostSearchPage';
 import PostSearchFilterPage from '@/pages/PostSearchFilter/PostSearchFilterPage';
 import ProfilePage from '@/pages/Profile/ProfilePage';
 import LanguageSettingPage from '@/pages/Profile/LanguageSettingPage';
 import EditProfilePage from '@/pages/Profile/EditProfilePage';
 import PostDetailPage from '@/pages/PostDetail/PostDetailPage';
 import PostApplyPage from '@/pages/PostApply/PostApplyPage';
-import ScrollToTop from '@/components/Common/ScrollToTop';
 import ApplicationPage from '@/pages/Application/ApplicationPage';
+import WriteDocumentsPage from '@/pages/WriteDocuments/WriteDocumentsPage';
+
+const Layout = () => {
+  const location = useLocation();
+
+  // Nav bar 컴포넌트가 랜딩되는 페이지
+  const showNavbarPaths = ['/', '/profile', '/search', '/application'];
+
+  const shouldShowNavbar = showNavbarPaths.includes(location.pathname);
+
+  return (
+    <>
+      <ScrollToTop />
+      <Outlet />
+      {shouldShowNavbar && <Navbar />}
+    </>
+  );
+};
 
 const Router = () => {
   return (
     <BrowserRouter>
-      <ScrollToTop />
       <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/information" element={<InformationPage />} />
-        <Route path="/signin" element={<SigninPage />} />
-        <Route path="/signup" element={<SignupPage />} />
-        <Route
-          path="/application-documents"
-          element={<ApplicationDocumentsPage />}
-        />
-        <Route path="/write-documents" element={<WriteDocumentsPage />} />
-        <Route path="/search" element={<PostSearchPage />} />
-        <Route path="/search/filter" element={<PostSearchFilterPage />} />
-        <Route path="/profile" element={<ProfilePage />} />
-        <Route path="/profile/language" element={<LanguageSettingPage />} />
-        <Route path="/profile/edit" element={<EditProfilePage />} />
-        <Route path="/post/:id" element={<PostDetailPage />} />
-        <Route path="/post/apply/:id" element={<PostApplyPage />} />
-        <Route path="/application" element={<ApplicationPage />} />
+        <Route element={<Layout />}>
+          <Route path="/" element={<HomePage />} />
+
+          <Route path="/signin" element={<SigninPage />} />
+          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/information" element={<InformationPage />} />
+
+          <Route
+            path="/application-documents"
+            element={<ApplicationDocumentsPage />}
+          />
+
+          <Route path="/search" element={<PostSearchPage />} />
+          <Route path="/search/filter" element={<PostSearchFilterPage />} />
+
+          <Route path="/profile" element={<ProfilePage />} />
+          <Route path="/profile/language" element={<LanguageSettingPage />} />
+          <Route path="/profile/edit" element={<EditProfilePage />} />
+
+          <Route path="/post/:id" element={<PostDetailPage />} />
+          <Route path="/post/apply/:id" element={<PostApplyPage />} />
+
+          <Route path="/write-documents" element={<WriteDocumentsPage />} />
+
+          <Route path="/application" element={<ApplicationPage />} />
+        </Route>
       </Routes>
     </BrowserRouter>
   );