Tutorial/#107

app/(sub-page)/tutorial/data.tsx

@@ -0,0 +1,66 @@
+import feature1 from '@/public/assets/tutorial/tutorial-feature1.png';
+import feature2 from '@/public/assets/tutorial/tutorial-feature2.png';
+import feature3 from '@/public/assets/tutorial/tutorial-feature3.png';
+import upload0 from '@/public/assets/tutorial/tutorial0.png';
+import upload1 from '@/public/assets/tutorial/tutorial1.png';
+import upload2 from '@/public/assets/tutorial/tutorial2.png';
+import upload3 from '@/public/assets/tutorial/tutorial3.png';
+import upload4 from '@/public/assets/tutorial/tutorial4.png';
+import { StaticImageData } from 'next/image';
+import Link from 'next/link';
+
+interface TutorialItem {
+  imageUrl: StaticImageData;
+  title: string;
+  content: React.ReactNode;
+}
+
+export const TUTORIAL_FEATRUE: TutorialItem[] = [
+  {
+    imageUrl: feature1,
+    title: 'first',
+    content: '강의 커스텀을 통한 졸업 사정 예측',
+  },
+  {
+    imageUrl: feature2,
+    title: 'second',
+    content: '카테고리별(교양 / 전공) 수강 학점 현황 조회',
+  },
+  {
+    imageUrl: feature3,
+    title: 'third',
+    content: '카테고리별(교양 / 전공) 미이수 과목 정보 및 잔여 학점 조회',
+  },
+];
+
+export const TUTORIAL_UPLOAD: TutorialItem[] = [
+  {
+    imageUrl: upload0,
+    title: '1.',
+    content: (
+      <Link href="https://msi.mju.ac.kr/servlet/security/MySecurityStart" target="_blank">
+        <span className="text-primary">MyiWeb MSI</span>에 접속 후 로그인(PC환경 권장)
+      </Link>
+    ),
+  },
+  {
+    imageUrl: upload1,
+    title: '2.',
+    content: '좌측 성적/졸업 메뉴 → 성적표(상담용,B4)클릭',
+  },
+  {
+    imageUrl: upload2,
+    title: '3.',
+    content: '우측 상단 조회버튼 클릭 → 프린트 아이콘 클릭 (모바일 환경에서는 뜨지 않을 수 있습니다.)',
+  },
+  {
+    imageUrl: upload3,
+    title: '4.',
+    content: '인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 클릭 (비율이 깨지지 않도록 조심해주세요.)',
+  },
+  {
+    imageUrl: upload4,
+    title: '5.',
+    content: '저장한 파일 업로드',
+  },
+];

app/(sub-page)/tutorial/page.tsx

@@ -0,0 +1,44 @@
+import ImageCard from '@/app/ui/view/molecule/image-card/image-card';
+import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
+import { cn } from '@/app/utils/shadcn/utils';
+import Image from 'next/image';
+import { TUTORIAL_FEATRUE, TUTORIAL_UPLOAD } from './data';
+import ContentContainer from '@/app/ui/view/atom/content-container/content-container';
+
+function TutorialPage() {
+  return (
+    <ContentContainer className={cn('flex flex-col gap-10 p-1 py-10', 'md:gap-20')} size="lg">
+      <h1 className={cn('text-center text-xl font-bold', 'md:text-3xl')}>튜토리얼</h1>
+      <p className={cn('w-[90%] m-auto break-keep text-center text-base text-gray-6 font-semibold', 'md:text-2xl')}>
+        명지인을 위한 졸업 요건 충족도 확인 서비스 ‘졸업을부탁해’ 입니다. <br />
+        우리 서비스의 주요 정보와 사용법을 확인해보세요
+      </p>
+      <TitleBox title="주요 기능">
+        <div className="flex gap-2 p-2">
+          {TUTORIAL_FEATRUE.map((feature, index) => (
+            <Image src={feature.imageUrl} alt={`feature-${index}`} key={index} className="max-w-[32%]" />
+          ))}
+        </div>
+      </TitleBox>
+      <p className={cn('w-[90%] m-auto break-keep text-center text-base text-gray-6 font-semibold', 'md:text-2xl')}>
+        정보 제공을 위해서는 여러분의 이수과목 정보가 필요합니다.
+        <br /> PDF 업로드를 진행해주세요.
+      </p>
+      <TitleBox title="PDF 파일 업로드 방법">
+        <div className="flex overflow-scroll gap-8 w-full mt-4">
+          {TUTORIAL_UPLOAD.map((feature, index) => (
+            <ImageCard
+              key={index}
+              image={feature.imageUrl}
+              title={feature.title}
+              content={feature.content}
+              className="min-w-44 h-44 md:min-w-72 md:h-72"
+            />
+          ))}
+        </div>
+      </TitleBox>
+    </ContentContainer>
+  );
+}
+
+export default TutorialPage;

