Merge pull request #164 from KNU-HAEDAL/Fix/layout-#146

레이아웃 전체적으로 수정 #146
KNU-HAEDAL · Sep 28, 2024 · 1870f30 · 1870f30
2 parents 58844b1 + c1313bc
commit 1870f30
Show file tree

Hide file tree

Showing 11 changed files with 192 additions and 199 deletions.
diff --git a/src/components/features/layout/nav-bar-layout/index.tsx b/src/components/features/layout/nav-bar-layout/index.tsx
@@ -0,0 +1,17 @@
+import NavBar, { NAVBAR_HEIGHT } from '@/components/features/layout/nav-bar';
+import { Box } from '@chakra-ui/react';
+
+type NavBarLayoutTypes = {
+  children: React.ReactNode;
+};
+
+const NavBarLayout = ({ children }: NavBarLayoutTypes) => {
+  return (
+    <Box>
+      <Box minHeight={`calc(100vh - ${NAVBAR_HEIGHT})`}>{children}</Box>
+      <NavBar />
+    </Box>
+  );
+};
+
+export default NavBarLayout;
diff --git a/src/components/features/layout/nav-bar/buttons.tsx b/src/components/features/layout/nav-bar/buttons.tsx
diff --git a/src/components/features/layout/nav-bar/index.tsx b/src/components/features/layout/nav-bar/index.tsx
@@ -1,24 +1,63 @@
-import NavBarButtons from './buttons.tsx';
+import { useNavigate } from 'react-router-dom';
+
+import { navBarData } from '@/constants/nav-bar';
 import { Box } from '@chakra-ui/react';
+import styled from '@emotion/styled';
 
