From f18e3732c1de4605077e160a387c6867a80f5f48 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Mon, 23 Dec 2024 00:31:11 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20children=20=EA=B0=95=EC=A0=9C?=
 =?UTF-8?q?=EC=84=B1=20=EC=A0=9C=EC=99=B8=EB=A5=BC=20=EC=9C=84=ED=95=B4=20?=
 =?UTF-8?q?React.FC=20=ED=83=80=EC=9E=85=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Button/CategoryButton.tsx |  6 ++----
 src/components/Button/FollowButton.tsx   |  6 +++---
 src/components/Button/SquareButtonL.tsx  |  6 ++----
 src/components/FilterDropdown/index.tsx  |  6 +++---
 src/components/Icon/Icon.tsx             |  9 ++-------
 src/components/Icon/icons/Close.tsx      |  9 ++++++---
 src/components/Icon/icons/Menu.tsx       |  7 ++++---
 src/components/Icon/iconsNames.ts        | 10 ++++++++--
 src/components/Pagination/index.tsx      |  6 ++----
 9 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/src/components/Button/CategoryButton.tsx b/src/components/Button/CategoryButton.tsx
index e3a14fb..927ae96 100644
--- a/src/components/Button/CategoryButton.tsx
+++ b/src/components/Button/CategoryButton.tsx
@@ -1,8 +1,6 @@
 import { CategoryButtonProps } from '@/types';
 
-import { FC } from 'react';
-
-const CategoryButton: FC<CategoryButtonProps> = ({
+const CategoryButton = ({
   backgroundColor = 'bg-gray-800',
   textColor = 'text-gray-300',
   textSize,
@@ -10,7 +8,7 @@ const CategoryButton: FC<CategoryButtonProps> = ({
 
   onClick,
   ariaLabel,
-}) => {
+}: CategoryButtonProps) => {
   return (
     <button
       onClick={onClick}
diff --git a/src/components/Button/FollowButton.tsx b/src/components/Button/FollowButton.tsx
index c93511a..45e2cdc 100644
--- a/src/components/Button/FollowButton.tsx
+++ b/src/components/Button/FollowButton.tsx
@@ -1,19 +1,19 @@
 'use client';
 
-import { FC, useState } from 'react';
+import { useState } from 'react';
 
 import { FollowButtonProps } from '@/types/buttons/FollowButtonProps';
 
 import Icon from '../Icon/Icon';
 
-const FollowButton: FC<FollowButtonProps> = ({
+const FollowButton = ({
   backgroundColor = 'bg-gray-900',
   textColor = 'text-white',
   textSize = 'button-s',
 
   onClick,
   ariaLabel,
-}) => {
+}: FollowButtonProps) => {
   const [isFollowing, setIsFollowing] = useState(false);
 
   const toggleFollow = () => {
diff --git a/src/components/Button/SquareButtonL.tsx b/src/components/Button/SquareButtonL.tsx
index 486d544..7474305 100644
--- a/src/components/Button/SquareButtonL.tsx
+++ b/src/components/Button/SquareButtonL.tsx
@@ -1,8 +1,6 @@
 import { SquareButtonLProps } from '@/types';
 
-import { FC } from 'react';
-
-const SquareButtonL: FC<SquareButtonLProps> = ({
+const SquareButtonL = ({
   backgroundColor = 'bg-gray-800',
   textColor = 'text-white',
   textSize,
@@ -15,7 +13,7 @@ const SquareButtonL: FC<SquareButtonLProps> = ({
   icon,
   iconPosition,
   type = 'button',
-}) => {
+}: SquareButtonLProps) => {
   return (
     <button
       type={type}
diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index 5af6bad..b3f98e3 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { FC, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import Icon from '../Icon/Icon';
 
@@ -10,11 +10,11 @@ interface FilterDropdownProps {
   onChange: (value: string) => void;
 }
 
-const FilterDropdown: FC<FilterDropdownProps> = ({
+const FilterDropdown = ({
   options,
   selected,
   onChange,
-}) => {
+}: FilterDropdownProps) => {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 2d07433..08beac9 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import { ComponentType, FC } from 'react';
+import { ComponentType } from 'react';
 
 import iconSizes, { IconSize } from './iconSizes';
 import { iconsNames } from './iconsNames';
@@ -10,12 +10,7 @@ interface IconProps {
   onClick?: () => void;
 }
 
-const Icon: FC<IconProps> = ({
-  name,
-  size = 'm',
-  className = '',
-  onClick,
-}: IconProps) => {
+const Icon = ({ name, size = 'm', className = '', onClick }: IconProps) => {
   const Component = iconsNames[name] as ComponentType<{
     className?: string;
     onClick?: () => void;
diff --git a/src/components/Icon/icons/Close.tsx b/src/components/Icon/icons/Close.tsx
index c5f8408..c92269c 100644
--- a/src/components/Icon/icons/Close.tsx
+++ b/src/components/Icon/icons/Close.tsx
@@ -1,9 +1,12 @@
-import { FC } from 'react';
+import { ReactNode } from 'react';
 
-const Close: FC<{ className?: string; onClick?: () => void }> = ({
+const Close = ({
   className,
   onClick,
-}) => {
+}: {
+  className?: string;
+  onClick?: () => void;
+}): ReactNode => {
   return (
     <svg
       className={className}
diff --git a/src/components/Icon/icons/Menu.tsx b/src/components/Icon/icons/Menu.tsx
index a3e3033..d438101 100644
--- a/src/components/Icon/icons/Menu.tsx
+++ b/src/components/Icon/icons/Menu.tsx
@@ -1,8 +1,9 @@
-import { FC } from 'react';
-
-const Menu: FC<{ className?: string; onClick?: () => void }> = ({
+const Menu = ({
   className,
   onClick,
+}: {
+  className?: string;
+  onClick?: () => void;
 }) => {
   return (
     <svg
diff --git a/src/components/Icon/iconsNames.ts b/src/components/Icon/iconsNames.ts
index e7635e5..78ce7f6 100644
--- a/src/components/Icon/iconsNames.ts
+++ b/src/components/Icon/iconsNames.ts
@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { ReactNode } from 'react';
 
 import AlertCircle from './icons/AlertCircle';
 import AlternateShare from './icons/AlternateShare';
@@ -39,7 +39,13 @@ import UploadShare from './icons/UploadShare';
 
 export const iconsNames: Record<
   string,
-  FC<{ className?: string; onClick?: () => void }>
+  ({
+    className,
+    onClick,
+  }: {
+    className?: string;
+    onClick?: () => void;
+  }) => ReactNode
 > = {
   AlertCircle,
   AlternateShare,
diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index cdc31b6..be1c934 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -1,5 +1,3 @@
-import { FC } from 'react';
-
 import Icon from '../Icon/Icon';
 
 interface PaginationProps {
@@ -8,11 +6,11 @@ interface PaginationProps {
   onPageChange: (page: number) => void;
 }
 
-const Pagination: FC<PaginationProps> = ({
+const Pagination = ({
   currentPage,
   totalPages,
   onPageChange,
-}) => {
+}: PaginationProps) => {
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages;