From 0ea233ead86b04ec884826885fe1b88adabb44a3 Mon Sep 17 00:00:00 2001 From: Jeremy <102432453+shackstack@users.noreply.github.com> Date: Tue, 31 Oct 2023 20:32:08 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20MiniRestaurantCard=20=EC=8A=A4=EC=BC=88?= =?UTF-8?q?=EB=A0=88=ED=86=A4=20border-radius=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/@common/Skeleton/Skeleton.tsx | 13 ++++++++++--- .../MiniRestaurantCardSkeleton.tsx | 9 +++++---- 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/@common/Skeleton/Skeleton.tsx b/frontend/src/components/@common/Skeleton/Skeleton.tsx index 18b6d8421..7ccef8efd 100644 --- 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 ; +function Skeleton({ width, height, borderRadius }: SkeletonProps) { + return ; } 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/frontend/src/components/MiniRestaurantCard/MiniRestaurantCardSkeleton/MiniRestaurantCardSkeleton.tsx b/frontend/src/components/MiniRestaurantCard/MiniRestaurantCardSkeleton/MiniRestaurantCardSkeleton.tsx index ed242086f..170b4cecb 100644 --- a/frontend/src/components/MiniRestaurantCard/MiniRestaurantCardSkeleton/MiniRestaurantCardSkeleton.tsx +++ b/frontend/src/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 ( - + - - - + + + );