♻️ refactor: iconButton 코드 수정으로 인한 마이그레이션 #15

dnd-side-project · Aug 7, 2024 · 6662f40 · 6662f40
1 parent 20c564f
commit 6662f40
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 34 deletions.
diff --git a/src/components/core/Button/FloatingButton/FloatingButton.tsx b/src/components/core/Button/FloatingButton/FloatingButton.tsx
@@ -1,10 +1,9 @@
 import { ButtonHTMLAttributes, FC } from "react";
 
+import { IconButton } from "@/components/core/Button";
 import { PencilIcon } from "@/components/icons";
 import { cn } from "@/utils/cn";
 
-import IconButton from "../IconButton/IconButton";
-
 export interface Props
   extends Omit<
     ButtonHTMLAttributes<HTMLButtonElement>,
@@ -16,14 +15,15 @@ export interface Props
 const BasicButton: FC<Props> = ({ className, ...props }) => {
   return (
     <IconButton
-      icon={<PencilIcon width={32} height={32} className="text-gray-scale-0" />}
       className={cn(
         "w-auto h-auto p-[8px] rounded-full bg-primary-01",
 
         className,
       )}
       {...props}
-    />
+    >
+      <PencilIcon width={32} height={32} className="text-gray-scale-0" />
+    </IconButton>
   );
 };
 

diff --git a/src/components/core/Button/IconButton/IconButton.stories.tsx b/src/components/core/Button/IconButton/IconButton.stories.tsx
@@ -26,22 +26,24 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   render: (args) => (
     <div className="w-[360px]">
-      <IconButton {...args} />
+      <IconButton {...args}>
+        <CameraIcon width={50} height={50} />
+      </IconButton>
     </div>
   ),
   args: {
     active: false,
-    icon: <CameraIcon width={50} height={50} />,
   },
 };
 export const Active: Story = {
   render: (args) => (
     <div className="w-[360px]">
-      <IconButton {...args} />
+      <IconButton {...args}>
+        <CameraIcon width={50} height={50} />
+      </IconButton>
     </div>
   ),
   args: {
     active: true,
-    icon: <CameraIcon width={50} height={50} />,
   },
 };
diff --git a/src/components/core/Button/IconButton/IconButton.tsx b/src/components/core/Button/IconButton/IconButton.tsx
@@ -2,13 +2,11 @@ import { ButtonHTMLAttributes, FC } from "react";
 
 import { cn } from "@/utils/cn";
 
-export interface Props
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   active?: boolean;
-  icon: React.ReactNode;
 }
 
-const IconButton: FC<Props> = ({ icon, active = false, ...props }) => {
+const IconButton: FC<Props> = ({ active = false, ...props }) => {
   return (
     <button
       type="button"
@@ -20,7 +18,7 @@ const IconButton: FC<Props> = ({ icon, active = false, ...props }) => {
       )}
       {...props}
     >
-      {icon}
+      {props.children}
     </button>
   );
 };

diff --git a/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.tsx b/src/components/core/Card/TrendFestivalCard/TrendFestivalCard.tsx
@@ -50,16 +50,15 @@ const TrendFestivalCard: FC<Props> = ({
             type="button"
             className="absolute right-[14px] top-[12px] flex size-[22px] items-center justify-center rounded-full bg-gray-scale-700"
             onClick={onScrab}
-            icon={
-              <ScrabIcon
-                width={14}
-                height={14}
-                className={cn(
-                  isScrabed ? "text-primary-01" : "text-gray-scale-0",
-                )}
-              />
-            }
-          />
+          >
+            <ScrabIcon
+              width={14}
+              height={14}
+              className={cn(
+                isScrabed ? "text-primary-01" : "text-gray-scale-0",
+              )}
+            />
+          </IconButton>
         )}
       </div>
 

diff --git a/src/components/core/List/FestivalTile/FestivalTile.stories.tsx b/src/components/core/List/FestivalTile/FestivalTile.stories.tsx
@@ -48,7 +48,11 @@ export const HomeFestivalTile: Story = {
 export const UnScrabedFestivalTile: Story = {
   render: (args) => (
     <div className="w-[400px]">
-      <FestivalTile {...args} />
+      <FestivalTile {...args}>
+        <IconButton active={false}>
+          <ScrabIcon width={24} height={24} />
+        </IconButton>
+      </FestivalTile>
     </div>
   ),
   args: {
@@ -59,16 +63,17 @@ export const UnScrabedFestivalTile: Story = {
       duration: "8월 1일 ~ 8월 4일",
       dday: "D-2",
     },
-    icon: (
-      <IconButton active={false} icon={<ScrabIcon width={24} height={24} />} />
-    ),
   },
 };
 
 export const ScrabedFestivalTile: Story = {
   render: (args) => (
     <div className="w-[400px]">
-      <FestivalTile {...args} />
+      <FestivalTile {...args}>
+        <IconButton active={true}>
+          <ScrabIcon width={24} height={24} />
+        </IconButton>
+      </FestivalTile>
     </div>
   ),
   args: {
@@ -79,8 +84,5 @@ export const ScrabedFestivalTile: Story = {
       duration: "8월 1일 ~ 8월 4일",
       dday: "D-2",
     },
-    icon: (
-      <IconButton active={true} icon={<ScrabIcon width={24} height={24} />} />
-    ),
   },
 };
diff --git a/src/components/core/List/FestivalTile/FestivalTile.tsx b/src/components/core/List/FestivalTile/FestivalTile.tsx
@@ -11,8 +11,7 @@ interface Festival {
   dday: string;
 }
 
-export interface Props
-  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   festival: Festival;
   icon: React.ReactNode;
 }
@@ -45,7 +44,7 @@ const FestivalTile: FC<Props> = ({ festival, icon, ...props }) => {
             {festival.duration}
           </span>
         </div>
-        {icon}
+        {props.children}
       </div>
     </button>
   );