app/globals.css

@@ -29,6 +29,7 @@ a {
 
 ::-webkit-scrollbar {
   width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-track {

app/hooks/useDialog.tsx

@@ -11,12 +11,16 @@ export default function useDialog(key: DialogKey, onClose?: () => void) {
     setOpenDialogList([key, true]);
   };
 
+  const close = () => {
+    setOpenDialogList([key, false]);
+  };
+
   const toggle = () => {
     const prevState = isOpenDialogList[key];
     setOpenDialogList([key, !prevState]);
 
     if (prevState) onClose?.();
   };
 
-  return { isOpen, open, toggle };
+  return { isOpen, open, toggle, close };
 }

app/ui/result/result-category-detail-content/result-category-detail-content.skeleton.tsx

@@ -1,5 +1,5 @@
 import LabelContainerSkeleton from '@/app/ui/view/atom/label-container/label-container.skeleton';
-import Skeleton from '@/app/ui/view/atom/skeleton';
+import Skeleton from '@/app/utils/skeleton';
 
 export default function ResultCategoryDetailContentSkeleton() {
   return (

app/ui/view/molecule/image-card/image-card.stories.tsx

@@ -0,0 +1,20 @@
+import feature1 from '@/public/assets/tutorial/tutorial-feature1.png';
+import type { Meta, StoryObj } from '@storybook/react';
+import ImageCard, { ImageCardProps } from './image-card';
+
+const meta = {
+  title: 'ui/view/molecule/ImageCard',
+  component: ImageCard,
+} as Meta<typeof ImageCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    image: feature1,
+    title: 'first',
+    content: '강의 커스텀을 통한 졸업 사정 예측',
+  },
+  render: (args: ImageCardProps) => <ImageCard {...args} />,
+};

app/ui/view/molecule/image-card/image-card.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/app/utils/shadcn/utils';
+import Image, { StaticImageData } from 'next/image';
+
+export interface ImageCardProps {
+  image: StaticImageData;
+  title: string;
+  content: React.ReactNode;
+  className?: string;
+}
+
+function ImageCard({ image, title, content, className }: ImageCardProps) {
+  return (
+    <div className={cn('flex flex-col gap-2', 'md:gap-4')}>
+      <Image src={image} alt={title} className={className} />
+      <h5 className={cn('font-lg font-medium', 'md:text-2xl')}>{title}</h5>
+      <p className={cn('text-xs', 'md:text-base')}>{content}</p>
+    </div>
+  );
+}
+
+export default ImageCard;

app/ui/view/molecule/title-box/title-box.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import TitleBox from './title-box';
+import AnnounceMessageBox from '../announce-message-box/announce-massage-box';
+
+const meta = {
+  title: 'ui/view/molecule/TitleBox',
+  component: TitleBox,
+} as Meta<typeof TitleBox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+interface TitleBoxProps extends React.PropsWithChildren {
+  title: string;
+}
+
+export const Default: Story = {
+  args: {
+    children: <AnnounceMessageBox message="해당 파트의 졸업요건을 충족하셨습니다!" />,
+    title: '졸업 요건 안내',
+  },
+  render: (args: TitleBoxProps) => <TitleBox {...args} />,
+};

app/ui/view/molecule/title-box/title-box.tsx

@@ -0,0 +1,13 @@
+import { cn } from '@/app/utils/shadcn/utils';
+
+function TitleBox({ title, children }: React.PropsWithChildren<{ title: string }>) {
+  return (
+    <div className="flex flex-col justify-center items-center gap-4">
+      <h1 className={cn('text-lg font-bold', 'md:text-2xl')}>{title}</h1>
+      <div className="bg-primary h-1 w-10 text-center rounded-md"></div>
+      {children}
+    </div>
+  );
+}
+
+export default TitleBox;