Revert "[#445] Layout 컴포넌트에서 TopHeader 컴포넌트 분리 (#452)"

This reverts commit 9d11c70.

src/app/bookarchive/page.tsx

@@ -11,7 +11,7 @@ import TopHeader from '@/ui/Base/TopHeader';
 export default function BookArchivePage() {
   return (
     <div className="flex w-full flex-col gap-[1rem]">
-      <TopHeader pathname="/bookarchive" />
+      <TopHeader pathname="/bookarchive"></TopHeader>
       {/* TODO: 스켈레톤 컴포넌트로 교체 */}
       <Suspense fallback={null}>
         <Contents />

src/components/ContextProvider.tsx

@@ -1,13 +1,13 @@
 'use client';
 
 import { RecoilRoot } from 'recoil';
+import Layout from '@/ui/common/Layout';
 import { ErrorBoundary } from 'react-error-boundary';
 import ChakraThemeProvider from '@/components/ChakraThemeProvider';
 import ReactQueryProvider from '@/components/ReactQueryProvider';
 import { ReactNode } from 'react';
 import ErrorPage from '@/app/error';
 import ToastProvider from '@/ui/Base/Toast/ToastProvider';
-import Layout from '@/v1/layout/Layout';
 
 const ContextProvider = ({ children }: { children: ReactNode }) => {
   return (

src/ui/common/Layout/index.tsx

@@ -0,0 +1,44 @@
+import { Box } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import { usePathname } from 'next/navigation';
+import { ReactNode } from 'react';
+
+import BottomNavigation from '@/ui/BottomNavigation';
+import Toast from '../Toast';
+
+const paths = ['/bookarchive', '/book/search', '/group', '/profile/me'];
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  const pathname = usePathname();
+  const isShowNavigation = pathname && paths.includes(pathname);
+
+  return (
+    <Box h={isShowNavigation ? '100%' : '100dvh'}>
+      <Box
+        as={motion.div}
+        key={pathname}
+        px="2rem"
+        pt="2rem"
+        pb={isShowNavigation ? '9rem' : '2rem'}
+        h="100%"
+        overflow="auto"
+        initial="initial"
+        animate="animate"
+        variants={{
+          initial: {
+            opacity: 0,
+          },
+          animate: {
+            opacity: 1,
+          },
+        }}
+      >
+        {children}
+      </Box>
+      {isShowNavigation && <BottomNavigation />}
+      <Toast />
+    </Box>
+  );
+};
+
+export default Layout;

src/v1/layout/Layout.tsx

@@ -2,10 +2,12 @@
 
 import { usePathname } from 'next/navigation';
 
+import TopHeader from '@/ui/Base/TopHeader';
 import BottomNavigation from '@/ui/Base/BottomNavigation';
 
 /**
  * @todo
+ * 토스트 추가
  * 크로스 브라우징 - dvh & vh에 대해 고민
  */
 
@@ -26,6 +28,7 @@ const Layout = ({ children }: LayoutProps) => {
       <div
         className={`h-screen w-full max-w-[43rem] animate-page-transition overflow-auto px-[2rem] ${dynamicClass}`}
       >
+        {isRootPath && <TopHeader pathname={pathname} />}
         {children}
       </div>
       {isRootPath && <BottomNavigation pathname={pathname} />}