Result refactor/#137

app/(sub-page)/components/navigation-items.tsx

@@ -18,6 +18,7 @@ export default async function NavigationItems() {
       )}
       <NavigationItem href={'/tutorial'} label="튜토리얼" />
       <NavigationItem
+        target="_black"
         href={'https://soft-anorak-0ca.notion.site/e35e3b210995463fa748f35aab536f2c?pvs=74'}
         label="팀소개"
       />
@@ -28,11 +29,12 @@ export default async function NavigationItems() {
 interface NavigationItemProps {
   href: string;
   label: string;
+  target?: '_black' | '_self' | '_parent' | '_top';
 }
 
-export function NavigationItem({ href, label }: NavigationItemProps) {
+export function NavigationItem({ href, label, target }: NavigationItemProps) {
   return (
-    <Link href={href} className="flex items-center justify-between">
+    <Link href={href} target={target} className="flex items-center justify-between">
       <Button
         size={'xs'}
         className="text-black lg:text-white hover:text-slate-400 lg:text-base text-lg my-1"

app/(sub-page)/grade-upload/components/manual.tsx

@@ -2,11 +2,11 @@ export default function Manual() {
   return (
     <div className="flex justify-center">
       <div className="flex flex-col gap-6">
-        <h1 className="text-center text-2xl font-bold p-4 border-b-2 border-gray-100 md:text-4xl">
+        <h1 className="text-center text-2xl font-bold p-6 border-b-2 border-gray-100 md:text-4xl">
           한 번의 성적표 입력으로
           <br /> 맞춤형 결과를 확인하세요 !
         </h1>
-        <div className="text-base px-6 md:px-0 flex flex-col gap-2 md:text-lg">
+        <div className="px-6 flex flex-col gap-2 md:text-lg md:px-0">
           <div>
             1.
             <a
@@ -16,11 +16,11 @@ export default function Manual() {
             >
               MyiWeb MSI
             </a>
-            에 접속 후 로그인(PC환경 권장)
+            에 접속 후 로그인(PC환경)
           </div>
-          <div>2. 좌측 성적/졸업 메뉴 → 성적표(상담용,B4)클릭</div>
-          <div>3. 우측 상단 조회버튼 클릭 → 프린트 아이콘 클릭</div>
-          <div>4. 인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 클릭 </div>
+          <div>2. 좌측 성적/졸업 메뉴 → 성적표(상담용,B4)</div>
+          <div>3. 우측 상단 조회버튼 → 프린트 아이콘 </div>
+          <div>4. 인쇄 정보의 대상(PDF로 저장) 설정 → 하단 저장 버튼 </div>
           <div>5. 저장한 파일 업로드 </div>
           <div className="text-xs md:text-sm text-primary">
             • 회원 가입한 학번과 일치하는 학번의 성적표를 입력해야 합니다.

app/(sub-page)/grade-upload/page.tsx

@@ -12,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function GradeUploadPage() {
   return (
-    <ContentContainer className="flex flex-col justify-center gap-8 min-h-[70vh]">
+    <ContentContainer className="flex flex-col justify-center gap-8 min-h-[70vh] max-md:max-w-[600px]">
       <Manual />
       <UploadTakenLecture />
     </ContentContainer>

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

@@ -34,7 +34,7 @@ function ResultPage({ searchParams }: ResultPageProp) {
 
   return (
     <div className="flex justify-center items-end">
-      <ContentContainer className="md:w-[700px] p-4 py-6 md:p-8">
+      <ContentContainer className="max-md:max-w-[500px] md:w-[700px] p-4 py-6 md:p-8">
         <Suspense fallback={<UserInfoCardSkeleton />}>
           <UserInfoCard />
         </Suspense>

app/(sub-page)/sign-up/components/sign-up-success.tsx

@@ -1,15 +1,15 @@
 import Button from '@/app/ui/view/atom/button/button';
 import TitleBox from '@/app/ui/view/molecule/title-box/title-box';
 import Link from 'next/link';
-
-// 내용이랑 스타일은 mock인 상태입니다.
+import Image from 'next/image';
+import maru from '../../../../public/assets/maru.png';
 export default function SignUpSuccess() {
   return (
     <>
       <TitleBox title={'회원가입 완료'} />
-      <div className="h-[260px] text-2xl font-bold  flex flex-col items-center justify-center space-y-2">
-        <div>회원가입이 완료되었습니다</div>
-        <div className="text-xl font-medium">로그인 후 졸업 사정 결과를 확인해보세요!</div>
+      <div className="text-2xl font-bold flex flex-col items-center justify-center space-y-2">
+        <Image src={maru} width={150} height={150} alt="main-book-background" className="max-md:w-24 mt-8" />
+        <div className="text-base md:text-lg font-light">이제 졸업 사정 결과를 확인해보세요!</div>
         <div className="pt-6">
           <Link href="/sign-in">
             <Button size={'md'} label={'로그인 하기'} />

app/(sub-page)/sign-up/components/sign-up-terms.tsx

@@ -21,15 +21,15 @@ export default function SignUpTerm({ onNext }: SignUpTermProps) {
               검사대상인지 확인하세요!
               <ul className="list-disc ml-6 mt-2">
                 <li>
-                  대학: 경영대학, 법과대학, 사회과학대학, ICT융합대학, 인문대학,{' '}
-                  <span className="text-red-400">미래융합대학(불가)</span>
+                  대학: 경영대학, 법과대학, 사회과학대학, ICT융합대학, 인문대학,
+                  <span className="ml-1 text-red-400">미래융합대학(불가)</span>
                 </li>
                 <li>학번: 16 ~ 22학번</li>
               </ul>
             </li>
             <li>
-              교직, 다전공, 연계전공, 편입, 전과, 재외국민/외국인전형에 해당하는 사용자는 검사 기준이 따로 설정되지 않아
-              검사가 불가능합니다.
+              교직, 연계전공, 편입, 재외국민/외국인전형에 해당하는 사용자는 검사 기준이 따로 설정되지 않아 검사가
+              불가능합니다.
             </li>
             <li>검사를 위해선 성적표를 직접 업로드해야하므로 PC환경에서 진행하는 것을 권장합니다.</li>
             <li>

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;

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

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

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>
   );
 }

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

@@ -4,7 +4,10 @@ import ResultCategoryCardSkeleton from '../result-category-card/result-category-
 async function ResultCategorySkeleton() {
   return (
     <div
-      className={cn('absolute grid grid-cols-2 gap-2 top-[30rem] w-full', 'md:max-w-[700px] md:gap-10 md:top-[33rem]')}
+      className={cn(
+        'absolute grid grid-cols-2 gap-2 top-[28rem] w-full',
+        'md:max-w-[700px] md:gap-10 md:top-[35rem] max-md:max-w-[500px]',
+      )}
     >
       {Array.from({ length: 4 }).map((_, index) => (
         <ResultCategoryCardSkeleton key={index} />

app/ui/result/result-category/result-category.tsx

@@ -22,7 +22,10 @@ function ResultCategory() {
 
   return (
     <div
-      className={cn('absolute grid grid-cols-2 gap-2 top-[30rem] w-full', 'md:max-w-[700px] md:gap-10 md:top-[33rem]')}
+      className={cn(
+        'absolute grid grid-cols-2 gap-2 top-[28rem] w-full',
+        'md:max-w-[700px] md:gap-10 md:top-[35rem] max-md:max-w-[500px] ',
+      )}
     >
       {sortedCategories.map(({ category, totalCredit, takenCredit }, index) => (
         <ResultCategoryCard

app/ui/user/user-info-card/user-info-content.tsx

@@ -3,6 +3,7 @@ import { MAJOR_NOTATION } from '@/app/utils/key/result-category.key';
 import React from 'react';
 import PieChart from '../../view/molecule/pie-chart/pie-chart';
 import { getPercentage } from '@/app/utils/chart.util';
+import UserInfoMessage from './user-info-message';
 
 interface UserInfoContentProps {
   data: UserInfoResponse;
@@ -21,16 +22,12 @@ function UserInfoContent({ data }: UserInfoContentProps) {
     });
   };
 
+  const remainCredit = totalCredit - takenCredit;
+
   return (
     <>
-      <p className="font-bold text-sm md:text-xl">
-        졸업필요학점보다{' '}
-        <span data-cy="remain-credit" className="text-point-blue">
-          {totalCredit - takenCredit}
-        </span>
-        학점이 부족합니다.
-      </p>
-      <div className="flex border-t-2 my-4 py-4 justify-between items-center">
+      <UserInfoMessage studentName={studentName} graduated={graduated} remainCredit={remainCredit} />
+      <div className="flex border-t-2 md:my-4 mt-4 py-4 justify-between items-center">
         <div className="flex font-medium text-xs md:text-lg gap-4 md:gap-14 ">
           <ul className="text-gray-6 flex flex-col gap-1">
             <li>이름</li>