[#509] [레이아웃] BottomNavigation 버그 및 UI 수정 (#510)

* feat: TailwindCSS에 h-app 프로퍼티 추가 * refactor: Layout 컴포넌트 시멘틱 태그 적용 및 fallback height 추가 * refactor: Layout 컴포넌트 padding값 수정 및 children props 옵셔널로 변경 * refactor: Layout 컴포넌트를 layout.tsx로 이동 * fix: BottomNavigation 컴포넌트 position을 fixed로 수정 * feat: tailwind.config에 battomNav boxShadow 값 추가 * fix: BottomNavigation UI 수정
prgrms-web-devcourse · Jun 17, 2024 · ada909a · ada909a
1 parent 36c1e71
commit ada909a
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 40 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,23 +1,22 @@
 import ContextProvider from '@/components/ContextProvider';
-import { ReactNode } from 'react';
+import Layout from '@/v1/layout/Layout';
 
 import { LineSeedKR } from '@/styles/font';
 import '@/styles/global.css';
 
-const RootLayout = ({ children }: { children: ReactNode }) => {
+const RootLayout = ({ children }: { children: React.ReactNode }) => {
   return (
     <html lang="ko">
       <head>
         <title>다독다독</title>
         <meta content="width=device-width, initial-scale=1" name="viewport" />
         <link rel="icon" href="/favicon.ico" />
       </head>
-      <body className="app-layout">
-        <ContextProvider>
-          <main className={`${LineSeedKR.variable} font-lineseed`}>
-            {children}
-          </main>
-        </ContextProvider>
+      {/* @todo Chakra 제거시 app-layout 프로퍼티 제거. */}
+      <body className={`${LineSeedKR.variable} app-layout font-lineseed`}>
+        <Layout>
+          <ContextProvider>{children}</ContextProvider>
+        </Layout>
       </body>
     </html>
   );

diff --git a/src/components/ContextProvider.tsx b/src/components/ContextProvider.tsx
@@ -1,29 +1,25 @@
 'use client';
 
-import { RecoilRoot } from 'recoil';
+import { ReactNode } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { RecoilRoot } from 'recoil';
+
+import ErrorPage from '@/app/error';
 import ChakraThemeProvider from '@/components/ChakraThemeProvider';
 import ReactQueryProvider from '@/components/ReactQueryProvider';
-import { ReactNode } from 'react';
-import ErrorPage from '@/app/error';
 import ToastProvider from '@/v1/base/Toast/ToastProvider';
-import Layout from '@/v1/layout/Layout';
 
 const ContextProvider = ({ children }: { children: ReactNode }) => {
   return (
-    <>
-      <RecoilRoot>
-        <ReactQueryProvider>
-          <ChakraThemeProvider>
-            <ErrorBoundary fallbackRender={ErrorPage}>
-              <ToastProvider>
-                <Layout>{children}</Layout>
-              </ToastProvider>
-            </ErrorBoundary>
-          </ChakraThemeProvider>
-        </ReactQueryProvider>
-      </RecoilRoot>
-    </>
+    <RecoilRoot>
+      <ReactQueryProvider>
+        <ChakraThemeProvider>
+          <ErrorBoundary fallbackRender={ErrorPage}>
+            <ToastProvider>{children}</ToastProvider>
+          </ErrorBoundary>
+        </ChakraThemeProvider>
+      </ReactQueryProvider>
+    </RecoilRoot>
   );
 };
 

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -32,4 +32,8 @@
   .w-app {
     @apply relative -left-[2rem] w-[calc(100%+4rem)];
   }
+  .h-app {
+    height: 100vh;
+    height: 100dvh;
+  }
 }
diff --git a/src/v1/base/BottomNavigation.tsx b/src/v1/base/BottomNavigation.tsx
@@ -8,7 +8,7 @@ import {
 } from '@public/icons';
 
 type BottomNavigationProps = {
-  pathname: string;
+  pathname?: string;
 };
 
 const icons = [
@@ -36,20 +36,20 @@ const icons = [
 
 const iconColor = {
   active: 'fill-main-900 text-main-900',
-  inactive: 'fill-placeholder text-placeholder',
+  inactive: 'fill-black-900 text-black-900',
 } as const;
 
 const BottomNavigation = ({ pathname }: BottomNavigationProps) => {
   return (
-    <nav className="absolute bottom-0 left-0 flex h-[6.4rem] w-full max-w-[43rem] justify-between border-t-[0.05rem] border-black-200 bg-white px-[2.6rem] pb-[1.2rem] pt-[0.8rem]">
+    <nav className="fixed bottom-0 left-[50%] flex h-[7rem] w-full max-w-[43rem] -translate-x-1/2 justify-between rounded-t-[2rem] border-t-[0.05rem] border-black-200 bg-white px-[3.2rem] py-[1.4rem] shadow-bottomNav">
       {icons.map(({ icon, label, href }) => (
         <Link key={label} type="button" href={href}>
           <button
-            className={`flex h-[4.4rem] w-[4.6rem] flex-col items-center justify-center ${
+            className={`flex h-[4.4rem] min-w-[4.503rem] flex-col items-center justify-center ${
               href === pathname ? iconColor.active : iconColor.inactive
             }`}
           >
-            <div className="h-[2.6rem] w-[2.6rem] text-placeholder">{icon}</div>
+            <div className="h-[2.6rem] w-[2.6rem]">{icon}</div>
             <p className="text-xs font-bold">{label}</p>
           </button>
         </Link>

diff --git a/src/v1/layout/Layout.tsx b/src/v1/layout/Layout.tsx
@@ -4,13 +4,8 @@ import { usePathname } from 'next/navigation';
 
 import BottomNavigation from '@/v1/base/BottomNavigation';
 
-/**
- * @todo
- * 크로스 브라우징 - dvh & vh에 대해 고민
- */
-
 type LayoutProps = {
-  children: React.ReactNode;
+  children?: React.ReactNode;
 };
 
 const rootPaths = ['/bookarchive', '/book/search', '/group', '/profile/me'];
@@ -20,16 +15,16 @@ const Layout = ({ children }: LayoutProps) => {
   const isRootPath = pathname && rootPaths.includes(pathname);
 
   const dynamicClass = isRootPath
-    ? 'pb-[6.4rem] pt-[2rem]'
+    ? 'pb-[9rem] pt-[2rem]'
     : 'pt-[5.4rem] pb-[2rem]';
 
   return (
     <>
-      <div
-        className={`h-screen w-full max-w-[43rem] animate-page-transition overflow-auto px-[2rem] ${dynamicClass}`}
+      <main
+        className={`h-app w-full max-w-[43rem] animate-page-transition overflow-auto px-[2rem] ${dynamicClass}`}
       >
         {children}
-      </div>
+      </main>
       {isRootPath && <BottomNavigation pathname={pathname} />}
     </>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -78,6 +78,7 @@ module.exports = {
           '0px 0px 2px rgba(0, 0, 0, 0.2), 2px 2px 6px rgba(0, 0, 0, 0.1)',
         bookcard: '0px 0px 7px 0px rgba(207, 207, 207, 0.5)',
         searchResultItem: '0px 0px 6px 1px rgba(114, 114, 114, 0.10);',
+        bottomNav: 'rgba(0, 0, 0, 0.05) 0px 0px 10px 1px',
       },
       keyframes: {
         'page-transition': {