feat: skeleton 컴포넌트 추가

hufscheer · Nov 28, 2023 · faa13e0 · faa13e0
1 parent 389a25d
commit faa13e0
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 3 deletions.
diff --git a/src/app/match/[id]/page.tsx b/src/app/match/[id]/page.tsx
@@ -58,7 +58,7 @@ export default function Match({ params }: { params: { id: string } }) {
     <section>
       <AsyncBoundary
         errorFallback={props => <MatchBanner.ErrorFallback {...props} />}
-        loadingFallback={<div>배너 로딩중...</div>}
+        loadingFallback={<MatchBanner.Skeleton />}
       >
         <MatchByIdFetcher matchId={params.id}>
           {data => <MatchBanner {...data} />}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -23,7 +23,7 @@ export default function Home() {
     <section className="flex flex-col items-center">
       <AsyncBoundary
         errorFallback={() => <div>에러</div>}
-        loadingFallback={<div>로딩 중</div>}
+        loadingFallback={<SportsList.Skeleton />}
       >
         <SportsListFetcher leagueId={params.get(QUERY_PARAMS.league) || '1'}>
           {data => (
@@ -71,7 +71,7 @@ export default function Home() {
 
       <AsyncBoundary
         errorFallback={props => <MatchList.ErrorFallback {...props} />}
-        loadingFallback={<div>로딩 중</div>}
+        loadingFallback={<MatchList.Skeleton />}
       >
         <MatchListFetcher {...paramsObj}>
           {({ matchList, ...props }) => (

diff --git a/src/components/league/SportsList/index.tsx b/src/components/league/SportsList/index.tsx
@@ -36,3 +36,14 @@ export default function SportsList({
     </ul>
   );
 }
+
+SportsList.Skeleton = function Skeleton() {
+  return (
+    <ul className="mb-5 flex h-[40px] w-full max-w-md items-center justify-start gap-5 overflow-hidden">
+      <li className="text-gary-5 h-[40px] w-[70px] animate-pulse cursor-pointer rounded-xl bg-gray-2"></li>
+      <li className="text-gary-5 h-[40px] w-[70px] animate-pulse cursor-pointer rounded-xl bg-gray-2"></li>
+      <li className="text-gary-5 h-[40px] w-[70px] animate-pulse cursor-pointer rounded-xl bg-gray-2"></li>
+      <li className="text-gary-5 h-[40px] w-[70px] animate-pulse cursor-pointer rounded-xl bg-gray-2"></li>
+    </ul>
+  );
+};
diff --git a/src/components/match/Banner/index.tsx b/src/components/match/Banner/index.tsx
@@ -38,3 +38,25 @@ MatchBanner.ErrorFallback = function ErrorFallback({
     </div>
   );
 };
+
+MatchBanner.Skeleton = function Skeleton() {
+  return (
+    <MatchCard
+      className="flex flex-col"
+      gameTeams={[]}
+      startTime={''}
+      gameQuarter={''}
+      gameName={''}
+      sportsName={''}
+    >
+      <div className="flex h-full min-h-[200px] items-center justify-around rounded-xl bg-gray-1 shadow-lg">
+        <MatchCard.Background
+          viewBox="-3 120 100 50"
+          width={150}
+          height={200}
+          className="h-[200px]"
+        />
+      </div>
+    </MatchCard>
+  );
+};
diff --git a/src/components/match/MatchList/index.tsx b/src/components/match/MatchList/index.tsx
@@ -105,3 +105,46 @@ MatchList.ErrorFallback = function ErrorFallback({
     </div>
   );
 };
+
+MatchList.Skeleton = function Skeleton() {
+  return (
+    <>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+      <div className="mb-14 h-[200px] w-full">
+        <div className="mb-2 h-[30px] rounded-xl bg-gray-1 px-1 pb-1" />
+        <div className="flex h-[180px] items-center justify-around rounded-xl bg-gray-1 shadow-lg"></div>
+      </div>
+    </>
+  );
+};