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 (
-
+
-
-
-
+
+
+
);