style: redesign tutorial page

Myongji-Graduate · Sep 11, 2024 · 1620337 · 1620337
1 parent 2598822
commit 1620337
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 32 deletions.
diff --git a/app/(sub-page)/tutorial/components/TutorialContent.tsx b/app/(sub-page)/tutorial/components/TutorialContent.tsx
@@ -0,0 +1,39 @@
+'use client';
+import Image from 'next/image';
+import { cn } from '@/app/utils/shadcn/utils';
+import { useState } from 'react';
+import { TutorialItem } from '../data';
+
+interface TestContentProps {
+  data: TutorialItem[];
+}
+
+function TutorialContent({ data }: TestContentProps) {
+  const [item, setItem] = useState<TutorialItem>(data[0]);
+
+  return (
+    <div className="flex flex-col gap-2 mx-[5%] lg:flex-row">
+      <Image alt="tutorial-image" width={1000} src={item.imageUrl} className="rounded-2xl" />
+      <ul className="flex flex-col w-full gap-1 md:py-2">
+        {Object.values(data).map((tutorial, index) => {
+          const { icon, content } = tutorial;
+          return (
+            <li
+              key={index}
+              className={cn(
+                'cursor-pointer flex items-center p-4 font-bold opacity-50 rounded-xl hover:opacity-70 md:p-6 md:text-xl',
+                tutorial === item ? 'bg-light-blue-1 opacity-100 hover:opacity-100' : 'hover:bg-gray-1',
+              )}
+              onClick={() => setItem(tutorial)}
+            >
+              {icon && <Image src={icon} alt="icon" width={8} height={8} className="w-8 mr-2" />}
+              <span className="w-[90%]">{content}</span>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
+
+export default TutorialContent;
diff --git a/app/(sub-page)/tutorial/data.tsx b/app/(sub-page)/tutorial/data.tsx
@@ -10,8 +10,6 @@ import file from '../../../public/assets/file.svg';
 import dimond from '../../../public/assets/dimond.svg';
 import { StaticImageData } from 'next/image';
 import Link from 'next/link';
-import { title } from 'process';
-import image from '@/public/assets/test.png';
 
 export interface TutorialItem {
   imageUrl: StaticImageData;

diff --git a/app/(sub-page)/tutorial/page.tsx b/app/(sub-page)/tutorial/page.tsx
@@ -1,10 +1,9 @@
-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';
 import type { Metadata } from 'next';
+import TutorialContent from './components/TutorialContent';
+import Link from 'next/link';
 
 export const metadata: Metadata = {
   title: '튜토리얼',
@@ -13,36 +12,28 @@ export const metadata: Metadata = {
 
 function TutorialPage() {
   return (
-    <ContentContainer className={cn('flex flex-col gap-10 p-1 py-10', 'md:gap-20')} size="lg">
+    <ContentContainer className={cn('flex flex-col gap-6 p-1 py-10', 'md:gap-20 max-md:max-w-[600px]')} 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%]" />
-          ))}
+      <section>
+        <div className="text-xl mx-[5%] py-4 font-bold text-gray-4 md:text-2xl md:py-8">
+          졸업 요건 충족도 확인 서비스
+          <br />
+          졸업을 부탁해의&nbsp;
+          <span className="max-sm:block md:hidden"></span>
+          <span className="text-primary">주요 기능과 사용법</span>을 소개해요
         </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"
-            />
-          ))}
+        <TutorialContent data={TUTORIAL_FEATRUE} />
+      </section>
+      <section>
+        <div className="text-xl mx-[5%] py-4 font-bold text-gray-4 md:text-2xl md:py-8">
+          <Link href="https://msi.mju.ac.kr/servlet/security/MySecurityStart" target="_blank">
+            <span className="text-primary">MYIWEB 성적표</span>
+          </Link>
+          를 통해 <br />
+          나만의 졸업사정결과를 확인해요
         </div>
-      </TitleBox>
+        <TutorialContent data={TUTORIAL_UPLOAD} />
+      </section>
     </ContentContainer>
   );
 }