From 3ddb2e2ab21e20da68f059da73b4abb7f31e3263 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 20 Dec 2024 02:37:01 +0900
Subject: [PATCH 01/12] =?UTF-8?q?style:=20=EC=B4=88=EA=B8=B0=20=ED=85=8C?=
 =?UTF-8?q?=EB=A7=88(dark)=EB=A5=BC=20=EB=AA=85=EC=8B=9C=EC=A0=81=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Layout/AppShell.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Layout/AppShell.tsx b/src/components/Layout/AppShell.tsx
index 958fb46..4691f41 100644
--- a/src/components/Layout/AppShell.tsx
+++ b/src/components/Layout/AppShell.tsx
@@ -14,6 +14,7 @@ const AppShell = ({ children }: { children: ReactNode }) => {
       <NextUIProvider>
         <NextThemesProvider
           attribute='class'
+          defaultTheme='dark'
           value={{
             dark: 'custom-dark',
           }}

From 0ff8c28ec6e6365f9753b5dfd010fb383c9368da Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 20 Dec 2024 19:14:22 +0900
Subject: [PATCH 02/12] =?UTF-8?q?style:=20Pagination=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/index.tsx | 89 +++++++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/components/Pagination/index.tsx

diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
new file mode 100644
index 0000000..3fc46b1
--- /dev/null
+++ b/src/components/Pagination/index.tsx
@@ -0,0 +1,89 @@
+import { FC } from 'react';
+
+import Icon from '../Icon/Icon';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+const Pagination: FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+}) => {
+  const isFirstPage = currentPage === 1;
+  const isLastPage = currentPage === totalPages;
+
+  return (
+    <div className='flex items-center justify-center gap-6'>
+      <div className='flex gap-1' id='first-previous-buttons'>
+        <button
+          onClick={() => onPageChange(1)}
+          disabled={isFirstPage}
+          aria-label='Go to first page'
+          className={`p-2 rounded ${
+            isFirstPage ? 'text-gray-600 cursor-not-allowed' : 'text-gray-300'
+          }`}
+        >
+          <Icon name='ChevronDoubleLeft' size='s' />
+        </button>
+
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={isFirstPage}
+          aria-label='Go to previous page'
+          className={`p-2 rounded ${
+            isFirstPage ? 'text-gray-600 cursor-not-allowed' : 'text-gray-300'
+          }`}
+        >
+          <Icon name='ChevronLeft' size='s' />
+        </button>
+      </div>
+
+      <div className='flex gap-1' id='number-buttons'>
+        {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+          <button
+            key={page}
+            onClick={() => onPageChange(page)}
+            aria-current={page === currentPage ? 'page' : undefined}
+            className={`p-3 w-[46] rounded-full transition-colors ${
+              page === currentPage
+                ? 'bg-main text-white'
+                : 'text-gray-600 hover:bg-gray-900'
+            }`}
+          >
+            {page}
+          </button>
+        ))}
+      </div>
+
+      <div className='flex gap-1' id='next-last-buttons'>
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={isLastPage}
+          aria-label='Go to next page'
+          className={`p-2 rounded ${
+            isLastPage ? 'text-gray-600 cursor-not-allowed' : 'text-gray-300'
+          }`}
+        >
+          <Icon name='ChevronRight' size='s' />
+        </button>
+
+        <button
+          onClick={() => onPageChange(totalPages)}
+          disabled={isLastPage}
+          aria-label='Go to last page'
+          className={`p-2 rounded ${
+            isLastPage ? 'text-gray-600 cursor-not-allowed' : 'text-gray-300'
+          }`}
+        >
+          <Icon name='ChevronDoubleRight' size='s' />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Pagination;

