최초커밋

frontend/components/admin/UserToolbar.tsx

@@ -0,0 +1,102 @@
+import { Search, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { UserSearchFilter } from "@/types/user";
+import { SEARCH_OPTIONS } from "@/constants/user";
+
+interface UserToolbarProps {
+  searchFilter: UserSearchFilter;
+  totalCount: number;
+  isSearching?: boolean;
+  onSearchChange: (searchFilter: Partial<UserSearchFilter>) => void;
+  onCreateClick: () => void;
+}
+
+/**
+ * 사용자 관리 툴바 컴포넌트
+ * 검색, 필터링, 액션 버튼들을 포함
+ */
+export function UserToolbar({
+  searchFilter,
+  totalCount,
+  isSearching = false,
+  onSearchChange,
+  onCreateClick,
+}: UserToolbarProps) {
+  return (
+    <div className="space-y-4">
+      {/* 검색 필터 영역 */}
+      <div className="bg-muted/30 flex flex-wrap gap-4 rounded-lg p-4">
+        {/* 검색 대상 선택 */}
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">검색 대상</label>
+          <Select
+            value={searchFilter.searchType || "all"}
+            onValueChange={(value) =>
+              onSearchChange({
+                searchType: value as (typeof SEARCH_OPTIONS)[number]["value"],
+                searchValue: "", // 옵션 변경 시 항상 검색어 초기화
+              })
+            }
+          >
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="전체" />
+            </SelectTrigger>
+            <SelectContent>
+              {SEARCH_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* 검색어 입력 */}
+        <div className="flex flex-col gap-2">
+          <label className="text-sm font-medium">
+            검색어
+            {isSearching && <span className="ml-1 text-xs text-blue-500">(검색 중...)</span>}
+          </label>
+          <div className="relative">
+            <Search
+              className={`absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform ${
+                isSearching ? "animate-pulse text-blue-500" : "text-muted-foreground"
+              }`}
+            />
+            <Input
+              placeholder={
+                (searchFilter.searchType || "all") === "all"
+                  ? "전체 목록을 조회합니다"
+                  : `${SEARCH_OPTIONS.find((opt) => opt.value === (searchFilter.searchType || "all"))?.label || "전체"}을 입력하세요`
+              }
+              value={searchFilter.searchValue || ""}
+              onChange={(e) => onSearchChange({ searchValue: e.target.value })}
+              disabled={(searchFilter.searchType || "all") === "all"}
+              className={`w-[300px] pl-10 ${isSearching ? "border-blue-300 ring-1 ring-blue-200" : ""} ${
+                (searchFilter.searchType || "all") === "all" ? "bg-muted text-muted-foreground cursor-not-allowed" : ""
+              }`}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 액션 버튼 영역 */}
+      <div className="flex items-center justify-between">
+        {/* 조회 결과 정보 */}
+        <div className="text-muted-foreground text-sm">
+          총 <span className="text-foreground font-medium">{totalCount}</span> 명
+        </div>
+
+        {/* 액션 버튼들 */}
+        <div className="flex gap-2">
+          <Button onClick={onCreateClick} className="gap-2">
+            <Plus className="h-4 w-4" />
+            사용자 등록
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}