diff --git a/app/(sub-page)/file-upload/page.tsx b/app/(sub-page)/file-upload/page.tsx
new file mode 100644
index 00000000..12983fe8
--- /dev/null
+++ 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 (
+
+ 요소1
+ 요소2
+
+ );
+}
diff --git a/app/(sub-page)/layout.tsx b/app/(sub-page)/layout.tsx
new file mode 100644
index 00000000..5adad969
--- /dev/null
+++ 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 (
+ <>
+
+ {children}
+
+ );
+}
+
+export default Layout;
diff --git a/app/layout.tsx b/app/layout.tsx
index 29e89d5f..ab3d8468 100644
--- 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 (
-
+
- {children}
+
+
+
+ {children}
+
+
);
}
diff --git a/app/ui/view/atom/content-container.tsx b/app/ui/view/atom/content-container.tsx
new file mode 100644
index 00000000..c0d0bc0a
--- /dev/null
+++ 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 (
+
+ {children}
+
+ );
+}
diff --git a/app/ui/view/molecule/navigation-bar.tsx b/app/ui/view/molecule/navigation-bar.tsx
new file mode 100644
index 00000000..4394b731
--- /dev/null
+++ 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 (
+
+
+
+ );
+}
diff --git a/public/assets/background.png b/public/assets/background.png
new file mode 100644
index 00000000..42a94e65
Binary files /dev/null and b/public/assets/background.png differ
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
new file mode 100644
index 00000000..0a13162a
--- /dev/null
+++ b/public/assets/logo.svg
@@ -0,0 +1,51 @@
+
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2271ede8..dcd04608 100644
--- 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],