From e37b308db8c1a2ace79c47e1c1f81f212e9961f9 Mon Sep 17 00:00:00 2001
From: jihyun <jihyun3066@naver.com>
Date: Thu, 1 May 2025 01:14:30 +0900
Subject: [PATCH] =?UTF-8?q?[=20refact=20]=20:=20#421=20=EC=98=A4=ED=83=80?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/components/CategoryTabs.tsx | 76 ++++++++++----------
 1 file changed, 39 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/components/CategoryTabs.tsx b/frontend/src/app/components/CategoryTabs.tsx
index 381fd60a..dca8a8e4 100644
--- a/frontend/src/app/components/CategoryTabs.tsx
+++ b/frontend/src/app/components/CategoryTabs.tsx
@@ -1,43 +1,45 @@
 interface CategoryTabsProps {
-  activeTab: string;
-  onTabChange: (tab: string) => void;
+    activeTab: string
+    onTabChange: (tab: string) => void
 }
 
 const CategoryTabs = ({ activeTab, onTabChange }: CategoryTabsProps) => {
-  const categories = [
-    { id: 'novel', name: '소설' },
-    { id: 'self-development', name: '자기계발서' },
-    { id: 'study', name: '공부/자격' },
-    { id: 'essay', name: '에세이/일상' },
-    { id: 'hobby', name: '실용/취미' },
-    { id: 'it', name: 'IT/컴퓨터' },
-  ];
+    const categories = [
+        { id: 'novel', name: '소설' },
+        { id: 'self-development', name: '자기개발서' },
+        { id: 'study', name: '공부/자격' },
+        { id: 'essay', name: '에세이/일상' },
+        { id: 'hobby', name: '실용/취미' },
+        { id: 'it', name: 'IT/컴퓨터' },
+    ]
 
-  return (
-    <div className="bg-white rounded-t-lg shadow-sm mb-0">
-      <ul className="flex border-b border-gray-200">
-        {categories.map((category) => (
-          <li
-            key={category.id}
-            className={`flex-1 text-center py-3 text-sm ${
-              activeTab === category.id ? 'border-b-2 border-black' : ''
-            }`}
-          >
-            <a
-              href="#"
-              onClick={(e) => {
-                e.preventDefault();
-                onTabChange(category.id);
-              }}
-              className={`block ${activeTab === category.id ? 'font-medium text-black' : 'text-gray-400'}`}
-            >
-              {category.name}
-            </a>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};
+    return (
+        <div className="bg-white rounded-t-lg shadow-sm mb-0">
+            <ul className="flex border-b border-gray-200">
+                {categories.map((category) => (
+                    <li
+                        key={category.id}
+                        className={`flex-1 text-center py-3 text-sm ${
+                            activeTab === category.id ? 'border-b-2 border-black' : ''
+                        }`}
+                    >
+                        <a
+                            href="#"
+                            onClick={(e) => {
+                                e.preventDefault()
+                                onTabChange(category.id)
+                            }}
+                            className={`block ${
+                                activeTab === category.id ? 'font-medium text-black' : 'text-gray-400'
+                            }`}
+                        >
+                            {category.name}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
 
-export default CategoryTabs; 
\ No newline at end of file
+export default CategoryTabs