fix: MiniRestaurantCard 스켈레톤 border-radius 수정

woowacourse-teams · Oct 31, 2023 · 0ea233e · 0ea233e
1 parent 5312ba6
commit 0ea233e
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/frontend/src/components/@common/Skeleton/Skeleton.tsx b/frontend/src/components/@common/Skeleton/Skeleton.tsx
@@ -4,19 +4,26 @@ import { paintSkeleton } from '~/styles/common';
 interface SkeletonProps {
   width: string;
   height: string;
+  borderRadius?: string;
 }
 
-function Skeleton({ width, height }: SkeletonProps) {
-  return <StyledSkeleton width={width} height={height} />;
+function Skeleton({ width, height, borderRadius }: SkeletonProps) {
+  return <StyledSkeleton width={width} height={height} borderRadius={borderRadius} />;
 }
 
 export default Skeleton;
 
-const StyledSkeleton = styled.div<{ width: string; height: string }>`
+const StyledSkeleton = styled.div<{ width: string; height: string; borderRadius: string }>`
   ${paintSkeleton}
 
   ${({ width, height }) => css`
     width: ${width};
     height: ${height};
   `}
+
+  ${({ borderRadius }) =>
+    borderRadius &&
+    css`
+      border-radius: ${borderRadius};
+    `}
 `;
diff --git a/...c/components/MiniRestaurantCard/MiniRestaurantCardSkeleton/MiniRestaurantCardSkeleton.tsx b/...c/components/MiniRestaurantCard/MiniRestaurantCardSkeleton/MiniRestaurantCardSkeleton.tsx
@@ -1,5 +1,6 @@
 import { css, styled } from 'styled-components';
 import Skeleton from '~/components/@common/Skeleton';
+import { BORDER_RADIUS } from '~/styles/common';
 
 interface MiniRestaurantCardProps {
   flexColumn?: boolean;
@@ -9,11 +10,11 @@ interface MiniRestaurantCardProps {
 function MiniRestaurantCardSkeleton({ flexColumn, isCarouselItem }: MiniRestaurantCardProps) {
   return (
     <StyledContainer flexColumn={flexColumn} isCarouselItem={isCarouselItem}>
-      <Skeleton width="198px" height="188px" />
+      <Skeleton width="198px" height="188px" borderRadius={BORDER_RADIUS.xs} />
       <StyledDetail>
-        <Skeleton width="198px" height="20px" />
-        <Skeleton width="198px" height="12px" />
-        <Skeleton width="198px" height="20px" />
+        <Skeleton width="198px" height="20px" borderRadius={BORDER_RADIUS.xs} />
+        <Skeleton width="198px" height="12px" borderRadius={BORDER_RADIUS.xs} />
+        <Skeleton width="198px" height="20px" borderRadius={BORDER_RADIUS.xs} />
       </StyledDetail>
     </StyledContainer>
   );