Revert "refactor: 토픽 카드에 이미지 적용 및 blur처리 (#148)"

This reverts commit a22bf36.
woowacourse-teams · Aug 1, 2023 · bcfee83 · bcfee83
1 parent eadeac7
commit bcfee83
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 15 deletions.
diff --git a/frontend/src/components/TopicCard/index.tsx b/frontend/src/components/TopicCard/index.tsx
@@ -51,9 +51,8 @@ const TopicCard = ({
         $flexDirection="column"
         $alignItems="center"
         $justifyContent="center"
+        $backgroundColor="whiteGray"
         $borderRadius="small"
-        $backgroundImage={topicImage}
-        $backgroundSize="360px 140px"
       >
         <MultiSelectButton
           type="checkbox"
@@ -63,15 +62,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>
@@ -100,4 +99,4 @@ const MultiSelectButton = styled.input`
   }
 `;
 
-export default TopicCard;
+export default TopicCard;
diff --git a/frontend/src/components/common/Box/index.ts b/frontend/src/components/common/Box/index.ts
@@ -7,7 +7,6 @@ import { radiusKey } from '../../../themes/radius';
 export type BoxProps = {
   display?: string;
   width?: string;
-  $minWidth?: string;
   height?: string;
   padding?: SpaceThemeKeys;
   $backgroundColor?: colorThemeKey;
@@ -26,14 +25,10 @@ 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]};
@@ -55,8 +50,5 @@ 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;