Merge pull request #32 from Myongji-Graduate/layout/#31

layout/#31
Myongji-Graduate · Feb 23, 2024 · 02ee334 · 02ee334
2 parents a97f6e6 + e9d20d6
commit 02ee334
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 2 deletions.
diff --git a/app/(sub-page)/file-upload/page.tsx b/app/(sub-page)/file-upload/page.tsx
@@ -0,0 +1,10 @@
+import ContentContainer from '../../ui/view/atom/content-container';
+
+export default function Page() {
+  return (
+    <ContentContainer className="flex flex-col items-center gap-8">
+      <div>요소1</div>
+      <div>요소2</div>
+    </ContentContainer>
+  );
+}
diff --git a/app/(sub-page)/layout.tsx b/app/(sub-page)/layout.tsx
@@ -0,0 +1,17 @@
+import Image from 'next/image';
+import background from '../../public/assets/background.png';
+import NavigationBar from '../ui/view/molecule/navigation-bar';
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+function Layout({ children }: LayoutProps) {
+  return (
+    <>
+      <Image src={background} width={800} height={288} className="w-full bg-white h-[18rem]" alt="background" />
+      <div className="flex justify-center">{children}</div>
+    </>
+  );
+}
+
+export default Layout;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import './globals.css';
+import NavigationBar from './ui/view/molecule/navigation-bar';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -12,14 +13,19 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="ko">
       <head>
         <link
           href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
           rel="stylesheet"
         />
       </head>
-      <body>{children}</body>
+      <body>
+        <div className="bg-white w-[100vw] h-[100vh]">
+          <NavigationBar />
+          {children}
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/app/ui/view/atom/content-container.tsx b/app/ui/view/atom/content-container.tsx
@@ -0,0 +1,21 @@
+import { twMerge } from 'tailwind-merge';
+
+interface ContentContainerProps {
+  children: React.ReactNode;
+  size?: 'md' | 'lg';
+  className?: string;
+}
+
+export default function ContentContainer({ children, size = 'md', className }: ContentContainerProps) {
+  return (
+    <div
+      className={twMerge(
+        'absolute bg-white top-[7rem] zIndex-1 rounded-xl p-[1.5rem] shadow-lg max-md:w-full',
+        size === 'md' ? 'md:w-[70%]' : 'md:w-[80%]',
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/app/ui/view/molecule/navigation-bar.tsx b/app/ui/view/molecule/navigation-bar.tsx
@@ -0,0 +1,10 @@
+import Image from 'next/image';
+import logo from '../../../../public/assets/logo.svg';
+
+export default function NavigationBar() {
+  return (
+    <div className="absolute p-4 border-b-[1px] w-full">
+      <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
+    </div>
+  );
+}
diff --git a/public/assets/background.png b/public/assets/background.png
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -43,6 +43,11 @@ const config: Config = {
         red: '#FF6D6D',
         'white-hover': '#f3f4f6',
       },
+      zIndex: {
+        1: '100', // upper layout
+        2: '200', // upper content
+        3: '300', // upper all
+      },
     },
   },
   plugins: [headlessui],