Merge pull request #103 from Myongji-Graduate/my-page-skeleton/#102

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/lecture-search/index.tsx

@@ -3,11 +3,11 @@ import { useAtomValue } from 'jotai';
 import LectureSearchBar from './lecture-search-bar';
 import { searchWordAtom } from '@/app/store/search-word';
 import { Suspense } from 'react';
-import { LectureSearchResultSpinner } from './lecture-search-result/lecture-search-result-spinner';
-import LectureSearchResult from './lecture-search-result';
 import Image from 'next/image';
 import searchResultIcon from '@/public/assets/searchResultIcon.svg';
 import List from '../../view/molecule/list';
+import LoadingSpinner from '../../view/atom/loading-spinner';
+import LectureSearchResult from './lecture-search-result';
 
 const emptyDataRender = () => {
   return (
@@ -30,7 +30,16 @@ export default function LectureSearch() {
       <div className="w-[800px] mx-auto my-7  flex flex-col gap-10 sm:gap-6">
         <LectureSearchBar />
         {searchable ? (
-          <Suspense fallback={<LectureSearchResultSpinner />}>
+          <Suspense
+            fallback={
+              <div className="rounded-xl border-[1px] border-gray-300 w-full h-72 overflow-auto flex justify-center items-center">
+                <LoadingSpinner
+                  className={'animate-spin shrink-0 h-12 w-12 mr-1.5 -ml-1 fill-gray-400'}
+                  style={{ transition: `width 150ms` }}
+                />
+              </div>
+            }
+          >
             <LectureSearchResult />
           </Suspense>
         ) : (

app/ui/lecture/lecture-search/lecture-search-result/index.tsx → app/ui/lecture/lecture-search/lecture-search-result.tsx

@@ -3,10 +3,10 @@ import { useAtomValue } from 'jotai';
 import { searchWordAtom } from '@/app/store/search-word';
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { fetchSearchLectures } from '@/app/business/lecture/search-lecture.query';
-import AddTakenLectureButton from '../../taken-lecture/add-taken-lecture-button';
 import List from '@/app/ui/view/molecule/list';
 import Grid from '@/app/ui/view/molecule/grid';
 import { QUERY_KEY } from '@/app/utils/query/react-query-key';
+import AddTakenLectureButton from '../taken-lecture/add-taken-lecture-button';
 
 export default function LectureSearchResult() {
   const searchWord = useAtomValue(searchWordAtom);

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 '../../../utils/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/result/result-category-card/result-category-card.skeleton.tsx

@@ -4,7 +4,7 @@ import { cn } from '@/app/utils/shadcn/utils';
 import Book from '@/public/assets/book.svg';
 import Image from 'next/image';
 import * as React from 'react';
-import Skeleton from '../../view/atom/skeleton';
+import Skeleton from '../../../utils/skeleton';
 
 function ResultCategoryCardSkeleton() {
   return (

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

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

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

@@ -1,4 +1,4 @@
-import Skeleton from '../../view/atom/skeleton';
+import Skeleton from '../../../utils/skeleton';
 
 function UserInfoCardSkeleton() {
   return (

app/ui/user/user-info-navigator/user-info-navigator.skeleton.tsx

@@ -1,4 +1,4 @@
-import Skeleton from '../../view/atom/skeleton';
+import Skeleton from '../../../utils/skeleton';
 
 export default function UserInfoNavigatorSkeleton() {
   return (

app/ui/view/atom/label-container/label-container.skeleton.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import Skeleton from '../skeleton';
+import Skeleton from '../../../../utils/skeleton';
 
 interface LabelContainerProps {
   rightElement: ReactNode;

app/ui/view/atom/skeleton.tsx → app/utils/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} />;
 }