diff --git a/app/(sub-page)/layout.tsx b/app/(sub-page)/layout.tsx index 70bade20..50f06eed 100644 --- a/app/(sub-page)/layout.tsx +++ b/app/(sub-page)/layout.tsx @@ -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 ( <> + background
{children}
diff --git a/app/__test__/page.test.tsx b/app/__test__/page.test.tsx deleted file mode 100644 index 28d1e747..00000000 --- a/app/__test__/page.test.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import '@testing-library/jest-dom'; -import { findByText, render, screen } from '@testing-library/react'; -import Home from '../page'; - -// test sample: RSC가 아닌 컴포넌트 테스트할 때 -describe('Home', () => { - it('Home을 렌더링한다.', async () => { - render(); - - expect(await screen.findByText(/dashboard/i)).toBeInTheDocument(); - }); -}); diff --git a/app/layout.tsx b/app/layout.tsx index f3a04062..0936e932 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -22,14 +22,12 @@ export default function RootLayout({ href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css" rel="stylesheet" /> +
- - - {children} - + {children}
diff --git a/app/page.tsx b/app/page.tsx index 2bf91196..3ea63295 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -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 ( -
- - dashboard - -
+
+ + + main-book-background + + main-myongji-logo +
+

+

+
+ + 졸 + + 업을  + + 부 + + 탁해 +
+ graduation-cap +
+
명지인을 위한 간편 졸업요건 검사 사이트
+

+ +
+
); } diff --git a/app/ui/lecture/lecture-search/lecture-search.stories.tsx b/app/ui/lecture/lecture-search/lecture-search.stories.tsx index 7c9cb090..9322b64c 100644 --- a/app/ui/lecture/lecture-search/lecture-search.stories.tsx +++ b/app/ui/lecture/lecture-search/lecture-search.stories.tsx @@ -46,7 +46,7 @@ type Story = StoryObj; 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(); }); diff --git a/app/ui/view/atom/button/button.tsx b/app/ui/view/atom/button/button.tsx index 2c0b3c5e..f357ca62 100644 --- a/app/ui/view/atom/button/button.tsx +++ b/app/ui/view/atom/button/button.tsx @@ -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 { 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', }, }, }); diff --git a/app/ui/view/molecule/drawer/drawer.tsx b/app/ui/view/molecule/drawer/drawer.tsx index 438deb64..c2747552 100644 --- a/app/ui/view/molecule/drawer/drawer.tsx +++ b/app/ui/view/molecule/drawer/drawer.tsx @@ -18,7 +18,11 @@ const Drawer = ({ children, drawerKey, onClose, className }: DrawerProps) => { return ( - + +
main-logo
); diff --git a/public/assets/graduation-cap.png b/public/assets/graduation-cap.png new file mode 100644 index 00000000..022372df Binary files /dev/null and b/public/assets/graduation-cap.png differ diff --git a/public/assets/main-book-background.png b/public/assets/main-book-background.png new file mode 100644 index 00000000..75a0ebac Binary files /dev/null and b/public/assets/main-book-background.png differ diff --git a/public/assets/main-myongji-logo.png b/public/assets/main-myongji-logo.png new file mode 100644 index 00000000..fb76aacf Binary files /dev/null and b/public/assets/main-myongji-logo.png differ diff --git a/tailwind.config.ts b/tailwind.config.ts index 8a49530a..3daf1b80 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -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: {