Result refactor/#137

app/(sub-page)/sign-in/page.tsx

@@ -29,11 +29,11 @@ export default function SignInPage() {
         </div>
         <SignInForm />
         <div className="flex mt-12 space-x-4 h-6 items-center justify-center">
-          <Link href={'/'}>
+          <Link href={'/find-id'}>
             <Button className="text-xs" label="아이디 찾기" variant={'text'} />
           </Link>
           <Separator orientation={'vertical'} />
-          <Link href={'/'}>
+          <Link href={'/find-password'}>
             <Button className="text-xs" label="비밀번호 재설정" variant={'text'} />
           </Link>
           <Separator orientation={'vertical'} />

app/mocks/data.mock.ts

@@ -192,7 +192,7 @@ export const resultCategoryDetailInfo = JSON.parse(`{
           "completed": false
       }
   ],
-  "completed": false
+    "completed": false
 }`);
 
 export const users = JSON.parse(`[
@@ -206,75 +206,63 @@ export const users = JSON.parse(`[
 
 export const credits = JSON.parse(`[
     {
-        "category": "COMMON_CULTURE",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
-        "completed": false
-    },
-    {
-        "category": "CORE_CULTURE",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
-        "completed": false
-    },
-    {
-        "category": "PRIMARY_MANDATORY_MAJOR",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
-        "completed": false
+        "category": "DUAL_BASIC_ACADEMICAL_CULTURE",
+        "totalCredit": 6,
+        "takenCredit": 6.0,
+        "completed": true
     },
     {
         "category": "PRIMARY_ELECTIVE_MAJOR",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
+        "totalCredit": 24,
+        "takenCredit": 21.0,
         "completed": false
     },
     {
         "category": "DUAL_MANDATORY_MAJOR",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
+        "totalCredit": 21,
+        "takenCredit": 18.0,
         "completed": false
     },
     {
-        "category": "DUAL_ELECTIVE_MAJOR",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
-        "completed": false
+        "category": "CORE_CULTURE",
+        "totalCredit": 12,
+        "takenCredit": 12.0,
+        "completed": true
     },
     {
-        "category": "SUB_MAJOR",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
+        "category": "PRIMARY_BASIC_ACADEMICAL_CULTURE",
+        "totalCredit": 18,
+        "takenCredit": 15.0,
         "completed": false
     },
     {
-        "category": "PRIMARY_BASIC_ACADEMICAL_CULTURE",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
+        "category": "COMMON_CULTURE",
+        "totalCredit": 17,
+        "takenCredit": 16.5,
         "completed": false
     },
     {
-        "category": "DUAL_BASIC_ACADEMICAL_CULTURE",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
-        "completed": false
+        "category": "PRIMARY_MANDATORY_MAJOR",
+        "totalCredit": 18,
+        "takenCredit": 18.0,
+        "completed": true
     },
     {
-        "category": "NORMAL_CULTURE",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
+        "category": "DUAL_ELECTIVE_MAJOR",
+        "totalCredit": 24,
+        "takenCredit": 0.0,
         "completed": false
     },
     {
-        "category": "FREE_ELECTIVE",
-        "totalCredit" : 70,
-        "takenCredit" : 40,
+        "category": "CHAPEL",
+        "totalCredit": 2,
+        "takenCredit": 1.5,
         "completed": false
     },
     {
-        "category": "CHAPEL",
-        "totalCredit" : 4,
-        "takenCredit" : 1,
+        "category": "SUB_MAJOR",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
         "completed": false
     }
 ]`);

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

@@ -67,9 +67,10 @@ function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCatego
     setIsOpenDialog(true);
   };
 
-  const getCategoryCredit = (category: ResultCategoryKey, credit: number): number => {
-    return category === RESULT_CATEGORY.CHAPEL ? credit * 2 : credit;
-  };
+  const getCategoryCredit = (category: ResultCategoryKey, credit: number) =>
+    category === RESULT_CATEGORY.CHAPEL ? credit * 2 : credit;
+
+  const getCategoryCountWay = (category: ResultCategoryKey) => (category === RESULT_CATEGORY.CHAPEL ? '횟수' : '학점');
 
   const filterCategoryExistStandard = (category: ResultCategoryKey) => {
     const NONEXIST_STANDARD_CATEGORY = ['FREE_ELECTIVE', 'NORMAL_CULTURE', 'CHAPEL'];
@@ -96,11 +97,11 @@ function ResultCategoryCard({ category, totalCredit, takenCredit }: ResultCatego
       <div className={cn('w-full flex text-xs font-medium justify-between items-end', 'md:gap-4 md:text-base')}>
         <div>
           <div className="flex gap-2">
-            <span>기준학점</span>
+            <span>기준{getCategoryCountWay(category)}</span>
             <span className="font-bold">{getCategoryCredit(category, totalCredit)}</span>
           </div>
           <div className="flex gap-2">
-            <span>이수학점</span>
+            <span>이수{getCategoryCountWay(category)}</span>
             <span className={cn('font-bold', percentage === 100 ? 'text-point-blue' : 'text-etc-red')}>
               {getCategoryCredit(category, takenCredit)}
             </span>

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

@@ -11,12 +11,10 @@ export default function ResultCategoryDetailContentSkeleton() {
         </div>
         <Skeleton className="h-10 w-28" />
       </div>
-      {Array.from({ length: 3 }).map((_, index) => (
-        <div className="my-4 flex flex-col gap-4" key={index}>
-          <LabelContainerSkeleton rightElement={<Skeleton className="h-10 w-28" />} />
-          <Skeleton className="h-40 w-30" />
-        </div>
-      ))}
+      <div className="my-4 flex flex-col gap-4">
+        <LabelContainerSkeleton rightElement={<Skeleton className="h-10 w-28" />} />
+        <Skeleton className="h-40 w-30" />
+      </div>
     </div>
   );
 }

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

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { ResultCategoryDetailLectureToggle } from '../result-category-detail-lecture/result-category-detail-lecture-toggle';
 import ResultCagegoryDetailLecture from '../result-category-detail-lecture/result-cagegory-detail-lecture';
 import { ResultCategoryDetailResponse } from '@/app/store/querys/result';
-import { RESULT_CATEGORY_KO, ResultCategoryKey } from '@/app/utils/key/result-category.key';
+import { RESULT_CATEGORY, RESULT_CATEGORY_KO, ResultCategoryKey } from '@/app/utils/key/result-category.key';
 
 interface ResultCategoryDetailContentProps extends ResultCategoryDetailResponse {
   category: ResultCategoryKey;
@@ -19,12 +19,14 @@ function ResultCategoryDetailContent({
 }: ResultCategoryDetailContentProps) {
   const [isTakenLecture, setIsTakenLectrue] = useState(false);
 
+  const includeChaple = (category: ResultCategoryKey) => category === RESULT_CATEGORY.COMMON_CULTURE;
+
   return (
     <div className="md:w-[80vw] max-w-[1200px] p-2 overflow-scroll">
       <div className={cn('flex justify-between mb-6', 'md:mb-10')}>
         <div>
           <h1 className={cn('text-2xl font-bold', 'md:text-4xl')}>{RESULT_CATEGORY_KO[category]}</h1>
-          <div className={cn('relative flex  items-center gap-2 text-sm text-gray-6 font-medium my-2', 'md:text-lg')}>
+          <div className={cn('relative flex items-center gap-2 text-sm text-gray-6 font-medium my-2', 'md:text-lg')}>
             <span className="hidden md:block"> {RESULT_CATEGORY_KO[category]} 과목 중</span>
             <div className="w-20 h-10">
               <ResultCategoryDetailLectureToggle
@@ -37,11 +39,15 @@ function ResultCategoryDetailContent({
             </div>
             <span>과목이 표시됩니다.</span>
           </div>
+          <div className={includeChaple(category) ? 'font-light text-gray-5 text-xs my-2 md:text-sm' : 'hidden'}>
+            * 채플이 포함된 학점으로, 채플과목의 이수율은 채플 카테고리에서 확인 가능합니다.
+          </div>
         </div>
-        <div className={cn('text-2xl font-bold', 'md:text-4xl')}>
+        <div className={cn('min-w-fit text-2xl font-bold', 'md:text-4xl')}>
           <span className="text-point-blue">{takenCredit}</span> / {totalCredit}
         </div>
       </div>
+
       {detailCategory.map((categoryInfo, index) => (
         <ResultCagegoryDetailLecture isTakenLecture={isTakenLecture} detailCategory={categoryInfo} key={index} />
       ))}

app/ui/result/result-category-detail-lecture/result-cagegory-detail-lecture.tsx

@@ -3,6 +3,9 @@ import AnnounceMessageBox from '@/app/ui/view/molecule/announce-message-box/anno
 import LabelContainer from '@/app/ui/view/atom/label-container/label-container';
 import { cn } from '@/app/utils/shadcn/utils';
 import { ResultCategoryDetailLecturesResponse } from '@/app/store/querys/result';
+import CompletedImage from '@/public/assets/completed-category.png';
+import Image from 'next/image';
+import searchResultIcon from '@/public/assets/searchResultIcon.svg';
 
 const headerInfo = ['과목코드', '과목명', '학점'];
 
@@ -11,6 +14,17 @@ interface ResultCagegoryDetailLectureProps {
   isTakenLecture: boolean;
 }
 
+const emptyDataRender = () => {
+  return (
+    <div className="flex justify-center gap-4 p-6 md:p-12">
+      <Image src={searchResultIcon} alt="search-result-icon" width={20} height={20} />
+      <span className="text-sm font-medium text-gray-400 text-center whitespace-pre-wrap md:text-base">
+        이수한 과목 정보가 존재하지 않습니다.
+      </span>
+    </div>
+  );
+};
+
 function ResultCagegoryDetailLecture({ detailCategory, isTakenLecture }: ResultCagegoryDetailLectureProps) {
   const { categoryName, totalCredit, takenCredit, takenLectures, haveToLectures, completed } = detailCategory;
 
@@ -27,9 +41,13 @@ function ResultCagegoryDetailLecture({ detailCategory, isTakenLecture }: ResultC
         }
       />
       {showCompleted ? (
-        <AnnounceMessageBox message="해당 파트의 졸업요건을 충족하셨습니다!" />
+        <AnnounceMessageBox message="해당 파트의 졸업요건을 충족하셨습니다!" background_image={CompletedImage} />
       ) : (
-        <Table headerInfo={headerInfo} data={isTakenLecture ? takenLectures : haveToLectures} />
+        <Table
+          headerInfo={headerInfo}
+          data={isTakenLecture ? takenLectures : haveToLectures}
+          emptyDataRender={emptyDataRender}
+        />
       )}
     </div>
   );

app/ui/result/result-category-detail-lecture/result-category-detail-lecture-toggle.tsx

@@ -11,7 +11,7 @@ const ResultCategoryDetailLectureToggle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'relative peer p-1 inline-flex h-10 w-20 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-slate-200 ',
+      'relative peer p-1 inline-flex h-10 w-20 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-slate-200',
       className,
     )}
     {...props}

app/ui/user/find-password-from/find-password-form.tsx

@@ -19,7 +19,7 @@ function FindPasswordForm({ authId }: FindPasswordFormProps) {
   };
 
   return (
-    <Form id="비밀번호 재설정" action={resetPassword} onSuccess={onSuccess}>
+    <Form id="비밀번호 재설정" action={resetPassword} onSuccess={onSuccess} className="flex flex-col gap-4">
       <Form.PasswordInput
         required={true}
         label="비밀번호"

app/ui/user/find-password-from/find-password-validate-form.tsx

@@ -7,15 +7,13 @@ interface FindPasswordValidateFormProps {
 }
 function FindPasswordValidateForm({ onNext }: FindPasswordValidateFormProps) {
   return (
-    <div>
-      <Form id="가입자 검증" onSuccess={onNext} action={validateUser}>
-        <Form.TextInput required={true} label="아이디" id="authId" placeholder="아이디를 입력해주세요." />
-        <Form.TextInput required={true} label="학번" id="studentNumber" placeholder="ex ) 60xxxxxx" />
-        <div className="py-6">
-          <Form.SubmitButton label="검사하기" position="center" variant="primary" />
-        </div>
-      </Form>
-    </div>
+    <Form id="가입자 검증" onSuccess={onNext} action={validateUser} className="flex flex-col gap-4">
+      <Form.TextInput required={true} label="아이디" id="authId" placeholder="아이디를 입력해주세요." />
+      <Form.TextInput required={true} label="학번" id="studentNumber" placeholder="ex ) 60xxxxxx" />
+      <div className="py-6">
+        <Form.SubmitButton label="검사하기" position="center" variant="primary" />
+      </div>
+    </Form>
   );
 }
 

app/ui/view/molecule/announce-message-box/announce-massage-box.tsx

@@ -1,23 +1,26 @@
 import React from 'react';
-import CompletedImage from '@/public/assets/completed-category.png';
 import CheckImage from '@/public/assets/check.svg';
 import Image from 'next/image';
 import { cn } from '@/app/utils/shadcn/utils';
+import { StaticImport } from 'next/dist/shared/lib/get-img-props';
 
 interface AnnounceMessageBoxProp {
   message: string;
+  background_image?: string | StaticImport;
 }
 
-function AnnounceMessageBox({ message }: AnnounceMessageBoxProp) {
+function AnnounceMessageBox({ message, background_image }: AnnounceMessageBoxProp) {
   return (
-    <div className="relative flex justify-center items-center p-2 bg-yellow-5">
-      <Image
-        src={CompletedImage}
-        width={1200}
-        height={270}
-        alt="category-fullfill-image"
-        className={cn('min-h-20 max-h-40', 'md:min-h-32')}
-      />
+    <div className="relative flex justify-center items-center p-2 bg-gray-1 min-h-24 rounded-3xl">
+      {background_image && (
+        <Image
+          src={background_image}
+          width={1200}
+          height={270}
+          alt="announcebox_background_image"
+          className={cn('min-h-20 max-h-40', 'md:min-h-32')}
+        />
+      )}
       <div className="absolute">
         <Image
           className={cn('m-auto w-[30px]', 'md:w-[50px]')}

app/ui/view/molecule/pie-chart/pie-chart.tsx

@@ -8,14 +8,13 @@ export interface PieChartProp {
 }
 
 function PieChart({ percentage }: PieChartProp) {
-  const filterdPercentage = percentage > 100 ? 100 : percentage;
-
   const isDesktop = useMediaQuery('(min-width: 767px)');
 
   return (
     <div
       className={cn(
-        'piechart relative aspect-square rounded-full w-[6.5rem] h-[6.5rem]',
+        'relative aspect-square rounded-full w-[6.5rem] h-[6.5rem]',
+        percentage > 0 && 'piechart',
         percentage === 100 ? 'bg-light-blue-1 complete' : 'bg-etc-pink',
         'md:w-[9rem] md:h-[9rem]',
       )}
@@ -33,7 +32,7 @@ function PieChart({ percentage }: PieChartProp) {
           'md:w-[6rem] md:h-[6rem] md:text-xl ',
         )}
       >
-        {filterdPercentage}%
+        {percentage}%
       </div>
     </div>
   );

app/ui/view/molecule/table/index.tsx

@@ -4,12 +4,14 @@ import List from '../list';
 import Grid from '../grid';
 import { ListRow } from '../list/list-root';
 import SwipeToDelete from '../swipe/swipe-to-delete';
+import { ReactNode } from 'react';
 
 interface TableProps<T extends ListRow> {
   headerInfo: string[];
   data: T[];
   renderActionButton?: (id: number) => JSX.Element;
   swipeable?: boolean;
+  emptyDataRender?: () => ReactNode;
 }
 
 interface SwipeableTableProps<T extends ListRow> extends TableProps<T> {
@@ -35,6 +37,7 @@ export function Table<T extends ListRow>({
   renderActionButton,
   swipeable = false,
   onSwipeAction,
+  emptyDataRender,
 }: SwipeableTableProps<T> | BasicTableProps<T>) {
   const cols = renderActionButton && !swipeable ? 'render-button' : headerInfo.length;
 
@@ -75,7 +78,7 @@ export function Table<T extends ListRow>({
   return (
     <div className="flex flex-col gap-2.5 w-full" data-testid="table-data">
       <TableHeader headerInfo={headerInfo} cols={isCol(cols) ? cols : 6} />
-      <List data={data} render={swipeable ? swipeableRender : render} />
+      <List data={data} render={swipeable ? swipeableRender : render} emptyDataRender={emptyDataRender} />
     </div>
   );
 }