Merge pull request #436 from Neogasogaeseo/hotfix/#434

Neogasogaeseo · Jan 15, 2023 · e1753ce · e1753ce
2 parents 002de45 + 260bfcc
commit e1753ce
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 8 deletions.
diff --git a/src/presentation/components/common/Keyword/Item/index.tsx b/src/presentation/components/common/Keyword/Item/index.tsx
@@ -1,7 +1,6 @@
 import { Keyword } from '@api/types/user';
-import { icCloseGrey, icCloseWhite } from '@assets/icons';
 import { COLOR } from '@styles/common/color';
-import { StKeywordItem, StCount, StMyDeleteBtn } from './style';
+import { StCount, StKeywordCloseBtn, StKeywordItem, StMyDeleteBtn } from './style';
 
 interface Props extends Keyword {
   isMutable: boolean;
@@ -28,9 +27,10 @@ function KeywordItem(props: Props) {
       <div>
         <div>{content}</div>
         {isMutable && !isMine && (
-          <img
+          <StKeywordCloseBtn
             onClick={onDeleteClick}
-            src={viewMode === 'linear' || color === COLOR.GRAY_2 ? icCloseGrey : icCloseWhite}
+            theme={viewMode === 'linear' || color === COLOR.GRAY_2 ? 'grey' : 'color'}
+            color={fontColor}
           />
         )}
       </div>

diff --git a/src/presentation/components/common/Keyword/Item/style.ts b/src/presentation/components/common/Keyword/Item/style.ts
@@ -1,5 +1,6 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
+import { icCloseWhite } from '@assets/icons';
 import { COLOR } from '@styles/common/color';
 import { FONT_STYLES } from '@styles/common/font-style';
 
@@ -20,9 +21,22 @@ export const StKeywordItem = styled.div<{ color: string; fontColor: string }>`
     gap: 8px;
     ${FONT_STYLES.R_13_TITLE}
   }
-  img {
-    cursor: pointer;
-  }
+`;
+
+export const StKeywordCloseBtn = styled.div<{ color: string; theme: 'grey' | 'color' }>`
+  cursor: pointer;
+  mask-image: url(${icCloseWhite});
+  width: 13px;
+  height: 13px;
+  ${({ color, theme }) =>
+    theme === 'grey'
+      ? css`
+          background-color: ${COLOR.GRAY_6};
+        `
+      : css`
+          background-color: ${color};
+          opacity: 0.6;
+        `}
 `;
 
 export const StCount = styled.span`