From 2604545e7bb126b3e2e7a0c8ead245e0151a7f76 Mon Sep 17 00:00:00 2001
From: yougyung <youkyeongs@naver.com>
Date: Wed, 11 Sep 2024 23:51:57 +0900
Subject: [PATCH] refactor: change calculate remainCredit

---
 .../user/user-info-card/user-info-content.tsx |  5 +-
 .../user/user-info-card/user-info-message.tsx | 47 +++++++++----------
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/app/ui/user/user-info-card/user-info-content.tsx b/app/ui/user/user-info-card/user-info-content.tsx
index b1fbb748..2ecff8a6 100644
--- a/app/ui/user/user-info-card/user-info-content.tsx
+++ b/app/ui/user/user-info-card/user-info-content.tsx
@@ -11,7 +11,6 @@ interface UserInfoContentProps {
 
 function UserInfoContent({ data }: UserInfoContentProps) {
   const { studentNumber, studentName, completeDivision: majors, totalCredit, takenCredit, graduated } = data;
-
   const percentage = getPercentage(takenCredit, totalCredit);
 
   const displaySeveralMajor = (notation: 'major' | 'title'): React.ReactNode => {
@@ -22,11 +21,9 @@ function UserInfoContent({ data }: UserInfoContentProps) {
     });
   };
 
-  const remainCredit = totalCredit - takenCredit;
-
   return (
     <>
-      <UserInfoMessage studentName={studentName} graduated={graduated} remainCredit={remainCredit} />
+      <UserInfoMessage studentName={studentName} />
       <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">
diff --git a/app/ui/user/user-info-card/user-info-message.tsx b/app/ui/user/user-info-card/user-info-message.tsx
index b7afbe7a..c6bb8092 100644
--- a/app/ui/user/user-info-card/user-info-message.tsx
+++ b/app/ui/user/user-info-card/user-info-message.tsx
@@ -1,38 +1,33 @@
+'use client';
+import { useFetchCredits } from '@/app/store/querys/result';
+
 interface UserInfoMessageProps {
   studentName: string;
-  graduated: boolean;
-  remainCredit: number;
 }
 
-const graduateType = {
-  GRADUATED: 'GRADUATED',
-  STUDENT: 'STUDENT',
-  CANDIDATE: 'CANDIDATE',
-} as const;
+function UserInfoMessage({ studentName }: UserInfoMessageProps) {
+  const { data: categories } = useFetchCredits();
 
-function UserInfoMessage({ studentName, graduated, remainCredit }: UserInfoMessageProps) {
-  const graduateLevel = () => {
-    if (graduated) return graduateType.GRADUATED;
-    return remainCredit > 0 ? graduateType.STUDENT : graduateType.CANDIDATE;
-  };
+  const remainCredit = categories.reduce((accumulator, category) => {
+    if (category.category === 'CHAPEL') return accumulator;
 
-  const graduate_message = {
-    GRADUATED: '졸업을 축하합니다 !',
-    CANDIDATE: '모든 영역의 기준학점을 달성해주세요.',
-    STUDENT: (
-      <>
-        졸업필요학점보다
-        <span data-cy="remain-credit" className="text-point-blue ml-1">
-          {remainCredit}
-        </span>
-        학점이 부족합니다.
-      </>
-    ),
-  } as const;
+    return accumulator + (category.totalCredit - category.takenCredit);
+  }, 0);
 
   return (
     <p className="font-bold text-sm md:text-xl">
-      {studentName}님, {graduate_message[graduateLevel()]}
+      {studentName}님,
+      {remainCredit > 0 ? (
+        <>
+          졸업필요학점보다
+          <span data-cy="remain-credit" className="text-point-blue ml-1">
+            {remainCredit}
+          </span>
+          학점이 부족합니다.
+        </>
+      ) : (
+        '졸업을 축하합니다 !'
+      )}
     </p>
   );
 }