My page skeleton/#102

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

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

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

@@ -7,6 +7,7 @@ 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';
+import TakenLectureSkeleton from '@/app/ui/lecture/taken-lecture/taken-lecture-skeleton';
 
 export default function MyPage() {
   return (
@@ -19,7 +20,9 @@ export default function MyPage() {
         </div>
         <div className="w-full lg:w-[70%] lg:px-[20px] pt-12 pb-2 flex flex-col gap-12">
           <MyResultContainer />
-          <TakenLecture />
+          <Suspense fallback={<TakenLectureSkeleton />}>
+            <TakenLecture />
+          </Suspense>
         </div>
       </ContentContainer>
       <Drawer drawerKey={DIALOG_KEY.LECTURE_SEARCH}>

app/ui/lecture/taken-lecture/taken-lecture-constant.ts

@@ -0,0 +1 @@
+export const TAKEN_LECTURE_TABLE_HEADER_INFO = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];

app/ui/lecture/taken-lecture/taken-lecture-list.tsx

@@ -7,8 +7,7 @@ import { useAtom } from 'jotai';
 import { deleteTakenLecture } from '@/app/business/lecture/taken-lecture.command';
 import { useToast } from '../../view/molecule/toast/use-toast';
 import Responsive from '../../responsive';
-
-const headerInfo = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
+import { TAKEN_LECTURE_TABLE_HEADER_INFO } from './taken-lecture-constant';
 
 export default function TakenLectureList() {
   const [takenLectures, setTakenLectures] = useAtom(takenLectureAtom);
@@ -36,7 +35,7 @@ export default function TakenLectureList() {
     <>
       <Responsive minWidth={1024}>
         <Table
-          headerInfo={headerInfo}
+          headerInfo={TAKEN_LECTURE_TABLE_HEADER_INFO}
           data={optimisticLecture}
           renderActionButton={(id: number) => (
             <DeleteTakenLectureButton lectureId={id} onDelete={handleDeleteTakenLecture} />
@@ -45,7 +44,7 @@ export default function TakenLectureList() {
       </Responsive>
       <Responsive maxWidth={1023}>
         <Table
-          headerInfo={headerInfo}
+          headerInfo={TAKEN_LECTURE_TABLE_HEADER_INFO}
           data={optimisticLecture}
           onSwipeAction={handleDeleteTakenLecture}
           swipeable={true}

app/ui/lecture/taken-lecture/taken-lecture-skeleton.tsx

@@ -0,0 +1,16 @@
+import Skeleton from '../../view/atom/skeleton';
+import { TableHeader } from '../../view/molecule/table/table-header';
+import { TAKEN_LECTURE_TABLE_HEADER_INFO } from './taken-lecture-constant';
+import TakenLectureLabel from './taken-lecture-label';
+
+export default function TakenLectureSkeleton() {
+  return (
+    <div className="flex flex-col gap-2.5 w-full">
+      <TakenLectureLabel />
+      <TableHeader headerInfo={TAKEN_LECTURE_TABLE_HEADER_INFO} cols={6} />
+      {Array.from({ length: 3 }).map((_, index) => (
+        <Skeleton key={index} className="rounded-xl w-full h-12" />
+      ))}
+    </div>
+  );
+}

app/ui/user/user-credit-result/user-credit-result-skeleton.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Skeleton from '../../view/atom/skeleton';
+
+export default function UserCreditResultSkeleton() {
+  return <Skeleton className="min-h-20 rounded-lg py-1 px-8 gap-3" />;
+}

app/ui/view/atom/skeleton.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/app/utils/shadcn/utils';
 
 export default function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
-  return <div className={cn('animate-pulse rounded-md bg-slate-100 dark:bg-slate-800', className)} {...props} />;
+  return <div className={cn('animate-pulse rounded-md bg-gray-100', className)} {...props} />;
 }