From 260bfcce4a36b4838cbe38d0ed67a32139093514 Mon Sep 17 00:00:00 2001
From: Seojin Kim <seojin.kim@voyagerx.com>
Date: Mon, 16 Jan 2023 03:43:46 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91hotfix:=20=ED=82=A4=EC=9B=8C?=
 =?UTF-8?q?=EB=93=9C=20X=EB=B2=84=ED=8A=BC=20=EC=83=89=EC=83=81=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/Keyword/Item/index.tsx  |  8 +++----
 .../components/common/Keyword/Item/style.ts   | 22 +++++++++++++++----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/presentation/components/common/Keyword/Item/index.tsx b/src/presentation/components/common/Keyword/Item/index.tsx
index cf8f9aac..cd47c6d1 100644
--- 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
index 31fb8279..51723f8d 100644
--- 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`