From 47c22540ec76f4db41556a8878664a9b3972b36b Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 20 Dec 2024 19:38:26 +0900
Subject: [PATCH 03/12] =?UTF-8?q?style:=20Pagination=EC=9D=98=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B2=94=EC=9C=84=20=EC=A0=9C=ED=95=9C=20?=
 =?UTF-8?q?(5=ED=8E=98=EC=9D=B4=EC=A7=80=EA=B9=8C=EC=A7=80=20=EB=B3=B4?=
 =?UTF-8?q?=EC=9D=B4=EA=B2=8C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/index.tsx | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index 3fc46b1..65def31 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -16,6 +16,23 @@ const Pagination: FC<PaginationProps> = ({
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages;
 
+  const pageRangeCalculation = (
+    currentPage: number,
+    totalPages: number,
+    maximumRange: number,
+  ): number[] => {
+    const start = Math.max(1, currentPage - Math.floor(maximumRange / 2));
+    const end = Math.min(totalPages, start + maximumRange - 1);
+    const adjustedStart = Math.max(1, end - maximumRange + 1);
+
+    return Array.from(
+      { length: end - adjustedStart + 1 },
+      (_, i) => adjustedStart + i,
+    );
+  };
+
+  const visiblePages = pageRangeCalculation(currentPage, totalPages, 5);
+
   return (
     <div className='flex items-center justify-center gap-6'>
       <div className='flex gap-1' id='first-previous-buttons'>
@@ -43,12 +60,12 @@ const Pagination: FC<PaginationProps> = ({
       </div>
 
       <div className='flex gap-1' id='number-buttons'>
-        {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+        {visiblePages.map((page) => (
           <button
             key={page}
             onClick={() => onPageChange(page)}
             aria-current={page === currentPage ? 'page' : undefined}
-            className={`p-3 w-[46] rounded-full transition-colors ${
+            className={`p-3 w-[46px] rounded-full transition-colors ${
               page === currentPage
                 ? 'bg-main text-white'
                 : 'text-gray-600 hover:bg-gray-900'

From 1053492548f8f06efbb975011e123bac417e2a30 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 20 Dec 2024 19:45:55 +0900
Subject: [PATCH 04/12] =?UTF-8?q?refactor:=20=EB=AA=85=ED=99=95=ED=95=9C?=
 =?UTF-8?q?=20=EB=B3=80=EC=88=98=EB=AA=85=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/index.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index 65def31..68c7cb1 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -16,22 +16,25 @@ const Pagination: FC<PaginationProps> = ({
   const isFirstPage = currentPage === 1;
   const isLastPage = currentPage === totalPages;
 
-  const pageRangeCalculation = (
+  const calculateVisiblePages = (
     currentPage: number,
     totalPages: number,
-    maximumRange: number,
+    maxVisiblePages: number,
   ): number[] => {
-    const start = Math.max(1, currentPage - Math.floor(maximumRange / 2));
-    const end = Math.min(totalPages, start + maximumRange - 1);
-    const adjustedStart = Math.max(1, end - maximumRange + 1);
+    const startPage = Math.max(
+      1,
+      currentPage - Math.floor(maxVisiblePages / 2),
+    );
+    const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+    const adjustedStartPage = Math.max(1, endPage - maxVisiblePages + 1);
 
     return Array.from(
-      { length: end - adjustedStart + 1 },
-      (_, i) => adjustedStart + i,
+      { length: endPage - adjustedStartPage + 1 },
+      (_, i) => adjustedStartPage + i,
     );
   };
 
-  const visiblePages = pageRangeCalculation(currentPage, totalPages, 5);
+  const visiblePages = calculateVisiblePages(currentPage, totalPages, 5);
 
   return (
     <div className='flex items-center justify-center gap-6'>

From 6d772d973e1082e01cc4e316b781f24c88857cbd Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 20 Dec 2024 20:42:44 +0900
Subject: [PATCH 05/12] =?UTF-8?q?style:=20Pagination=20=ED=8F=B0=ED=8A=B8?=
 =?UTF-8?q?=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Pagination/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Pagination/index.tsx b/src/components/Pagination/index.tsx
index 68c7cb1..cdc31b6 100644
--- a/src/components/Pagination/index.tsx
+++ b/src/components/Pagination/index.tsx
@@ -68,7 +68,7 @@ const Pagination: FC<PaginationProps> = ({
             key={page}
             onClick={() => onPageChange(page)}
             aria-current={page === currentPage ? 'page' : undefined}
-            className={`p-3 w-[46px] rounded-full transition-colors ${
+            className={`button-s p-3 w-[46px] rounded-full transition-colors ${
               page === currentPage
                 ? 'bg-main text-white'
                 : 'text-gray-600 hover:bg-gray-900'

From 1f04619d734e30acfb678df6c2a04047d15a02e8 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Fri, 20 Dec 2024 23:47:50 +0900
Subject: [PATCH 06/12] =?UTF-8?q?style:=20FilterDropdown=20UI=20=EA=B5=AC?=
 =?UTF-8?q?=EC=B6=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterDropdown/index.tsx | 53 +++++++++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 src/components/FilterDropdown/index.tsx

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
new file mode 100644
index 0000000..92196c3
--- /dev/null
+++ b/src/components/FilterDropdown/index.tsx
@@ -0,0 +1,53 @@
+import { FC, useState } from 'react';
+
+interface FilterDropdownProps {
+  options: string[];
+  selected: string;
+  onChange: (value: string) => void;
+}
+
+const FilterDropdown: FC<FilterDropdownProps> = ({
+  options,
+  selected,
+  onChange,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelect = (option: string) => {
+    onChange(option);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className='body2 relative inline-block text-left'>
+      <button
+        className='flex items-center justify-between w-[149px] h-[44px] px-[23px] py-[10px]
+        text-white bg-gray-900 rounded-[5px] gap-[36px] shadow-sm
+        hover:bg-gray-700 focus:outline-none'
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {selected}
+        {/* gray-300 */}
+        <span>{isOpen ? '▲' : '▼'}</span>
+      </button>
+
+      {isOpen && (
+        <div className='w-full mt-3 bg-gray-900 rounded-[5px] shadow-lg'>
+          <ul className='py-1'>
+            {options.map((option, index) => (
+              <li
+                key={index}
+                onClick={() => handleSelect(option)}
+                className={`block w-[149px] h-[44px] px-[23px] py-[10px] text-gray-400 cursor-pointer hover:bg-gray-700`}
+              >
+                {option}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default FilterDropdown;

From faefae1724e4e55763ad4fb4fe274b5a647a5d5d Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 21 Dec 2024 00:06:34 +0900
Subject: [PATCH 07/12] =?UTF-8?q?style:=20=ED=86=A0=EA=B8=80=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterDropdown/index.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index 92196c3..e9bcc2e 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -1,4 +1,5 @@
 import { FC, useState } from 'react';
+import Icon from '../Icon/Icon';
 
 interface FilterDropdownProps {
   options: string[];
@@ -27,8 +28,13 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
         onClick={() => setIsOpen(!isOpen)}
       >
         {selected}
-        {/* gray-300 */}
-        <span>{isOpen ? '▲' : '▼'}</span>
+        <span className='text-gray-300'>
+          {isOpen ? (
+            <Icon name='ChevronUp' size='m' />
+          ) : (
+            <Icon name='ChevronDown' size='m' />
+          )}
+        </span>
       </button>
 
       {isOpen && (

From a135af10b9d14cb6d3d79752918b35c7942e478a Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 21 Dec 2024 00:11:29 +0900
Subject: [PATCH 08/12] =?UTF-8?q?chore:=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
 =?UTF-8?q?=EA=B3=A0=EB=A0=A4=EB=A5=BC=20=EC=9C=84=ED=95=9C=20aria-label?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterDropdown/index.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index e9bcc2e..fde0fdf 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -22,10 +22,11 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
   return (
     <div className='body2 relative inline-block text-left'>
       <button
+        onClick={() => setIsOpen(!isOpen)}
+        aria-label={`Currently selected filter: ${selected}`}
         className='flex items-center justify-between w-[149px] h-[44px] px-[23px] py-[10px]
         text-white bg-gray-900 rounded-[5px] gap-[36px] shadow-sm
-        hover:bg-gray-700 focus:outline-none'
-        onClick={() => setIsOpen(!isOpen)}
+        hover:bg-gray-800 focus:outline-none'
       >
         {selected}
         <span className='text-gray-300'>
@@ -44,7 +45,7 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
               <li
                 key={index}
                 onClick={() => handleSelect(option)}
-                className={`block w-[149px] h-[44px] px-[23px] py-[10px] text-gray-400 cursor-pointer hover:bg-gray-700`}
+                className={`block w-[149px] h-[44px] px-[23px] py-[10px] text-gray-400 cursor-pointer hover:bg-gray-800`}
               >
                 {option}
               </li>

From 4ba46ae892772e110047f06a347377717080cbe8 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 21 Dec 2024 00:46:48 +0900
Subject: [PATCH 09/12] =?UTF-8?q?feat:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=ED=81=B4=EB=A6=AD=20=EC=99=B8=EB=B6=80=20=EA=B0=90?=
 =?UTF-8?q?=EC=A7=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterDropdown/index.tsx | 32 +++++++++++++++++++------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index fde0fdf..3064748 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -1,4 +1,7 @@
-import { FC, useState } from 'react';
+'use client';
+
+import { FC, useEffect, useRef, useState } from 'react';
+
 import Icon from '../Icon/Icon';
 
 interface FilterDropdownProps {
@@ -12,17 +15,32 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
   selected,
   onChange,
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
 
   const handleSelect = (option: string) => {
     onChange(option);
-    setIsOpen(false);
+    setIsDropdownOpen(false);
   };
 
   return (
-    <div className='body2 relative inline-block text-left'>
+    <div className='body2 relative inline-block text-left' ref={dropdownRef}>
       <button
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={() => setIsDropdownOpen(!isDropdownOpen)}
         aria-label={`Currently selected filter: ${selected}`}
         className='flex items-center justify-between w-[149px] h-[44px] px-[23px] py-[10px]
         text-white bg-gray-900 rounded-[5px] gap-[36px] shadow-sm
@@ -30,7 +48,7 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
       >
         {selected}
         <span className='text-gray-300'>
-          {isOpen ? (
+          {isDropdownOpen ? (
             <Icon name='ChevronUp' size='m' />
           ) : (
             <Icon name='ChevronDown' size='m' />
@@ -38,7 +56,7 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
         </span>
       </button>
 
-      {isOpen && (
+      {isDropdownOpen && (
         <div className='w-full mt-3 bg-gray-900 rounded-[5px] shadow-lg'>
           <ul className='py-1'>
             {options.map((option, index) => (

From 5a0a531432abc252d32a99f158ca3ac2cc209762 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 21 Dec 2024 00:51:28 +0900
Subject: [PATCH 10/12] =?UTF-8?q?feat:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C=EC=84=A0?=
 =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=9C=20aria-expanded=20=EB=B0=8F=20ro?=
 =?UTF-8?q?le=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterDropdown/index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index 3064748..656e76f 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -42,6 +42,7 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
       <button
         onClick={() => setIsDropdownOpen(!isDropdownOpen)}
         aria-label={`Currently selected filter: ${selected}`}
+        aria-expanded={isDropdownOpen}
         className='flex items-center justify-between w-[149px] h-[44px] px-[23px] py-[10px]
         text-white bg-gray-900 rounded-[5px] gap-[36px] shadow-sm
         hover:bg-gray-800 focus:outline-none'
@@ -57,12 +58,16 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
       </button>
 
       {isDropdownOpen && (
-        <div className='w-full mt-3 bg-gray-900 rounded-[5px] shadow-lg'>
+        <div
+          className='w-full mt-3 bg-gray-900 rounded-[5px] shadow-lg'
+          role='menu'
+        >
           <ul className='py-1'>
             {options.map((option, index) => (
               <li
                 key={index}
                 onClick={() => handleSelect(option)}
+                aria-current={option === selected ? 'true' : undefined}
                 className={`block w-[149px] h-[44px] px-[23px] py-[10px] text-gray-400 cursor-pointer hover:bg-gray-800`}
               >
                 {option}

From 0ea5c0bae552ab9f0fc72cb16868810d98d5f103 Mon Sep 17 00:00:00 2001
From: Dahyeon Jin <wlsekgus12@gmail.com>
Date: Sat, 21 Dec 2024 00:56:35 +0900
Subject: [PATCH 11/12] =?UTF-8?q?refactor:=20=EB=AA=85=ED=99=95=ED=95=9C?=
 =?UTF-8?q?=20=EB=B3=80=EC=88=98=EB=AA=85=EC=9C=BC=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FilterDropdown/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/FilterDropdown/index.tsx b/src/components/FilterDropdown/index.tsx
index 656e76f..5af6bad 100644
--- a/src/components/FilterDropdown/index.tsx
+++ b/src/components/FilterDropdown/index.tsx
@@ -32,7 +32,7 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const handleSelect = (option: string) => {
+  const handleOptionSelect = (option: string) => {
     onChange(option);
     setIsDropdownOpen(false);
   };
@@ -66,7 +66,7 @@ const FilterDropdown: FC<FilterDropdownProps> = ({
             {options.map((option, index) => (
               <li
                 key={index}
-                onClick={() => handleSelect(option)}
+                onClick={() => handleOptionSelect(option)}
                 aria-current={option === selected ? 'true' : undefined}
                 className={`block w-[149px] h-[44px] px-[23px] py-[10px] text-gray-400 cursor-pointer hover:bg-gray-800`}
               >

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 12/12] =?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;