From a0b56c0e957292457a51fdddcdc3b5b8a2d295f4 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Tue, 14 May 2024 13:07:59 +0900
Subject: [PATCH 1/7] feat: implement user credit result skeleton

---
 app/(sub-page)/my/components/my-result-container.tsx     | 9 ++++++---
 .../user-credit-result/user-credit-result-skeleton.tsx   | 6 ++++++
 .../user/{ => user-credit-result}/user-credit-result.tsx | 0
 app/ui/view/atom/skeleton.tsx                            | 2 +-
 4 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 app/ui/user/user-credit-result/user-credit-result-skeleton.tsx
 rename app/ui/user/{ => user-credit-result}/user-credit-result.tsx (100%)

diff --git a/app/(sub-page)/my/components/my-result-container.tsx b/app/(sub-page)/my/components/my-result-container.tsx
index fbe77272..fe37568b 100644
--- a/app/(sub-page)/my/components/my-result-container.tsx
+++ b/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">
       <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" />
diff --git a/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx b/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx
new file mode 100644
index 00000000..d8781cda
--- /dev/null
+++ b/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" />;
+}
diff --git a/app/ui/user/user-credit-result.tsx b/app/ui/user/user-credit-result/user-credit-result.tsx
similarity index 100%
rename from app/ui/user/user-credit-result.tsx
rename to app/ui/user/user-credit-result/user-credit-result.tsx
diff --git a/app/ui/view/atom/skeleton.tsx b/app/ui/view/atom/skeleton.tsx
index 4cfa96e4..71999556 100644
--- a/app/ui/view/atom/skeleton.tsx
+++ b/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} />;
 }

From 2d2446884585e218442234234aada50a9a284d5c Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Tue, 14 May 2024 14:20:06 +0900
Subject: [PATCH 2/7] chore: add  taken lecture table header info constant

---
 app/ui/lecture/taken-lecture/taken-lecture-constant.ts | 1 +
 app/ui/lecture/taken-lecture/taken-lecture-list.tsx    | 7 +++----
 2 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 app/ui/lecture/taken-lecture/taken-lecture-constant.ts

diff --git a/app/ui/lecture/taken-lecture/taken-lecture-constant.ts b/app/ui/lecture/taken-lecture/taken-lecture-constant.ts
new file mode 100644
index 00000000..d4898b4f
--- /dev/null
+++ b/app/ui/lecture/taken-lecture/taken-lecture-constant.ts
@@ -0,0 +1 @@
+export const TAKEN_LECTURE_TABLE_HEADER_INFO = ['수강년도', '수강학기', '과목코드', '과목명', '학점'];
diff --git a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx b/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
index 8212fa93..aa01a48b 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-list.tsx
+++ b/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}

From 43f53e811de2c47f9df390de579b7d35d0bb5b4c Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Tue, 14 May 2024 14:20:37 +0900
Subject: [PATCH 3/7] feat: implement taken lecture skeleton

---
 .../taken-lecture/taken-lecture-skeleton.tsx     | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 app/ui/lecture/taken-lecture/taken-lecture-skeleton.tsx

diff --git a/app/ui/lecture/taken-lecture/taken-lecture-skeleton.tsx b/app/ui/lecture/taken-lecture/taken-lecture-skeleton.tsx
new file mode 100644
index 00000000..1982876c
--- /dev/null
+++ b/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>
+  );
+}

From 4dece06af06abfd98f157cc6192f6f6c10f4b248 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Tue, 14 May 2024 14:22:15 +0900
Subject: [PATCH 4/7] feat: add suspense

---
 app/(sub-page)/my/page.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/(sub-page)/my/page.tsx b/app/(sub-page)/my/page.tsx
index 6f8d6fec..c71a5ebb 100644
--- a/app/(sub-page)/my/page.tsx
+++ b/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}>

From 88b339ecb4f040121e546be6488b3fa3001a44f0 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Tue, 14 May 2024 15:01:26 +0900
Subject: [PATCH 5/7] style: result container add padding props

---
 app/(sub-page)/my/components/my-result-container.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/(sub-page)/my/components/my-result-container.tsx b/app/(sub-page)/my/components/my-result-container.tsx
index fe37568b..7d484c59 100644
--- a/app/(sub-page)/my/components/my-result-container.tsx
+++ b/app/(sub-page)/my/components/my-result-container.tsx
@@ -6,7 +6,7 @@ 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>
       <Suspense fallback={<UserCreditResultSkeleton />}>
         <UserCreditResult />

From 638ecf13159d143af3f3211c6565378245f5677a Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Wed, 15 May 2024 20:48:45 +0900
Subject: [PATCH 6/7] remove: remove skeleton file atom -> util

---
 ...keleton.tsx => taken-lecture.skeleton.tsx} |  2 +-
 .../result-category-card.skeleton.tsx         |  2 +-
 app/ui/skeletons.tsx                          | 20 -------------------
 .../user-credit-result-skeleton.tsx           |  2 +-
 .../user-info-card.skeleton.tsx               |  2 +-
 .../user-info-navigator.skeleton.tsx          |  2 +-
 .../label-container.skeleton.tsx              |  2 +-
 app/{ui/view/atom => utils}/skeleton.tsx      |  0
 8 files changed, 6 insertions(+), 26 deletions(-)
 rename app/ui/lecture/taken-lecture/{taken-lecture-skeleton.tsx => taken-lecture.skeleton.tsx} (92%)
 delete mode 100644 app/ui/skeletons.tsx
 rename app/{ui/view/atom => utils}/skeleton.tsx (100%)

