Myongji-Graduate · gahyuun · May 11, 2024 · May 7, 2024 · May 7, 2024 · May 7, 2024
@@ -1,5 +1,6 @@
 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;
@@ -8,6 +9,7 @@ interface LayoutProps {
 function SubPageLayout({ children }: LayoutProps) {
   return (
     <>
+      <NavigationBar />
       <Image src={background} width={800} height={288} className="w-full bg-white h-[18rem]" alt="background" />
       <div className="flex justify-center">{children}</div>
     </>

@@ -22,14 +22,12 @@ export default function RootLayout({
           href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.css"
           rel="stylesheet"
         />
+        <link href="https://webfontworld.github.io/vitro/VitroCore.css" rel="stylesheet" />
       </head>
       <body>
         <div className="bg-white">
           <Provider>
-            <MSWComponent>
-              <NavigationBar />
-              {children}
-            </MSWComponent>
+            <MSWComponent>{children}</MSWComponent>
           </Provider>
         </div>
         <Toaster />

@@ -1,14 +1,51 @@
+import Image from 'next/image';
+import mainBookBackground from '../public/assets/main-book-background.png';
+import mainMyongjiLogo from '../public/assets/main-myongji-logo.png';
+import graduationCap from '../public/assets/graduation-cap.png';
+import Responsive from './ui/responsive';
+import NavigationBar from './ui/view/molecule/navigation-bar';
+import Button from './ui/view/atom/button/button';
 import Link from 'next/link';
 
-export default function Home() {
+export default function HomePage() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <Link
-        href="/dashboard"
-        className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
-      >
-        <span>dashboard</span>
-      </Link>
-    </main>
+    <div className="bg-primary w-[100vw] h-[100vh] overflow-hidden relative">
+      <NavigationBar />
+      <Responsive minWidth={768}>
+        <Image src={mainBookBackground} alt="main-book-background" className="fixed right-0 w-[60%] z-0" />
+      </Responsive>
+      <Image
+        src={mainMyongjiLogo}
+        alt="main-myongji-logo"
+        width={120}
+        height={120}
+        className="absolute top-24 right-4"
+      />
+      <div className="relative h-full flex flex-col items-center justify-center gap-6 z-1">
+        <p className="text-center flex flex-col gap-4">
+          <div className="relative">
+            <div className="z-2 text-3xl font-bold sm:text-7xl relative text-white" style={{ fontFamily: 'VitroCore' }}>
+              <span className="text-etc-yellow" style={{ fontFamily: 'VitroCore' }}>
+                졸
+              </span>
+              업을&nbsp;
+              <span className="text-etc-yellow" style={{ fontFamily: 'VitroCore' }}>
+                부
+              </span>
+              탁해
+            </div>
+            <Image
+              src={graduationCap}
+              alt="graduation-cap"
+              className="absolute bottom-2 left-8 sm:bottom-10 sm:left-[-24px] sm:w-[52px] sm:h-[52px] w-[36px] h-[36px]"
+            />
+          </div>
+          <div className="text-md sm:text-lg text-gray-400 font-medium">명지인을 위한 간편 졸업요건 검사 사이트</div>
+        </p>
+        <Link href="/grade-upload">
+          <Button label="검사 시작" variant="dark" size="xl" />
+        </Link>
+      </div>
+    </div>
   );
 }
@@ -46,7 +46,7 @@ type Story = StoryObj<typeof meta>;
 
 export const AddSenario: Story = {
   play: async ({ step }) => {
-    await step('사용자가 추가를 클릭하면 lecture search drawer 창이 띄워진다', async () => {
+    await step('사용자가 과목 추가를 클릭하면 lecture search drawer 창이 띄워진다', async () => {
       const toggleLectureSearch = await screen.findByTestId('toggle-lecture-search');
       await userEvent.click(toggleLectureSearch);
 
@@ -67,14 +67,20 @@ export const AddSenario: Story = {
       await delay(3000);
       expect(addButton[0]).toBeDisabled();
     });
+    await step('drawer 외부 overlay를 클릭하면 drawer가 닫힌다', async () => {
+      const drawerOverlay = await screen.findByTestId('drawer-overlay');
+      await userEvent.click(drawerOverlay);
+      const toggleLectureSearch = await screen.findByTestId('toggle-lecture-search');
+      expect(toggleLectureSearch).toBeInTheDocument();
+    });
   },
 };
+
 export const SearchSenario: Story = {
   play: async ({ step }) => {
-    await step('사용자가 추가를 클릭하면 lecture search drawer 창이 띄워진다', async () => {
+    await step('사용자가 과목 추가를 클릭하면 lecture search drawer 창이 띄워진다', async () => {
       const toggleLectureSearch = await screen.findByTestId('toggle-lecture-search');
       await userEvent.click(toggleLectureSearch);
-
       const lectureSearch = await screen.findByTestId('lecture-search');
       expect(lectureSearch).toBeInTheDocument();
     });

@@ -3,11 +3,11 @@ import { cva } from 'class-variance-authority';
 import React from 'react';
 import LoadingSpinner from '../loading-spinner';
 
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'default';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'default' | 'xl';
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   label: string;
-  variant?: 'primary' | 'secondary' | 'text' | 'list' | 'outlined';
+  variant?: 'primary' | 'secondary' | 'text' | 'list' | 'outlined' | 'dark';
   size?: ButtonSize;
   loading?: boolean;
   disabled?: boolean;
@@ -18,6 +18,7 @@ export const ButtonVariants = cva(`flex justify-center items-center`, {
     variant: {
       primary: 'bg-primary rounded-[100px] text-white border-0 hover:bg-primary-hover',
       outlined: 'rounded-[100px] text-primary border-solid border-[1px] border-primary',
+      dark: 'bg-dark rounded-[100px] text-white border-0 hover:bg-dark-hover',
       secondary: 'bg-white rounded-[100px] border-solid border-[1px] border-gray-6 hover:bg-white-hover',
       text: 'font-medium text-slate-400 text-sm hover:text-slate-600',
       list: 'py-1 px-3 bg-blue-500 rounded-[7px] text-white leading-5 font-medium text-base hover:bg-blue-500',
@@ -28,6 +29,7 @@ export const ButtonVariants = cva(`flex justify-center items-center`, {
       sm: 'px-10 py-2.5 text-xs font-medium leading-3',
       md: 'px-20 py-4 text-base font-medium leading-3',
       lg: 'px-28 py-4 text-2xl font-medium leading-9',
+      xl: 'px-36 py-5 text-3xl font-medium leading-9',
     },
   },
 });
@@ -40,6 +42,7 @@ export const LoadingIconVariants = cva('animate-spin shrink-0', {
       sm: 'h-5 w-5 mr-1.5 -ml-1',
       md: 'h-6 w-6 mr-1.5 -ml-1',
       lg: 'h-12 w-12 mr-1.5 -ml-1',
+      xl: 'h-12 w-12 mr-1.5 -ml-1',
     },
   },
 });

@@ -18,7 +18,11 @@ const Drawer = ({ children, drawerKey, onClose, className }: DrawerProps) => {
   return (
     <DrawerPrimitive.Root open={isOpen} onClose={close}>
       <DrawerPrimitive.Portal>
-        <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/60" />
+        <DrawerPrimitive.Overlay
+          onClick={close}
+          className="fixed inset-0 z-50 bg-black/60"
+          data-testid="drawer-overlay"
+        />
         <DrawerPrimitive.Content
           className={cn(
             'fixed inset-x-0 bottom-0 z-50 mt-24 flex flex-col rounded-t-[10px] border border-slate-200 bg-white',

@@ -3,7 +3,7 @@ import logo from '../../../../public/assets/logo.svg';
 
 export default function NavigationBar() {
   return (
-    <div className="absolute p-4 border-b-[1px] w-full">
+    <div className="absolute p-4 border-b-[1px] w-full z-1">
       <Image className="md:h-10 h-7 w-[110px] md:w-[150px]" width={150} height={100} src={logo} alt="main-logo" />
     </div>
   );

@@ -46,8 +46,8 @@ const config: Config = {
         'white-hover': '#f3f4f6',
       },
       zIndex: {
-        1: '100', // upper layout
-        2: '200', // upper content
+        1: '100', // upper layout, navigation bar, main page content
+        2: '200', // upper content , main page graduation cap
         3: '300', // upper all
       },
       gridTemplateColumns: {