user fetch refactoring /#98

app/business/user/user.query.ts

@@ -1,11 +1,12 @@
 import { httpErrorHandler } from '@/app/utils/http/http-error-handler';
 import { API_PATH } from '../api-path';
-import { UserInfoResponse } from './user.type';
+
 import { cookies } from 'next/headers';
 import { isValidation } from '@/app/utils/zod/validation.util';
-import { InitUserInfoResponseSchema, UserInfoResponseSchema } from './user.validation';
+import { InitUserInfoResponse, UserInfoResponse } from './user.type';
+import { UserInfoResponseSchema, InitUserInfoResponseSchema } from './user.validation';
 
-export async function fetchUserInfo(): Promise<UserInfoResponse> {
+export async function fetchUserInfo(): Promise<InitUserInfoResponse | UserInfoResponse> {
   try {
     const response = await fetch(`${API_PATH.user}`, {
       headers: {

app/business/user/user.type.ts

@@ -23,6 +23,7 @@ export interface MockUser {
 
 export type SignInResponse = z.infer<typeof SignInResponseSchema>;
 
-export type UserInfoResponse = z.infer<typeof UserInfoResponseSchema | typeof InitUserInfoResponseSchema>;
+export type UserInfoResponse = z.infer<typeof UserInfoResponseSchema>;
+export type InitUserInfoResponse = z.infer<typeof InitUserInfoResponseSchema>;
 
 export type ValidateTokenResponse = z.infer<typeof ValidateTokenResponseSchema>;

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

@@ -2,8 +2,6 @@ import { getPercentage } from '@/app/utils/chart.util';
 import PieChart from '../../view/molecule/pie-chart/pie-chart';
 import { fetchUserInfo } from '@/app/business/user/user.query';
 import { MAJOR_NOTATION } from '@/app/utils/key/result-category.key';
-import { UserInfoResponseSchema } from '@/app/business/user/user.validation';
-import { z } from 'zod';
 
 async function UserInfoCard() {
   const {
@@ -13,48 +11,62 @@ async function UserInfoCard() {
     totalCredit,
     takenCredit,
     graduated,
-  } = (await fetchUserInfo()) as z.infer<typeof UserInfoResponseSchema>;
+  } = await fetchUserInfo();
 
   const displaySeveralMajor = (notation: 'major' | 'title'): React.ReactNode => {
-    return majors.map((major, index) => {
-      const { major: majorName, majorType } = major;
+    if (majors) {
+      return majors.map((major, index) => {
+        const { major: majorName, majorType } = major;
 
-      return <li key={index}>{notation === 'title' ? MAJOR_NOTATION[majorType] : majorName}</li>;
-    });
+        return <li key={index}>{notation === 'title' ? MAJOR_NOTATION[majorType] : majorName}</li>;
+      });
+    }
   };
 
   return (
     <>
-      <p className="font-bold text-sm md:text-xl">
-        졸업필요학점보다 <span className="text-point-blue">{totalCredit - takenCredit}</span>학점이 부족합니다.
-      </p>
-      <div className="flex border-t-2 my-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>
-            <li>학번</li>
-            {displaySeveralMajor('title')}
-            <li>졸업필요학점</li>
-            <li>총 이수 학점</li>
-            <li>졸업가능여부</li>
-          </ul>
-          <ul className="flex flex-col gap-1">
-            <li>{studentNumber}</li>
-            <li>{studentName}</li>
-            {displaySeveralMajor('major')}
-            <li>{totalCredit}</li>
-            <li>{takenCredit}</li>
-            <li>{graduated ? '가능' : '불가능'}</li>
-          </ul>
+      {studentName ? (
+        <>
+          <p className="font-bold text-sm md:text-xl">
+            졸업필요학점보다 <span className="text-point-blue">{totalCredit - takenCredit}</span>학점이 부족합니다.
+          </p>
+          <div className="flex border-t-2 my-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>
+                <li>학번</li>
+                {displaySeveralMajor('title')}
+                <li>졸업필요학점</li>
+                <li>총 이수 학점</li>
+                <li>졸업가능여부</li>
+              </ul>
+              <ul className="flex flex-col gap-1">
+                <li>{studentNumber}</li>
+                <li>{studentName}</li>
+                {displaySeveralMajor('major')}
+                <li>{totalCredit}</li>
+                <li>{takenCredit}</li>
+                <li>{graduated ? '가능' : '불가능'}</li>
+              </ul>
+            </div>
+            <div className="md:px-10">
+              <PieChart percentage={getPercentage(takenCredit, totalCredit)} />
+            </div>
+          </div>
+          <p className="text-gray-6 text-xs">
+            * 서비스의 결과는 공식적인 효력을 갖지 않습니다. 정확한 졸업사정결과는 소속 단과대 교학팀에서의 확인을
+            권장합니다.
+          </p>
+        </>
+      ) : (
+        <div className="h-44 text-gray-6 flex items-center justify-center">
+          <p className="text-center">
+            성적표 PDF 업로드를 통해
+            <br />
+            졸업사정 결과를 확인할 수 있어요.
+          </p>
         </div>
-        <div className="md:px-10">
-          <PieChart percentage={getPercentage(takenCredit, totalCredit)} />
-        </div>
-      </div>
-      <p className="text-gray-6 text-xs">
-        * 서비스의 결과는 공식적인 효력을 갖지 않습니다. 정확한 졸업사정결과는 소속 단과대 교학팀에서의 확인을
-        권장합니다.
-      </p>
+      )}
     </>
   );
 }