diff --git a/app/ui/lecture/taken-lecture/taken-lecture-skeleton.tsx b/app/ui/lecture/taken-lecture/taken-lecture.skeleton.tsx
similarity index 92%
rename from app/ui/lecture/taken-lecture/taken-lecture-skeleton.tsx
rename to app/ui/lecture/taken-lecture/taken-lecture.skeleton.tsx
index 1982876c..70cd0f13 100644
--- a/app/ui/lecture/taken-lecture/taken-lecture-skeleton.tsx
+++ b/app/ui/lecture/taken-lecture/taken-lecture.skeleton.tsx
@@ -1,4 +1,4 @@
-import Skeleton from '../../view/atom/skeleton';
+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';
diff --git a/app/ui/result/result-category-card/result-category-card.skeleton.tsx b/app/ui/result/result-category-card/result-category-card.skeleton.tsx
index ade06bc0..95988486 100644
--- a/app/ui/result/result-category-card/result-category-card.skeleton.tsx
+++ b/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 (
diff --git a/app/ui/skeletons.tsx b/app/ui/skeletons.tsx
deleted file mode 100644
index 189e5407..00000000
--- a/app/ui/skeletons.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-// 요즘 고민인데 이런 util component들? 어디다가 위치시켜야할 지 고민
-// 일단 따로 빼놨음
-
-const shimmer =
-  'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent';
-
-export function RevenueChartSkeleton() {
-  return (
-    <div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
-      <div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
-      <div className="rounded-xl bg-gray-100 p-4">
-        <div className="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 md:gap-4" />
-        <div className="flex items-center pb-2 pt-6">
-          <div className="h-5 w-5 rounded-full bg-gray-200" />
-          <div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx b/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx
index d8781cda..80b84999 100644
--- a/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx
+++ b/app/ui/user/user-credit-result/user-credit-result-skeleton.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Skeleton from '../../view/atom/skeleton';
+import Skeleton from '../../../utils/skeleton';
 
 export default function UserCreditResultSkeleton() {
   return <Skeleton className="min-h-20 rounded-lg py-1 px-8 gap-3" />;
diff --git a/app/ui/user/user-info-card/user-info-card.skeleton.tsx b/app/ui/user/user-info-card/user-info-card.skeleton.tsx
index a72b2062..35df63e4 100644
--- a/app/ui/user/user-info-card/user-info-card.skeleton.tsx
+++ b/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 (
diff --git a/app/ui/user/user-info-navigator/user-info-navigator.skeleton.tsx b/app/ui/user/user-info-navigator/user-info-navigator.skeleton.tsx
index 18c3ccab..534219d3 100644
--- a/app/ui/user/user-info-navigator/user-info-navigator.skeleton.tsx
+++ b/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 (
diff --git a/app/ui/view/atom/label-container/label-container.skeleton.tsx b/app/ui/view/atom/label-container/label-container.skeleton.tsx
index 5a506fcd..2b369156 100644
--- a/app/ui/view/atom/label-container/label-container.skeleton.tsx
+++ b/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;
diff --git a/app/ui/view/atom/skeleton.tsx b/app/utils/skeleton.tsx
similarity index 100%
rename from app/ui/view/atom/skeleton.tsx
rename to app/utils/skeleton.tsx

From 1c91559f10af534c7c3d921fc1860e5e954f9f53 Mon Sep 17 00:00:00 2001
From: gahyuun <pgh123166@naver.com>
Date: Wed, 15 May 2024 20:53:44 +0900
Subject: [PATCH 7/7] remove: remove lecture search result spinner

---
 app/ui/lecture/lecture-search/index.tsx           | 15 ++++++++++++---
 .../index.tsx => lecture-search-result.tsx}       |  2 +-
 .../lecture-search-result-spinner.tsx             | 14 --------------
 3 files changed, 13 insertions(+), 18 deletions(-)
 rename app/ui/lecture/lecture-search/{lecture-search-result/index.tsx => lecture-search-result.tsx} (95%)
 delete mode 100644 app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx

diff --git a/app/ui/lecture/lecture-search/index.tsx b/app/ui/lecture/lecture-search/index.tsx
index 6d694c08..5f3a0aca 100644
--- a/app/ui/lecture/lecture-search/index.tsx
+++ b/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>
         ) : (
diff --git a/app/ui/lecture/lecture-search/lecture-search-result/index.tsx b/app/ui/lecture/lecture-search/lecture-search-result.tsx
similarity index 95%
rename from app/ui/lecture/lecture-search/lecture-search-result/index.tsx
rename to app/ui/lecture/lecture-search/lecture-search-result.tsx
index 16082fdc..fd786ad1 100644
--- a/app/ui/lecture/lecture-search/lecture-search-result/index.tsx
+++ b/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);
diff --git a/app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx b/app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx
deleted file mode 100644
index 3efdeaa6..00000000
--- a/app/ui/lecture/lecture-search/lecture-search-result/lecture-search-result-spinner.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import LoadingSpinner from '@/app/ui/view/atom/loading-spinner';
-
-export function LectureSearchResultSpinner() {
-  return (
-    <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>
-  );
-}