전체적인 스타일 수정

frontend/components/admin/UserToolbar.tsx

@@ -65,15 +65,15 @@ export function UserToolbar({
 
   return (
     <div className="space-y-4">
-      {/* 메인 검색 영역 */}
-      <div className="bg-muted/30 rounded-lg p-4">
-        {/* 통합 검색 */}
-        <div className="mb-4 flex items-center gap-4">
-          <div className="flex-1">
+      {/* 검색 및 액션 영역 */}
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        {/* 검색 영역 */}
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+          <div className="w-full sm:w-[400px]">
             <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"
+                className={`absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 ${
+                  isSearching ? "animate-pulse text-primary" : "text-muted-foreground"
                 }`}
               />
               <Input
@@ -81,14 +81,14 @@ export function UserToolbar({
                 value={searchFilter.searchValue || ""}
                 onChange={(e) => handleUnifiedSearchChange(e.target.value)}
                 disabled={isAdvancedSearchMode}
-                className={`pl-10 ${isSearching ? "border-blue-300 ring-1 ring-blue-200" : ""} ${
-                  isAdvancedSearchMode ? "bg-muted text-muted-foreground cursor-not-allowed" : ""
-                }`}
+                className={`h-10 pl-10 text-sm ${
+                  isSearching ? "border-primary ring-2 ring-primary/20" : ""
+                } ${isAdvancedSearchMode ? "cursor-not-allowed bg-muted text-muted-foreground" : ""}`}
               />
             </div>
-            {isSearching && <p className="mt-1 text-xs text-blue-500">검색 중...</p>}
+            {isSearching && <p className="mt-1.5 text-xs text-primary">검색 중...</p>}
             {isAdvancedSearchMode && (
-              <p className="mt-1 text-xs text-amber-600">
+              <p className="mt-1.5 text-xs text-warning">
                 고급 검색 모드가 활성화되어 있습니다. 통합 검색을 사용하려면 고급 검색 조건을 초기화하세요.
               </p>
             )}
@@ -97,95 +97,96 @@ export function UserToolbar({
           {/* 고급 검색 토글 버튼 */}
           <Button
             variant="outline"
-            size="sm"
+            size="default"
             onClick={() => setShowAdvancedSearch(!showAdvancedSearch)}
-            className="gap-2"
+            className="h-10 gap-2 text-sm font-medium"
           >
-            🔍 고급 검색
+            고급 검색
             {showAdvancedSearch ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
           </Button>
         </div>
 
-        {/* 고급 검색 옵션 */}
-        {showAdvancedSearch && (
-          <div className="border-t pt-4">
-            <div className="mb-3">
-              <h4 className="text-sm font-medium">고급 검색 옵션</h4>
-              <span className="text-muted-foreground text-xs">(각 필드별로 개별 검색 조건을 설정할 수 있습니다)</span>
-            </div>
+        {/* 액션 버튼 영역 */}
+        <div className="flex items-center gap-4">
+          {/* 조회 결과 정보 */}
+          <div className="text-sm text-muted-foreground">
+            총 <span className="font-semibold text-foreground">{totalCount.toLocaleString()}</span> 명
+          </div>
+
+          {/* 사용자 등록 버튼 */}
+          <Button onClick={onCreateClick} size="default" className="h-10 gap-2 text-sm font-medium">
+            <Plus className="h-4 w-4" />
+            사용자 등록
+          </Button>
+        </div>
+      </div>
+
+      {/* 고급 검색 옵션 */}
+      {showAdvancedSearch && (
+        <div className="space-y-4">
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">고급 검색 옵션</h4>
+            <p className="text-xs text-muted-foreground">각 필드별로 개별 검색 조건을 설정할 수 있습니다</p>
+          </div>
 
             {/* 고급 검색 필드들 */}
-            <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+              <Input
+                placeholder="회사명 검색"
+                value={searchFilter.search_companyName || ""}
+                onChange={(e) => handleAdvancedSearchChange("search_companyName", e.target.value)}
+                className="h-10 text-sm"
+              />
 
-              <div>
-                <label className="text-muted-foreground mb-1 block text-xs font-medium">회사명</label>
-                <Input
-                  placeholder="회사명 검색"
-                  value={searchFilter.search_companyName || ""}
-                  onChange={(e) => handleAdvancedSearchChange("search_companyName", e.target.value)}
-                />
-              </div>
+              <Input
+                placeholder="부서명 검색"
+                value={searchFilter.search_deptName || ""}
+                onChange={(e) => handleAdvancedSearchChange("search_deptName", e.target.value)}
+                className="h-10 text-sm"
+              />
 
-              <div>
-                <label className="text-muted-foreground mb-1 block text-xs font-medium">부서명</label>
-                <Input
-                  placeholder="부서명 검색"
-                  value={searchFilter.search_deptName || ""}
-                  onChange={(e) => handleAdvancedSearchChange("search_deptName", e.target.value)}
-                />
-              </div>
+              <Input
+                placeholder="직책 검색"
+                value={searchFilter.search_positionName || ""}
+                onChange={(e) => handleAdvancedSearchChange("search_positionName", e.target.value)}
+                className="h-10 text-sm"
+              />
 
-              <div>
-                <label className="text-muted-foreground mb-1 block text-xs font-medium">직책</label>
-                <Input
-                  placeholder="직책 검색"
-                  value={searchFilter.search_positionName || ""}
-                  onChange={(e) => handleAdvancedSearchChange("search_positionName", e.target.value)}
-                />
-              </div>
+              <Input
+                placeholder="사용자 ID 검색"
+                value={searchFilter.search_userId || ""}
+                onChange={(e) => handleAdvancedSearchChange("search_userId", e.target.value)}
+                className="h-10 text-sm"
+              />
 
-              <div>
-                <label className="text-muted-foreground mb-1 block text-xs font-medium">사용자 ID</label>
-                <Input
-                  placeholder="사용자 ID 검색"
-                  value={searchFilter.search_userId || ""}
-                  onChange={(e) => handleAdvancedSearchChange("search_userId", e.target.value)}
-                />
-              </div>
+              <Input
+                placeholder="사용자명 검색"
+                value={searchFilter.search_userName || ""}
+                onChange={(e) => handleAdvancedSearchChange("search_userName", e.target.value)}
+                className="h-10 text-sm"
+              />
 
-              <div>
-                <label className="text-muted-foreground mb-1 block text-xs font-medium">사용자명</label>
-                <Input
-                  placeholder="사용자명 검색"
-                  value={searchFilter.search_userName || ""}
-                  onChange={(e) => handleAdvancedSearchChange("search_userName", e.target.value)}
-                />
-              </div>
+              <Input
+                placeholder="전화번호/휴대폰 검색"
+                value={searchFilter.search_tel || ""}
+                onChange={(e) => handleAdvancedSearchChange("search_tel", e.target.value)}
+                className="h-10 text-sm"
+              />
 
-              <div>
-                <label className="text-muted-foreground mb-1 block text-xs font-medium">전화번호</label>
-                <Input
-                  placeholder="전화번호/휴대폰 검색"
-                  value={searchFilter.search_tel || ""}
-                  onChange={(e) => handleAdvancedSearchChange("search_tel", e.target.value)}
-                />
-              </div>
-
-              <div>
-                <label className="text-muted-foreground mb-1 block text-xs font-medium">이메일</label>
-                <Input
-                  placeholder="이메일 검색"
-                  value={searchFilter.search_email || ""}
-                  onChange={(e) => handleAdvancedSearchChange("search_email", e.target.value)}
-                />
-              </div>
+              <Input
+                placeholder="이메일 검색"
+                value={searchFilter.search_email || ""}
+                onChange={(e) => handleAdvancedSearchChange("search_email", e.target.value)}
+                className="h-10 text-sm"
+              />
             </div>
 
             {/* 고급 검색 초기화 버튼 */}
             {isAdvancedSearchMode && (
-              <div className="mt-4 border-t pt-2">
+              <div>
                 <Button
                   variant="ghost"
+                  size="sm"
                   onClick={() =>
                     onSearchChange({
                       search_sabun: undefined,
@@ -198,7 +199,7 @@ export function UserToolbar({
                       search_email: undefined,
                     })
                   }
-                  className="text-muted-foreground hover:text-foreground"
+                  className="h-9 text-sm text-muted-foreground hover:text-foreground"
                 >
                   고급 검색 조건 초기화
                 </Button>
@@ -206,23 +207,6 @@ export function UserToolbar({
             )}
           </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>
   );
 }