FIX :: Board 로딩 시 Skeleton 표시

Recipe-GPT · Jun 21, 2023 · 1a95b2a · 1a95b2a
1 parent 756b935
commit 1a95b2a
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 20 deletions.
diff --git a/components/Board/BoardItem/style.ts b/components/Board/BoardItem/style.ts
@@ -3,7 +3,7 @@ import styled from "styled-components";
 
 export const BoardItem = styled.div`
   border-radius: 15px;
-  width: 260px;
+  width: 16.25rem;
   background-color: white;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
   cursor: pointer;

diff --git a/components/Board/BoardItemSkeleton/index.tsx b/components/Board/BoardItemSkeleton/index.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import * as S from "./style";
+
+function BoardItemSkeleton() {
+  return <S.BoardItemSkeleton></S.BoardItemSkeleton>;
+}
+
+export default BoardItemSkeleton;
diff --git a/components/Board/BoardItemSkeleton/style.ts b/components/Board/BoardItemSkeleton/style.ts
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const BoardItemSkeleton = styled.div`
+  border-radius: 15px;
+  width: 16.25rem;
+  height: 24.7656rem;
+  background-color: white;
+  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);
+  animation: ${({ theme }) => theme.animations.Skeleton} 1.5s ease-in-out infinite;
+`;
diff --git a/components/Board/BoardSection/index.tsx b/components/Board/BoardSection/index.tsx
@@ -6,10 +6,38 @@ import {
   getRecommendBoardQuery,
   getTrendingBoardQuery,
 } from "@/utils/apis/board";
+import { useRecoilState } from "recoil";
+import { isLoadingState } from "@/atoms/Etc/isLoading";
+import BoardItemSkeleton from "../BoardItemSkeleton";
 
 function BoardSection({ isYellow }: { isYellow?: true }) {
+  const [isLoading, setIsLoading] = useRecoilState(isLoadingState);
   const getTrendingFunc = getTrendingBoardQuery();
   const getRecommendFunc = getRecommendBoardQuery();
+  if (getRecommendFunc.isLoading || getTrendingFunc.isLoading) {
+    setIsLoading(true);
+    return (
+      <S.BoardSection isYellow={isYellow}>
+        <S.Title isYellow={isYellow}>
+          {isYellow ? (
+            <>
+              최근 떠오르는 레시피
+              <AiFillFire color="#FFFFFF" />
+            </>
+          ) : (
+            <span>
+              이런 <S.Emphasis>레시피</S.Emphasis> 어떠세요?
+            </span>
+          )}
+        </S.Title>
+        <S.BoardWrap>
+          {[...Array(4)].map((item) => {
+            return <BoardItemSkeleton />;
+          })}
+        </S.BoardWrap>
+      </S.BoardSection>
+    );
+  }
   if (getTrendingFunc.isSuccess && getRecommendFunc.isSuccess) {
     return (
       <S.BoardSection isYellow={isYellow}>
@@ -30,15 +58,19 @@ function BoardSection({ isYellow }: { isYellow?: true }) {
           getRecommendFunc.data?.list.length ? (
             isYellow ? (
               <>
-                {getTrendingFunc.data?.list.map((item: BoardType) => {
-                  return <BoardItem data={item} />;
-                })}
+                {getTrendingFunc.data?.list
+                  .slice(0, 4)
+                  .map((item: BoardType) => {
+                    return <BoardItem data={item} />;
+                  })}
               </>
             ) : (
               <>
-                {getRecommendFunc.data?.list.map((item: BoardType) => {
-                  return <BoardItem data={item} />;
-                })}
+                {getRecommendFunc.data?.list
+                  .slice(0, 4)
+                  .map((item: BoardType) => {
+                    return <BoardItem data={item} />;
+                  })}
               </>
             )
           ) : (
@@ -48,7 +80,7 @@ function BoardSection({ isYellow }: { isYellow?: true }) {
       </S.BoardSection>
     );
   }
-  return<></>;
+  return <></>;
 }
 
 export default BoardSection;
diff --git a/styles/theme.ts b/styles/theme.ts
@@ -1,4 +1,18 @@
 import { DefaultTheme, keyframes } from "styled-components";
+
+const color = {
+  lightYellow: "#FFE289",
+  serveYellow: "#FFF7DE",
+  mainGrey: "#41414B",
+  lightGrey: "#535360",
+  mainYellow: "#FFD760",
+  grey900: "#85858F",
+  grey800: "#AAAAB1",
+  grey700: "#DDDDDF",
+  grey600: "#EDEDED",
+  backgroundYellow: "#FFFCF4",
+};
+
 const FadeIn = keyframes`
 	from {
 		opacity: 0;
@@ -17,21 +31,23 @@ const FadeOut = keyframes`
   }
 `;
 
+const Skeleton = keyframes`
+from {
+  background-color: ${color.grey600};
+}
+50%{
+  background-color: ${color.grey700};
+}
+to {
+  background-color: ${color.grey600};
+}
+`;
+
 export const theme: DefaultTheme = {
-  color: {
-    lightYellow: "#FFE289",
-    serveYellow: "#FFF7DE",
-    mainGrey: "#41414B",
-    lightGrey: "#535360",
-    mainYellow: "#FFD760",
-    grey900: "#85858F",
-    grey800: "#AAAAB1",
-    grey700: "#DDDDDF",
-    grey600: "#EDEDED",
-    backgroundYellow: "#FFFCF4",
-  },
+  color,
   animations: {
     FadeIn,
     FadeOut,
+    Skeleton,
   },
 };