Merge pull request #46 from dnd-side-project/feature/#41/mypage-settings

Author: hansololiviakim

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dnd-13th-8-frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "engines": {
     "node": "22.12.0"
@@ -36,6 +36,7 @@
     "embla-carousel": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.12",
+    "lottie-react": "^2.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.8.0",

pnpm-lock.yaml

@@ -1,27 +1,45 @@
+import { useState, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
 import styled from 'styled-components'
 
 import { AppRoutes } from '@app/routes/routes'
 
+import { routesConfig } from '@shared/config/routesConfig'
 import { useDevice, type DeviceType } from '@shared/hooks/useDevice'
 import { flexRowCenter } from '@shared/styles/mixins'
 import NavBar, { NAV_HEIGHT } from '@shared/ui/NavBar'
 
+const LAYOUT_BOTTOM_GAP = 34
+
 const App = () => {
   const deviceType = useDevice()
+  const location = useLocation()
+
+  const [isNavVisible, setIsNavVisible] = useState(true)
 
   const LAYOUT_WIDTH = deviceType === 'mobile' ? 'clamp(320px, 100dvw, 430px)' : '375px'
-  const LAYOUT_BOTTOM_GAP = 34
+
+  useEffect(() => {
+    const { pathname } = location
+    const currentRoute = routesConfig.find((route) => route.path === pathname)
+    const shouldHideNav = currentRoute?.hideNav ?? false
+    setIsNavVisible(!shouldHideNav)
+  }, [location])
 
   return (
     <MainLayout
       $deviceType={deviceType}
+      $isNavVisible={isNavVisible}
       $layoutWidth={LAYOUT_WIDTH}
       $layoutBottomGap={LAYOUT_BOTTOM_GAP}
     >
       <AppRoutes />
-      <NavContainer $layoutWidth={LAYOUT_WIDTH} $layoutBottomGap={LAYOUT_BOTTOM_GAP}>
-        <NavBar />
-      </NavContainer>
+      {isNavVisible && (
+        <NavContainer $layoutWidth={LAYOUT_WIDTH} $layoutBottomGap={LAYOUT_BOTTOM_GAP}>
+          <NavBar />
+        </NavContainer>
+      )}
     </MainLayout>
   )
 }
@@ -30,12 +48,16 @@ export default App
 
 const MainLayout = styled.main<{
   $deviceType: DeviceType
+  $isNavVisible: boolean
   $layoutWidth: string
   $layoutBottomGap: number
 }>`
   position: relative;
   margin: 0 auto;
-  padding: 0 20px ${({ $layoutBottomGap }) => NAV_HEIGHT + $layoutBottomGap}px 20px;
+  padding: 0 20px
+    ${({ $isNavVisible, $layoutBottomGap }) =>
+    $isNavVisible ? NAV_HEIGHT + $layoutBottomGap : '0'}px
+    20px;
   width: ${({ $layoutWidth }) => $layoutWidth};
   min-height: 100dvh;
   overflow-x: hidden;

src/App.tsx

@@ -1,31 +1,33 @@
-import { lazy, Suspense } from 'react'
+import { Suspense } from 'react'
 import { Routes, Route } from 'react-router-dom'
 
+import { routesConfig } from '@shared/config/routesConfig'
 import Loading from '@shared/ui/Loading'
 
 import PrivateRoute from '@widgets/authGuard/PrivateRoute'
 
-const MyPage = lazy(() => import('@/pages/myPage/ui'))
-const HomePage = lazy(() => import('@/pages/homePage'))
-const SearchPage = lazy(() => import('@/pages/searchPage'))
-const SearchResultPage = lazy(() => import('@/pages/searchPage/SearchResultPage'))
+const PageLoading = () => <Loading isLoading width="100%" height="100%" />
 
-export const AppRoutes = () => {
-  return (
-    <Suspense fallback={<Loading isLoading width="100%" height="100%" />}>
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/search" element={<SearchPage />} />
-        <Route path="/searchResult" element={<SearchResultPage />} />
-        <Route
-          path="/mypage/*"
-          element={
-            <PrivateRoute>
-              <MyPage />
-            </PrivateRoute>
-          }
-        />
-      </Routes>
+// 공통 Wrapper
+const withWrapper = (
+  Component: React.ComponentType,
+  isPrivate?: boolean,
+  isNotSuspense?: boolean
+): React.ReactElement => {
+  const element = isNotSuspense ? (
+    <Component />
+  ) : (
+    <Suspense fallback={<PageLoading />}>
+      <Component />
     </Suspense>
   )
+  return isPrivate ? <PrivateRoute>{element}</PrivateRoute> : element
 }
+
+export const AppRoutes = () => (
+  <Routes>
+    {routesConfig.map(({ path, component: Component, isPrivate, isNotSuspense }) => (
+      <Route key={path} path={path} element={withWrapper(Component, isPrivate, isNotSuspense)} />
+    ))}
+  </Routes>
+)

src/app/routes/routes.tsx

@@ -11,6 +11,7 @@ export { default as Like } from './icn_like.svg?react'
 export { default as Cancel } from './icn_cancel.svg?react'
 export { default as Gear } from './icn_gear.svg?react'
 export { default as LeftArrow } from './icn_left_arrow.svg?react'
+export { default as RightArrow } from './icn_right_arrow.svg?react'
 export { default as Logo } from './icn_logo.svg?react'
 export { default as Notification } from './icn_notification.svg?react'
 export { default as Plus } from './icn_plus.svg?react'

src/assets/icons/icn_right_arrow.svg

@@ -0,0 +1 @@
+export { default as LoadingLottie } from './loading.json'