refactor: 토픽 카드에 이미지 추가 및 blur 처리 구현 (#166)

woowacourse-teams · Aug 1, 2023 · 2a6e5b9 · 2a6e5b9
1 parent 836bc14
commit 2a6e5b9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git 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
@@ -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>

diff --git 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;