전체적인 스타일 수정

frontend/components/admin/CodeCategoryPanel.tsx

@@ -92,78 +92,77 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
   }
 
   return (
-    <div className="flex h-full flex-col">
-      {/* 검색 및 필터 */}
-      <div className="border-b p-4">
-        <div className="space-y-3">
-          {/* 검색 */}
-          <div className="relative">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
+    <div className="flex h-full flex-col space-y-4">
+      {/* 검색 및 액션 */}
+      <div className="space-y-3">
+        {/* 검색 + 버튼 */}
+        <div className="flex items-center gap-2">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
             <Input
               placeholder="카테고리 검색..."
               value={searchTerm}
               onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10"
+              className="h-10 pl-10 text-sm"
             />
           </div>
-
-          {/* 활성 필터 */}
-          <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
-              id="activeOnly"
-              checked={showActiveOnly}
-              onChange={(e) => setShowActiveOnly(e.target.checked)}
-              className="rounded border-gray-300"
-            />
-            <label htmlFor="activeOnly" className="text-sm text-muted-foreground">
-              활성 카테고리만 표시
-            </label>
-          </div>
-
-          {/* 새 카테고리 버튼 */}
-          <Button onClick={handleNewCategory} className="w-full" size="sm">
-            <Plus className="mr-2 h-4 w-4" />새 카테고리
+          <Button onClick={handleNewCategory} className="h-10 gap-2 text-sm font-medium">
+            <Plus className="h-4 w-4" />
+            등록
           </Button>
         </div>
+
+        {/* 활성 필터 */}
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="activeOnly"
+            checked={showActiveOnly}
+            onChange={(e) => setShowActiveOnly(e.target.checked)}
+            className="h-4 w-4 rounded border-input"
+          />
+          <label htmlFor="activeOnly" className="text-sm text-muted-foreground">
+            활성만 표시
+          </label>
+        </div>
       </div>
 
       {/* 카테고리 목록 (무한 스크롤) */}
-      <div className="h-96 overflow-y-auto" onScroll={handleScroll}>
+      <div className="space-y-3" onScroll={handleScroll}>
         {isLoading ? (
           <div className="flex h-32 items-center justify-center">
             <LoadingSpinner />
           </div>
         ) : categories.length === 0 ? (
-          <div className="p-4 text-center text-gray-500">
-            {searchTerm ? "검색 결과가 없습니다." : "카테고리가 없습니다."}
+          <div className="flex h-32 items-center justify-center">
+            <p className="text-sm text-muted-foreground">
+              {searchTerm ? "검색 결과가 없습니다." : "카테고리가 없습니다."}
+            </p>
           </div>
         ) : (
           <>
-            <div className="space-y-1 p-2">
-              {categories.map((category, index) => (
-                <CategoryItem
-                  key={`${category.category_code}-${index}`}
-                  category={category}
-                  isSelected={selectedCategoryCode === category.category_code}
-                  onSelect={() => onSelectCategory(category.category_code)}
-                  onEdit={() => handleEditCategory(category.category_code)}
-                  onDelete={() => handleDeleteCategory(category.category_code)}
-                />
-              ))}
-            </div>
+            {categories.map((category, index) => (
+              <CategoryItem
+                key={`${category.category_code}-${index}`}
+                category={category}
+                isSelected={selectedCategoryCode === category.category_code}
+                onSelect={() => onSelectCategory(category.category_code)}
+                onEdit={() => handleEditCategory(category.category_code)}
+                onDelete={() => handleDeleteCategory(category.category_code)}
+              />
+            ))}
 
             {/* 추가 로딩 표시 */}
             {isFetchingNextPage && (
-              <div className="flex justify-center py-4">
+              <div className="flex items-center justify-center py-4">
                 <LoadingSpinner size="sm" />
-                <span className="ml-2 text-sm text-gray-500">추가 로딩 중...</span>
+                <span className="ml-2 text-sm text-muted-foreground">추가 로딩 중...</span>
               </div>
             )}
 
             {/* 더 이상 데이터가 없을 때 */}
             {!hasNextPage && categories.length > 0 && (
-              <div className="py-4 text-center text-sm text-gray-400">모든 카테고리를 불러왔습니다.</div>
+              <div className="py-4 text-center text-sm text-muted-foreground">모든 카테고리를 불러왔습니다.</div>
             )}
           </>
         )}