feat: 커뮤니티에 Skeleton 적용

sopt-makers · Sep 24, 2024 · 78e6a2e · 78e6a2e
1 parent 121ce39
commit 78e6a2e
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 9 deletions.
diff --git a/src/components/feed/list/FeedListItems.tsx b/src/components/feed/list/FeedListItems.tsx
@@ -24,6 +24,7 @@ import { useShareFeed } from '@/components/feed/common/hooks/useShareFeed';
 import { useToggleLike } from '@/components/feed/common/hooks/useToggleLike';
 import { CategoryList, getMemberInfo } from '@/components/feed/common/utils';
 import FeedCard from '@/components/feed/list/FeedCard';
+import FeedSkeleton from '@/components/feed/list/FeedSkeleton';
 import { useNavigateBack } from '@/components/navigation/useNavigateBack';
 import { textStyles } from '@/styles/typography';
 
@@ -96,6 +97,8 @@ const FeedListItems: FC<FeedListItemsProps> = ({ categoryId, renderFeedDetailLin
     }
   });
 
+  if (!isLoading) return <FeedSkeleton />;
+
   return (
     <>
       <Virtuoso
@@ -255,7 +258,7 @@ const FeedListItems: FC<FeedListItemsProps> = ({ categoryId, renderFeedDetailLin
       <div css={{ display: 'flex', justifyContent: 'center', padding: '30px 0' }}>
         {isError ? <AlertText>오류가 발생했어요.</AlertText> : null}
         {data != null && flattenData.length === 0 ? <AlertText>아직 작성된 글이 없어요(ㅠ_ㅠ)</AlertText> : null}
-        {isLoading ? <Loading /> : null}
+        {isLoading ? <div>hi</div> : null}
       </div>
     </>
   );

diff --git a/src/components/feed/list/FeedSkeleton.tsx b/src/components/feed/list/FeedSkeleton.tsx
@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+import Skeleton from '@/components/common/Skeleton';
+import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
+
+const FeedSkeleton = () => {
+  return (
+    <>
+      {[1, 2, 3, 4].map((key) => (
+        <FeedSkeletonWrapper key={key}>
+          <SkeletonResponsive1 width={32} height={32} borderRadius={16} color={colors.gray700} />
+          <RightWrapper>
+            <Skeleton width={184} height={16} borderRadius={8} color={colors.gray700} margin='0 0 24px 0' />
+            <Skeleton height={20} borderRadius={8} color={colors.gray700} margin='0 0 8px 0' />
+            <SkeletonResponsive2 width={307} height={20} borderRadius={8} color={colors.gray700} margin='0 0 28px 0' />
+            <BottomWrapper>
+              <Skeleton width={74} height={20} borderRadius={8} color={colors.gray700} margin='0 0 28px 0' />
+              <Skeleton width={48} height={20} borderRadius={8} color={colors.gray700} margin='0 0 28px 0' />
+            </BottomWrapper>
+          </RightWrapper>
+        </FeedSkeletonWrapper>
+      ))}
+    </>
+  );
+};
+
+export default FeedSkeleton;
+
+const FeedSkeletonWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+
+  @media ${MOBILE_MEDIA_QUERY} {
+    gap: 12px;
+    justify-content: flex-start;
+  }
+`;
+const RightWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 8px;
+  margin-right: 24px;
+  width: 100%;
+  max-width: 460px;
+`;
+const BottomWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const SkeletonResponsive1 = styled(Skeleton)`
+  @media ${MOBILE_MEDIA_QUERY} {
+    flex-shrink: 0;
+  }
+`;
+
+const SkeletonResponsive2 = styled(Skeleton)`
+  @media ${MOBILE_MEDIA_QUERY} {
+    width: 184px;
+  }
+`;
diff --git a/src/components/wordchain/WordchainEntry/WordchainSkeleton.tsx b/src/components/wordchain/WordchainEntry/WordchainSkeleton.tsx
@@ -7,12 +7,12 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 const WordchainSkeleton = () => {
   return (
     <SkeletonWrapper borderRadius={14} height={60}>
-      <Skeleton1 width={28} height={28} borderRadius={8} color={colors.gray700} margin='0 8px 0 0' />
+      <SkeletonResponsive1 width={28} height={28} borderRadius={8} color={colors.gray700} margin='0 8px 0 0' />
       <MiddleWrapper>
-        <Skeleton2 width={47} height={20} borderRadius={8} color={colors.gray700} margin='0 16px 0 0' />
-        <Skeleton3 width={286} height={20} borderRadius={8} color={colors.gray700} />
+        <SkeletonResponsive2 width={47} height={20} borderRadius={8} color={colors.gray700} margin='0 16px 0 0' />
+        <SkeletonResponsive3 width={286} height={20} borderRadius={8} color={colors.gray700} />
       </MiddleWrapper>
-      <Skeleton4 width={28} height={28} borderRadius={8} color={colors.gray700} margin='0 0 0 115px' />
+      <SkeletonResponsive4 width={28} height={28} borderRadius={8} color={colors.gray700} margin='0 0 0 115px' />
     </SkeletonWrapper>
   );
 };
@@ -39,28 +39,28 @@ const MiddleWrapper = styled.div`
   }
 `;
 
-const Skeleton1 = styled(Skeleton)`
+const SkeletonResponsive1 = styled(Skeleton)`
   @media ${MOBILE_MEDIA_QUERY} {
     width: 80px;
   }
 `;
 
-const Skeleton2 = styled(Skeleton)`
+const SkeletonResponsive2 = styled(Skeleton)`
   @media ${MOBILE_MEDIA_QUERY} {
     margin-left: 16px;
     width: 193px;
     height: 16px;
   }
 `;
-const Skeleton3 = styled(Skeleton)`
+const SkeletonResponsive3 = styled(Skeleton)`
   @media ${MOBILE_MEDIA_QUERY} {
     margin-left: 16px;
     width: 150px;
     height: 16px;
   }
 `;
 
-const Skeleton4 = styled(Skeleton)`
+const SkeletonResponsive4 = styled(Skeleton)`
   @media ${MOBILE_MEDIA_QUERY} {
     display: none;
   }