chore: commit for merge

app/(sub-page)/my/components/my-result-container.tsx

@@ -0,0 +1,18 @@
+import UserCreditResult from '@/app/ui/user/user-credit-result';
+import Button from '@/app/ui/view/atom/button/button';
+import Link from 'next/link';
+import React from 'react';
+
+export default function MyResultContainer() {
+  return (
+    <div className="flex flex-col  justify-center gap-10">
+      <p className="font-bold sm:text-3xl text-2xl ml-1 sm:ml-0">마이페이지</p>
+      <UserCreditResult />
+      <div className="flex justify-center">
+        <Link href="/result">
+          <Button label="수강현황 자세히 보기" variant="primary" size="xs" />
+        </Link>
+      </div>
+    </div>
+  );
+}

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

@@ -6,6 +6,7 @@ import ContentContainer from '@/app/ui/view/atom/content-container';
 import Drawer from '@/app/ui/view/molecule/drawer/drawer';
 import { DIALOG_KEY } from '@/app/utils/key/dialog-key.util';
 import { Suspense } from 'react';
+import MyResultContainer from './components/my-result-container';
 
 export default function MyPage() {
   return (
@@ -16,7 +17,8 @@ export default function MyPage() {
             <UserInfoNavigator />
           </Suspense>
         </div>
-        <div className="w-full lg:w-[70%] lg:px-[20px]">
+        <div className="w-full lg:w-[70%] lg:px-[20px] pt-12 pb-2 flex flex-col gap-12">
+          <MyResultContainer />
           <TakenLecture />
         </div>
       </ContentContainer>

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

@@ -1,44 +1,29 @@
-import ResultCategoryCard from '@/app/ui/result/result-category-card/result-category-card';
 import UserInfoCard from '@/app/ui/user/user-info-card/user-info-card';
 import ContentContainer from '@/app/ui/view/atom/content-container';
-import { cn } from '@/app/utils/shadcn/utils';
-import { RESULT_CATEGORY } from '@/app/utils/key/result-category.key';
 import ResultCategoryDetail from '@/app/ui/result/result-category-detail/result-category-detail';
+import { Suspense } from 'react';
+import UserInfoCardSkeleton from '@/app/ui/user/user-info-card/user-info-card.skeleton';
+import ResultCategory from '@/app/ui/result/result-category/result-category';
+import ResultCategorySkeleton from '@/app/ui/result/result-category/result-category.skeleton';
 
 interface ResultPageProp {
   searchParams: { category: string };
 }
 
 function ResultPage({ searchParams }: ResultPageProp) {
   const { category } = searchParams;
-  const DUMMY_DATA = {
-    category: 'COMMON_CULTURE' as keyof typeof RESULT_CATEGORY,
-    totalCredit: 70,
-    takenCredit: 68,
-    completed: false,
-  };
 
   return (
     <div className="flex justify-center items-end">
       <ContentContainer className="md:w-[700px] p-4 py-6 md:p-8">
-        <UserInfoCard />
+        <Suspense fallback={<UserInfoCardSkeleton />}>
+          <UserInfoCard />
+        </Suspense>
       </ContentContainer>
-      <div
-        className={cn(
-          'absolute grid grid-cols-2 gap-2 top-[30rem] w-full',
-          'md:max-w-[700px] md:gap-10 md:top-[33rem]',
-        )}
-      >
-        {Array.from({ length: 8 }).map((_, index) => (
-          <ResultCategoryCard
-            key={index}
-            category={RESULT_CATEGORY[DUMMY_DATA.category]}
-            totalCredit={DUMMY_DATA.totalCredit}
-            takenCredit={DUMMY_DATA.takenCredit}
-          />
-        ))}
-      </div>
-      {category && <ResultCategoryDetail category={category} />}
+      <Suspense fallback={<ResultCategorySkeleton />}>
+        <ResultCategory />
+      </Suspense>
+      <ResultCategoryDetail category={category} />
     </div>
   );
 }

app/business/api-path.ts

@@ -7,6 +7,8 @@ export const API_PATH = {
   takenLectures: `${BASE_URL}/taken-lectures`,
   resultCategoryDetailInfo: `${BASE_URL}/result-category-detail-info`,
   user: `${BASE_URL}/users`,
+  resultUserInfo: `${BASE_URL}/resultUserInfo`,
+  credits: `${BASE_URL}/credits`,
   auth: `${BASE_URL}/auth`,
   lectures: `${BASE_URL}/lectures`,
 };

app/business/result/result.query.ts

@@ -2,6 +2,7 @@ import { LectureInfo } from '@/app/type/lecture';
 import { API_PATH } from '../api-path';
 import { cookies } from 'next/headers';
 import { httpErrorHandler } from '@/app/utils/http/http-error-handler';
+import { RESULT_CATEGORY } from '@/app/utils/key/result-category.key';
 
 export interface ResultCategoryDetailLectures {
   categoryName: string;
@@ -12,26 +13,53 @@ export interface ResultCategoryDetailLectures {
   completed: boolean;
 }
 
-export interface ResultCategoryDetailInfo {
+export interface ResultCategoryDetailResponse {
   totalCredit: number;
   takenCredit: number;
   detailCategory: ResultCategoryDetailLectures[];
   completed: boolean;
 }
 
+export interface Major {
+  majorType: 'PRIMARY' | 'DUAL' | 'SUB';
+  major: string;
+}
+
 export interface ResultUserInfo {
   studentNumber: string;
   studentName: string;
-  studentCategory: 'NORMAL' | 'CHANGE_MAJOR' | 'DUAL_MAJOR' | 'SUB_MAJOR';
-  major: string;
+  completionDivision: Major[];
   totalCredit: number;
   takenCredit: number;
+  graduated: boolean;
 }
 
-export const fetchResultCategoryDetailInfo = async (category: string): Promise<ResultCategoryDetailInfo> => {
+export interface CreditResponse {
+  category: keyof typeof RESULT_CATEGORY;
+  totalCredit: number;
+  takenCredit: number;
+  completed: boolean;
+}
+export const fetchResultCategoryDetailInfo = async (category: string): Promise<ResultCategoryDetailResponse> => {
   //FIX : category를 querystring으로 호출하는 건은 mock단계에서는 불필요할 것으로 예상, 실제 api 연결시 변경 예정
   try {
-    const response = await fetch(`${API_PATH.resultCategoryDetailInfo}`, {
+    const response = await fetch(API_PATH.resultCategoryDetailInfo, {
+      headers: {
+        Authorization: `Bearer ${cookies().get('accessToken')?.value}`,
+      },
+    });
+    const result = await response.json();
+    httpErrorHandler(response, result);
+
+    return result;
+  } catch (error) {
+    throw error;
+  }
+};
+
+export const fetchCredits = async (): Promise<CreditResponse[]> => {
+  try {
+    const response = await fetch(API_PATH.credits, {
       headers: {
         Authorization: `Bearer ${cookies().get('accessToken')?.value}`,
       },

app/business/user/user.query.ts

@@ -4,6 +4,7 @@ import { UserInfoResponse } from './user.type';
 import { cookies } from 'next/headers';
 import { isValidation } from '@/app/utils/zod/validation.util';
 import { UserInfoResponseSchema } from './user.validation';
+import { ResultUserInfo } from '../result/result.query';
 
 export async function getUserInfo(): Promise<UserInfoResponse> {
   try {
@@ -26,3 +27,20 @@ export async function getUserInfo(): Promise<UserInfoResponse> {
     throw error;
   }
 }
+
+export async function fetchResultUserInfo(): Promise<ResultUserInfo> {
+  try {
+    const response = await fetch(API_PATH.resultUserInfo, {
+      headers: {
+        Authorization: `Bearer ${cookies().get('accessToken')?.value}`,
+      },
+    });
+
+    const result = await response.json();
+
+    httpErrorHandler(response, result);
+    return result;
+  } catch (error) {
+    throw error;
+  }
+}

app/business/user/user.validation.ts

@@ -1,11 +1,19 @@
 import { z } from 'zod';
 
 // api 변경 예정
+
 export const UserInfoResponseSchema = z.object({
   studentNumber: z.string(),
   studentName: z.string(),
-  major: z.string(),
-  isSumbitted: z.boolean(),
+  completionDivision: z.array(
+    z.object({
+      majorType: z.string(),
+      major: z.string(),
+    }),
+  ),
+  totalCredit: z.number(),
+  takenCredit: z.number(),
+  graduated: z.boolean(),
 });
 
 export const ValidateTokenResponseSchema = z.object({

app/layout.tsx

@@ -24,7 +24,7 @@ export default function RootLayout({
         />
       </head>
       <body>
-        <div className="bg-white w-[100vw] h-[100vh]">
+        <div className="bg-white">
           <Provider>
             <MSWComponent>
               <NavigationBar />

app/mocks/data.mock.ts

@@ -69,6 +69,25 @@ export const takenLectures = JSON.parse(`{
   ]
 }`);
 
+export const resultUserInfo = JSON.parse(`{
+    "studentNumber": "60181666",
+    "studentName": "장진욱",
+    "completionDivision" : [
+        {
+            "majorType" : "PRIMARY",
+            "major": "디지털콘텐츠디자인학과"
+        },
+        {
+            "majorType" : "DUAL",
+            "major": "경영학과"
+        }
+     
+    ],
+    "totalCredit": 132,
+    "takenCredit": 50,
+    "graduated" : true
+}`);
+
 export const resultCategoryDetailInfo = JSON.parse(`{
   "totalCredit": 15,
   "takenCredit": 12,
@@ -176,6 +195,80 @@ export const resultCategoryDetailInfo = JSON.parse(`{
   "completed": false
 }`);
 
+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": "PRIMARY_ELECTIVE_MAJOR",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
+        "completed": false
+    },
+    {
+        "category": "DUAL_MANDATORY_MAJOR",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
+        "completed": false
+    },
+    {
+        "category": "DUAL_ELECTIVE_MAJOR",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
+        "completed": false
+    },
+    {
+        "category": "SUB_MAJOR",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
+        "completed": false
+    },
+    {
+        "category": "PRIMARY_BASIC_ACADEMICAL_CULTURE",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
+        "completed": false
+    },
+    {
+        "category": "DUAL_BASIC_ACADEMICAL_CULTURE",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
+        "completed": false
+    },
+    {
+        "category": "NORMAL_CULTURE",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
+        "completed": false
+    },
+    {
+        "category": "FREE_ELECTIVE",
+        "totalCredit" : 70,
+        "takenCredit" : 40,
+        "completed": false
+    },
+    {
+        "category": "CHAPEL",
+        "totalCredit" : 4,
+        "takenCredit" : 1,
+        "completed": false
+    }
+]`);
 export const searchLectures = JSON.parse(`{
 	"lectures": [
         {