From 11bf8c75241d3088b8e8b3c9ae6aa5fb419764c4 Mon Sep 17 00:00:00 2001
From: Kuesung Park <gueit214@naver.com>
Date: Wed, 27 Sep 2023 09:37:02 +0900
Subject: [PATCH] =?UTF-8?q?refactor=20:=20=E3=85=87=E3=85=8F=EC=9D=B4?=
 =?UTF-8?q?=EC=BD=98=20=EA=B5=90=EC=B2=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(Sub)/detail/[id]/components/DetailHeader.tsx  |  4 ++--
 src/app/(Sub)/menu/components/MakerSection.tsx     | 14 ++++++++++----
 src/components/Selection/Tag.tsx                   |  4 ++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/app/(Sub)/detail/[id]/components/DetailHeader.tsx b/src/app/(Sub)/detail/[id]/components/DetailHeader.tsx
index 470236ce..b6a7a7e9 100644
--- a/src/app/(Sub)/detail/[id]/components/DetailHeader.tsx
+++ b/src/app/(Sub)/detail/[id]/components/DetailHeader.tsx
@@ -4,9 +4,9 @@ import { useRouter } from 'next/navigation';
 
 import IconButton from '@/components/Button/IconButton';
 import { Header } from '@/components/Header';
+import { Icon } from '@/components/Icon';
 import { PreparingModal } from '@/components/Modal';
 import { useOverlay } from '@/components/Overlay/useOverlay';
-import { ICON } from '@/constants/icon';
 
 export default function DetailHeader() {
   const { open } = useOverlay();
@@ -30,7 +30,7 @@ export default function DetailHeader() {
           size="large"
           onClick={() => open(({ exit }) => <PreparingModal onClose={exit} />)}
         >
-          <Image src={ICON.bookmark.black} width={24} height={24} alt="bookmark" />
+          <Icon id="bookmark" />
         </IconButton>
       }
       className="px-4"
diff --git a/src/app/(Sub)/menu/components/MakerSection.tsx b/src/app/(Sub)/menu/components/MakerSection.tsx
index 9d575182..cc70fae3 100644
--- a/src/app/(Sub)/menu/components/MakerSection.tsx
+++ b/src/app/(Sub)/menu/components/MakerSection.tsx
@@ -9,14 +9,20 @@ export default function MakerSection() {
   return (
     <BottomFixedDiv>
       <div className="flex justify-center">
-        <Image alt="instagram" src="/icons/instagram.svg" width={48} height={48} />
+        <Icon
+          id="instagram"
+          width={48}
+          height={48}
+          onClick={() => window.open('https://www.instagram.com/posepicker')}
+          className="cursor-pointer"
+        />
         <Spacing size={16} direction="horizontal" />
-        <Image
-          alt="github"
-          src="/icons/github.svg"
+        <Icon
+          id="github"
           width={48}
           height={48}
           onClick={() => window.open('https://github.com/dnd-side-project/dnd-9th-5-frontend')}
+          className="cursor-pointer"
         />
       </div>
       <Spacing size={8} />
diff --git a/src/components/Selection/Tag.tsx b/src/components/Selection/Tag.tsx
index 3d963c27..4323d8a5 100644
--- a/src/components/Selection/Tag.tsx
+++ b/src/components/Selection/Tag.tsx
@@ -9,7 +9,7 @@ interface Tag {
 export default function Tag({ selected, onClick, text }: Tag) {
   return (
     <div
-      className={`flex min-w-fit cursor-pointer gap-6 rounded-30 px-12 py-5 ${
+      className={`flex min-w-fit cursor-pointer items-center gap-6 rounded-30 px-12 py-5 ${
         selected ? 'bg-main-violet-bright' : 'bg-sub-white'
       }`}
       onClick={onClick}
@@ -17,7 +17,7 @@ export default function Tag({ selected, onClick, text }: Tag) {
       <div id="subtitle-2" className={selected ? 'text-main-violet-dark' : 'text-secondary'}>
         {text}
       </div>
-      {selected && <Icon id="close_gray" />}
+      {selected && <Icon id="close_gray" width={12} height={12} />}
     </div>
   );
 }