From 96faad523db5999679feaadcaf5d4471f55af22c Mon Sep 17 00:00:00 2001
From: Patrick <kuyt3122@naver.com>
Date: Tue, 1 Aug 2023 21:48:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=86=A0=ED=94=BD=20=EC=B9=B4=EB=93=9C?=
 =?UTF-8?q?=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F?=
 =?UTF-8?q?=20blur=EC=B2=98=EB=A6=AC=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                       |  2 +-
 frontend/src/components/TopicCard/index.tsx | 11 ++++++-----
 frontend/src/components/common/Box/index.ts | 10 +++++++++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index cb6be952..5afaadc1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -51,7 +51,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "eslint-plugin-storybook": "^0.6.12",
     "html-webpack-plugin": "^5.5.3",
-    "msw": "1.2.1",
+    "msw": "^1.2.2",
     "prettier": "^3.0.0",
     "process": "^0.11.10",
     "react-refresh": "^0.14.0",
diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx
index b64bf58f..29f37bcd 100644
--- a/frontend/src/components/TopicCard/index.tsx
+++ b/frontend/src/components/TopicCard/index.tsx
@@ -51,8 +51,9 @@ const TopicCard = ({
         $flexDirection="column"
         $alignItems="center"
         $justifyContent="center"
-        $backgroundColor="whiteGray"
         $borderRadius="small"
+        $backgroundImage={topicImage}
+        $backgroundSize="360px 140px"
       >
         <MultiSelectButton
           type="checkbox"
@@ -62,15 +63,15 @@ const TopicCard = ({
           checked={Boolean(tagId.includes(topicId))}
         />
         <Flex
+          width="100%"
+          height="65px"
           $flexDirection="column"
           $alignItems="center"
           $justifyContent="center"
           cursor="pointer"
           onClick={goToSelectedTopic}
+          $backdropFilter="blur(20px)"
         >
-          <Text color="black" $fontSize="extraLarge" $fontWeight="normal">
-            {topicImage}
-          </Text>
           <Text color="black" $fontSize="medium" $fontWeight="normal">
             {topicTitle}
           </Text>
@@ -99,4 +100,4 @@ const MultiSelectButton = styled.input`
   }
 `;
 
-export default TopicCard;
+export default TopicCard;
\ No newline at end of file
diff --git a/frontend/src/components/common/Box/index.ts b/frontend/src/components/common/Box/index.ts
index f3e11b63..9d9938b2 100644
--- a/frontend/src/components/common/Box/index.ts
+++ b/frontend/src/components/common/Box/index.ts
@@ -7,6 +7,7 @@ import { radiusKey } from '../../../themes/radius';
 export type BoxProps = {
   display?: string;
   width?: string;
+  $minWidth?: string;
   height?: string;
   padding?: SpaceThemeKeys;
   $backgroundColor?: colorThemeKey;
@@ -25,10 +26,14 @@ export type BoxProps = {
   $borderBottom?: string;
   $borderLeft?: string;
   cursor?: string;
+  $backgroundImage?: string;
+  $backgroundSize?: string;
+  $backdropFilter?: string;
 };
 
 const Box = styled.div<BoxProps>`
   display: ${({ display }) => display ?? 'block'};
+  min-width: ${({ $minWidth }) => $minWidth };
   background-color: ${({ $backgroundColor }) =>
     $backgroundColor && theme.color[$backgroundColor]};
   color: ${({ color }) => color && theme.color[color]};
@@ -50,5 +55,8 @@ const Box = styled.div<BoxProps>`
   border-bottom: ${({ $borderBottom }) => $borderBottom};
   border-left: ${({ $borderLeft }) => $borderLeft};
   cursor: ${({ cursor }) => cursor};
+  background-image: url(${({ $backgroundImage }) => $backgroundImage})  ;
+  background-size: ${({ $backgroundSize }) => $backgroundSize};
+  backdrop-filter: ${({ $backdropFilter }) => $backdropFilter};
 `;
-export default Box;
+export default Box;
\ No newline at end of file