-type NavBarTypes = {
-  children: React.ReactNode;
-};
+export const NAVBAR_HEIGHT = '3.44rem';
+
+const NavBar = () => {
+  const navigate = useNavigate();
+
+  const handleNav = (page: string) => {
+    navigate(page);
+  };
 
-const Index = ({ children }: NavBarTypes) => {
   return (
-    <>
-      <Box
-        display='flex'
-        flexDirection='column'
-        height='100%'
-        paddingBottom='3.44'
-      >
-        <Box flex={1}>{children}</Box>
-        <NavBarButtons />
-      </Box>
-    </>
+    <Wrapper>
+      {navBarData.map((item) => (
+        <Tab key={item.title}>
+          <Icon
+            src={item.icon}
+            // alt={item.title}
+            onClick={() => handleNav(item.path)}
+          />
+        </Tab>
+      ))}
+    </Wrapper>
   );
 };
 
-export default Index;
+export default NavBar;
+
+const Wrapper = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: ${NAVBAR_HEIGHT};
+
+  position: sticky;
+  bottom: 0;
+  left: 0;
+
+  border-top: 0.5px solid #bdc5cd;
+  background-color: #fafafa;
+`;
+
+const Tab = styled.div`
+  width: 50%;
+  height: 100%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Icon = styled.button<{ src: string }>`
+  width: 2rem;
+  height: 2rem;
+  outline: none;
+  background-image: url(${({ src }) => src});
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+`;
diff --git a/src/pages/challenge-detail/index.tsx b/src/pages/challenge-detail/index.tsx
@@ -106,7 +106,6 @@ export default ChallengeDetailPage;
 
 export const Wrapper = styled.div`
   width: 100%;
-  margin-bottom: 3.44rem; // 하단 내브 바 높이
 `;
 
 export const ImageList = styled.div`

diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
@@ -2,25 +2,25 @@ import Category from './components/category';
 import Review from './components/review';
 import Strick from './components/strick';
 import Tier from './components/tier';
-import TopBar from '@/components/features/layout/top-bar';
+import TopBar, { HEADER_HEIGHT } from '@/components/features/layout/top-bar';
 import styled from '@emotion/styled';
 
 const MainPage = () => {
   return (
     <>
       <TopBar type='Main' backgroundColor='#fff' title={''} />
-      <LoginPageLayout>
+      <Wrapper>
         <Category />
         <Tier />
         <Strick />
         <Review />
-      </LoginPageLayout>
+      </Wrapper>
     </>
   );
 };
 
 export default MainPage;
 
-const LoginPageLayout = styled.div`
-  min-height: 100vh;
+const Wrapper = styled.div`
+  min-height: calc(100vh - ${HEADER_HEIGHT});
 `;
diff --git a/src/pages/my-challenge/index.tsx b/src/pages/my-challenge/index.tsx
@@ -28,15 +28,8 @@ const MyChallengePage = () => {
     <>
       <TopBar type='Page' title='내 챌린지' backgroundColor='#fff' />
       <MyChallengeLayout>
-        <Text
-          fontSize='var(--font-size-xxl)'
-          fontWeight='700'
-          marginLeft='1rem'
-          marginBottom='1rem'
-          marginTop='1rem'
-          width='100%'
-        >
-          참여중인 챌린지
+        <Text fontSize='var(--font-size-xxl)' fontWeight='700' margin='1rem'>
+          참여 중인 챌린지
         </Text>
         <ChallengeListBox>
           <ChallengeList

diff --git a/src/pages/review-write/index.tsx b/src/pages/review-write/index.tsx
@@ -184,12 +184,12 @@ const ReviewWrite = () => {
             될 수 있습니다.
           </Text>
         </FlexBox>
+        <CTABox>
+          <SubmitButton disabled={isButtonDisabled} onClick={handleSaveReview}>
+            등록하기
+          </SubmitButton>
+        </CTABox>
       </Wrapper>
-      <CTABox>
-        <SubmitButton disabled={isButtonDisabled} onClick={handleSaveReview}>
-          등록하기
-        </SubmitButton>
-      </CTABox>
     </>
   );
 };
@@ -201,7 +201,7 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   text-align: left;
-  margin-bottom: 3.44rem;
+  width: 100%;
   gap: 16px;
 `;
 
@@ -290,12 +290,13 @@ const Content = styled.textarea<{ valid?: boolean }>`
 `;
 
 const CTABox = styled(Box)`
-  position: fixed;
-  bottom: 3.44rem; // 밑에 탭바
+  position: sticky;
+  bottom: 0;
   display: flex;
   width: 100%;
-  height: 3.44rem;
-  padding: 4px 16px;
+  height: 4rem;
+  padding: 8px 16px;
+  background-color: var(--color-white);
 `;
 
 const SubmitButton = styled.button<{ disabled?: boolean }>`

diff --git a/src/pages/review/index.tsx b/src/pages/review/index.tsx
@@ -102,7 +102,6 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   text-align: center;
-  margin-bottom: 3.44rem;
 `;
 
 const Title = styled.div`

diff --git a/src/routes/index.tsx b/src/routes/index.tsx
@@ -1,7 +1,7 @@
 import { createBrowserRouter, Outlet, RouterProvider } from 'react-router-dom';
 
 import { ProtectedRoute } from './protected-route';
-import NavBar from '@/components/features/layout/nav-bar';
+import NavBarLayout from '@/components/features/layout/nav-bar-layout';
 import ErrorPage from '@/pages/ErrorPage';
 import ChallengeDetailPage from '@/pages/challenge-detail';
 import ChallengeList from '@/pages/challenge-list';
@@ -23,9 +23,9 @@ const router = createBrowserRouter([
   {
     path: RouterPath.root,
     element: (
-      <NavBar>
+      <NavBarLayout>
         <Outlet />
-      </NavBar>
+      </NavBarLayout>
     ),
     children: [
       {
@@ -51,49 +51,8 @@ const router = createBrowserRouter([
               </ProtectedRoute>
             ),
           },
-          {
-            path: RouterPath.record,
-            element: (
-              <ProtectedRoute>
-                <ChallengeRecord />
-              </ProtectedRoute>
-            ),
-          },
-          {
-            path: RouterPath.challengeList,
-            element: (
-              <ProtectedRoute>
-                <ChallengeList />
-              </ProtectedRoute>
-            ),
-          },
-          {
-            path: `:id/${RouterPath.detail}`,
-            element: (
-              <ProtectedRoute>
-                <ChallengeDetailPage />
-              </ProtectedRoute>
-            ),
-          },
-          {
-            path: `:id/${RouterPath.review}`,
-            element: (
-              <ProtectedRoute>
-                <Review />
-              </ProtectedRoute>
-            ),
-          },
-          {
-            path: `:id/${RouterPath.write}`,
-            element: (
-              <ProtectedRoute>
-                <ReviewWrite />
-              </ProtectedRoute>
-            ),
-          },
         ],
       },
-
       {
         path: RouterPath.rank,
         element: (
@@ -116,6 +75,43 @@ const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: RouterPath.challenge,
+    children: [
+      {
+        path: `:id`,
+        element: (
+          <ProtectedRoute>
+            <ChallengeDetailPage />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: `:id/${RouterPath.review}`,
+        element: (
+          <ProtectedRoute>
+            <Review />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: RouterPath.record,
+        element: (
+          <ProtectedRoute>
+            <ChallengeRecord />
+          </ProtectedRoute>
+        ),
+      },
+      {
+        path: `:id/${RouterPath.write}`,
+        element: (
+          <ProtectedRoute>
+            <ReviewWrite />
+          </ProtectedRoute>
+        ),
+      },
+    ],
+  },
   {
     path: RouterPath.shorts,
     element: <ShortsPage />,