feat: [결재/공통] 결재함 + 레이아웃 + 캘린더 + 모바일 반응형

- 결재함 검사성적서 템플릿 기반 렌더링 + 결재 상신 - Sidebar/HeaderFavoritesBar 개선 - AuthenticatedLayout 모바일 반응형 - SearchableSelectionModal HTML 유효성 수정 - VacationManagement, 사원관리 정렬 옵션
2026-03-07 03:04:01 +09:00
parent a4f99ae339
commit 72cf5d86a2
11 changed files with 458 additions and 127 deletions
--- a/src/components/approval/ApprovalBox/actions.ts
+++ b/src/components/approval/ApprovalBox/actions.ts
@@ -113,6 +113,7 @@ function transformApiToFrontend(data: InboxApiData): ApprovalRecord {
 export async function getInbox(params?: {
  page?: number; per_page?: number; search?: string; status?: string;
  approval_type?: string; sort_by?: string; sort_dir?: 'asc' | 'desc';
+  start_date?: string; end_date?: string;
 }): Promise<{ data: ApprovalRecord[]; total: number; lastPage: number; __authError?: boolean }> {
  const result = await executeServerAction<PaginatedApiResponse<InboxApiData>>({
    url: buildApiUrl('/api/v1/approvals/inbox', {
@@ -123,6 +124,8 @@ export async function getInbox(params?: {
      approval_type: params?.approval_type !== 'all' ? params?.approval_type : undefined,
      sort_by: params?.sort_by,
      sort_dir: params?.sort_dir,
+      start_date: params?.start_date,
+      end_date: params?.end_date,
    }),
    errorMessage: '결재함 목록 조회에 실패했습니다.',
  });
--- a/src/components/approval/ApprovalBox/index.tsx
+++ b/src/components/approval/ApprovalBox/index.tsx
@@ -158,6 +158,8 @@ export function ApprovalBox() {
        search: searchQuery || undefined,
        status: activeTab !== 'all' ? activeTab : undefined,
        approval_type: filterOption !== 'all' ? filterOption : undefined,
+        start_date: startDate || undefined,
+        end_date: endDate || undefined,
        ...sortConfig,
      });

@@ -172,7 +174,7 @@ export function ApprovalBox() {
      setIsLoading(false);
      isInitialLoadDone.current = true;
    }
-  }, [currentPage, itemsPerPage, searchQuery, filterOption, sortOption, activeTab]);
+  }, [currentPage, itemsPerPage, searchQuery, filterOption, sortOption, activeTab, startDate, endDate]);

  // ===== 초기 로드 =====
  useEffect(() => {
@@ -544,7 +546,7 @@ export function ApprovalBox() {

      dateRangeSelector: {
        enabled: true,
-        showPresets: false,
+        showPresets: true,
        startDate,
        endDate,
        onStartDateChange: setStartDate,
--- a/src/components/hr/VacationManagement/index.tsx
+++ b/src/components/hr/VacationManagement/index.tsx
@@ -681,9 +681,9 @@ export function VacationManagement() {

    columns: tableColumns,

-    // 공통 패턴: dateRangeSelector
+    // 신청현황 탭에서만 날짜 필터 표시 (사용현황/부여현황은 연간 데이터)
    dateRangeSelector: {
-      enabled: true,
+      enabled: mainTab === 'request',
      startDate,
      endDate,
      onStartDateChange: setStartDate,
--- a/src/components/layout/HeaderFavoritesBar.tsx
+++ b/src/components/layout/HeaderFavoritesBar.tsx
@@ -1,8 +1,8 @@
 'use client';

-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Star } from 'lucide-react';
+import { Bookmark, MoreHorizontal } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
  Tooltip,
@@ -20,14 +20,68 @@ import { useFavoritesStore } from '@/stores/favoritesStore';
 import { iconMap } from '@/lib/utils/menuTransform';
 import type { FavoriteItem } from '@/stores/favoritesStore';

+// "시스템 대시보드" 기준 텍스트 폭 (7글자 ≈ 80px)
+const TEXT_DEFAULT_MAX = 80;
+const TEXT_EXPANDED_MAX = 200;
+const TEXT_SHRUNK_MAX = 28;
+const OVERFLOW_BTN_WIDTH = 56;
+const GAP = 6;
+
 interface HeaderFavoritesBarProps {
  isMobile: boolean;
 }

+/** 별 아이콘 드롭다운 (공간 부족 / 모바일 / 태블릿) */
+function StarDropdown({
+  favorites,
+  className,
+  onItemClick,
+}: {
+  favorites: FavoriteItem[];
+  className?: string;
+  onItemClick: (item: FavoriteItem) => void;
+}) {
+  const getIcon = (name: string) => iconMap[name] || null;
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="default"
+          size="sm"
+          className={`p-0 rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center ${className ?? 'w-10 h-10'}`}
+          title="즐겨찾기"
+        >
+          <Bookmark className="h-4 w-4 fill-white" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        {favorites.map((item) => {
+          const Icon = getIcon(item.iconName);
+          return (
+            <DropdownMenuItem
+              key={item.id}
+              onClick={() => onItemClick(item)}
+              className="flex items-center gap-2 cursor-pointer"
+            >
+              {Icon && <Icon className="h-4 w-4" />}
+              <span>{item.label}</span>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
 export default function HeaderFavoritesBar({ isMobile }: HeaderFavoritesBarProps) {
  const router = useRouter();
  const { favorites } = useFavoritesStore();
  const [isTablet, setIsTablet] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const chipWidthsRef = useRef<number[]>([]);
+  const measuredRef = useRef(false);
+  const [visibleCount, setVisibleCount] = useState(favorites.length);
+  const [hoveredId, setHoveredId] = useState<string | null>(null);

  // 태블릿 감지 (768~1024)
  useEffect(() => {
@@ -40,6 +94,70 @@ export default function HeaderFavoritesBar({ isMobile }: HeaderFavoritesBarProps
    return () => window.removeEventListener('resize', check);
  }, []);

+  // 즐겨찾기 변경 시 측정 리셋
+  useEffect(() => {
+    measuredRef.current = false;
+    chipWidthsRef.current = [];
+    setVisibleCount(favorites.length);
+  }, [favorites.length]);
+
+  // 모바일/태블릿 ↔ 데스크탑 전환 시 측정 리셋
+  useEffect(() => {
+    if (!isMobile && !isTablet) {
+      measuredRef.current = false;
+      chipWidthsRef.current = [];
+      setVisibleCount(favorites.length);
+    }
+  }, [isMobile, isTablet, favorites.length]);
+
+  // 데스크탑 동적 오버플로: 전체 chip 폭 측정 → 저장 → resize 시 재계산
+  useEffect(() => {
+    if (isMobile || isTablet) return;
+    const container = containerRef.current;
+    if (!container) return;
+
+    const calculate = () => {
+      // 최초: 전체 chip 렌더 상태에서 폭 저장
+      if (!measuredRef.current) {
+        const chips = container.querySelectorAll<HTMLElement>('[data-chip]');
+        if (chips.length === favorites.length && chips.length > 0) {
+          chipWidthsRef.current = Array.from(chips).map((c) => c.offsetWidth);
+          measuredRef.current = true;
+        } else {
+          return;
+        }
+      }
+
+      const containerWidth = container.offsetWidth;
+      const widths = chipWidthsRef.current;
+
+      // 공간 부족: chip 1개 + overflow 버튼도 안 들어가면 전부 드롭다운
+      const minChipWidth = Math.min(...widths);
+      if (containerWidth < minChipWidth + OVERFLOW_BTN_WIDTH + GAP) {
+        setVisibleCount(0);
+        return;
+      }
+
+      let totalWidth = 0;
+      let count = 0;
+
+      for (let i = 0; i < widths.length; i++) {
+        const needed = totalWidth + widths[i] + (count > 0 ? GAP : 0);
+        const hasMore = i < widths.length - 1;
+        const reserve = hasMore ? OVERFLOW_BTN_WIDTH + GAP : 0;
+        if (needed + reserve > containerWidth && count > 0) break;
+        totalWidth = needed;
+        count++;
+      }
+      setVisibleCount(count);
+    };
+
+    requestAnimationFrame(calculate);
+    const observer = new ResizeObserver(calculate);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isMobile, isTablet, favorites.length]);
+
  const handleClick = useCallback(
    (item: FavoriteItem) => {
      router.push(item.path);
@@ -49,106 +167,121 @@ export default function HeaderFavoritesBar({ isMobile }: HeaderFavoritesBarProps

  if (favorites.length === 0) return null;

-  const getIcon = (iconName: string) => {
-    return iconMap[iconName] || null;
-  };
+  const getIcon = (iconName: string) => iconMap[iconName] || null;

-  // 모바일 & 태블릿: 별 아이콘 드롭다운
-  if (isMobile || isTablet) {
+  // 모바일: 별 아이콘 드롭다운 (모바일 헤더용 - flex-1 불필요)
+  if (isMobile) {
    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="default"
-            size="sm"
-            className={`p-0 rounded-lg min-[320px]:rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center ${
-              isMobile
-                ? 'min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px]'
-                : 'w-10 h-10'
-            }`}
-            title="즐겨찾기"
-          >
-            <Star className="h-4 w-4 fill-white" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48">
-          {favorites.map((item) => {
-            const Icon = getIcon(item.iconName);
-            return (
-              <DropdownMenuItem
-                key={item.id}
-                onClick={() => handleClick(item)}
-                className="flex items-center gap-2 cursor-pointer"
-              >
-                {Icon && <Icon className="h-4 w-4" />}
-                <span>{item.label}</span>
-              </DropdownMenuItem>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <StarDropdown
+        favorites={favorites}
+        onItemClick={handleClick}
+        className="min-w-[28px] min-h-[28px] min-[320px]:min-w-[36px] min-[320px]:min-h-[36px] sm:min-w-[44px] sm:min-h-[44px] rounded-lg min-[320px]:rounded-xl"
+      />
    );
  }

-  // 데스크톱: 8개 이하 → 아이콘 버튼, 9개 이상 → 별 드롭다운
-  const DESKTOP_ICON_LIMIT = 8;
-
-  if (favorites.length > DESKTOP_ICON_LIMIT) {
+  // 태블릿: 별 드롭다운 + flex-1 wrapper (데스크탑 헤더에서 오른쪽 정렬 유지)
+  if (isTablet) {
    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="default"
-            size="sm"
-            className="w-10 h-10 p-0 rounded-xl bg-blue-600 hover:bg-blue-700 text-white flex items-center justify-center"
-            title="즐겨찾기"
-          >
-            <Star className="h-4 w-4 fill-white" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48">
-          {favorites.map((item) => {
-            const Icon = getIcon(item.iconName);
-            return (
-              <DropdownMenuItem
-                key={item.id}
-                onClick={() => handleClick(item)}
-                className="flex items-center gap-2 cursor-pointer"
-              >
-                {Icon && <Icon className="h-4 w-4" />}
-                <span>{item.label}</span>
-              </DropdownMenuItem>
-            );
-          })}
-        </DropdownMenuContent>
-      </DropdownMenu>
+      <div className="flex-1 min-w-0 flex items-center justify-end">
+        <StarDropdown favorites={favorites} onItemClick={handleClick} className="w-10 h-10" />
+      </div>
    );
  }

+  // 데스크톱: containerRef를 항상 렌더 (ResizeObserver 안정성)
+  const visibleItems = favorites.slice(0, visibleCount);
+  const overflowItems = favorites.slice(visibleCount);
+  const showStarOnly = measuredRef.current && visibleCount === 0;
+
  return (
    <TooltipProvider delayDuration={300}>
-      <div className="flex items-center gap-2">
-        {favorites.map((item) => {
-          const Icon = getIcon(item.iconName);
-          if (!Icon) return null;
-          return (
-            <Tooltip key={item.id}>
-              <TooltipTrigger asChild>
-                <Button
-                  variant="default"
-                  size="sm"
-                  onClick={() => handleClick(item)}
-                  className="rounded-xl bg-blue-600 hover:bg-blue-700 text-white w-10 h-10 p-0 flex items-center justify-center transition-all duration-200"
-                >
-                  <Icon className="h-4 w-4" />
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">
-                <p>{item.label}</p>
-              </TooltipContent>
-            </Tooltip>
-          );
-        })}
+      <div
+        ref={containerRef}
+        className="flex-1 min-w-0 flex items-center justify-end gap-1.5"
+        onMouseLeave={() => setHoveredId(null)}
+      >
+        {showStarOnly ? (
+          <StarDropdown favorites={favorites} onItemClick={handleClick} />
+        ) : (
+          <>
+            {visibleItems.map((item) => {
+              const Icon = getIcon(item.iconName);
+              const isHovered = hoveredId === item.id;
+              const isOtherHovered = hoveredId !== null && !isHovered;
+
+              const textMaxWidth = isHovered
+                ? TEXT_EXPANDED_MAX
+                : isOtherHovered
+                  ? TEXT_SHRUNK_MAX
+                  : TEXT_DEFAULT_MAX;
+
+              return (
+                <Tooltip key={item.id}>
+                  <TooltipTrigger asChild>
+                    <Button
+                      data-chip
+                      variant="default"
+                      size="sm"
+                      onClick={() => handleClick(item)}
+                      onMouseEnter={() => setHoveredId(item.id)}
+                      className={`rounded-full text-white h-8 flex items-center overflow-hidden ${
+                        isOtherHovered ? 'px-2 gap-1 bg-blue-400/70' : 'px-3 gap-1.5 bg-blue-600 hover:bg-blue-700'
+                      }`}
+                      style={{
+                        transition: 'all 500ms cubic-bezier(0.25, 0.8, 0.25, 1)',
+                      }}
+                    >
+                      {Icon && <Icon className="h-3.5 w-3.5 shrink-0" />}
+                      <span
+                        className="text-xs whitespace-nowrap overflow-hidden text-ellipsis"
+                        style={{
+                          maxWidth: textMaxWidth,
+                          transition: 'max-width 500ms cubic-bezier(0.25, 0.8, 0.25, 1), opacity 400ms ease',
+                          opacity: isOtherHovered ? 0.7 : 1,
+                        }}
+                      >
+                        {item.label}
+                      </span>
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent side="bottom">
+                    <p>{item.label}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+            {overflowItems.length > 0 && (
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="default"
+                    size="sm"
+                    className="rounded-full bg-blue-500/80 hover:bg-blue-600 text-white h-8 px-2.5 gap-1 flex items-center shrink-0"
+                  >
+                    <MoreHorizontal className="h-3.5 w-3.5" />
+                    <span className="text-xs">+{overflowItems.length}</span>
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end" className="w-48">
+                  {overflowItems.map((item) => {
+                    const Icon = getIcon(item.iconName);
+                    return (
+                      <DropdownMenuItem
+                        key={item.id}
+                        onClick={() => handleClick(item)}
+                        className="flex items-center gap-2 cursor-pointer"
+                      >
+                        {Icon && <Icon className="h-4 w-4" />}
+                        <span>{item.label}</span>
+                      </DropdownMenuItem>
+                    );
+                  })}
+                </DropdownMenuContent>
+              </DropdownMenu>
+            )}
+          </>
+        )}
      </div>
    </TooltipProvider>
  );
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -1,4 +1,4 @@
-import { ChevronRight, ChevronsDownUp, ChevronsUpDown, Circle, Star } from 'lucide-react';
+import { Bookmark, ChevronRight, ChevronsDownUp, ChevronsUpDown, Circle } from 'lucide-react';
 import type { MenuItem } from '@/stores/menuStore';
 import { useEffect, useRef, useCallback } from 'react';
 import { useFavoritesStore, MAX_FAVORITES } from '@/stores/favoritesStore';
@@ -159,7 +159,7 @@ function MenuItemComponent({
              }`}
              title={isFav ? '즐겨찾기 해제' : '즐겨찾기 추가'}
            >
-              <Star className={`h-3.5 w-3.5 ${isFav ? 'fill-yellow-500' : ''}`} />
+              <Bookmark className={`h-3.5 w-3.5 ${isFav ? 'fill-yellow-500' : ''}`} />
            </button>
          )}
        </div>
@@ -224,7 +224,7 @@ function MenuItemComponent({
              }`}
              title={isFav ? '즐겨찾기 해제' : '즐겨찾기 추가'}
            >
-              <Star className={`h-3 w-3 ${isFav ? 'fill-yellow-500' : ''}`} />
+              <Bookmark className={`h-3 w-3 ${isFav ? 'fill-yellow-500' : ''}`} />
            </button>
          )}
        </div>
@@ -291,7 +291,7 @@ function MenuItemComponent({
              }`}
              title={isFav ? '즐겨찾기 해제' : '즐겨찾기 추가'}
            >
-              <Star className={`h-2.5 w-2.5 ${isFav ? 'fill-yellow-500' : ''}`} />
+              <Bookmark className={`h-2.5 w-2.5 ${isFav ? 'fill-yellow-500' : ''}`} />
            </button>
          )}
        </div>
--- a/src/components/organisms/SearchableSelectionModal/SearchableSelectionModal.tsx
+++ b/src/components/organisms/SearchableSelectionModal/SearchableSelectionModal.tsx
@@ -1,6 +1,6 @@
 'use client';

-import { useState, useCallback, useEffect } from 'react';
+import { useState, useCallback, useEffect, cloneElement, isValidElement } from 'react';
 import { Search, X, Loader2 } from 'lucide-react';

 import {
@@ -38,6 +38,7 @@ export function SearchableSelectionModal<T>(props: SearchableSelectionModalProps
    listWrapper,
    infoText,
    mode,
+    isItemDisabled,
  } = props;

  const {
@@ -88,15 +89,20 @@ export function SearchableSelectionModal<T>(props: SearchableSelectionModalProps
    });
  }, []);

-  // 전체선택 토글
+  // 전체선택 토글 (비활성 아이템 제외)
  const handleToggleAll = useCallback(() => {
+    const targetItems = isItemDisabled
+      ? items.filter((item) => !isItemDisabled(item, items.filter((i) => selectedIds.has(keyExtractor(i)))))
+      : items;
    setSelectedIds((prev) => {
-      if (prev.size === items.length) {
+      const targetIds = targetItems.map((item) => keyExtractor(item));
+      const allSelected = targetIds.every((id) => prev.has(id));
+      if (allSelected) {
        return new Set();
      }
-      return new Set(items.map((item) => keyExtractor(item)));
+      return new Set(targetIds);
    });
-  }, [items, keyExtractor]);
+  }, [items, keyExtractor, isItemDisabled, selectedIds]);

  // 다중선택 확인
  const handleConfirm = useCallback(() => {
@@ -107,16 +113,34 @@ export function SearchableSelectionModal<T>(props: SearchableSelectionModalProps
    }
  }, [mode, items, selectedIds, keyExtractor, props, onOpenChange]);

+  // 선택된 아이템 목록 (isItemDisabled 콜백용)
+  const selectedItems = useCallback(() => {
+    return items.filter((item) => selectedIds.has(keyExtractor(item)));
+  }, [items, selectedIds, keyExtractor]);
+
+  // 비활성 판정
+  const checkDisabled = useCallback((item: T) => {
+    if (!isItemDisabled) return false;
+    // 이미 선택된 아이템은 disabled가 아님 (해제 가능해야 함)
+    if (selectedIds.has(keyExtractor(item))) return false;
+    return isItemDisabled(item, selectedItems());
+  }, [isItemDisabled, selectedIds, keyExtractor, selectedItems]);
+
  // 클릭 핸들러: 모드에 따라 분기
  const handleItemClick = useCallback((item: T) => {
+    if (checkDisabled(item)) return;
    if (mode === 'single') {
      handleSingleSelect(item);
    } else {
      handleToggle(keyExtractor(item));
    }
-  }, [mode, handleSingleSelect, handleToggle, keyExtractor]);
+  }, [mode, handleSingleSelect, handleToggle, keyExtractor, checkDisabled]);

-  const isAllSelected = items.length > 0 && selectedIds.size === items.length;
+  // 전체선택 (비활성 아이템 제외)
+  const enabledItems = isItemDisabled
+    ? items.filter((item) => !checkDisabled(item))
+    : items;
+  const isAllSelected = enabledItems.length > 0 && enabledItems.every((item) => selectedIds.has(keyExtractor(item)));
  const isSelected = (item: T) => selectedIds.has(keyExtractor(item));

  // 빈 상태 메시지 결정
@@ -156,11 +180,42 @@ export function SearchableSelectionModal<T>(props: SearchableSelectionModalProps
      );
    }

-    const itemElements = items.map((item) => (
-      <div key={keyExtractor(item)} onClick={() => handleItemClick(item)} className="cursor-pointer">
-        {renderItem(item, isSelected(item))}
-      </div>
-    ));
+    const itemElements = items.map((item) => {
+      const key = keyExtractor(item);
+      const disabled = checkDisabled(item);
+      const rendered = renderItem(item, isSelected(item), disabled);
+
+      // renderItem이 유효한 React 엘리먼트를 반환하면 key와 onClick을 직접 주입 (div 래핑 없이)
+      // 이렇게 하면 <TableRow> 등 테이블 요소를 <div>로 감싸는 HTML 유효성 에러를 방지
+      if (isValidElement(rendered)) {
+        return cloneElement(rendered as React.ReactElement<Record<string, unknown>>, {
+          key,
+          onClick: (e: React.MouseEvent) => {
+            if (disabled) return;
+            const existingOnClick = (rendered.props as Record<string, unknown>)?.onClick;
+            if (typeof existingOnClick === 'function') {
+              (existingOnClick as (e: React.MouseEvent) => void)(e);
+            }
+            handleItemClick(item);
+          },
+          className: [
+            disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer',
+            (rendered.props as Record<string, unknown>)?.className || '',
+          ].filter(Boolean).join(' '),
+        });
+      }
+
+      // 일반 텍스트/fragment인 경우 기존 div 래핑 유지
+      return (
+        <div
+          key={key}
+          onClick={disabled ? undefined : () => handleItemClick(item)}
+          className={disabled ? 'cursor-not-allowed opacity-40' : 'cursor-pointer'}
+        >
+          {rendered}
+        </div>
+      );
+    });

    if (listWrapper) {
      const selectState = mode === 'multiple'
--- a/src/components/organisms/SearchableSelectionModal/types.ts
+++ b/src/components/organisms/SearchableSelectionModal/types.ts
@@ -17,8 +17,10 @@ interface BaseProps<T> {
  fetchData: (query: string) => Promise<T[]>;
  /** 고유 키 추출 */
  keyExtractor: (item: T) => string;
-  /** 아이템 렌더링 */
-  renderItem: (item: T, isSelected: boolean) => ReactNode;
+  /** 아이템 렌더링 (isDisabled: 비활성 상태) */
+  renderItem: (item: T, isSelected: boolean, isDisabled?: boolean) => ReactNode;
+  /** 아이템 비활성 조건 (선택된 아이템 목록 기반) */
+  isItemDisabled?: (item: T, selectedItems: T[]) => boolean;

  // 검색 설정
  /** 검색 모드: debounce(자동) vs enter(수동) */