refactor: children 강제성 제외를 위해 React.FC 타입 제거

JECT-Study · Dec 22, 2024 · f18e373 · f18e373
1 parent 0ea5c0b
commit f18e373
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 33 deletions.
diff --git a/src/components/Button/CategoryButton.tsx b/src/components/Button/CategoryButton.tsx
@@ -1,16 +1,14 @@
 import { CategoryButtonProps } from '@/types';
 
-import { FC } from 'react';
-
-const CategoryButton: FC<CategoryButtonProps> = ({
+const CategoryButton = ({
   backgroundColor = 'bg-gray-800',
   textColor = 'text-gray-300',
   textSize,
   children,
 
   onClick,
   ariaLabel,
-}) => {
+}: CategoryButtonProps) => {
   return (
     <button
       onClick={onClick}

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;