아이콘 전반적인 디자인 수정

src/app/my-page/[communityId]/page.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import { checkIdCardServer } from '~/api/domain/community.api.server';
 import { MyPageIdCard } from '~/app/my-page/[communityId]/components/MyPageIdCard';
 import { BottomNavigation } from '~/components/BottomNavigation';
-import { GearFillIcon } from '~/components/Icon';
+import { ThreeDotsVerticalIcon } from '~/components/Icon';
 import { TopNavigation } from '~/components/TopNavigation';
 import { CreateIdCardButton } from '~/modules/CreateIdCardButton';
 import { PlanetCreationButton } from '~/modules/PlanetCreationButton';
@@ -29,7 +29,7 @@ const MyPage = async ({ params: { communityId } }: MyPageProps) => {
         </TopNavigation.Left>
         <TopNavigation.Right>
           <Link href={`/my-page/config?communityId=${communityId}`}>
-            <GearFillIcon />
+            <ThreeDotsVerticalIcon />
           </Link>
         </TopNavigation.Right>
       </TopNavigation>

src/app/my-page/empty/page.tsx

@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 import { BottomNavigation } from '~/components/BottomNavigation';
-import { GearFillIcon } from '~/components/Icon';
+import { ThreeDotsVerticalIcon } from '~/components/Icon';
 import { TopNavigation } from '~/components/TopNavigation';
 import { CreateIdCardButton } from '~/modules/CreateIdCardButton';
 import { PlanetCreationButton } from '~/modules/PlanetCreationButton';
@@ -13,7 +13,7 @@ const EmptyPlanet = () => {
         <TopNavigation.Left></TopNavigation.Left>
         <TopNavigation.Right>
           <Link href="/my-page/config">
-            <GearFillIcon />
+            <ThreeDotsVerticalIcon />
           </Link>
         </TopNavigation.Right>
       </TopNavigation>

src/app/planet/page.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { GearFillIcon } from '~/components/Icon';
+import { ThreeDotsVerticalIcon } from '~/components/Icon';
 import { TopNavigation } from '~/components/TopNavigation';
 import { PlanetEnterButton } from '~/modules/PlanetEnterButton';
 
@@ -13,7 +13,7 @@ const PlanetPage = () => {
         <TopNavigation.Title />
         <TopNavigation.Right>
           <Link href="/my-page/config">
-            <GearFillIcon className="fill-gray-700" />
+            <ThreeDotsVerticalIcon />
           </Link>
         </TopNavigation.Right>
       </TopNavigation>

src/components/Chip/Chip.tsx

@@ -54,10 +54,7 @@ export const Chip = ({
       type="button"
     >
       <span>{text}</span>
-      <ButtonIcon
-        onClick={handleClickIcon}
-        className={`${iconColors[colorType]} h-12pxr w-12pxr`}
-      />
+      <ButtonIcon onClick={handleClickIcon} className={`${iconColors[colorType]} stroke-white`} />
     </button>
   );
 };

src/components/Icon/CancelCircleIcon.tsx

@@ -0,0 +1,36 @@
+import { ComponentProps } from 'react';
+
+import { Svg } from '~/components/Svg';
+import { tw } from '~/utils/tailwind.util';
+
+export const CancelCircleIcon = ({
+  className,
+  size,
+  width,
+  height,
+  ...rest
+}: ComponentProps<typeof Svg>) => {
+  return (
+    <Svg
+      size={size}
+      width={width ?? 20}
+      height={height ?? 20}
+      className={tw('fill-black', className)}
+      {...rest}
+    >
+      <circle cx="10" cy="10" r="8" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.98163 5.9826C6.0355 5.92521 6.10056 5.87946 6.17279 5.84819C6.24503 5.81692 6.32291 5.80078 6.40163 5.80078C6.48034 5.80078 6.55822 5.81692 6.63046 5.84819C6.7027 5.87946 6.76776 5.92521 6.82163 5.9826L14.0216 13.1826C14.133 13.294 14.1956 13.4451 14.1956 13.6026C14.1956 13.7601 14.133 13.9112 14.0216 14.0226C13.9102 14.134 13.7592 14.1966 13.6016 14.1966C13.4441 14.1966 13.293 14.134 13.1816 14.0226L5.98163 6.8226C5.92423 6.76874 5.87848 6.70367 5.84721 6.63144C5.81594 6.5592 5.7998 6.48132 5.7998 6.4026C5.7998 6.32389 5.81594 6.24601 5.84721 6.17377C5.87848 6.10153 5.92423 6.03647 5.98163 5.9826Z"
+        fill="#FAFAFA"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M14.0235 5.9826C13.9697 5.92521 13.9046 5.87946 13.8324 5.84819C13.7601 5.81692 13.6823 5.80078 13.6035 5.80078C13.5248 5.80078 13.4469 5.81692 13.3747 5.84819C13.3025 5.87946 13.2374 5.92521 13.1835 5.9826L5.98354 13.1826C5.87215 13.294 5.80957 13.4451 5.80957 13.6026C5.80957 13.7601 5.87215 13.9112 5.98354 14.0226C6.09493 14.134 6.24601 14.1966 6.40354 14.1966C6.56107 14.1966 6.71215 14.134 6.82354 14.0226L14.0235 6.8226C14.0809 6.76874 14.1267 6.70367 14.158 6.63144C14.1892 6.5592 14.2054 6.48132 14.2054 6.4026C14.2054 6.32389 14.1892 6.24601 14.158 6.17377C14.1267 6.10153 14.0809 6.03647 14.0235 5.9826Z"
+        fill="#FAFAFA"
+      />
+    </Svg>
+  );
+};

src/components/Icon/CancelIcon.tsx

@@ -1,6 +1,7 @@
 import { ComponentProps } from 'react';
 
 import { Svg } from '~/components/Svg';
+import { tw } from '~/utils/tailwind.util';
 
 export const CancelIcon = ({
   className,
@@ -10,8 +11,36 @@ export const CancelIcon = ({
   ...rest
 }: ComponentProps<typeof Svg>) => {
   return (
-    <Svg size={size} width={width ?? 16} height={height ?? 16} className={className} {...rest}>
-      <path d="M16 1.4L14.6 0L8 6.6L1.4 0L0 1.4L6.6 8L0 14.6L1.4 16L8 9.4L14.6 16L16 14.6L9.4 8L16 1.4Z" />
+    <Svg
+      size={size}
+      width={width ?? 12}
+      height={height ?? 12}
+      className={tw('stroke-black', className)}
+      {...rest}
+    >
+      <path d="M2.25 2L9.75 10" strokeWidth="1.3" strokeLinecap="round" />
+      <path d="M9.75 2L2.25 10" strokeWidth="1.3" strokeLinecap="round" />
+    </Svg>
+  );
+};
+
+export const CancelBoldIcon = ({
+  className,
+  size,
+  width,
+  height,
+  ...rest
+}: ComponentProps<typeof Svg>) => {
+  return (
+    <Svg
+      size={size}
+      width={width ?? 24}
+      height={height ?? 24}
+      className={tw('stroke-black', className)}
+      {...rest}
+    >
+      <path d="M4.5 4L19.5 20" strokeWidth="1.7" strokeLinecap="round" />
+      <path d="M19.5 4L4.5 20" strokeWidth="1.7" strokeLinecap="round" />
     </Svg>
   );
 };

src/components/Icon/GearIcon.tsx

@@ -13,13 +13,17 @@ export const GearIcon = ({
   return (
     <Svg
       size={size}
-      width={width ?? 16}
-      height={height ?? 16}
-      className={tw('bi bi-gear', className)}
+      width={width ?? 24}
+      height={height ?? 24}
+      className={tw('fill-none stroke-grey-800', className)}
+      fill="none"
       {...rest}
     >
-      <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
-      <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
+      <path
+        d="M18.8465 12.8559L18.7786 13.322L19.1531 13.6075L21.1037 15.0946L19.3098 18.1106L16.9771 17.198L16.5622 17.0357L16.2057 17.303C15.7276 17.6615 15.2039 17.9594 14.6473 18.1892L14.226 18.3631L14.1607 18.8142L13.8157 21.2H10.1822L9.83927 18.8285L9.77365 18.3748L9.349 18.202C8.79344 17.976 8.27189 17.679 7.79804 17.3193L7.44068 17.048L7.02285 17.2115L4.68998 18.1242L2.89632 15.109L4.84688 13.6218L5.2198 13.3375L5.1539 12.8732C5.11279 12.5836 5.09099 12.2917 5.08864 11.9994C5.09051 11.7132 5.11217 11.4275 5.15347 11.1441L5.2214 10.6781L4.84688 10.3925L2.89631 8.90535L4.6902 5.88936L7.02285 6.80197L7.4378 6.96431L7.79428 6.69699C8.27238 6.33846 8.79608 6.04056 9.35274 5.81079L9.77404 5.63689L9.83927 5.18581L10.1843 2.8H13.8178L14.1607 5.17146L14.2264 5.62555L14.6515 5.79818C15.2078 6.02406 15.73 6.32102 16.2045 6.68089L16.5619 6.95197L16.9796 6.7884L19.3101 5.87586L21.1037 8.89144L19.1531 10.3786L18.7802 10.6629L18.8461 11.1272C18.8872 11.4167 18.909 11.7084 18.9114 12.0006C18.9095 12.2867 18.8878 12.5725 18.8465 12.8559ZM2.75674 14.8743C2.7572 14.8751 2.75766 14.8759 2.75811 14.8767L2.75674 14.8743ZM19.4315 5.52807L19.4317 5.52745L19.4315 5.52807Z"
+        strokeWidth="1.6"
+      />
+      <circle cx="12" cy="12" r="3.2" strokeWidth="1.6" />
     </Svg>
   );
 };

src/components/Icon/Icon.stories.tsx

@@ -5,11 +5,12 @@ import {
   ArrowVerticalIcon,
   BellIcon,
   CameraIcon,
+  CancelBoldIcon,
+  CancelCircleIcon,
   CancelIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   DashIcon,
-  GearFillIcon,
   GearIcon,
   HeartFillIcon,
   HeartIcon,
@@ -18,6 +19,7 @@ import {
   PlusIcon,
   QuestionCircleIcon,
   SendIcon,
+  ThreeDotsVerticalIcon,
 } from '~/components/Icon';
 
 const meta: Meta = {
@@ -44,10 +46,18 @@ export const ArrowLeft = {
   render: () => <ArrowLeftIcon />,
 };
 
+export const CancelCircle = {
+  render: () => <CancelCircleIcon />,
+};
+
 export const Cancel = {
   render: () => <CancelIcon />,
 };
 
+export const CancelBold = {
+  render: () => <CancelBoldIcon />,
+};
+
 export const ChevronLeft = {
   render: () => <ChevronLeftIcon />,
 };
@@ -68,10 +78,6 @@ export const Dash = {
   render: () => <DashIcon />,
 };
 
-export const GearFill = {
-  render: () => <GearFillIcon />,
-};
-
 export const Gear = {
   render: () => <GearIcon />,
 };
@@ -107,3 +113,7 @@ export const ArrowVertical = {
 export const Send = {
   render: () => <SendIcon />,
 };
+
+export const ThreeDotsVertical = {
+  render: () => <ThreeDotsVerticalIcon />,
+};

src/components/Icon/ThreeDotsVerticalIcon.tsx

@@ -0,0 +1,24 @@
+import { ComponentProps } from 'react';
+
+import { Svg } from '~/components/Svg';
+import { tw } from '~/utils/tailwind.util';
+
+export const ThreeDotsVerticalIcon = ({
+  className,
+  size,
+  width,
+  height,
+  ...rest
+}: ComponentProps<typeof Svg>) => {
+  return (
+    <Svg
+      className={tw('fill-grey-800', className)}
+      size={size}
+      width={width || 16}
+      height={height || 16}
+      {...rest}
+    >
+      <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
+    </Svg>
+  );
+};

src/components/Icon/index.tsx

@@ -2,11 +2,11 @@ export * from './ArrowLeftIcon';
 export * from './ArrowVerticalIcon';
 export * from './BellIcon';
 export * from './CameraIcon';
+export * from './CancelCircleIcon';
 export * from './CancelIcon';
 export * from './ChevronLeftIcon';
 export * from './ChevronRightIcon';
 export * from './DashIcon';
-export * from './GearFillIcon';
 export * from './GearIcon';
 export * from './HeartFillIcon';
 export * from './HeartIcon';
@@ -15,3 +15,4 @@ export * from './PersonIcon';
 export * from './PlusIcon';
 export * from './QuestionCircleIcon';
 export * from './SendIcon';
+export * from './ThreeDotsVerticalIcon';

src/components/TopNavigation/TopNavigationBackButton.tsx

@@ -2,11 +2,11 @@
 import { useRouter } from 'next/navigation';
 import { twMerge } from 'tailwind-merge';
 
-import { ArrowLeftIcon, CancelIcon, ChevronLeftIcon } from '~/components/Icon';
+import { ArrowLeftIcon, CancelBoldIcon, ChevronLeftIcon } from '~/components/Icon';
 
 const BackButton = {
   chevron: ChevronLeftIcon,
-  cancel: CancelIcon,
+  cancel: CancelBoldIcon,
   arrow: ArrowLeftIcon,
 };
 

src/modules/CommentInput/ReplyIndicator.client.tsx

@@ -18,9 +18,11 @@ export const ReplyIndicator = () => {
   return nickname ? (
     <>
       <Divider className="bg-grey-200" />
-      <div className="flex justify-between bg-grey-200 px-20pxr py-10pxr text-b3 text-grey-500">
+      <div className="flex items-center justify-between bg-grey-200 px-20pxr py-10pxr text-b3 text-grey-500">
         <span>{nickname}님에게 답글 남기는 중</span>
-        <CancelIcon className="p-3pxr" onClick={() => clear()} />
+        <button className="p-3pxr" onClick={() => clear()}>
+          <CancelIcon />
+        </button>
       </div>
     </>
   ) : (

src/modules/IdCardCreation/Step/KeywordContentImage.client.tsx

@@ -3,7 +3,7 @@
 import { useCallback } from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { CancelIcon } from '~/components/Icon';
+import { CancelCircleIcon } from '~/components/Icon';
 import { IdCardCreationFormModel } from '~/types/idCard';
 type KeywordContentImageProps = {
   index: number;
@@ -27,12 +27,7 @@ export const KeywordContentImage = ({ index }: KeywordContentImageProps) => {
         alt="image preview"
       />
       <div className="absolute right-[12px] top-[12px] flex h-[16px] w-[16px]  items-center justify-center rounded-full bg-grey-800">
-        <CancelIcon
-          size={8}
-          viewBox="0 0 16 16"
-          className="block fill-white"
-          onClick={onCancelClick}
-        />
+        <CancelCircleIcon className="fill-grey-800" onClick={onCancelClick} />
       </div>
     </div>
   ) : null;

src/modules/KeywordContentEditCard/KeywordContentEditCard.client.tsx

@@ -5,7 +5,7 @@ import { useFormContext } from 'react-hook-form';
 
 import { usePostImageUrl } from '~/api/domain/image.api';
 import { ConfirmDeleteKeyword, useConfirmPopup } from '~/components/ConfirmPopup';
-import { CancelIcon } from '~/components/Icon';
+import { CancelCircleIcon } from '~/components/Icon';
 import { KeywordContentImage } from '~/modules/IdCardCreation/Step/KeywordContentImage.client';
 import { KeywordContentCard } from '~/modules/IdCardDetail';
 import { FormKeywordModel } from '~/types/idCard';
@@ -89,14 +89,12 @@ export const KeywordContentEditCard = ({
             />
           }
         />
-        <div className="absolute right-[12px] top-[12px] flex h-[16px] w-[16px]  items-center justify-center rounded-full bg-grey-800">
-          <CancelIcon
-            size={8}
-            viewBox="0 0 16 16"
-            className="block fill-white"
-            onClick={onDeleteKeywordContent}
-          />
-        </div>
+        <button
+          className="rounded-ful absolute right-[12px] top-[12px] flex items-center justify-center"
+          onClick={onDeleteKeywordContent}
+        >
+          <CancelCircleIcon className="fill-grey-500" />
+        </button>
       </div>
       <div className="mt-[10px] flex justify-end">
         <label