diff --git a/CLAUDE.md b/CLAUDE.md
index fb02e6c1..5e76d64b 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -271,6 +271,27 @@ const [data, setData] = useState(() => {
 
 ---
 
+## Common Component Usage Rules
+**Priority**: 🔴
+
+신규 페이지/모달 작업 시 **반드시** 공통 패턴 가이드를 먼저 읽고 기존 구조를 따를 것.
+
+**트리거 → 가이드 읽기:**
+| 작업 유형 | 읽을 파일 |
+|-----------|----------|
+| 검색 모달/선택 팝업 | `claudedocs/guides/[GUIDE] common-page-patterns.md` → "검색 모달" 섹션 |
+| 리스트/목록 페이지 | `claudedocs/guides/[GUIDE] common-page-patterns.md` → "리스트 페이지" 섹션 |
+| 상세/수정/등록 페이지 | `claudedocs/guides/[GUIDE] common-page-patterns.md` → "상세/폼 페이지" 섹션 |
+| 새 organisms 필요 | `src/components/organisms/index.ts` 먼저 확인 → 없으면 생성 |
+
+**핵심 원칙:**
+- 새 파일 만들기 전 `organisms/`, `molecules/` export 목록 확인
+- 검색+선택 모달 → `SearchableSelectionModal<T>` 사용 (직접 Dialog 조합 금지)
+- 리스트 페이지 → `UniversalListPage` 또는 organisms 조합
+- 상세/폼 → Card + 기존 패턴 따르기
+
+---
+
 ## User Environment
 **Priority**: 🟢
 
diff --git a/claudedocs/architecture/[PLAN-2026-02-06] refactoring-roadmap.md b/claudedocs/architecture/[PLAN-2026-02-06] refactoring-roadmap.md
index 763a9c00..432fbd97 100644
--- a/claudedocs/architecture/[PLAN-2026-02-06] refactoring-roadmap.md	
+++ b/claudedocs/architecture/[PLAN-2026-02-06] refactoring-roadmap.md	
@@ -2,7 +2,7 @@
 
 **작성일**: 2026-02-06
 **목적**: 전체 코드베이스 리팩토링 포인트 점검 및 실행 계획
-**상태**: Phase 1 완료, Phase 3 프로토타입 검증 완료
+**상태**: Phase 1 완료, Phase 3 완료 (공용 유틸 추출), Phase 4 SearchableSelectionModal 완료
 
 ---
 
@@ -263,55 +263,99 @@ UniversalListPage 템플릿이 이미 내부 처리 → 불필요 판정.
 
 ---
 
-### Phase 3: 액션 파일 제네릭화 (2-3주) `프론트 단독` `프로토타입 검증 완료`
+### Phase 3: 액션 파일 공용 유틸 추출 ✅ 완료 (2026-02-10)
 
-> CRUD 서비스 팩토리 생성 + actions.ts 점진적 마이그레이션
+> 전수 분석 → 팩토리 ROI 재평가 → 공용 유틸 추출로 전략 변경
 
-**프로토타입 결과** (2026-02-09):
+**전수 분석 결과** (82개 action 파일):
 ```
-- [x] createCrudService 팩토리 구현 (src/lib/api/create-crud-service.ts)
-- [x] RankManagement/actions.ts 마이그레이션 (111줄 → 77줄, -31%)
-- [x] Server Action 호환성 검증 완료 (5/5 CRUD 정상 동작)
-- [x] 래퍼 함수 방식 채택 (Next.js Server Action 인식 보장)
+- 35개: executeServerAction 패턴 (Phase 1에서 통일)
+- 15개: 모의 데이터 (mock, API 미연동)
+- 13개: ApiClient 클래스 패턴 (건설 도메인)
+- 나머지: 특수 도메인 로직 (견적, 수주, 품목 등)
 ```
 
-**검증된 사실**:
-- Server Action + 팩토리 패턴 호환성 문제 없음
-- 래퍼 함수 필요 (직접 re-export는 미검증)
-- Tier 분류: Tier 1 정형 CRUD (~60%, 100% 적용) / Tier 2 CRUD+특수 (~25%, 부분 적용) / Tier 3 복잡 도메인 (~15%, 미적용)
-
-**남은 작업**:
+**팩토리 마이그레이션 ROI 재평가**:
 ```
-- [ ] Tier 1 settings 도메인 마이그레이션 (8개)
-- [ ] Tier 1 기타 정형 CRUD 마이그레이션 (~40개)
-- [ ] Tier 2 CRUD 부분 팩토리 적용 (~20개)
-- [ ] PositionApiData 등 공통 API 타입 추출
+- createCrudService 팩토리: 2개(Rank, Title)만 적합 → ROI ~6% (너무 낮음)
+- 대부분 파일: 페이지네이션, 커스텀 쿼리 파라미터, 도메인 특화 로직으로 팩토리 패턴 부적합
+- 결론: 팩토리 대량 마이그레이션 대신 공용 유틸 추출로 전략 전환
 ```
 
-**예상 효과**: Tier 1 기준 ~31% 코드 감소, 새 도메인 추가 시간 30분→5분
+**실행 결과** (2026-02-10):
+```
+Step 1: 공용 타입 추출 (src/lib/api/types.ts)
+  - [x] PaginatedApiResponse<T> — 25+ 파일에서 중복 정의 제거
+  - [x] PaginationMeta, PaginatedResult<T> — 프론트엔드 표준 페이지네이션 타입
+  - [x] toPaginationMeta() — snake_case → camelCase 변환 헬퍼
+  - [x] SelectOption — 공용 선택 옵션 타입
+
+Step 2: 공용 룩업 헬퍼 추출 (src/lib/api/shared-lookups.ts)
+  - [x] fetchVendorOptions() — 거래처 목록 조회 (4개 파일 중복 제거)
+  - [x] fetchBankAccountOptions() — 계좌 목록 조회 (심플)
+  - [x] fetchBankAccountDetailOptions() — 계좌 상세 조회 (bankName, accountNumber 포함)
+  - [x] BankAccountOption 타입
+
+Step 3: PaginatedResponse 타입 마이그레이션 (~20개 파일)
+  - [x] 제네릭 패턴 (interface PaginatedResponse<T>) → import PaginatedApiResponse
+  - [x] 도메인 패턴 (interface XxxPaginatedResponse) → type alias
+  - 스킵: VendorManagement/types.ts (page?/size? 비표준), PermissionManagement/types.ts (meta 래퍼)
+
+Step 4: 공용 룩업 헬퍼 마이그레이션 (4개 파일)
+  - [x] DepositManagement/actions.ts — getVendors + getBankAccounts 교체
+  - [x] WithdrawalManagement/actions.ts — getVendors + getBankAccounts 교체
+  - [x] PurchaseManagement/actions.ts — getVendors + getBankAccounts(상세) 교체
+  - [x] ExpectedExpenseManagement/actions.ts — getBankAccounts(상세) 교체
+
+Step 5: TypeScript 검증 통과 ✅
+```
+
+**실측 효과**:
+- PaginatedResponse 중복 제거: ~20개 파일, 파일당 ~7줄 = ~140줄 절감
+- 공용 룩업 헬퍼: 4개 파일, 파일당 ~20줄 = ~80줄 절감
+- 총 ~220줄 직접 절감 + 향후 새 파일에서 중복 방지
+- createCrudService + TitleManagement 마이그레이션: ~36줄 절감 (프로토타입 포함)
+
+**생성된 공용 파일**:
+- `src/lib/api/types.ts` — 공용 API 타입 (PaginatedApiResponse, PaginationMeta 등)
+- `src/lib/api/shared-lookups.ts` — 공용 룩업 헬퍼 (fetchVendorOptions 등)
+- `src/lib/api/create-crud-service.ts` — CRUD 팩토리 (Rank, Title 2개 사용)
 
 ---
 
-### Phase 4: 템플릿/패턴 통일 (2-3주) `프론트 단독`
+### Phase 4: 템플릿/패턴 통일 (2-3주) `프론트 단독` `SearchableSelectionModal 완료`
 
 > UniversalListPage 확대 + 검증 표준화 + 모달 통합
 
-**작업 항목**:
+**SearchableSelectionModal 완료** (2026-02-10):
+```
+- [x] SearchableSelectionModal<T> 공통 컴포넌트 생성
+      - types.ts, useSearchableData.ts, SearchableSelectionModal.tsx, index.ts
+      - 단일선택(single) + 다중선택(multiple) + listWrapper(테이블용) 지원
+- [x] ItemSearchModal 교체 (212→113줄, -47%)
+- [x] SupplierSearchModal 교체 (268→161줄, -40%)
+- [x] SalesOrderSelectModal 교체 (163→101줄, -38%)
+- [x] QuotationSelectDialog 교체 (196→113줄, -42%)
+- [x] OrderSelectModal 교체 (220→107줄, -51%)
+- [x] organisms/index.ts export 추가
+- [x] CLAUDE.md 공통 컴포넌트 사용 규칙 + claudedocs 가이드 문서 작성
+```
+**실측 효과**: 1,059줄 → 595줄 (464줄 절감, -44%) + 공통 컴포넌트 ~430줄
+
+**남은 작업**:
 ```
 - [ ] UniversalListPage 기능 보강
       - 고급 필터 UI
       - 컬럼 커스터마이징
       - 내보내기 기능
 - [ ] 레거시 리스트 페이지 → UniversalListPage 마이그레이션 (우선 20개)
-- [ ] SearchableSelectionModal<T> 공통 컴포넌트 생성
-      - ItemSearchModal, AssigneeSelectModal 등 5개 통합
 - [ ] Zod 검증 스키마 라이브러리 구축
       - lib/validations/common.ts (이메일, 전화, 사업자번호)
       - lib/validations/vendor.ts, order.ts, item.ts 등
 - [ ] 수동 검증 50+ 폼 → Zod 마이그레이션 (우선 10개)
 ```
 
-**예상 효과**: ~5,000줄 절감, UX 일관성 +80%
+**예상 효과**: ~5,000줄 절감 (SearchableSelectionModal ~464줄 달성), UX 일관성 +80%
 
 ---
 
@@ -337,7 +381,8 @@ UniversalListPage 템플릿이 이미 내부 처리 → 불필요 판정.
       - dev/ 프로토타입 6건 (비프로덕션)
 - [ ] 공통 타입 라이브러리 정리
       - types/shared/ 폴더 생성
-      - ApiResponse<T>, PaginatedResponse<T>, FormState<T> 등
+      - PaginatedApiResponse<T> ✅ Phase 3에서 완료 (src/lib/api/types.ts)
+      - FormState<T>, SelectOption 등 추가 타입
 ```
 
 **예상 효과**: 리스트 렌더링 30-50% 개선, 타입 안전성 +60%
@@ -346,12 +391,13 @@ UniversalListPage 템플릿이 이미 내부 처리 → 불필요 판정.
 
 ## 전체 예상 효과 요약
 
-| 지표 | Phase 1 ✅ | Phase 2 | Phase 3 | Phase 4 | Phase 5 | 합계 |
+| 지표 | Phase 1 ✅ | Phase 2 | Phase 3 ✅ | Phase 4 | Phase 5 | 합계 |
 |------|-----------|---------|---------|---------|---------|------|
-| 코드 절감 | ~3,750줄 (실측) | (구조 개선) | ~3,300줄 (실측 기반 추정) | ~5,000줄 | (품질 개선) | **~12,000줄+** |
-| 패턴 일관성 | +60% | +50% | +40% | +80% | +60% | 종합 개선 |
-| 유지보수성 | 높음 | 매우 높음 | 높음 | 중간 | 중간 | 종합 개선 |
-| 위험도 | 낮음 | 중간 | 낮음 (검증됨) | 낮음 | 낮음 | - |
+| 코드 절감 | ~3,750줄 (실측) | (구조 개선) | ~256줄 (실측) | ~5,000줄 | (품질 개선) | **~9,000줄+** |
+| 중복 제거 | 82개 action 통일 | - | 25+ 타입 + 4 룩업 통합 | 5 모달 통합 | - | 종합 개선 |
+| 패턴 일관성 | +60% | +50% | +30% (타입 표준화) | +80% | +60% | 종합 개선 |
+| 유지보수성 | 높음 | 매우 높음 | 중간 (공용 유틸) | 중간 | 중간 | 종합 개선 |
+| 위험도 | 낮음 | 중간 | 낮음 (완료) | 낮음 | 낮음 | - |
 
 ---
 
@@ -359,15 +405,14 @@ UniversalListPage 템플릿이 이미 내부 처리 → 불필요 판정.
 
 ```
 [완료]
-├─ Phase 1 (공통 훅) ──→ ✅ 완료 (2026-02-09)
+├─ Phase 1 (공통 훅) ──────→ ✅ 완료 (2026-02-09)
+├─ Phase 3 (공용 유틸 추출) ──→ ✅ 완료 (2026-02-10)
+├─ Phase 4 (SearchableSelectionModal) → ✅ 완료 (2026-02-10)
 │
 [즉시 시작 가능]
-├─ Phase 2 (God 컴포넌트 분리) ──→ Phase 1 훅 활용
-├─ Phase 3 (액션 제네릭화) ────→ 프로토타입 검증 완료, 본격 마이그레이션 가능
-├─ Phase 5 (성능/타입) ─────→ 일부 Phase 1에서 선처리됨
-│
-[Phase 3 완료 후]
-└─ Phase 4 (템플릿 통일) ─────→ 훅 + 서비스 활용
+├─ Phase 2 (God 컴포넌트 분리) ──→ Phase 1 훅 + Phase 3 공용 타입 활용
+├─ Phase 4 남은 작업 (UniversalListPage 확대, Zod 검증)
+├─ Phase 5 (성능/타입) ─────→ 일부 Phase 1/3에서 선처리됨
 ```
 
 ---
@@ -393,6 +438,8 @@ UniversalListPage 템플릿이 이미 내부 처리 → 불필요 판정.
 | 2026-02-06 | 초기 작성 - 전체 코드베이스 분석 기반 5 Phase 로드맵 |
 | 2026-02-09 | Phase 1 완료 반영 - 실측 기반 효과 수치 보정 (8,500줄→3,750줄), executeServerAction/useDeleteDialog/useStatsLoader 3개 훅 생성 완료 |
 | 2026-02-09 | Phase 3 프로토타입 검증 완료 - createCrudService 팩토리 생성, RankManagement 5/5 CRUD 정상, Server Action 호환성 확인 |
+| 2026-02-10 | Phase 4 SearchableSelectionModal 완료 - 5개 모달 통합, 464줄 절감(-44%), 가이드 문서 작성 |
+| 2026-02-10 | Phase 3 완료 - 전수 분석 후 팩토리 ROI 재평가(~6%), 공용 유틸 추출로 전략 전환. PaginatedApiResponse 25+파일 타입 통합, 공용 룩업 헬퍼 4파일 중복 제거, ~256줄 절감 |
 
 ---
 
diff --git a/claudedocs/guides/[GUIDE] common-page-patterns.md b/claudedocs/guides/[GUIDE] common-page-patterns.md
new file mode 100644
index 00000000..067f76c7
--- /dev/null
+++ b/claudedocs/guides/[GUIDE] common-page-patterns.md	
@@ -0,0 +1,522 @@
+# SAM 프로젝트 공통 페이지/컴포넌트 패턴 가이드
+
+신규 페이지·모달 작업 시 이 문서를 참고하여 기존 구조와 일관성을 유지한다.
+
+---
+
+## 목차
+
+1. [공통 컴포넌트 맵](#1-공통-컴포넌트-맵)
+2. [검색 모달 (SearchableSelectionModal)](#2-검색-모달)
+3. [리스트 페이지](#3-리스트-페이지)
+4. [상세/폼 페이지](#4-상세폼-페이지)
+5. [API 연동 패턴](#5-api-연동-패턴)
+6. [페이지 라우팅 구조](#6-페이지-라우팅-구조)
+
+---
+
+## 1. 공통 컴포넌트 맵
+
+### Organisms (`src/components/organisms/`)
+
+| 컴포넌트 | 용도 | 주요 Props |
+|----------|------|-----------|
+| `PageHeader` | 페이지 제목, 설명, 아이콘, 액션 버튼 | title, description, icon, actions |
+| `PageLayout` | 최대 너비 래퍼 + 버전 정보 | children, maxWidth? |
+| `StatCards` | 통계 카드 그리드 | stats[], onStatClick? |
+| `SearchFilter` | 검색 입력 + 모바일 필터 | searchTerm, onSearchChange, placeholder |
+| `DataTable` | 테이블 + 페이지네이션 + 정렬 | columns, renderRow, pagination |
+| `MobileCard` / `ListMobileCard` | 모바일 카드 레이아웃 | id, title, infoGrid, badges |
+| `EmptyState` | 빈 상태 (아이콘 + 메시지 + 액션) | icon, title, description, action |
+| `FormSection` | 카드 래퍼 (아이콘 + 제목 + 설명) | icon, title, description |
+| `FormFieldGrid` | 반응형 필드 그리드 (1~4열) | cols, children |
+| `FormActions` | 저장/취소 버튼 그룹 | onSave, onCancel, isSaving |
+| **`SearchableSelectionModal`** | **검색 → 목록 → 선택 모달** | **fetchData, renderItem, mode** |
+
+### Molecules (`src/components/molecules/`)
+
+| 컴포넌트 | 용도 |
+|----------|------|
+| `StatusBadge` | 상태 뱃지 (색상 자동) |
+| `TableActions` | 테이블 행 액션 버튼 |
+| `StandardDialog` / `ConfirmDialog` | 확인/경고 다이얼로그 |
+| `YearQuarterFilter` | 연도/분기 필터 |
+| `MobileFilter` | 모바일 필터 UI |
+
+### Templates (`src/components/templates/`)
+
+| 컴포넌트 | 용도 |
+|----------|------|
+| `UniversalListPage` | 리스트 페이지 올인원 템플릿 |
+
+---
+
+## 2. 검색 모달
+
+### 언제 사용하나
+
+"검색 → 목록 → 선택" 패턴이 필요할 때 → `SearchableSelectionModal<T>` 사용.
+Dialog + Input + 리스트를 직접 조합하지 않는다.
+
+### 위치
+
+```
+src/components/organisms/SearchableSelectionModal/
+├── SearchableSelectionModal.tsx  — 메인 컴포넌트
+├── useSearchableData.ts         — 검색+로딩 훅
+├── types.ts                     — Props 인터페이스
+└── index.ts
+```
+
+### 핵심 Props
+
+```typescript
+SearchableSelectionModal<T>
+  // 필수
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: ReactNode
+  fetchData: (query: string) => Promise<T[]>  // API 호출 위임
+  keyExtractor: (item: T) => string
+  renderItem: (item: T, isSelected: boolean) => ReactNode
+  mode: 'single' | 'multiple'
+  onSelect: single → (item: T) | multiple → (items: T[])
+
+  // 검색 설정
+  searchPlaceholder?: string
+  searchMode?: 'debounce' | 'enter'       // 기본: debounce
+  validateSearch?: (q: string) => boolean  // 유효성 검사
+  loadOnOpen?: boolean                     // 열릴 때 자동 로드
+
+  // 메시지
+  emptyQueryMessage?: string
+  invalidSearchMessage?: string
+  noResultMessage?: string
+  loadingMessage?: string
+
+  // 레이아웃
+  dialogClassName?: string
+  listContainerClassName?: string
+  listWrapper?: (children, selectState?) => ReactNode  // Table 등 커스텀 구조
+  infoText?: (items, isLoading) => ReactNode
+
+  // 다중선택 전용
+  confirmLabel?: string
+  allowSelectAll?: boolean
+```
+
+### 패턴별 예제
+
+#### A. 단일선택 + 디바운스 검색 (가장 일반적)
+
+```tsx
+// 품목 검색, 거래처 검색 등
+<SearchableSelectionModal<ItemType>
+  open={open}
+  onOpenChange={setOpen}
+  title="품목 검색"
+  searchPlaceholder="품목코드 또는 품목명 검색..."
+  fetchData={async (q) => fetchItems({ search: q, per_page: 50 })}
+  keyExtractor={(item) => item.id}
+  validateSearch={(q) => /[a-zA-Z가-힣0-9]/.test(q)}
+  emptyQueryMessage="검색어를 입력하세요"
+  dialogClassName="sm:max-w-[500px]"
+  mode="single"
+  onSelect={(item) => { /* 선택 처리 */ }}
+  renderItem={(item) => (
+    <div className="p-3 hover:bg-blue-50 transition-colors">
+      <span className="font-semibold">{item.code}</span>
+      <span className="text-sm text-gray-600 ml-2">{item.name}</span>
+    </div>
+  )}
+/>
+```
+
+#### B. 단일선택 + 카드 UI + 열릴 때 자동 로드
+
+```tsx
+// 수주 선택, 견적 선택 등
+<SearchableSelectionModal<OrderType>
+  open={open}
+  onOpenChange={setOpen}
+  title="수주 선택"
+  fetchData={async (q) => { /* API 호출 + toast 에러 처리 */ }}
+  keyExtractor={(order) => order.id}
+  loadOnOpen                                    // ← 열릴 때 전체 로드
+  dialogClassName="sm:max-w-lg"
+  listContainerClassName="max-h-[400px] overflow-y-auto space-y-2"
+  mode="single"
+  onSelect={onSelect}
+  renderItem={(order) => (
+    <div className="p-4 border rounded-lg hover:bg-muted/50 transition-colors">
+      {/* 카드형 UI */}
+    </div>
+  )}
+/>
+```
+
+#### C. 다중선택 + Enter 검색 + 테이블
+
+```tsx
+// 수주 다중선택 (체크박스 테이블)
+<SearchableSelectionModal<OrderSelectItem>
+  open={open}
+  onOpenChange={setOpen}
+  title="수주 선택"
+  fetchData={handleFetchData}
+  keyExtractor={(item) => item.id}
+  searchMode="enter"                            // ← 수동 검색
+  loadOnOpen
+  dialogClassName="sm:max-w-2xl"
+  listContainerClassName="max-h-[400px] overflow-y-auto border rounded-md"
+  mode="multiple"
+  onSelect={onSelect}
+  confirmLabel="선택"
+  allowSelectAll
+  listWrapper={(children, selectState) => (     // ← Table 구조 래핑
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-10">
+            {selectState && (
+              <Checkbox
+                checked={selectState.isAllSelected}
+                onCheckedChange={selectState.onToggleAll}
+              />
+            )}
+          </TableHead>
+          <TableHead>수주번호</TableHead>
+          <TableHead>현장명</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>{children}</TableBody>
+    </Table>
+  )}
+  renderItem={(item, isSelected) => (
+    <TableRow className="cursor-pointer hover:bg-muted/50">
+      <TableCell onClick={(e) => e.stopPropagation()}>
+        <Checkbox checked={isSelected} />
+      </TableCell>
+      <TableCell>{item.orderNumber}</TableCell>
+      <TableCell>{item.siteName}</TableCell>
+    </TableRow>
+  )}
+/>
+```
+
+### 기존 모달 → 공통 컴포넌트 매핑
+
+| 기존 모달 | 위치 | 패턴 |
+|-----------|------|------|
+| `ItemSearchModal` | quotes/ | A (단일 + 디바운스) |
+| `SupplierSearchModal` | material/ReceivingManagement/ | A (단일 + 디바운스) |
+| `SalesOrderSelectModal` | production/WorkOrders/ | B (단일 + 카드 + loadOnOpen) |
+| `QuotationSelectDialog` | orders/ | B (단일 + 카드 + loadOnOpen) |
+| `OrderSelectModal` | quality/InspectionManagement/ | C (다중 + Enter + 테이블) |
+
+---
+
+## 3. 리스트 페이지
+
+### 방법 1: UniversalListPage 템플릿 (권장)
+
+`src/components/templates/UniversalListPage`에 config 객체를 전달하는 올인원 방식.
+
+```tsx
+'use client';
+
+import { UniversalListPage } from '@/components/templates/UniversalListPage';
+import type { UniversalListPageConfig } from '@/components/templates/UniversalListPage';
+
+export default function MyListPage() {
+  const config: UniversalListPageConfig<MyItem> = {
+    title: '목록 제목',
+    description: '설명',
+    icon: ListIcon,
+    basePath: '/path/to/list',
+    idField: 'id',
+
+    // 통계
+    stats: [
+      { label: '전체', value: totalCount, icon: Users },
+    ],
+
+    // 탭
+    tabs: [
+      { value: 'all', label: '전체', count: totalCount },
+      { value: 'active', label: '활성', count: activeCount },
+    ],
+
+    // 테이블 컬럼
+    columns: [
+      { key: 'name', label: '이름' },
+      { key: 'status', label: '상태' },
+    ],
+
+    // 검색
+    searchPlaceholder: '이름, 코드 검색...',
+    searchFilter: (item, q) => item.name.includes(q),
+    tabFilter: (item, tab) => tab === 'all' || item.status === tab,
+
+    // 렌더링
+    renderTableRow,
+    renderMobileCard,
+    headerActions: () => <Button>신규</Button>,
+  };
+
+  return <UniversalListPage config={config} initialData={data} />;
+}
+```
+
+### 방법 2: Organisms 직접 조합
+
+UniversalListPage가 맞지 않는 경우 organisms를 직접 조합.
+
+```tsx
+'use client';
+
+import { PageLayout, PageHeader, StatCards, SearchFilter, DataTable, EmptyState } from '@/components/organisms';
+
+export function MyList() {
+  return (
+    <PageLayout>
+      <PageHeader title="제목" description="설명" actions={<Button>신규</Button>} />
+      <StatCards stats={stats} />
+      <SearchFilter searchTerm={q} onSearchChange={setQ} placeholder="검색..." />
+      {data.length > 0 ? (
+        <DataTable columns={columns} renderRow={renderRow} pagination={pagination} />
+      ) : (
+        <EmptyState icon={FileX} title="데이터 없음" />
+      )}
+    </PageLayout>
+  );
+}
+```
+
+### 리스트 페이지 공통 규칙
+
+- **검색 디바운스**: 300ms
+- **테이블 컬럼 순서**: 체크박스 → 번호 → 데이터 컬럼 → 작업
+- **번호 계산**: `(currentPage - 1) * pageSize + index + 1`
+- **모바일**: `ListMobileCard` 또는 `MobileCard` 사용
+- **빈 상태**: `EmptyState` 사용 (검색 결과 없음 vs 데이터 없음 구분)
+- **삭제 확인**: `ConfirmDialog` 사용 (alert 금지)
+
+---
+
+## 4. 상세/폼 페이지
+
+### 표준 구조
+
+```tsx
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+interface DetailProps {
+  id?: string;
+  mode: 'view' | 'edit' | 'new';
+}
+
+export function MyDetail({ id, mode }: DetailProps) {
+  const isViewMode = mode === 'view';
+  const isNewMode = mode === 'new';
+  const router = useRouter();
+
+  // 상태 (모든 hook은 최상단에 — 조건부 return 전에)
+  const [isLoading, setIsLoading] = useState(!isNewMode);
+  const [isSaving, setIsSaving] = useState(false);
+  const [formData, setFormData] = useState({ name: '', code: '' });
+
+  // 데이터 로드 (view/edit)
+  useEffect(() => {
+    if (!id || isNewMode) { setIsLoading(false); return; }
+    getDetail(id).then(data => {
+      setFormData(data);
+      setIsLoading(false);
+    });
+  }, [id, isNewMode]);
+
+  // 저장
+  const handleSubmit = async () => {
+    setIsSaving(true);
+    try {
+      if (isNewMode) await create(formData);
+      else await update(id!, formData);
+      toast.success('저장되었습니다.');
+      router.back();
+    } catch {
+      toast.error('저장에 실패했습니다.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) return <Skeleton />;
+
+  return (
+    <div className="container mx-auto py-6 max-w-4xl">
+      {/* 헤더 */}
+      <div className="mb-6">
+        <h1 className="text-2xl font-bold">
+          {isNewMode ? '신규 등록' : isViewMode ? '상세 보기' : '수정'}
+        </h1>
+      </div>
+
+      {/* 섹션 1 */}
+      <Card className="mb-6">
+        <CardHeader><CardTitle>기본 정보</CardTitle></CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label>이름</Label>
+              <Input
+                value={formData.name}
+                onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+                disabled={isViewMode}
+              />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* 하단 버튼 */}
+      <div className="flex justify-end gap-3">
+        <Button variant="outline" onClick={() => router.back()}>취소</Button>
+        {isViewMode ? (
+          <Button onClick={() => router.push(`?mode=edit`)}>수정</Button>
+        ) : (
+          <Button onClick={handleSubmit} disabled={isSaving}>
+            {isSaving ? '저장 중...' : '저장'}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
+```
+
+### 상세/폼 페이지 공통 규칙
+
+- **모드**: `view` | `edit` | `new` 3가지
+- **Hook 규칙**: 모든 hook은 최상단, 조건부 return은 그 아래
+- **레이아웃**: `Card > CardHeader + CardContent` 섹션 단위
+- **필드 그리드**: `grid grid-cols-1 md:grid-cols-2 gap-4`
+- **disabled**: view 모드에서 모든 입력 비활성화
+- **알림**: `toast.success()` / `toast.error()` (sonner)
+- **네비게이션**: `router.back()` 또는 `router.push()`
+- **로딩**: Skeleton 컴포넌트 사용
+- **Select 버그 대응**: `<Select key={...}>` 패턴 (CLAUDE.md 참조)
+
+---
+
+## 5. API 연동 패턴
+
+### Server Action 파일 구조
+
+```
+src/components/[domain]/[feature]/
+├── index.tsx        — 메인 컴포넌트 (또는 리스트)
+├── [Feature]Detail.tsx  — 상세/폼
+├── actions.ts       — Server Actions (API 호출)
+└── types.ts         — 타입 정의
+```
+
+### Server Action 패턴
+
+```typescript
+'use server';
+
+import { cookies } from 'next/headers';
+
+const API_BASE = process.env.BACKEND_API_URL;
+
+export async function getList(params?: { q?: string; page?: number; size?: number }) {
+  const cookieStore = await cookies();
+  const token = cookieStore.get('access_token')?.value;
+  if (!token) redirect('/login');
+
+  const searchParams = new URLSearchParams();
+  if (params?.q) searchParams.set('q', params.q);
+  // ...
+
+  const res = await fetch(`${API_BASE}/endpoint?${searchParams}`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+
+  const data = await res.json();
+  return { success: true, data: data.data };
+}
+```
+
+### 클라이언트에서 호출
+
+```typescript
+// useEffect에서 호출
+useEffect(() => {
+  getList({ q: searchTerm })
+    .then(result => {
+      if (result.success) setData(result.data);
+      else toast.error(result.error);
+    });
+}, [searchTerm]);
+
+// SearchableSelectionModal의 fetchData에서 호출
+const handleFetchData = useCallback(async (query: string) => {
+  const result = await getList({ q: query });
+  if (result.success) return result.data;
+  toast.error(result.error);
+  return [];
+}, []);
+```
+
+---
+
+## 6. 페이지 라우팅 구조
+
+```
+src/app/[locale]/(protected)/[domain]/
+├── [list-page]/
+│   └── page.tsx              → <ListComponent />
+├── [detail-page]/
+│   ├── [id]/
+│   │   └── page.tsx          → <DetailComponent id={id} mode="view|edit" />
+│   └── new/
+│       └── page.tsx          → <DetailComponent mode="new" />
+```
+
+### page.tsx 패턴
+
+```typescript
+// 리스트
+'use client';
+import { MyList } from '@/components/[domain]/[Feature]';
+export default function Page() { return <MyList />; }
+
+// 상세 (view/edit)
+'use client';
+import { useParams, useSearchParams } from 'next/navigation';
+export default function Page() {
+  const { id } = useParams();
+  const mode = useSearchParams().get('mode') === 'edit' ? 'edit' : 'view';
+  return <MyDetail id={id as string} mode={mode} />;
+}
+
+// 신규
+'use client';
+export default function Page() { return <MyDetail mode="new" />; }
+```
+
+---
+
+## 변경 이력
+
+| 날짜 | 내용 |
+|------|------|
+| 2026-02-10 | 초기 작성: 검색 모달, 리스트, 상세/폼, API 패턴 |
diff --git a/src/components/accounting/BadDebtCollection/actions.ts b/src/components/accounting/BadDebtCollection/actions.ts
index bfc00283..3aec88dc 100644
--- a/src/components/accounting/BadDebtCollection/actions.ts
+++ b/src/components/accounting/BadDebtCollection/actions.ts
@@ -16,20 +16,13 @@
 
 import { revalidatePath } from 'next/cache';
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { BadDebtRecord, BadDebtItem, CollectionStatus } from './types';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
 // ===== API 응답 타입 =====
 
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
-
 interface BadDebtItemApiData {
   id: number;
   debt_amount: number;
@@ -176,7 +169,7 @@ export async function getBadDebts(params?: {
 
   const result = await executeServerAction({
     url: `${API_URL}/api/v1/bad-debts?${searchParams.toString()}`,
-    transform: (data: PaginatedResponse<BadDebtApiData>) => data.data.map(transformApiToFrontend),
+    transform: (data: PaginatedApiResponse<BadDebtApiData>) => data.data.map(transformApiToFrontend),
     errorMessage: '악성채권 목록 조회에 실패했습니다.',
   });
   return result.data || [];
diff --git a/src/components/accounting/BankTransactionInquiry/actions.ts b/src/components/accounting/BankTransactionInquiry/actions.ts
index e583d11a..bec2c878 100644
--- a/src/components/accounting/BankTransactionInquiry/actions.ts
+++ b/src/components/accounting/BankTransactionInquiry/actions.ts
@@ -2,6 +2,7 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { BankTransaction, TransactionKind } from './types';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -34,13 +35,7 @@ interface BankTransactionApiSummary {
   withdrawal_unset_count: number;
 }
 
-interface BankTransactionPaginatedResponse {
-  data: BankTransactionApiItem[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type BankTransactionPaginatedResponse = PaginatedApiResponse<BankTransactionApiItem>;
 
 interface FrontendPagination { currentPage: number; lastPage: number; perPage: number; total: number }
 const DEFAULT_PAGINATION: FrontendPagination = { currentPage: 1, lastPage: 1, perPage: 20, total: 0 };
diff --git a/src/components/accounting/BillManagement/actions.ts b/src/components/accounting/BillManagement/actions.ts
index 52867bea..8888bfc0 100644
--- a/src/components/accounting/BillManagement/actions.ts
+++ b/src/components/accounting/BillManagement/actions.ts
@@ -2,19 +2,14 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { BillRecord, BillApiData, BillStatus } from './types';
 import { transformApiToFrontend, transformFrontendToApi } from './types';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
 // ===== API 응답 타입 =====
-interface BillPaginatedResponse {
-  data: BillApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type BillPaginatedResponse = PaginatedApiResponse<BillApiData>;
 
 interface BillSummaryApiData {
   total_amount: number;
diff --git a/src/components/accounting/CardTransactionInquiry/actions.ts b/src/components/accounting/CardTransactionInquiry/actions.ts
index 44edff6d..c4a5de7f 100644
--- a/src/components/accounting/CardTransactionInquiry/actions.ts
+++ b/src/components/accounting/CardTransactionInquiry/actions.ts
@@ -2,6 +2,7 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { CardTransaction } from './types';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -35,13 +36,7 @@ interface CardTransactionApiSummary {
   total_amount: number;
 }
 
-interface CardPaginatedResponse {
-  data: CardTransactionApiItem[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type CardPaginatedResponse = PaginatedApiResponse<CardTransactionApiItem>;
 
 interface FrontendPagination { currentPage: number; lastPage: number; perPage: number; total: number }
 const DEFAULT_PAGINATION: FrontendPagination = { currentPage: 1, lastPage: 1, perPage: 20, total: 0 };
diff --git a/src/components/accounting/DepositManagement/actions.ts b/src/components/accounting/DepositManagement/actions.ts
index 8ac58a09..bbb13202 100644
--- a/src/components/accounting/DepositManagement/actions.ts
+++ b/src/components/accounting/DepositManagement/actions.ts
@@ -2,6 +2,8 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
+import { fetchVendorOptions, fetchBankAccountOptions } from '@/lib/api/shared-lookups';
 import type { DepositRecord, DepositType, DepositStatus } from './types';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -26,13 +28,7 @@ interface DepositApiData {
   bank_account?: { id: number; bank_name: string; account_name: string } | null;
 }
 
-interface DepositPaginatedResponse {
-  data: DepositApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type DepositPaginatedResponse = PaginatedApiResponse<DepositApiData>;
 
 interface FrontendPagination { currentPage: number; lastPage: number; perPage: number; total: number }
 const DEFAULT_PAGINATION: FrontendPagination = { currentPage: 1, lastPage: 1, perPage: 20, total: 0 };
@@ -162,15 +158,7 @@ export async function updateDeposit(id: string, data: Partial<DepositRecord>): P
 export async function getVendors(): Promise<{
   success: boolean; data: { id: string; name: string }[]; error?: string;
 }> {
-  const result = await executeServerAction({
-    url: `${API_URL}/api/v1/clients?per_page=100`,
-    transform: (data: { data?: { id: number; name: string }[] } | { id: number; name: string }[]) => {
-      type ClientApi = { id: number; name: string };
-      const clients: ClientApi[] = Array.isArray(data) ? data : (data as { data?: ClientApi[] })?.data || [];
-      return clients.map(c => ({ id: String(c.id), name: c.name }));
-    },
-    errorMessage: '거래처 조회에 실패했습니다.',
-  });
+  const result = await fetchVendorOptions();
   return { success: result.success, data: result.data || [], error: result.error };
 }
 
@@ -178,14 +166,6 @@ export async function getVendors(): Promise<{
 export async function getBankAccounts(): Promise<{
   success: boolean; data: { id: string; name: string }[]; error?: string;
 }> {
-  const result = await executeServerAction({
-    url: `${API_URL}/api/v1/bank-accounts?per_page=100`,
-    transform: (data: { data?: { id: number; account_name: string; bank_name: string }[] } | { id: number; account_name: string; bank_name: string }[]) => {
-      type AccountApi = { id: number; account_name: string; bank_name: string };
-      const accounts: AccountApi[] = Array.isArray(data) ? data : (data as { data?: AccountApi[] })?.data || [];
-      return accounts.map(a => ({ id: String(a.id), name: `${a.bank_name} ${a.account_name}` }));
-    },
-    errorMessage: '계좌 조회에 실패했습니다.',
-  });
+  const result = await fetchBankAccountOptions();
   return { success: result.success, data: result.data || [], error: result.error };
 }
diff --git a/src/components/accounting/ExpectedExpenseManagement/actions.ts b/src/components/accounting/ExpectedExpenseManagement/actions.ts
index 0fe2ff95..9b0fde5c 100644
--- a/src/components/accounting/ExpectedExpenseManagement/actions.ts
+++ b/src/components/accounting/ExpectedExpenseManagement/actions.ts
@@ -2,6 +2,8 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
+import { fetchBankAccountDetailOptions } from '@/lib/api/shared-lookups';
 import type { ExpectedExpenseRecord, TransactionType, PaymentStatus, ApprovalStatus } from './types';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -27,13 +29,7 @@ interface ExpectedExpenseApiData {
   bank_account?: { id: number; bank_name: string; account_name: string } | null;
 }
 
-interface ExpensePaginatedResponse {
-  data: ExpectedExpenseApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type ExpensePaginatedResponse = PaginatedApiResponse<ExpectedExpenseApiData>;
 
 interface SummaryData {
   total_amount: number;
@@ -217,14 +213,6 @@ export async function getClients(): Promise<{
 export async function getBankAccounts(): Promise<{
   success: boolean; data: { id: string; bankName: string; accountName: string; accountNumber: string }[]; error?: string;
 }> {
-  const result = await executeServerAction({
-    url: `${API_URL}/api/v1/bank-accounts?per_page=100`,
-    transform: (data: { data?: { id: number; bank_name: string; account_name: string; account_number: string }[] } | { id: number; bank_name: string; account_name: string; account_number: string }[]) => {
-      type AccountApi = { id: number; bank_name: string; account_name: string; account_number: string };
-      const accounts: AccountApi[] = Array.isArray(data) ? data : (data as { data?: AccountApi[] })?.data || [];
-      return accounts.map(a => ({ id: String(a.id), bankName: a.bank_name, accountName: a.account_name, accountNumber: a.account_number }));
-    },
-    errorMessage: '은행 계좌 조회에 실패했습니다.',
-  });
+  const result = await fetchBankAccountDetailOptions();
   return { success: result.success, data: result.data || [], error: result.error };
 }
\ No newline at end of file
diff --git a/src/components/accounting/PurchaseManagement/actions.ts b/src/components/accounting/PurchaseManagement/actions.ts
index c68f40b6..62ce09de 100644
--- a/src/components/accounting/PurchaseManagement/actions.ts
+++ b/src/components/accounting/PurchaseManagement/actions.ts
@@ -15,6 +15,8 @@
 
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
+import { fetchVendorOptions, fetchBankAccountDetailOptions } from '@/lib/api/shared-lookups';
 import type { PurchaseRecord, PurchaseType } from './types';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -46,13 +48,7 @@ interface PurchaseApiData {
   updated_at?: string;
 }
 
-interface PurchaseApiPaginatedResponse {
-  data: PurchaseApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type PurchaseApiPaginatedResponse = PaginatedApiResponse<PurchaseApiData>;
 
 // ===== 변환 함수 =====
 
@@ -199,17 +195,7 @@ export async function getBankAccounts(): Promise<{
   data: { id: string; bankName: string; accountName: string; accountNumber: string }[];
   error?: string;
 }> {
-  const result = await executeServerAction({
-    url: `${API_URL}/api/v1/bank-accounts?per_page=100`,
-    transform: (data: { data?: { id: number; bank_name: string; account_name: string; account_number: string }[] } | { id: number; bank_name: string; account_name: string; account_number: string }[]) => {
-      type BankAccountApi = { id: number; bank_name: string; account_name: string; account_number: string };
-      const accounts: BankAccountApi[] = Array.isArray(data) ? data : (data as { data?: BankAccountApi[] })?.data || [];
-      return accounts.map(a => ({
-        id: String(a.id), bankName: a.bank_name, accountName: a.account_name, accountNumber: a.account_number,
-      }));
-    },
-    errorMessage: '은행 계좌 조회에 실패했습니다.',
-  });
+  const result = await fetchBankAccountDetailOptions();
   return { success: result.success, data: result.data || [], error: result.error };
 }
 
@@ -219,14 +205,6 @@ export async function getVendors(): Promise<{
   data: { id: string; name: string }[];
   error?: string;
 }> {
-  const result = await executeServerAction({
-    url: `${API_URL}/api/v1/clients?per_page=100`,
-    transform: (data: { data?: { id: number; name: string }[] } | { id: number; name: string }[]) => {
-      type ClientApi = { id: number; name: string };
-      const clients: ClientApi[] = Array.isArray(data) ? data : (data as { data?: ClientApi[] })?.data || [];
-      return clients.map(c => ({ id: String(c.id), name: c.name }));
-    },
-    errorMessage: '거래처 조회에 실패했습니다.',
-  });
+  const result = await fetchVendorOptions();
   return { success: result.success, data: result.data || [], error: result.error };
 }
\ No newline at end of file
diff --git a/src/components/accounting/VendorLedger/actions.ts b/src/components/accounting/VendorLedger/actions.ts
index 3fa316db..8d21b50f 100644
--- a/src/components/accounting/VendorLedger/actions.ts
+++ b/src/components/accounting/VendorLedger/actions.ts
@@ -2,6 +2,7 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { cookies } from 'next/headers';
 import type { VendorLedgerItem, VendorLedgerDetail, VendorLedgerSummary, TransactionEntry } from './types';
@@ -64,13 +65,7 @@ interface VendorLedgerApiDetail {
   transactions: VendorLedgerApiTransaction[];
 }
 
-interface VendorLedgerPaginatedResponse {
-  data: VendorLedgerApiItem[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type VendorLedgerPaginatedResponse = PaginatedApiResponse<VendorLedgerApiItem>;
 
 interface FrontendPagination { currentPage: number; lastPage: number; perPage: number; total: number }
 const DEFAULT_PAGINATION: FrontendPagination = { currentPage: 1, lastPage: 1, perPage: 20, total: 0 };
diff --git a/src/components/accounting/WithdrawalManagement/actions.ts b/src/components/accounting/WithdrawalManagement/actions.ts
index 52b9d211..217bb061 100644
--- a/src/components/accounting/WithdrawalManagement/actions.ts
+++ b/src/components/accounting/WithdrawalManagement/actions.ts
@@ -2,6 +2,8 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
+import { fetchVendorOptions, fetchBankAccountOptions } from '@/lib/api/shared-lookups';
 import type { WithdrawalRecord, WithdrawalType } from './types';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -30,13 +32,7 @@ interface WithdrawalApiData {
   card?: { id: number; card_name: string } | null;
 }
 
-interface WithdrawalPaginatedResponse {
-  data: WithdrawalApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type WithdrawalPaginatedResponse = PaginatedApiResponse<WithdrawalApiData>;
 
 interface FrontendPagination { currentPage: number; lastPage: number; perPage: number; total: number }
 const DEFAULT_PAGINATION: FrontendPagination = { currentPage: 1, lastPage: 1, perPage: 20, total: 0 };
@@ -165,15 +161,7 @@ export async function updateWithdrawal(id: string, data: Partial<WithdrawalRecor
 export async function getVendors(): Promise<{
   success: boolean; data: { id: string; name: string }[]; error?: string;
 }> {
-  const result = await executeServerAction({
-    url: `${API_URL}/api/v1/clients?per_page=100`,
-    transform: (data: { data?: { id: number; name: string }[] } | { id: number; name: string }[]) => {
-      type ClientApi = { id: number; name: string };
-      const clients: ClientApi[] = Array.isArray(data) ? data : (data as { data?: ClientApi[] })?.data || [];
-      return clients.map(c => ({ id: String(c.id), name: c.name }));
-    },
-    errorMessage: '거래처 조회에 실패했습니다.',
-  });
+  const result = await fetchVendorOptions();
   return { success: result.success, data: result.data || [], error: result.error };
 }
 
@@ -181,14 +169,6 @@ export async function getVendors(): Promise<{
 export async function getBankAccounts(): Promise<{
   success: boolean; data: { id: string; name: string }[]; error?: string;
 }> {
-  const result = await executeServerAction({
-    url: `${API_URL}/api/v1/bank-accounts?per_page=100`,
-    transform: (data: { data?: { id: number; account_name: string; bank_name: string }[] } | { id: number; account_name: string; bank_name: string }[]) => {
-      type AccountApi = { id: number; account_name: string; bank_name: string };
-      const accounts: AccountApi[] = Array.isArray(data) ? data : (data as { data?: AccountApi[] })?.data || [];
-      return accounts.map(a => ({ id: String(a.id), name: `${a.bank_name} ${a.account_name}` }));
-    },
-    errorMessage: '계좌 조회에 실패했습니다.',
-  });
+  const result = await fetchBankAccountOptions();
   return { success: result.success, data: result.data || [], error: result.error };
 }
diff --git a/src/components/approval/ApprovalBox/actions.ts b/src/components/approval/ApprovalBox/actions.ts
index a1d6fc08..119d07f3 100644
--- a/src/components/approval/ApprovalBox/actions.ts
+++ b/src/components/approval/ApprovalBox/actions.ts
@@ -12,20 +12,13 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { ApprovalRecord, ApprovalType, ApprovalStatus } from './types';
 
 // ============================================
 // API 응답 타입 정의
 // ============================================
 
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
-
 interface InboxSummary {
   total: number;
   pending: number;
@@ -134,7 +127,7 @@ export async function getInbox(params?: {
   if (params?.sort_by) searchParams.set('sort_by', params.sort_by);
   if (params?.sort_dir) searchParams.set('sort_dir', params.sort_dir);
 
-  const result = await executeServerAction<PaginatedResponse<InboxApiData>>({
+  const result = await executeServerAction<PaginatedApiResponse<InboxApiData>>({
     url: `${API_URL}/api/v1/approvals/inbox?${searchParams.toString()}`,
     errorMessage: '결재함 목록 조회에 실패했습니다.',
   });
diff --git a/src/components/approval/DraftBox/actions.ts b/src/components/approval/DraftBox/actions.ts
index dfae273e..b1c70aee 100644
--- a/src/components/approval/DraftBox/actions.ts
+++ b/src/components/approval/DraftBox/actions.ts
@@ -14,20 +14,13 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { DraftRecord, DocumentStatus, Approver } from './types';
 
 // ============================================
 // API 응답 타입 정의
 // ============================================
 
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
-
 interface DraftsSummary {
   total: number;
   draft: number;
@@ -183,7 +176,7 @@ export async function getDrafts(params?: {
   if (params?.sort_by) searchParams.set('sort_by', params.sort_by);
   if (params?.sort_dir) searchParams.set('sort_dir', params.sort_dir);
 
-  const result = await executeServerAction<PaginatedResponse<ApprovalApiData>>({
+  const result = await executeServerAction<PaginatedApiResponse<ApprovalApiData>>({
     url: `${API_URL}/api/v1/approvals/drafts?${searchParams.toString()}`,
     errorMessage: '기안함 목록 조회에 실패했습니다.',
   });
diff --git a/src/components/approval/ReferenceBox/actions.ts b/src/components/approval/ReferenceBox/actions.ts
index 4ccaa7bf..01709300 100644
--- a/src/components/approval/ReferenceBox/actions.ts
+++ b/src/components/approval/ReferenceBox/actions.ts
@@ -12,20 +12,13 @@
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { ReferenceRecord, ApprovalType, DocumentStatus } from './types';
 
 // ============================================
 // API 응답 타입 정의
 // ============================================
 
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
-
 interface ReferenceApiData {
   id: number;
   document_number: string;
@@ -108,7 +101,7 @@ export async function getReferences(params?: {
   if (params?.sort_by) searchParams.set('sort_by', params.sort_by);
   if (params?.sort_dir) searchParams.set('sort_dir', params.sort_dir);
 
-  const result = await executeServerAction<PaginatedResponse<ReferenceApiData>>({
+  const result = await executeServerAction<PaginatedApiResponse<ReferenceApiData>>({
     url: `${API_URL}/api/v1/approvals/reference?${searchParams.toString()}`,
     errorMessage: '참조 목록 조회에 실패했습니다.',
   });
diff --git a/src/components/attendance/actions.ts b/src/components/attendance/actions.ts
index fdd81beb..7b174016 100644
--- a/src/components/attendance/actions.ts
+++ b/src/components/attendance/actions.ts
@@ -2,6 +2,7 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import { getTodayString } from '@/utils/date';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
@@ -37,13 +38,7 @@ export interface AttendanceRecord {
   updatedAt: string;
 }
 
-interface AttendancePaginatedResponse {
-  current_page: number;
-  data: Record<string, unknown>[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
+type AttendancePaginatedResponse = PaginatedApiResponse<Record<string, unknown>>;
 
 // ===== 변환 =====
 function transformApiToFrontend(apiData: Record<string, unknown>): AttendanceRecord {
diff --git a/src/components/hr/AttendanceManagement/actions.ts b/src/components/hr/AttendanceManagement/actions.ts
index 27323329..4a630295 100644
--- a/src/components/hr/AttendanceManagement/actions.ts
+++ b/src/components/hr/AttendanceManagement/actions.ts
@@ -16,6 +16,7 @@
 
 
 import { executeServerAction } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { cookies } from 'next/headers';
 import type {
@@ -26,18 +27,6 @@ import type {
   EmployeeOption,
 } from './types';
 
-// ============================================
-// API 응답 타입 정의
-// ============================================
-
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
-
 // ============================================
 // 헬퍼 함수
 // ============================================
@@ -171,7 +160,7 @@ interface EmployeeApiData {
 }
 
 export async function getEmployeesForAttendance(): Promise<EmployeeOption[]> {
-  const result = await executeServerAction<PaginatedResponse<EmployeeApiData>>({
+  const result = await executeServerAction<PaginatedApiResponse<EmployeeApiData>>({
     url: `${API_URL}/v1/employees?per_page=100&status=active`,
     errorMessage: '사원 목록 조회에 실패했습니다.',
   });
@@ -208,7 +197,7 @@ export async function getAttendances(params?: {
   if (params?.sort_by) searchParams.set('sort_by', params.sort_by);
   if (params?.sort_dir) searchParams.set('sort_dir', params.sort_dir);
 
-  const result = await executeServerAction<PaginatedResponse<AttendanceApiData>>({
+  const result = await executeServerAction<PaginatedApiResponse<AttendanceApiData>>({
     url: `${API_URL}/v1/attendances?${searchParams.toString()}`,
     errorMessage: '근태 목록 조회에 실패했습니다.',
   });
diff --git a/src/components/hr/EmployeeManagement/actions.ts b/src/components/hr/EmployeeManagement/actions.ts
index f64d0297..61d1016e 100644
--- a/src/components/hr/EmployeeManagement/actions.ts
+++ b/src/components/hr/EmployeeManagement/actions.ts
@@ -17,6 +17,7 @@
 
 
 import { executeServerAction } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { cookies } from 'next/headers';
 import type { Employee, EmployeeFormData, EmployeeStats } from './types';
@@ -32,14 +33,6 @@ interface ApiResponse<T> {
   message: string;
 }
 
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
-
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
 // ============================================
@@ -61,7 +54,7 @@ export async function getEmployees(params?: {
   if (params?.sort_by) searchParams.set('sort_by', params.sort_by);
   if (params?.sort_dir) searchParams.set('sort_dir', params.sort_dir);
 
-  const result = await executeServerAction<PaginatedResponse<EmployeeApiData>>({
+  const result = await executeServerAction<PaginatedApiResponse<EmployeeApiData>>({
     url: `${API_URL}/api/v1/employees?${searchParams.toString()}`,
     errorMessage: '직원 목록 조회에 실패했습니다.',
   });
diff --git a/src/components/hr/VacationManagement/actions.ts b/src/components/hr/VacationManagement/actions.ts
index e6ed7cba..58f8c408 100644
--- a/src/components/hr/VacationManagement/actions.ts
+++ b/src/components/hr/VacationManagement/actions.ts
@@ -23,6 +23,7 @@
 
 
 import { executeServerAction } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 
 // ============================================
 // 타입 정의
@@ -164,14 +165,6 @@ interface ApiResponse<T> {
   message: string;
 }
 
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
-
 // API URL
 const API_URL = `${process.env.NEXT_PUBLIC_API_URL}/api`;
 
@@ -259,7 +252,7 @@ export async function getLeaves(params?: GetLeavesParams): Promise<{
     if (params.page) searchParams.append('page', params.page.toString());
   }
   const queryString = searchParams.toString();
-  const result = await executeServerAction<PaginatedResponse<Record<string, unknown>>>({
+  const result = await executeServerAction<PaginatedApiResponse<Record<string, unknown>>>({
     url: `${API_URL}/v1/leaves${queryString ? `?${queryString}` : ''}`,
     errorMessage: '휴가 목록 조회에 실패했습니다.',
   });
@@ -420,7 +413,7 @@ export async function getLeaveBalances(params?: GetLeaveBalancesParams): Promise
     if (params.page) searchParams.append('page', params.page.toString());
   }
   const queryString = searchParams.toString();
-  const result = await executeServerAction<PaginatedResponse<Record<string, unknown>>>({
+  const result = await executeServerAction<PaginatedApiResponse<Record<string, unknown>>>({
     url: `${API_URL}/v1/leaves/balances${queryString ? `?${queryString}` : ''}`,
     errorMessage: '휴가 사용현황 조회에 실패했습니다.',
   });
@@ -539,7 +532,7 @@ export async function getLeaveGrants(params?: GetLeaveGrantsParams): Promise<{
     if (params.page) searchParams.append('page', params.page.toString());
   }
   const queryString = searchParams.toString();
-  const result = await executeServerAction<PaginatedResponse<Record<string, unknown>>>({
+  const result = await executeServerAction<PaginatedApiResponse<Record<string, unknown>>>({
     url: `${API_URL}/v1/leaves/grants${queryString ? `?${queryString}` : ''}`,
     errorMessage: '휴가 부여 이력 조회에 실패했습니다.',
   });
@@ -620,8 +613,8 @@ export interface EmployeeOption {
 
 /** 활성 직원 목록 조회 (휴가 신청/부여용) */
 export async function getActiveEmployees(): Promise<{ success: boolean; data?: EmployeeOption[]; error?: string }> {
-  interface EmployeePaginatedResponse { data: Record<string, unknown>[]; total: number }
-  const result = await executeServerAction<EmployeePaginatedResponse>({
+  interface EmployeePaginatedApiResponse { data: Record<string, unknown>[]; total: number }
+  const result = await executeServerAction<EmployeePaginatedApiResponse>({
     url: `${API_URL}/v1/employees?status=active&per_page=100`,
     errorMessage: '직원 목록 조회에 실패했습니다.',
   });
diff --git a/src/components/material/ReceivingManagement/SupplierSearchModal.tsx b/src/components/material/ReceivingManagement/SupplierSearchModal.tsx
index 467fb9ba..7268981b 100644
--- a/src/components/material/ReceivingManagement/SupplierSearchModal.tsx
+++ b/src/components/material/ReceivingManagement/SupplierSearchModal.tsx
@@ -1,24 +1,15 @@
 /**
  * 발주처(매입 거래처) 검색 모달
  *
- * - 거래처명으로 검색
+ * SearchableSelectionModal 공통 컴포넌트 기반
  * - 매입 가능 거래처만 표시 (client_type: PURCHASE, BOTH)
- * - ItemSearchModal과 동일한 Dialog + 클라이언트 프록시 패턴
  * - 최소 입력 조건: 한글 완성형 1자 또는 영문 2자 이상
  */
 
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
-import { Search, X, Loader2 } from 'lucide-react';
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
+import { useCallback } from 'react';
+import { SearchableSelectionModal } from '@/components/organisms/SearchableSelectionModal';
 
 // =============================================================================
 // 타입
@@ -40,7 +31,7 @@ interface SupplierSearchModalProps {
 }
 
 // =============================================================================
-// API 응답 변환
+// API
 // =============================================================================
 
 interface ApiClientResponse {
@@ -63,20 +54,13 @@ function transformClientFromApi(apiClient: ApiClientResponse): SupplierItem {
   };
 }
 
-/**
- * 매입 가능 거래처 조회 (클라이언트 프록시 경유)
- * client_type: PURCHASE 또는 BOTH
- */
 async function fetchPurchaseClients(search?: string): Promise<SupplierItem[]> {
   const params = new URLSearchParams();
   if (search) params.set('q', search);
   params.set('size', '50');
-  // 매입 가능 거래처만 (PURCHASE, BOTH)
   params.set('client_type', 'PURCHASE,BOTH');
 
-  const url = `/api/proxy/clients?${params.toString()}`;
-
-  const response = await fetch(url, {
+  const response = await fetch(`/api/proxy/clients?${params.toString()}`, {
     method: 'GET',
     headers: { 'Content-Type': 'application/json' },
     credentials: 'include',
@@ -87,7 +71,6 @@ async function fetchPurchaseClients(search?: string): Promise<SupplierItem[]> {
   }
 
   const result = await response.json();
-
   let rawItems: ApiClientResponse[] = [];
 
   if (result.success && result.data) {
@@ -107,9 +90,6 @@ async function fetchPurchaseClients(search?: string): Promise<SupplierItem[]> {
 // 유효성 검사
 // =============================================================================
 
-/**
- * 검색어 유효성: 한글 완성형 1자 이상 또는 영문 2자 이상
- */
 function isValidSearchQuery(query: string): boolean {
   if (!query || !query.trim()) return false;
   const trimmed = query.trim();
@@ -130,139 +110,51 @@ export function SupplierSearchModal({
   onOpenChange,
   onSelectSupplier,
 }: SupplierSearchModalProps) {
-  const [searchQuery, setSearchQuery] = useState('');
-  const [suppliers, setSuppliers] = useState<SupplierItem[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // 거래처 목록 조회
-  const loadSuppliers = useCallback(async (search?: string) => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const data = await fetchPurchaseClients(search);
-      setSuppliers(data);
-    } catch (err) {
-      console.error('[SupplierSearchModal] 거래처 조회 오류:', err);
-      setError('거래처 목록을 불러오는데 실패했습니다.');
-      setSuppliers([]);
-    } finally {
-      setIsLoading(false);
-    }
+  const handleFetchData = useCallback(async (query: string) => {
+    return fetchPurchaseClients(query || undefined);
   }, []);
 
-  // 모달 열릴 때 초기화
-  useEffect(() => {
-    if (open) {
-      setSuppliers([]);
-      setError(null);
-    }
-  }, [open]);
-
-  // 검색어 변경 시 디바운스 검색
-  useEffect(() => {
-    if (!open) return;
-
-    if (!isValidSearchQuery(searchQuery)) {
-      setSuppliers([]);
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      loadSuppliers(searchQuery);
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, [searchQuery, open, loadSuppliers]);
-
-  const handleSelect = (supplier: SupplierItem) => {
+  const handleSelect = useCallback((supplier: SupplierItem) => {
     onSelectSupplier({ name: supplier.name, code: supplier.clientCode });
-    onOpenChange(false);
-    setSearchQuery('');
-  };
-
-  const handleClose = () => {
-    onOpenChange(false);
-    setSearchQuery('');
-  };
+  }, [onSelectSupplier]);
 
   return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle>발주처 검색</DialogTitle>
-        </DialogHeader>
-
-        {/* 검색 입력 */}
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-          <Input
-            placeholder="거래처명 검색..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 pr-10"
-          />
-          {searchQuery && (
-            <button
-              onClick={() => setSearchQuery('')}
-              className="absolute right-3 top-1/2 -translate-y-1/2"
-            >
-              <X className="h-4 w-4 text-gray-400 hover:text-gray-600" />
-            </button>
-          )}
-        </div>
-
-        {/* 거래처 목록 */}
-        <div className="max-h-[400px] overflow-y-auto border rounded-lg">
-          {isLoading ? (
-            <div className="flex items-center justify-center p-8 text-gray-500">
-              <Loader2 className="h-5 w-5 animate-spin mr-2" />
-              <span>거래처 검색 중...</span>
-            </div>
-          ) : error ? (
-            <div className="p-4 text-center text-red-500 text-sm">
-              {error}
-            </div>
-          ) : suppliers.length === 0 ? (
-            <div className="p-4 text-center text-gray-500 text-sm">
-              {!searchQuery
-                ? '한글 1자(완성형) 또는 영문 2자 이상 입력하세요'
-                : !isValidSearchQuery(searchQuery)
-                ? '한글 1자(완성형) 또는 영문 2자 이상 입력하세요'
-                : '검색 결과가 없습니다'}
-            </div>
-          ) : (
-            <div className="divide-y">
-              {suppliers.map((supplier, index) => (
-                <div
-                  key={`${supplier.id}-${index}`}
-                  onClick={() => handleSelect(supplier)}
-                  className="p-3 hover:bg-blue-50 cursor-pointer transition-colors"
-                >
-                  <div className="flex items-center justify-between">
-                    <span className="font-medium text-gray-900">{supplier.name}</span>
-                    {supplier.clientCode && (
-                      <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
-                        {supplier.clientCode}
-                      </span>
-                    )}
-                  </div>
-                  {supplier.contactPerson && (
-                    <p className="text-xs text-gray-400 mt-1">담당: {supplier.contactPerson}</p>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* 거래처 개수 표시 */}
-        {!isLoading && !error && (
-          <div className="text-xs text-gray-400 text-right">
-            총 {suppliers.length}개 거래처
+    <SearchableSelectionModal<SupplierItem>
+      open={open}
+      onOpenChange={onOpenChange}
+      title="발주처 검색"
+      searchPlaceholder="거래처명 검색..."
+      fetchData={handleFetchData}
+      keyExtractor={(s) => `${s.id}`}
+      validateSearch={isValidSearchQuery}
+      invalidSearchMessage="한글 1자(완성형) 또는 영문 2자 이상 입력하세요"
+      emptyQueryMessage="한글 1자(완성형) 또는 영문 2자 이상 입력하세요"
+      loadingMessage="거래처 검색 중..."
+      dialogClassName="sm:max-w-[500px]"
+      infoText={(items, isLoading) =>
+        !isLoading ? (
+          <span className="text-xs text-gray-400 text-right block">
+            총 {items.length}개 거래처
+          </span>
+        ) : null
+      }
+      mode="single"
+      onSelect={handleSelect}
+      renderItem={(supplier) => (
+        <div className="p-3 hover:bg-blue-50 transition-colors">
+          <div className="flex items-center justify-between">
+            <span className="font-medium text-gray-900">{supplier.name}</span>
+            {supplier.clientCode && (
+              <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
+                {supplier.clientCode}
+              </span>
+            )}
           </div>
-        )}
-      </DialogContent>
-    </Dialog>
+          {supplier.contactPerson && (
+            <p className="text-xs text-gray-400 mt-1">담당: {supplier.contactPerson}</p>
+          )}
+        </div>
+      )}
+    />
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/material/ReceivingManagement/actions.ts b/src/components/material/ReceivingManagement/actions.ts
index bc74d8ac..5e17abbb 100644
--- a/src/components/material/ReceivingManagement/actions.ts
+++ b/src/components/material/ReceivingManagement/actions.ts
@@ -18,6 +18,7 @@ const USE_MOCK_DATA = false;
 
 
 import { serverFetch } from '@/lib/api/fetch-wrapper';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { executeServerAction } from '@/lib/api/execute-server-action';
 
@@ -360,13 +361,7 @@ interface ReceivingApiData {
   has_inspection_template?: boolean;
 }
 
-interface ReceivingApiPaginatedResponse {
-  data: ReceivingApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type ReceivingApiPaginatedResponse = PaginatedApiResponse<ReceivingApiData>;
 
 interface ReceivingApiStatsResponse {
   receiving_pending_count: number;
diff --git a/src/components/material/StockStatus/actions.ts b/src/components/material/StockStatus/actions.ts
index 72d74926..ea912018 100644
--- a/src/components/material/StockStatus/actions.ts
+++ b/src/components/material/StockStatus/actions.ts
@@ -12,6 +12,7 @@
 
 
 import { executeServerAction } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type {
   StockItem,
   StockDetail,
@@ -84,13 +85,7 @@ interface StockLotApiData {
   updated_at?: string;
 }
 
-interface ItemApiPaginatedResponse {
-  data: ItemApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type ItemApiPaginatedResponse = PaginatedApiResponse<ItemApiData>;
 
 interface StockApiStatsResponse {
   total_items: number;
diff --git a/src/components/orders/QuotationSelectDialog.tsx b/src/components/orders/QuotationSelectDialog.tsx
index acb4c90c..55d07412 100644
--- a/src/components/orders/QuotationSelectDialog.tsx
+++ b/src/components/orders/QuotationSelectDialog.tsx
@@ -1,25 +1,19 @@
-"use client";
-
 /**
  * 견적 선택 팝업
  *
- * 확정된 견적 목록에서 수주 전환할 견적을 선택하는 다이얼로그
- * API 연동: getQuotesForSelect (FINALIZED 상태 견적만 조회)
+ * SearchableSelectionModal 공통 컴포넌트 기반
+ * 확정된 견적 목록에서 수주 전환할 견적을 선택
  */
 
-import { useState, useEffect, useCallback } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
-import { Search, FileText, Check, Loader2 } from "lucide-react";
-import { formatAmount } from "@/utils/formatAmount";
-import { cn } from "@/lib/utils";
-import { getQuotesForSelect, type QuotationForSelect } from "./actions";
+'use client';
+
+import { useCallback } from 'react';
+import { FileText, Check } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { formatAmount } from '@/utils/formatAmount';
+import { cn } from '@/lib/utils';
+import { SearchableSelectionModal } from '@/components/organisms/SearchableSelectionModal';
+import { getQuotesForSelect, type QuotationForSelect } from './actions';
 
 interface QuotationSelectDialogProps {
   open: boolean;
@@ -31,13 +25,13 @@ interface QuotationSelectDialogProps {
 // 등급 배지 컴포넌트
 function GradeBadge({ grade }: { grade: string }) {
   const config: Record<string, { label: string; className: string }> = {
-    A: { label: "A (우량)", className: "bg-green-100 text-green-700 border-green-200" },
-    B: { label: "B (관리)", className: "bg-yellow-100 text-yellow-700 border-yellow-200" },
-    C: { label: "C (주의)", className: "bg-red-100 text-red-700 border-red-200" },
+    A: { label: 'A (우량)', className: 'bg-green-100 text-green-700 border-green-200' },
+    B: { label: 'B (관리)', className: 'bg-yellow-100 text-yellow-700 border-yellow-200' },
+    C: { label: 'C (주의)', className: 'bg-red-100 text-red-700 border-red-200' },
   };
   const cfg = config[grade] || config.B;
   return (
-    <Badge variant="outline" className={cn("text-xs", cfg.className)}>
+    <Badge variant="outline" className={cn('text-xs', cfg.className)}>
       {cfg.label}
     </Badge>
   );
@@ -49,148 +43,71 @@ export function QuotationSelectDialog({
   onSelect,
   selectedId,
 }: QuotationSelectDialogProps) {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [quotations, setQuotations] = useState<QuotationForSelect[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // 견적 목록 조회
-  const fetchQuotations = useCallback(async (query?: string) => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await getQuotesForSelect({ q: query, size: 50 });
-      if (result.success && result.data) {
-        setQuotations(result.data.items);
-      } else {
-        setError(result.error || "견적 목록 조회에 실패했습니다.");
-        setQuotations([]);
-      }
-    } catch {
-      setError("서버 오류가 발생했습니다.");
-      setQuotations([]);
-    } finally {
-      setIsLoading(false);
+  const handleFetchData = useCallback(async (query: string) => {
+    const result = await getQuotesForSelect({ q: query || undefined, size: 50 });
+    if (result.success && result.data) {
+      return result.data.items;
     }
+    throw new Error(result.error || '견적 목록 조회에 실패했습니다.');
   }, []);
 
-  // 다이얼로그 열릴 때 데이터 로드 + 검색어 변경 시 디바운스 적용
-  useEffect(() => {
-    if (!open) return;
-
-    // 검색어가 빈 문자열이면 즉시 호출 (다이얼로그 열림 시)
-    // 검색어가 있으면 디바운스 적용
-    const delay = searchTerm === "" ? 0 : 300;
-
-    const timer = setTimeout(() => {
-      fetchQuotations(searchTerm || undefined);
-    }, delay);
-
-    return () => clearTimeout(timer);
-  }, [searchTerm, open, fetchQuotations]);
-
-  const handleSelect = (quotation: QuotationForSelect) => {
-    onSelect(quotation);
-    onOpenChange(false);
-  };
-
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <FileText className="h-5 w-5" />
-            견적 선택
-          </DialogTitle>
-        </DialogHeader>
-
-        {/* 검색창 */}
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="견적번호, 거래처, 현장명 검색..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-9"
-          />
-        </div>
-
-        {/* 안내 문구 */}
-        <div className="text-sm text-muted-foreground">
-          {isLoading ? (
-            <span className="flex items-center gap-2">
-              <Loader2 className="h-3 w-3 animate-spin" />
-              견적 목록을 불러오는 중...
-            </span>
-          ) : error ? (
-            <span className="text-red-500">{error}</span>
-          ) : (
-            `전환 가능한 견적 ${quotations.length}건 (최종확정 상태)`
+    <SearchableSelectionModal<QuotationForSelect>
+      open={open}
+      onOpenChange={onOpenChange}
+      title={
+        <span className="flex items-center gap-2">
+          <FileText className="h-5 w-5" />
+          견적 선택
+        </span>
+      }
+      searchPlaceholder="견적번호, 거래처, 현장명 검색..."
+      fetchData={handleFetchData}
+      keyExtractor={(q) => q.id}
+      loadOnOpen
+      dialogClassName="max-w-2xl max-h-[80vh] overflow-hidden flex flex-col"
+      listContainerClassName="flex-1 overflow-y-auto space-y-3 pr-2"
+      infoText={(items, isLoading) =>
+        isLoading
+          ? null
+          : `전환 가능한 견적 ${items.length}건 (최종확정 상태)`
+      }
+      mode="single"
+      onSelect={onSelect}
+      renderItem={(quotation) => (
+        <div
+          className={cn(
+            'p-4 border rounded-lg hover:bg-muted/50 hover:border-primary/50 transition-colors',
+            selectedId === quotation.id && 'border-primary bg-primary/5'
           )}
-        </div>
-
-        {/* 견적 목록 */}
-        <div className="flex-1 overflow-y-auto space-y-3 pr-2">
-          {isLoading ? (
-            <div className="flex items-center justify-center py-8">
-              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+        >
+          <div className="flex items-center justify-between mb-2">
+            <div className="flex items-center gap-2">
+              <code className="text-sm font-mono bg-gray-100 px-2 py-0.5 rounded">
+                {quotation.quoteNumber}
+              </code>
+              <GradeBadge grade={quotation.grade} />
             </div>
-          ) : (
-            <>
-              {quotations.map((quotation) => (
-                <div
-                  key={quotation.id}
-                  onClick={() => handleSelect(quotation)}
-                  className={cn(
-                    "p-4 border rounded-lg cursor-pointer transition-colors",
-                    "hover:bg-muted/50 hover:border-primary/50",
-                    selectedId === quotation.id && "border-primary bg-primary/5"
-                  )}
-                >
-                  {/* 상단: 견적번호 + 등급 */}
-                  <div className="flex items-center justify-between mb-2">
-                    <div className="flex items-center gap-2">
-                      <code className="text-sm font-mono bg-gray-100 px-2 py-0.5 rounded">
-                        {quotation.quoteNumber}
-                      </code>
-                      <GradeBadge grade={quotation.grade} />
-                    </div>
-                    {selectedId === quotation.id && (
-                      <Check className="h-5 w-5 text-primary" />
-                    )}
-                  </div>
-
-                  {/* 발주처 */}
-                  <div className="font-medium text-base mb-1">
-                    {quotation.client}
-                  </div>
-
-                  {/* 현장명 + 금액 */}
-                  <div className="flex items-center justify-between text-sm">
-                    <span className="text-muted-foreground">
-                      [{quotation.siteName}]
-                    </span>
-                    <span className="font-medium text-green-600">
-                      {formatAmount(quotation.amount)}원
-                    </span>
-                  </div>
-
-                  {/* 품목 수 */}
-                  <div className="text-xs text-muted-foreground mt-1 text-right">
-                    {quotation.itemCount}개 품목
-                  </div>
-                </div>
-              ))}
-
-              {quotations.length === 0 && !error && (
-                <div className="text-center py-8 text-muted-foreground">
-                  검색 결과가 없습니다.
-                </div>
-              )}
-            </>
-          )}
+            {selectedId === quotation.id && (
+              <Check className="h-5 w-5 text-primary" />
+            )}
+          </div>
+          <div className="font-medium text-base mb-1">
+            {quotation.client}
+          </div>
+          <div className="flex items-center justify-between text-sm">
+            <span className="text-muted-foreground">
+              [{quotation.siteName}]
+            </span>
+            <span className="font-medium text-green-600">
+              {formatAmount(quotation.amount)}원
+            </span>
+          </div>
+          <div className="text-xs text-muted-foreground mt-1 text-right">
+            {quotation.itemCount}개 품목
+          </div>
         </div>
-      </DialogContent>
-    </Dialog>
+      )}
+    />
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/orders/actions.ts b/src/components/orders/actions.ts
index c09dbed9..1e005723 100644
--- a/src/components/orders/actions.ts
+++ b/src/components/orders/actions.ts
@@ -1,6 +1,7 @@
 'use server';
 
 import { executeServerAction } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 
 // ============================================================================
 // API 타입 정의
@@ -219,14 +220,6 @@ interface ApiResponse<T> {
   data: T;
 }
 
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  last_page: number;
-  per_page: number;
-  total: number;
-}
-
 // ============================================================================
 // Frontend 타입 정의
 // ============================================================================
@@ -815,7 +808,7 @@ export async function getOrders(params?: {
   if (params?.date_from) searchParams.set('date_from', params.date_from);
   if (params?.date_to) searchParams.set('date_to', params.date_to);
 
-  const result = await executeServerAction<PaginatedResponse<ApiOrder>>({
+  const result = await executeServerAction<PaginatedApiResponse<ApiOrder>>({
     url: `${API_URL}/api/v1/orders?${searchParams.toString()}`,
     errorMessage: '목록 조회에 실패했습니다.',
   });
@@ -1179,7 +1172,7 @@ export async function getQuotesForSelect(params?: {
   if (params?.page) searchParams.set('page', String(params.page));
   if (params?.size) searchParams.set('size', String(params.size || 50));
 
-  const result = await executeServerAction<PaginatedResponse<ApiQuoteForSelect>>({
+  const result = await executeServerAction<PaginatedApiResponse<ApiQuoteForSelect>>({
     url: `${API_URL}/api/v1/quotes?${searchParams.toString()}`,
     errorMessage: '견적 목록 조회에 실패했습니다.',
   });
diff --git a/src/components/organisms/SearchableSelectionModal/SearchableSelectionModal.tsx b/src/components/organisms/SearchableSelectionModal/SearchableSelectionModal.tsx
new file mode 100644
index 00000000..394625be
--- /dev/null
+++ b/src/components/organisms/SearchableSelectionModal/SearchableSelectionModal.tsx
@@ -0,0 +1,252 @@
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { Search, X, Loader2 } from 'lucide-react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+
+import { useSearchableData } from './useSearchableData';
+import type { SearchableSelectionModalProps } from './types';
+
+export function SearchableSelectionModal<T>(props: SearchableSelectionModalProps<T>) {
+  const {
+    open,
+    onOpenChange,
+    title,
+    searchPlaceholder = '검색...',
+    fetchData,
+    keyExtractor,
+    renderItem,
+    searchMode = 'debounce',
+    debounceDelay = 300,
+    validateSearch,
+    invalidSearchMessage,
+    loadOnOpen = false,
+    emptyQueryMessage = '검색어를 입력하세요',
+    noResultMessage = '검색 결과가 없습니다.',
+    loadingMessage = '검색 중...',
+    dialogClassName,
+    listContainerClassName = 'max-h-[400px] overflow-y-auto border rounded-lg',
+    listWrapper,
+    infoText,
+    mode,
+  } = props;
+
+  const {
+    searchQuery,
+    setSearchQuery,
+    items,
+    isLoading,
+    error,
+    triggerSearch,
+    handleSearchKeyDown,
+  } = useSearchableData<T>({
+    open,
+    fetchData,
+    searchMode,
+    debounceDelay,
+    validateSearch,
+    loadOnOpen,
+  });
+
+  // 다중선택 상태
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  // 모달 열릴 때 선택 초기화
+  useEffect(() => {
+    if (open) {
+      setSelectedIds(new Set());
+    }
+  }, [open]);
+
+  // 단일선택 핸들러
+  const handleSingleSelect = useCallback((item: T) => {
+    if (mode === 'single') {
+      (props as { onSelect: (item: T) => void }).onSelect(item);
+      onOpenChange(false);
+    }
+  }, [mode, props, onOpenChange]);
+
+  // 다중선택 토글
+  const handleToggle = useCallback((id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  // 전체선택 토글
+  const handleToggleAll = useCallback(() => {
+    setSelectedIds((prev) => {
+      if (prev.size === items.length) {
+        return new Set();
+      }
+      return new Set(items.map((item) => keyExtractor(item)));
+    });
+  }, [items, keyExtractor]);
+
+  // 다중선택 확인
+  const handleConfirm = useCallback(() => {
+    if (mode === 'multiple') {
+      const selectedItems = items.filter((item) => selectedIds.has(keyExtractor(item)));
+      (props as { onSelect: (items: T[]) => void }).onSelect(selectedItems);
+      onOpenChange(false);
+    }
+  }, [mode, items, selectedIds, keyExtractor, props, onOpenChange]);
+
+  // 클릭 핸들러: 모드에 따라 분기
+  const handleItemClick = useCallback((item: T) => {
+    if (mode === 'single') {
+      handleSingleSelect(item);
+    } else {
+      handleToggle(keyExtractor(item));
+    }
+  }, [mode, handleSingleSelect, handleToggle, keyExtractor]);
+
+  const isAllSelected = items.length > 0 && selectedIds.size === items.length;
+  const isSelected = (item: T) => selectedIds.has(keyExtractor(item));
+
+  // 빈 상태 메시지 결정
+  const getEmptyMessage = () => {
+    if (error) return null; // error는 별도 표시
+    if (!searchQuery && !loadOnOpen) return emptyQueryMessage;
+    if (searchQuery && validateSearch && !validateSearch(searchQuery)) {
+      return invalidSearchMessage || emptyQueryMessage;
+    }
+    return noResultMessage;
+  };
+
+  // 리스트 콘텐츠 렌더링
+  const renderListContent = () => {
+    if (isLoading) {
+      return (
+        <div className="flex items-center justify-center p-8 text-muted-foreground">
+          <Loader2 className="h-5 w-5 animate-spin mr-2" />
+          <span>{loadingMessage}</span>
+        </div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className="p-4 text-center text-red-500 text-sm">
+          {error}
+        </div>
+      );
+    }
+
+    if (items.length === 0) {
+      return (
+        <div className="p-4 text-center text-muted-foreground text-sm">
+          {getEmptyMessage()}
+        </div>
+      );
+    }
+
+    const itemElements = items.map((item) => (
+      <div key={keyExtractor(item)} onClick={() => handleItemClick(item)} className="cursor-pointer">
+        {renderItem(item, isSelected(item))}
+      </div>
+    ));
+
+    if (listWrapper) {
+      const selectState = mode === 'multiple'
+        ? { isAllSelected, onToggleAll: handleToggleAll }
+        : undefined;
+      return listWrapper(<>{itemElements}</>, selectState);
+    }
+
+    return <div className="divide-y">{itemElements}</div>;
+  };
+
+  const multiProps = mode === 'multiple' ? props as Extract<typeof props, { mode: 'multiple' }> : null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className={dialogClassName}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+
+        {/* 검색 입력 */}
+        {searchMode === 'enter' ? (
+          <div className="flex gap-2">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+              <Input
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                onKeyDown={handleSearchKeyDown}
+                placeholder={searchPlaceholder}
+                className="pl-9"
+              />
+            </div>
+            <Button variant="outline" onClick={triggerSearch}>
+              검색
+            </Button>
+          </div>
+        ) : (
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder={searchPlaceholder}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="pl-10 pr-10"
+            />
+            {searchQuery && (
+              <button
+                onClick={() => setSearchQuery('')}
+                className="absolute right-3 top-1/2 -translate-y-1/2"
+              >
+                <X className="h-4 w-4 text-muted-foreground hover:text-foreground" />
+              </button>
+            )}
+          </div>
+        )}
+
+        {/* 정보 텍스트 */}
+        {infoText && (
+          <div className="text-sm text-muted-foreground">
+            {infoText(items, isLoading)}
+          </div>
+        )}
+
+        {/* 다중선택 헤더 (전체선택 등) */}
+        {mode === 'multiple' && multiProps?.renderHeader && (
+          multiProps.renderHeader({ isAllSelected, onToggleAll: handleToggleAll })
+        )}
+
+        {/* 리스트 */}
+        <div className={listContainerClassName}>
+          {renderListContent()}
+        </div>
+
+        {/* 다중선택 푸터 */}
+        {mode === 'multiple' && (
+          <DialogFooter>
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              취소
+            </Button>
+            <Button onClick={handleConfirm} disabled={selectedIds.size === 0}>
+              {multiProps?.confirmLabel || '선택'} ({selectedIds.size}건)
+            </Button>
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/organisms/SearchableSelectionModal/index.ts b/src/components/organisms/SearchableSelectionModal/index.ts
new file mode 100644
index 00000000..5caa3922
--- /dev/null
+++ b/src/components/organisms/SearchableSelectionModal/index.ts
@@ -0,0 +1,6 @@
+export { SearchableSelectionModal } from './SearchableSelectionModal';
+export type {
+  SearchableSelectionModalProps,
+  SingleSelectProps,
+  MultipleSelectProps,
+} from './types';
diff --git a/src/components/organisms/SearchableSelectionModal/types.ts b/src/components/organisms/SearchableSelectionModal/types.ts
new file mode 100644
index 00000000..8e42df8c
--- /dev/null
+++ b/src/components/organisms/SearchableSelectionModal/types.ts
@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+
+// =============================================================================
+// 공통 Props
+// =============================================================================
+
+interface BaseProps<T> {
+  /** 모달 열림 상태 */
+  open: boolean;
+  /** 모달 열림/닫힘 제어 */
+  onOpenChange: (open: boolean) => void;
+  /** 모달 제목 */
+  title: ReactNode;
+  /** 검색 placeholder */
+  searchPlaceholder?: string;
+  /** 데이터 조회 함수 (검색어 → 결과 배열) */
+  fetchData: (query: string) => Promise<T[]>;
+  /** 고유 키 추출 */
+  keyExtractor: (item: T) => string;
+  /** 아이템 렌더링 */
+  renderItem: (item: T, isSelected: boolean) => ReactNode;
+
+  // 검색 설정
+  /** 검색 모드: debounce(자동) vs enter(수동) */
+  searchMode?: 'debounce' | 'enter';
+  /** 디바운스 딜레이 (ms) - searchMode='debounce'일 때 */
+  debounceDelay?: number;
+  /** 검색어 유효성 검사 (false면 검색 안 함) */
+  validateSearch?: (query: string) => boolean;
+  /** 유효하지 않은 검색어일 때 메시지 */
+  invalidSearchMessage?: string;
+  /** 모달 열릴 때 자동 로드 여부 */
+  loadOnOpen?: boolean;
+  /** 검색어 없을 때 안내 메시지 */
+  emptyQueryMessage?: string;
+  /** 검색 결과 없을 때 메시지 */
+  noResultMessage?: string;
+  /** 로딩 메시지 */
+  loadingMessage?: string;
+
+  // 레이아웃
+  /** Dialog 최대 너비 클래스 */
+  dialogClassName?: string;
+  /** 리스트 컨테이너 클래스 */
+  listContainerClassName?: string;
+  /** 리스트 래퍼 (Table 헤더 등 커스텀 구조) */
+  listWrapper?: (children: ReactNode, selectState?: {
+    isAllSelected: boolean;
+    onToggleAll: () => void;
+  }) => ReactNode;
+  /** 푸터 상단 정보 영역 (예: "총 X건") */
+  infoText?: (items: T[], isLoading: boolean) => ReactNode;
+}
+
+// =============================================================================
+// 단일 선택
+// =============================================================================
+
+export interface SingleSelectProps<T> extends BaseProps<T> {
+  mode: 'single';
+  onSelect: (item: T) => void;
+}
+
+// =============================================================================
+// 다중 선택
+// =============================================================================
+
+export interface MultipleSelectProps<T> extends BaseProps<T> {
+  mode: 'multiple';
+  onSelect: (items: T[]) => void;
+  /** 확인 버튼 라벨 (기본: "선택") */
+  confirmLabel?: string;
+  /** 전체선택 허용 */
+  allowSelectAll?: boolean;
+  /** 헤더 영역 (전체선택 체크박스 등) */
+  renderHeader?: (params: {
+    isAllSelected: boolean;
+    onToggleAll: () => void;
+  }) => ReactNode;
+}
+
+export type SearchableSelectionModalProps<T> =
+  | SingleSelectProps<T>
+  | MultipleSelectProps<T>;
diff --git a/src/components/organisms/SearchableSelectionModal/useSearchableData.ts b/src/components/organisms/SearchableSelectionModal/useSearchableData.ts
new file mode 100644
index 00000000..654670e2
--- /dev/null
+++ b/src/components/organisms/SearchableSelectionModal/useSearchableData.ts
@@ -0,0 +1,119 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+
+interface UseSearchableDataOptions<T> {
+  open: boolean;
+  fetchData: (query: string) => Promise<T[]>;
+  searchMode: 'debounce' | 'enter';
+  debounceDelay: number;
+  validateSearch?: (query: string) => boolean;
+  loadOnOpen: boolean;
+}
+
+interface UseSearchableDataReturn<T> {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  items: T[];
+  isLoading: boolean;
+  error: string | null;
+  triggerSearch: () => void;
+  handleSearchKeyDown: (e: React.KeyboardEvent) => void;
+}
+
+export function useSearchableData<T>({
+  open,
+  fetchData,
+  searchMode,
+  debounceDelay,
+  validateSearch,
+  loadOnOpen,
+}: UseSearchableDataOptions<T>): UseSearchableDataReturn<T> {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [items, setItems] = useState<T[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const prevOpenRef = useRef(false);
+
+  // 실제 API 호출
+  const doFetch = useCallback(async (query: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const data = await fetchData(query);
+      setItems(data);
+    } catch (err) {
+      console.error('[useSearchableData] fetch error:', err);
+      setError('데이터를 불러오는데 실패했습니다.');
+      setItems([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [fetchData]);
+
+  // 모달 열릴 때 초기화 + loadOnOpen
+  useEffect(() => {
+    if (open && !prevOpenRef.current) {
+      // 방금 열림
+      setSearchQuery('');
+      setError(null);
+      if (loadOnOpen) {
+        doFetch('');
+      } else {
+        setItems([]);
+      }
+    }
+    if (!open && prevOpenRef.current) {
+      // 방금 닫힘
+      setItems([]);
+      setSearchQuery('');
+      setError(null);
+    }
+    prevOpenRef.current = open;
+  }, [open, loadOnOpen, doFetch]);
+
+  // 디바운스 모드: 검색어 변경 시 자동 검색
+  useEffect(() => {
+    if (!open || searchMode !== 'debounce') return;
+
+    // 검색어가 비어있고 loadOnOpen이면 이미 로드됨 → 스킵
+    if (!searchQuery && loadOnOpen) return;
+
+    // 검색어가 비어있고 loadOnOpen이 아니면 → 결과 초기화
+    if (!searchQuery && !loadOnOpen) {
+      setItems([]);
+      return;
+    }
+
+    // 유효성 검사
+    if (validateSearch && !validateSearch(searchQuery)) {
+      setItems([]);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      doFetch(searchQuery);
+    }, debounceDelay);
+
+    return () => clearTimeout(timer);
+  }, [searchQuery, open, searchMode, debounceDelay, validateSearch, doFetch, loadOnOpen]);
+
+  // 수동 검색 트리거 (enter 모드)
+  const triggerSearch = useCallback(() => {
+    doFetch(searchQuery);
+  }, [searchQuery, doFetch]);
+
+  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      triggerSearch();
+    }
+  }, [triggerSearch]);
+
+  return {
+    searchQuery,
+    setSearchQuery,
+    items,
+    isLoading,
+    error,
+    triggerSearch,
+    handleSearchKeyDown,
+  };
+}
diff --git a/src/components/organisms/index.ts b/src/components/organisms/index.ts
index 4051ef19..19dd1193 100644
--- a/src/components/organisms/index.ts
+++ b/src/components/organisms/index.ts
@@ -8,3 +8,5 @@ export { MobileCard, ListMobileCard, InfoField } from "./MobileCard";
 export type { MobileCardProps, InfoFieldProps } from "./MobileCard";
 export { EmptyState } from "./EmptyState";
 export { ScreenVersionHistory } from "./ScreenVersionHistory";
+export { SearchableSelectionModal } from "./SearchableSelectionModal";
+export type { SearchableSelectionModalProps, SingleSelectProps, MultipleSelectProps } from "./SearchableSelectionModal";
diff --git a/src/components/outbound/ShipmentManagement/actions.ts b/src/components/outbound/ShipmentManagement/actions.ts
index 50b59976..9dc54c7a 100644
--- a/src/components/outbound/ShipmentManagement/actions.ts
+++ b/src/components/outbound/ShipmentManagement/actions.ts
@@ -19,6 +19,7 @@
 
 
 import { executeServerAction } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type {
   ShipmentItem,
   ShipmentDetail,
@@ -111,13 +112,7 @@ interface ShipmentItemApiData {
   remarks?: string;
 }
 
-interface ShipmentApiPaginatedResponse {
-  data: ShipmentApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type ShipmentApiPaginatedResponse = PaginatedApiResponse<ShipmentApiData>;
 
 interface ShipmentApiStatsResponse {
   today_shipment_count: number;
diff --git a/src/components/process-management/actions.ts b/src/components/process-management/actions.ts
index 14c1bcaa..bd32738c 100644
--- a/src/components/process-management/actions.ts
+++ b/src/components/process-management/actions.ts
@@ -2,6 +2,7 @@
 
 
 import { executeServerAction } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { Process, ProcessFormData, ClassificationRule, IndividualItem, ProcessStep } from '@/types/process';
 
 // ============================================================================
@@ -65,14 +66,6 @@ interface ApiResponse<T> {
   data: T;
 }
 
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  last_page: number;
-  per_page: number;
-  total: number;
-}
-
 // ============================================================================
 // 데이터 변환 함수
 // ============================================================================
@@ -228,7 +221,7 @@ export async function getProcessList(params?: {
   if (params?.status) searchParams.set('status', params.status);
   if (params?.process_type) searchParams.set('process_type', params.process_type);
 
-  const result = await executeServerAction<PaginatedResponse<ApiProcess>>({
+  const result = await executeServerAction<PaginatedApiResponse<ApiProcess>>({
     url: `${API_URL}/api/v1/processes?${searchParams.toString()}`,
     errorMessage: '공정 목록 조회에 실패했습니다.',
   });
diff --git a/src/components/production/WorkOrders/SalesOrderSelectModal.tsx b/src/components/production/WorkOrders/SalesOrderSelectModal.tsx
index 3740ac11..8e69acdb 100644
--- a/src/components/production/WorkOrders/SalesOrderSelectModal.tsx
+++ b/src/components/production/WorkOrders/SalesOrderSelectModal.tsx
@@ -1,38 +1,19 @@
-'use client';
-
 /**
  * 수주 선택 모달
- * API 연동 완료 (2025-12-26)
+ *
+ * SearchableSelectionModal 공통 컴포넌트 기반
  */
 
-import { useState, useEffect, useCallback } from 'react';
-import { Search, FileText } from 'lucide-react';
-import { ContentSkeleton } from '@/components/ui/skeleton';
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
+'use client';
+
+import { useCallback } from 'react';
 import { Badge } from '@/components/ui/badge';
 import { toast } from 'sonner';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
+import { SearchableSelectionModal } from '@/components/organisms/SearchableSelectionModal';
 import { getSalesOrdersForWorkOrder } from './actions';
 import type { SalesOrder } from './types';
 
-// Debounce 훅
-function useDebounce<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-
-  return debouncedValue;
-}
-
 interface SalesOrderSelectModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -44,23 +25,13 @@ export function SalesOrderSelectModal({
   onOpenChange,
   onSelect,
 }: SalesOrderSelectModalProps) {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [salesOrders, setSalesOrders] = useState<SalesOrder[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  // 디바운스된 검색어 (300ms 딜레이)
-  const debouncedSearchTerm = useDebounce(searchTerm, 300);
-
-  // API로 수주 목록 로드
-  const loadSalesOrders = useCallback(async () => {
-    setIsLoading(true);
+  const handleFetchData = useCallback(async (query: string) => {
     try {
       const result = await getSalesOrdersForWorkOrder({
-        q: debouncedSearchTerm || undefined,
+        q: query || undefined,
       });
       if (result.success) {
-        // API 응답을 SalesOrder 타입으로 변환
-        const orders: SalesOrder[] = result.data.map((item) => ({
+        return result.data.map((item) => ({
           id: String(item.id),
           orderNo: item.orderNo,
           client: item.client,
@@ -70,94 +41,61 @@ export function SalesOrderSelectModal({
           itemCount: item.itemCount,
           splitCount: item.splitCount,
         }));
-        setSalesOrders(orders);
-      } else {
-        toast.error(result.error || '수주 목록 조회에 실패했습니다.');
       }
+      toast.error(result.error || '수주 목록 조회에 실패했습니다.');
+      return [];
     } catch (error) {
       if (isNextRedirectError(error)) throw error;
       console.error('[SalesOrderSelectModal] loadSalesOrders error:', error);
       toast.error('수주 목록 로드 중 오류가 발생했습니다.');
-    } finally {
-      setIsLoading(false);
+      return [];
     }
-  }, [debouncedSearchTerm]);
-
-  // 모달이 열릴 때 데이터 로드
-  useEffect(() => {
-    if (open) {
-      loadSalesOrders();
-    }
-  }, [open, loadSalesOrders]);
-
-  const handleSelect = (order: SalesOrder) => {
-    onSelect(order);
-    onOpenChange(false);
-  };
+  }, []);
 
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>수주 선택</DialogTitle>
-        </DialogHeader>
-
-        {/* 검색 */}
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-          <Input
-            placeholder="수주번호, 거래처, 현장명 검색..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="pl-9"
-          />
-        </div>
-
-        {/* 안내 문구 */}
-        <p className="text-sm text-muted-foreground">
-          작업지시 가능한 수주 {salesOrders.length}건 (등록 상태 &amp; 생산지시 미생성)
-        </p>
-
-        {/* 수주 목록 */}
-        <div className="max-h-[400px] overflow-y-auto space-y-2">
-          {isLoading ? (
-            <ContentSkeleton type="cards" rows={4} />
-          ) : salesOrders.map((order) => (
-            <div
-              key={order.id}
-              onClick={() => handleSelect(order)}
-              className="p-4 border rounded-lg cursor-pointer hover:bg-muted/50 transition-colors"
-            >
-              <div className="flex items-start justify-between mb-2">
-                <div className="flex items-center gap-2">
-                  <span className="font-semibold">{order.orderNo}</span>
-                  <Badge variant="secondary" className="text-xs">
-                    {order.status}
-                  </Badge>
-                </div>
-                <div className="text-sm text-right">
-                  <span className="text-muted-foreground">납기: </span>
-                  <span>{order.dueDate}</span>
-                </div>
-              </div>
-              <div className="text-sm text-muted-foreground mb-1">
-                {order.client}
-              </div>
-              <div className="text-sm mb-2">{order.projectName}</div>
-              <div className="flex items-center gap-4 text-xs text-muted-foreground">
-                <span>{order.itemCount}개 품목</span>
-                <span>분할 {order.splitCount}건</span>
-              </div>
+    <SearchableSelectionModal<SalesOrder>
+      open={open}
+      onOpenChange={onOpenChange}
+      title="수주 선택"
+      searchPlaceholder="수주번호, 거래처, 현장명 검색..."
+      fetchData={handleFetchData}
+      keyExtractor={(order) => order.id}
+      loadOnOpen
+      dialogClassName="sm:max-w-lg"
+      listContainerClassName="max-h-[400px] overflow-y-auto space-y-2"
+      noResultMessage=""
+      infoText={(items, isLoading) =>
+        !isLoading ? (
+          <span>작업지시 가능한 수주 {items.length}건 (등록 상태 &amp; 생산지시 미생성)</span>
+        ) : null
+      }
+      mode="single"
+      onSelect={onSelect}
+      renderItem={(order) => (
+        <div className="p-4 border rounded-lg hover:bg-muted/50 transition-colors">
+          <div className="flex items-start justify-between mb-2">
+            <div className="flex items-center gap-2">
+              <span className="font-semibold">{order.orderNo}</span>
+              <Badge variant="secondary" className="text-xs">
+                {order.status}
+              </Badge>
             </div>
-          ))}
-          {!isLoading && salesOrders.length === 0 && (
-            <div className="py-8 text-center text-muted-foreground">
-              <FileText className="w-8 h-8 mx-auto mb-2 opacity-50" />
-              <p>검색 결과가 없습니다.</p>
+            <div className="text-sm text-right">
+              <span className="text-muted-foreground">납기: </span>
+              <span>{order.dueDate}</span>
             </div>
-          )}
+          </div>
+          <div className="text-sm text-muted-foreground mb-1">
+            {order.client}
+          </div>
+          <div className="text-sm mb-2">{order.projectName}</div>
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <span>{order.itemCount}개 품목</span>
+            <span>분할 {order.splitCount}건</span>
+          </div>
         </div>
-      </DialogContent>
-    </Dialog>
+      )}
+      listWrapper={undefined}
+    />
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/quality/InspectionManagement/OrderSelectModal.tsx b/src/components/quality/InspectionManagement/OrderSelectModal.tsx
index e82da4dd..4821eceb 100644
--- a/src/components/quality/InspectionManagement/OrderSelectModal.tsx
+++ b/src/components/quality/InspectionManagement/OrderSelectModal.tsx
@@ -1,26 +1,15 @@
-'use client';
-
 /**
- * 수주 선택 모달
+ * 수주 선택 모달 (다중선택)
  *
- * 기획서 기반 신규 생성:
- * - 검색 입력
+ * SearchableSelectionModal 공통 컴포넌트 기반
  * - 체크박스 테이블 (수주번호, 현장명, 납품일, 개소)
- * - 취소/선택 버튼
+ * - 전체선택/개별선택
  */
 
-import { useState, useCallback, useEffect } from 'react';
-import { Search, Loader2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
+'use client';
+
+import { useCallback } from 'react';
 import { Checkbox } from '@/components/ui/checkbox';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog';
 import {
   Table,
   TableBody,
@@ -30,6 +19,7 @@ import {
   TableRow,
 } from '@/components/ui/table';
 import { toast } from 'sonner';
+import { SearchableSelectionModal } from '@/components/organisms/SearchableSelectionModal';
 import { getOrderSelectList } from './actions';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import type { OrderSelectItem } from './types';
@@ -48,173 +38,73 @@ export function OrderSelectModal({
   onSelect,
   excludeIds = [],
 }: OrderSelectModalProps) {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [items, setItems] = useState<OrderSelectItem[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
-
-  // 데이터 로드
-  const loadItems = useCallback(async (q?: string) => {
-    setIsLoading(true);
+  const handleFetchData = useCallback(async (query: string) => {
     try {
-      const result = await getOrderSelectList({ q: q || undefined });
+      const result = await getOrderSelectList({ q: query || undefined });
       if (result.success) {
-        // 이미 선택된 항목 제외
-        const filtered = result.data.filter((item) => !excludeIds.includes(item.id));
-        setItems(filtered);
-      } else {
-        toast.error(result.error || '수주 목록을 불러오는데 실패했습니다.');
+        return result.data.filter((item) => !excludeIds.includes(item.id));
       }
+      toast.error(result.error || '수주 목록을 불러오는데 실패했습니다.');
+      return [];
     } catch (error) {
       if (isNextRedirectError(error)) throw error;
       console.error('[OrderSelectModal] loadItems error:', error);
       toast.error('수주 목록 로드 중 오류가 발생했습니다.');
-    } finally {
-      setIsLoading(false);
+      return [];
     }
   }, [excludeIds]);
 
-  // 모달 열릴 때 데이터 로드 & 상태 초기화
-  useEffect(() => {
-    if (open) {
-      setSearchTerm('');
-      setSelectedIds(new Set());
-      loadItems();
-    }
-  }, [open, loadItems]);
-
-  // 검색
-  const handleSearch = useCallback(() => {
-    loadItems(searchTerm);
-  }, [searchTerm, loadItems]);
-
-  const handleSearchKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      handleSearch();
-    }
-  }, [handleSearch]);
-
-  // 체크박스 토글
-  const handleToggle = useCallback((id: string) => {
-    setSelectedIds((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-
-  // 전체 선택/해제
-  const handleToggleAll = useCallback(() => {
-    setSelectedIds((prev) => {
-      if (prev.size === items.length) {
-        return new Set();
-      }
-      return new Set(items.map((item) => item.id));
-    });
-  }, [items]);
-
-  // 선택 확인
-  const handleConfirm = useCallback(() => {
-    const selectedItems = items.filter((item) => selectedIds.has(item.id));
-    onSelect(selectedItems);
-    onOpenChange(false);
-  }, [items, selectedIds, onSelect, onOpenChange]);
-
-  const isAllSelected = items.length > 0 && selectedIds.size === items.length;
-
   return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-2xl">
-        <DialogHeader>
-          <DialogTitle>수주 선택</DialogTitle>
-        </DialogHeader>
-
-        {/* 검색 */}
-        <div className="flex gap-2">
-          <div className="relative flex-1">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-            <Input
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              onKeyDown={handleSearchKeyDown}
-              placeholder="수주번호, 현장명 검색..."
-              className="pl-9"
-            />
-          </div>
-          <Button variant="outline" onClick={handleSearch}>
-            검색
-          </Button>
-        </div>
-
-        {/* 테이블 */}
-        <div className="max-h-[400px] overflow-y-auto border rounded-md">
-          {isLoading ? (
-            <div className="flex items-center justify-center py-12">
-              <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-            </div>
-          ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead className="w-10">
-                    <Checkbox
-                      checked={isAllSelected}
-                      onCheckedChange={handleToggleAll}
-                    />
-                  </TableHead>
-                  <TableHead>수주번호</TableHead>
-                  <TableHead>현장명</TableHead>
-                  <TableHead className="text-center">납품일</TableHead>
-                  <TableHead className="text-center">개소</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {items.map((item) => (
-                  <TableRow
-                    key={item.id}
-                    className="cursor-pointer hover:bg-muted/50"
-                    onClick={() => handleToggle(item.id)}
-                  >
-                    <TableCell onClick={(e) => e.stopPropagation()}>
-                      <Checkbox
-                        checked={selectedIds.has(item.id)}
-                        onCheckedChange={() => handleToggle(item.id)}
-                      />
-                    </TableCell>
-                    <TableCell>{item.orderNumber}</TableCell>
-                    <TableCell>{item.siteName}</TableCell>
-                    <TableCell className="text-center">{item.deliveryDate}</TableCell>
-                    <TableCell className="text-center">{item.locationCount}</TableCell>
-                  </TableRow>
-                ))}
-                {items.length === 0 && (
-                  <TableRow>
-                    <TableCell colSpan={5} className="text-center text-muted-foreground py-8">
-                      {searchTerm ? '검색 결과가 없습니다.' : '수주 데이터가 없습니다.'}
-                    </TableCell>
-                  </TableRow>
+    <SearchableSelectionModal<OrderSelectItem>
+      open={open}
+      onOpenChange={onOpenChange}
+      title="수주 선택"
+      searchPlaceholder="수주번호, 현장명 검색..."
+      fetchData={handleFetchData}
+      keyExtractor={(item) => item.id}
+      searchMode="enter"
+      loadOnOpen
+      dialogClassName="sm:max-w-2xl"
+      listContainerClassName="max-h-[400px] overflow-y-auto border rounded-md"
+      mode="multiple"
+      onSelect={onSelect}
+      confirmLabel="선택"
+      allowSelectAll
+      listWrapper={(children, selectState) => (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-10">
+                {selectState && (
+                  <Checkbox
+                    checked={selectState.isAllSelected}
+                    onCheckedChange={selectState.onToggleAll}
+                  />
                 )}
-              </TableBody>
-            </Table>
-          )}
-        </div>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>
-            취소
-          </Button>
-          <Button
-            onClick={handleConfirm}
-            disabled={selectedIds.size === 0}
-          >
-            선택 ({selectedIds.size}건)
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+              </TableHead>
+              <TableHead>수주번호</TableHead>
+              <TableHead>현장명</TableHead>
+              <TableHead className="text-center">납품일</TableHead>
+              <TableHead className="text-center">개소</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {children}
+            {/* 빈 상태는 공통 컴포넌트에서 처리 */}
+          </TableBody>
+        </Table>
+      )}
+      renderItem={(item, isSelected) => (
+        <TableRow className="cursor-pointer hover:bg-muted/50">
+          <TableCell onClick={(e) => e.stopPropagation()}>
+            <Checkbox checked={isSelected} />
+          </TableCell>
+          <TableCell>{item.orderNumber}</TableCell>
+          <TableCell>{item.siteName}</TableCell>
+          <TableCell className="text-center">{item.deliveryDate}</TableCell>
+          <TableCell className="text-center">{item.locationCount}</TableCell>
+        </TableRow>
+      )}
+    />
   );
 }
diff --git a/src/components/quotes/ItemSearchModal.tsx b/src/components/quotes/ItemSearchModal.tsx
index 1992b9f2..31d811bd 100644
--- a/src/components/quotes/ItemSearchModal.tsx
+++ b/src/components/quotes/ItemSearchModal.tsx
@@ -1,28 +1,18 @@
 /**
  * 품목 검색 모달
  *
- * - 품목 코드/이름으로 검색
- * - 품목 목록에서 선택
- * - API 연동
+ * SearchableSelectionModal 공통 컴포넌트 기반
  */
 
-"use client";
+'use client';
 
-import { useState, useEffect, useMemo, useCallback } from "react";
-import { Search, X, Loader2 } from "lucide-react";
-
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "../ui/dialog";
-import { Input } from "../ui/input";
-import { fetchItems } from "@/lib/api/items";
-import type { ItemMaster, ItemType } from "@/types/item";
+import { useCallback } from 'react';
+import { SearchableSelectionModal } from '@/components/organisms/SearchableSelectionModal';
+import { fetchItems } from '@/lib/api/items';
+import type { ItemMaster, ItemType } from '@/types/item';
 
 // =============================================================================
-// Props
+// Props (기존과 동일 — 사용처 변경 없음)
 // =============================================================================
 
 interface ItemSearchModalProps {
@@ -34,6 +24,12 @@ interface ItemSearchModalProps {
   itemType?: string;
 }
 
+// 검색어 유효성: 영문, 한글, 숫자 1자 이상
+const isValidSearchQuery = (query: string) => {
+  if (!query || !query.trim()) return false;
+  return /[a-zA-Z가-힣ㄱ-ㅎㅏ-ㅣ0-9]/.test(query);
+};
+
 // =============================================================================
 // 컴포넌트
 // =============================================================================
@@ -45,168 +41,73 @@ export function ItemSearchModal({
   tabLabel,
   itemType,
 }: ItemSearchModalProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const [items, setItems] = useState<ItemMaster[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  // 품목 목록 조회
-  const loadItems = useCallback(async (search?: string) => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const data = await fetchItems({
-        search: search || undefined,
-        itemType: itemType as ItemType | undefined,
-        per_page: 50,
-      });
-      setItems(data);
-    } catch (err) {
-      console.error("[ItemSearchModal] 품목 조회 오류:", err);
-      setError("품목 목록을 불러오는데 실패했습니다.");
-      setItems([]);
-    } finally {
-      setIsLoading(false);
-    }
+  const handleFetchData = useCallback(async (query: string) => {
+    const data = await fetchItems({
+      search: query || undefined,
+      itemType: itemType as ItemType | undefined,
+      per_page: 50,
+    });
+    return data;
   }, [itemType]);
 
-  // 검색어 유효성 검사: 영문, 한글, 숫자 1자 이상
-  const isValidSearchQuery = useCallback((query: string) => {
-    if (!query || !query.trim()) return false;
-    return /[a-zA-Z가-힣ㄱ-ㅎㅏ-ㅣ0-9]/.test(query);
-  }, []);
-
-  // 모달 열릴 때 초기화 (자동 로드 안함)
-  useEffect(() => {
-    if (open) {
-      setItems([]);
-      setError(null);
-    }
-  }, [open]);
-
-  // 검색어 변경 시 디바운스 검색 (유효한 검색어만)
-  useEffect(() => {
-    if (!open) return;
-
-    // 검색어가 유효하지 않으면 결과 초기화
-    if (!isValidSearchQuery(searchQuery)) {
-      setItems([]);
-      return;
-    }
-
-    const timer = setTimeout(() => {
-      loadItems(searchQuery);
-    }, 300);
-
-    return () => clearTimeout(timer);
-  }, [searchQuery, open, loadItems, isValidSearchQuery]);
-
-  // 검색 결과 그대로 사용 (서버에서 이미 필터링됨)
-  const filteredItems = items;
-
-  const handleSelect = (item: ItemMaster) => {
+  const handleSelect = useCallback((item: ItemMaster) => {
     onSelectItem({
       code: item.itemCode,
       name: item.itemName,
       specification: item.specification || undefined,
     });
-    onOpenChange(false);
-    setSearchQuery("");
-  };
-
-  const handleClose = () => {
-    onOpenChange(false);
-    setSearchQuery("");
-  };
+  }, [onSelectItem]);
 
   return (
-    <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[500px]">
-        <DialogHeader>
-          <DialogTitle>
-            품목 검색
-            {tabLabel && <span className="text-sm font-normal text-gray-500 ml-2">({tabLabel})</span>}
-          </DialogTitle>
-        </DialogHeader>
-
-        {/* 검색 입력 */}
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-          <Input
-            placeholder="품목코드 또는 품목명 검색..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-10 pr-10"
-          />
-          {searchQuery && (
-            <button
-              onClick={() => setSearchQuery("")}
-              className="absolute right-3 top-1/2 -translate-y-1/2"
-            >
-              <X className="h-4 w-4 text-gray-400 hover:text-gray-600" />
-            </button>
-          )}
-        </div>
-
-        {/* 품목 목록 */}
-        <div className="max-h-[400px] overflow-y-auto border rounded-lg">
-          {isLoading ? (
-            <div className="flex items-center justify-center p-8 text-gray-500">
-              <Loader2 className="h-5 w-5 animate-spin mr-2" />
-              <span>품목 검색 중...</span>
+    <SearchableSelectionModal<ItemMaster>
+      open={open}
+      onOpenChange={onOpenChange}
+      title={
+        <>
+          품목 검색
+          {tabLabel && <span className="text-sm font-normal text-gray-500 ml-2">({tabLabel})</span>}
+        </>
+      }
+      searchPlaceholder="품목코드 또는 품목명 검색..."
+      fetchData={handleFetchData}
+      keyExtractor={(item) => item.id?.toString() ?? item.itemCode}
+      validateSearch={isValidSearchQuery}
+      invalidSearchMessage="영문, 한글 또는 숫자 1자 이상 입력하세요"
+      emptyQueryMessage="품목코드 또는 품목명을 입력하세요"
+      loadingMessage="품목 검색 중..."
+      dialogClassName="sm:max-w-[500px]"
+      infoText={(items, isLoading) =>
+        !isLoading ? (
+          <span className="text-xs text-gray-400 text-right block">
+            총 {items.length}개 품목
+          </span>
+        ) : null
+      }
+      mode="single"
+      onSelect={handleSelect}
+      renderItem={(item) => (
+        <div className="p-3 hover:bg-blue-50 transition-colors">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <span className="font-semibold text-gray-900">{item.itemCode}</span>
+              <span className="text-sm text-gray-600">{item.itemName}</span>
+              {item.hasInspectionTemplate && (
+                <span className="text-xs text-white bg-green-500 px-1.5 py-0.5 rounded">
+                  수입검사
+                </span>
+              )}
             </div>
-          ) : error ? (
-            <div className="p-4 text-center text-red-500 text-sm">
-              {error}
-            </div>
-          ) : filteredItems.length === 0 ? (
-            <div className="p-4 text-center text-gray-500 text-sm">
-              {!searchQuery
-                ? "품목코드 또는 품목명을 입력하세요"
-                : !isValidSearchQuery(searchQuery)
-                ? "영문, 한글 또는 숫자 1자 이상 입력하세요"
-                : "검색 결과가 없습니다"}
-            </div>
-          ) : (
-            <div className="divide-y">
-              {filteredItems.map((item, index) => (
-                <div
-                  key={item.id ?? `${item.itemCode}-${index}`}
-                  onClick={() => handleSelect(item)}
-                  className="p-3 hover:bg-blue-50 cursor-pointer transition-colors"
-                >
-                  <div className="flex items-center justify-between">
-                    <div className="flex items-center gap-2">
-                      <span className="font-semibold text-gray-900">{item.itemCode}</span>
-                      <span className="text-sm text-gray-600">{item.itemName}</span>
-                      {item.hasInspectionTemplate && (
-                        <span className="text-xs text-white bg-green-500 px-1.5 py-0.5 rounded">
-                          수입검사
-                        </span>
-                      )}
-                    </div>
-                    {item.unit && (
-                      <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
-                        {item.unit}
-                      </span>
-                    )}
-                  </div>
-                  {item.specification && (
-                    <p className="text-xs text-gray-400 mt-1">{item.specification}</p>
-                  )}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {/* 품목 개수 표시 */}
-        {!isLoading && !error && (
-          <div className="text-xs text-gray-400 text-right">
-            총 {filteredItems.length}개 품목
+            {item.unit && (
+              <span className="text-xs text-gray-400 bg-gray-100 px-2 py-0.5 rounded">
+                {item.unit}
+              </span>
+            )}
           </div>
-        )}
-      </DialogContent>
-    </Dialog>
+          {item.specification && (
+            <p className="text-xs text-gray-400 mt-1">{item.specification}</p>
+          )}
+        </div>
+      )}
+    />
   );
-}
\ No newline at end of file
+}
diff --git a/src/components/settings/AccountManagement/actions.ts b/src/components/settings/AccountManagement/actions.ts
index f6111c6a..c72d5656 100644
--- a/src/components/settings/AccountManagement/actions.ts
+++ b/src/components/settings/AccountManagement/actions.ts
@@ -2,6 +2,7 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import type { Account, AccountFormData, AccountStatus } from './types';
 import { BANK_LABELS } from './types';
@@ -23,13 +24,7 @@ interface BankAccountApiData {
   updated_at?: string;
 }
 
-interface BankAccountPaginatedResponse {
-  data: BankAccountApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type BankAccountPaginatedResponse = PaginatedApiResponse<BankAccountApiData>;
 
 // ===== 데이터 변환 =====
 function transformApiToFrontend(apiData: BankAccountApiData): Account {
diff --git a/src/components/settings/PaymentHistoryManagement/actions.ts b/src/components/settings/PaymentHistoryManagement/actions.ts
index 2c1de5d6..19686684 100644
--- a/src/components/settings/PaymentHistoryManagement/actions.ts
+++ b/src/components/settings/PaymentHistoryManagement/actions.ts
@@ -2,19 +2,14 @@
 
 
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { PaymentApiData, PaymentHistory } from './types';
 import { transformApiToFrontend } from './utils';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
 // ===== API 응답 타입 =====
-interface PaymentPaginatedResponse {
-  data: PaymentApiData[];
-  current_page: number;
-  last_page: number;
-  per_page: number;
-  total: number;
-}
+type PaymentPaginatedResponse = PaginatedApiResponse<PaymentApiData>;
 
 interface PaymentStatementApiData {
   statement_no: string;
diff --git a/src/components/settings/PopupManagement/actions.ts b/src/components/settings/PopupManagement/actions.ts
index 194aa757..90c904a3 100644
--- a/src/components/settings/PopupManagement/actions.ts
+++ b/src/components/settings/PopupManagement/actions.ts
@@ -14,23 +14,12 @@
 
 import { isNextRedirectError } from '@/lib/utils/redirect-error';
 import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import type { PaginatedApiResponse } from '@/lib/api/types';
 import type { Popup, PopupFormData } from './types';
 import { transformApiToFrontend, transformFrontendToApi, type PopupApiData } from './utils';
 
 const API_URL = process.env.NEXT_PUBLIC_API_URL;
 
-// ============================================
-// API 응답 타입 정의
-// ============================================
-
-interface PaginatedResponse<T> {
-  current_page: number;
-  data: T[];
-  total: number;
-  per_page: number;
-  last_page: number;
-}
-
 // ============================================
 // API 함수
 // ============================================
@@ -52,7 +41,7 @@ export async function getPopups(params?: {
 
   const result = await executeServerAction({
     url: `${API_URL}/api/v1/popups?${searchParams.toString()}`,
-    transform: (data: PaginatedResponse<PopupApiData>) => data.data.map(transformApiToFrontend),
+    transform: (data: PaginatedApiResponse<PopupApiData>) => data.data.map(transformApiToFrontend),
     errorMessage: '팝업 목록 조회에 실패했습니다.',
   });
   return result.data || [];
diff --git a/src/components/settings/TitleManagement/actions.ts b/src/components/settings/TitleManagement/actions.ts
index a1a2ce5d..2a01f020 100644
--- a/src/components/settings/TitleManagement/actions.ts
+++ b/src/components/settings/TitleManagement/actions.ts
@@ -1,11 +1,8 @@
 'use server';
 
-
-import { executeServerAction, type ActionResult } from '@/lib/api/execute-server-action';
+import { createCrudService, type ActionResult } from '@/lib/api/create-crud-service';
 import type { Title } from './types';
 
-const API_URL = process.env.NEXT_PUBLIC_API_URL;
-
 // ===== API 응답 타입 =====
 interface PositionApiData {
   id: number;
@@ -18,60 +15,43 @@ interface PositionApiData {
   updated_at?: string;
 }
 
-// ===== 데이터 변환: API → Frontend =====
-function transformApiToFrontend(apiData: PositionApiData): Title {
-  return {
-    id: apiData.id,
-    name: apiData.name,
-    order: apiData.sort_order,
-    isActive: apiData.is_active,
-    createdAt: apiData.created_at,
-    updatedAt: apiData.updated_at,
-  };
-}
+// ===== CRUD 서비스 생성 =====
+const titleService = createCrudService<PositionApiData, Title>({
+  basePath: '/api/v1/positions',
+  transform: (api) => ({
+    id: api.id,
+    name: api.name,
+    order: api.sort_order,
+    isActive: api.is_active,
+    createdAt: api.created_at,
+    updatedAt: api.updated_at,
+  }),
+  entityName: '직책',
+  defaultQueryParams: { type: 'title' },
+  defaultCreateBody: { type: 'title' },
+});
+
+// ===== Server Action 래퍼 =====
 
-// ===== 직책 목록 조회 =====
 export async function getTitles(params?: {
   is_active?: boolean;
   q?: string;
 }): Promise<ActionResult<Title[]>> {
-  const searchParams = new URLSearchParams();
-  searchParams.set('type', 'title');
-  if (params?.is_active !== undefined) {
-    searchParams.set('is_active', params.is_active.toString());
-  }
-  if (params?.q) {
-    searchParams.set('q', params.q);
-  }
-
-  return executeServerAction({
-    url: `${API_URL}/api/v1/positions?${searchParams.toString()}`,
-    transform: (data: PositionApiData[]) => data.map(transformApiToFrontend),
-    errorMessage: '직책 목록 조회에 실패했습니다.',
-  });
+  return titleService.getList(params);
 }
 
-// ===== 직책 생성 =====
 export async function createTitle(data: {
   name: string;
   sort_order?: number;
   is_active?: boolean;
 }): Promise<ActionResult<Title>> {
-  return executeServerAction({
-    url: `${API_URL}/api/v1/positions`,
-    method: 'POST',
-    body: {
-      type: 'title',
-      name: data.name,
-      sort_order: data.sort_order,
-      is_active: data.is_active ?? true,
-    },
-    transform: transformApiToFrontend,
-    errorMessage: '직책 생성에 실패했습니다.',
+  return titleService.create({
+    name: data.name,
+    sort_order: data.sort_order,
+    is_active: data.is_active ?? true,
   });
 }
 
-// ===== 직책 수정 =====
 export async function updateTitle(
   id: number,
   data: {
@@ -80,32 +60,15 @@ export async function updateTitle(
     is_active?: boolean;
   }
 ): Promise<ActionResult<Title>> {
-  return executeServerAction({
-    url: `${API_URL}/api/v1/positions/${id}`,
-    method: 'PUT',
-    body: data,
-    transform: transformApiToFrontend,
-    errorMessage: '직책 수정에 실패했습니다.',
-  });
+  return titleService.update(id, data);
 }
 
-// ===== 직책 삭제 =====
 export async function deleteTitle(id: number): Promise<ActionResult> {
-  return executeServerAction({
-    url: `${API_URL}/api/v1/positions/${id}`,
-    method: 'DELETE',
-    errorMessage: '직책 삭제에 실패했습니다.',
-  });
+  return titleService.remove(id);
 }
 
-// ===== 직책 순서 변경 =====
 export async function reorderTitles(
   items: { id: number; sort_order: number }[]
 ): Promise<ActionResult> {
-  return executeServerAction({
-    url: `${API_URL}/api/v1/positions/reorder`,
-    method: 'PUT',
-    body: { items },
-    errorMessage: '순서 변경에 실패했습니다.',
-  });
-}
\ No newline at end of file
+  return titleService.reorder(items);
+}
diff --git a/src/lib/api/create-crud-service.ts b/src/lib/api/create-crud-service.ts
index ba9aa440..07a2a8c9 100644
--- a/src/lib/api/create-crud-service.ts
+++ b/src/lib/api/create-crud-service.ts
@@ -3,7 +3,7 @@
  *
  * 정형적인 CRUD actions.ts 파일의 보일러플레이트를 제거합니다.
  * executeServerAction 위에 한 단계 더 추상화하여
- * getList / create / update / remove / reorder 함수를 자동 생성합니다.
+ * getList / getById / create / update / remove / bulkDelete / reorder 함수를 자동 생성합니다.
  *
  * 주의: 이 파일은 'use server'가 아닙니다.
  * 각 도메인의 actions.ts ('use server')에서 import하여 사용합니다.
@@ -20,10 +20,12 @@
  *   defaultCreateBody: { type: 'rank' },
  * });
  * export async function getRanks(params?) { return service.getList(params); }
+ * export async function getRankById(id) { return service.getById(id); }
  * ```
  */
 
 import { executeServerAction, type ActionResult } from './execute-server-action';
+import { isNextRedirectError } from '@/lib/utils/redirect-error';
 
 // ===== 설정 타입 =====
 export interface CrudServiceConfig<TApi, TFrontend> {
@@ -37,6 +39,8 @@ export interface CrudServiceConfig<TApi, TFrontend> {
   defaultQueryParams?: Record<string, string>;
   /** 생성 시 body에 추가할 기본값 (예: { type: 'rank' }) */
   defaultCreateBody?: Record<string, unknown>;
+  /** 수정 시 HTTP 메서드 (기본: 'PUT') */
+  updateMethod?: 'PUT' | 'PATCH';
 }
 
 // ===== 서비스 반환 타입 =====
@@ -46,14 +50,18 @@ export interface CrudService<TFrontend> {
     q?: string;
   }): Promise<ActionResult<TFrontend[]>>;
 
+  getById(id: number | string): Promise<ActionResult<TFrontend>>;
+
   create(body: Record<string, unknown>): Promise<ActionResult<TFrontend>>;
 
   update(
-    id: number,
+    id: number | string,
     body: Record<string, unknown>
   ): Promise<ActionResult<TFrontend>>;
 
-  remove(id: number): Promise<ActionResult>;
+  remove(id: number | string): Promise<ActionResult>;
+
+  bulkDelete(ids: (number | string)[]): Promise<ActionResult>;
 
   reorder(
     items: { id: number; sort_order: number }[]
@@ -70,6 +78,7 @@ export function createCrudService<TApi, TFrontend>(
     entityName,
     defaultQueryParams,
     defaultCreateBody,
+    updateMethod = 'PUT',
   } = config;
 
   // API URL은 호출 시점에 resolve (SSR 안전)
@@ -97,6 +106,14 @@ export function createCrudService<TApi, TFrontend>(
       });
     },
 
+    async getById(id) {
+      return executeServerAction({
+        url: `${getBaseUrl()}/${id}`,
+        transform,
+        errorMessage: `${entityName} 조회에 실패했습니다.`,
+      });
+    },
+
     async create(body) {
       return executeServerAction({
         url: getBaseUrl(),
@@ -110,7 +127,7 @@ export function createCrudService<TApi, TFrontend>(
     async update(id, body) {
       return executeServerAction({
         url: `${getBaseUrl()}/${id}`,
-        method: 'PUT',
+        method: updateMethod,
         body,
         transform,
         errorMessage: `${entityName} 수정에 실패했습니다.`,
@@ -125,6 +142,26 @@ export function createCrudService<TApi, TFrontend>(
       });
     },
 
+    async bulkDelete(ids) {
+      try {
+        const results = await Promise.all(ids.map((id) =>
+          executeServerAction({
+            url: `${getBaseUrl()}/${id}`,
+            method: 'DELETE',
+            errorMessage: `${entityName} 삭제에 실패했습니다.`,
+          })
+        ));
+        const failed = results.filter((r) => !r.success);
+        if (failed.length > 0) {
+          return { success: false, error: `${failed.length}개 ${entityName} 삭제에 실패했습니다.` };
+        }
+        return { success: true };
+      } catch (error) {
+        if (isNextRedirectError(error)) throw error;
+        return { success: false, error: `${entityName} 일괄 삭제에 실패했습니다.` };
+      }
+    },
+
     async reorder(items) {
       return executeServerAction({
         url: `${getBaseUrl()}/reorder`,
diff --git a/src/lib/api/index.ts b/src/lib/api/index.ts
index 308d6941..d540f62c 100644
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@@ -5,6 +5,23 @@ export { ApiClient, withTokenRefresh } from './client';
 export { serverFetch } from './fetch-wrapper';
 export { AUTH_CONFIG } from './auth/auth-config';
 
+// 공용 API 타입 및 페이지네이션 유틸리티
+export {
+  toPaginationMeta,
+  type PaginatedApiResponse,
+  type PaginationMeta,
+  type PaginatedResult,
+  type SelectOption,
+} from './types';
+
+// 공용 룩업 헬퍼 (거래처/계좌 조회)
+export {
+  fetchVendorOptions,
+  fetchBankAccountOptions,
+  fetchBankAccountDetailOptions,
+  type BankAccountOption,
+} from './shared-lookups';
+
 // 공통 코드 타입 및 유틸리티
 export {
   toCommonCodeOptions,
diff --git a/src/lib/api/shared-lookups.ts b/src/lib/api/shared-lookups.ts
new file mode 100644
index 00000000..b3aee95f
--- /dev/null
+++ b/src/lib/api/shared-lookups.ts
@@ -0,0 +1,86 @@
+/**
+ * 공용 룩업(셀렉트 옵션) 조회 헬퍼
+ *
+ * 여러 도메인(입금/출금/매입/예상비용)에서 동일하게 사용하는
+ * 거래처/계좌 조회 로직을 하나로 통합합니다.
+ *
+ * 주의: 이 파일은 'use server'가 아닙니다.
+ * 각 도메인의 actions.ts ('use server')에서 import하여 사용합니다.
+ */
+
+import { executeServerAction, type ActionResult } from './execute-server-action';
+import type { SelectOption } from './types';
+
+// ===== 계좌 상세 옵션 =====
+export interface BankAccountOption {
+  id: string;
+  bankName: string;
+  accountName: string;
+  accountNumber: string;
+}
+
+// ===== API 내부 타입 =====
+interface ClientApiItem {
+  id: number;
+  name: string;
+}
+
+interface BankAccountApiItem {
+  id: number;
+  bank_name: string;
+  account_name: string;
+  account_number: string;
+}
+
+type PaginatedOrArray<T> = { data?: T[] } | T[];
+
+function extractArray<T>(data: PaginatedOrArray<T>): T[] {
+  return Array.isArray(data) ? data : (data as { data?: T[] })?.data || [];
+}
+
+// ===== 거래처 목록 조회 =====
+export async function fetchVendorOptions(): Promise<ActionResult<SelectOption[]>> {
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+  const result = await executeServerAction({
+    url: `${API_URL}/api/v1/clients?per_page=100`,
+    transform: (data: PaginatedOrArray<ClientApiItem>) => {
+      const clients = extractArray(data);
+      return clients.map(c => ({ id: String(c.id), name: c.name }));
+    },
+    errorMessage: '거래처 조회에 실패했습니다.',
+  });
+  return { success: result.success, data: result.data || [], error: result.error };
+}
+
+// ===== 계좌 목록 조회 (간단: id + name) =====
+export async function fetchBankAccountOptions(): Promise<ActionResult<SelectOption[]>> {
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+  const result = await executeServerAction({
+    url: `${API_URL}/api/v1/bank-accounts?per_page=100`,
+    transform: (data: PaginatedOrArray<BankAccountApiItem>) => {
+      const accounts = extractArray(data);
+      return accounts.map(a => ({ id: String(a.id), name: `${a.bank_name} ${a.account_name}` }));
+    },
+    errorMessage: '계좌 조회에 실패했습니다.',
+  });
+  return { success: result.success, data: result.data || [], error: result.error };
+}
+
+// ===== 계좌 목록 조회 (상세: bankName, accountName, accountNumber) =====
+export async function fetchBankAccountDetailOptions(): Promise<ActionResult<BankAccountOption[]>> {
+  const API_URL = process.env.NEXT_PUBLIC_API_URL;
+  const result = await executeServerAction({
+    url: `${API_URL}/api/v1/bank-accounts?per_page=100`,
+    transform: (data: PaginatedOrArray<BankAccountApiItem>) => {
+      const accounts = extractArray(data);
+      return accounts.map(a => ({
+        id: String(a.id),
+        bankName: a.bank_name,
+        accountName: a.account_name,
+        accountNumber: a.account_number,
+      }));
+    },
+    errorMessage: '은행 계좌 조회에 실패했습니다.',
+  });
+  return { success: result.success, data: result.data || [], error: result.error };
+}
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
new file mode 100644
index 00000000..16fc3a5a
--- /dev/null
+++ b/src/lib/api/types.ts
@@ -0,0 +1,47 @@
+/**
+ * 공용 API 타입 및 페이지네이션 유틸리티
+ *
+ * 25+ 개 action 파일에서 반복 정의되던 PaginatedResponse 타입과
+ * 페이지네이션 변환 헬퍼를 하나로 통합합니다.
+ */
+
+// ===== API 페이지네이션 응답 (Laravel 표준) =====
+export interface PaginatedApiResponse<T> {
+  data: T[];
+  current_page: number;
+  last_page: number;
+  per_page: number;
+  total: number;
+}
+
+// ===== 프론트엔드 페이지네이션 메타 (camelCase) =====
+export interface PaginationMeta {
+  currentPage: number;
+  lastPage: number;
+  perPage: number;
+  total: number;
+}
+
+// ===== 프론트엔드 페이지네이션 결과 =====
+export interface PaginatedResult<T> {
+  items: T[];
+  pagination: PaginationMeta;
+}
+
+// ===== 페이지네이션 변환 헬퍼 =====
+export function toPaginationMeta(
+  data: { current_page?: number; last_page?: number; per_page?: number; total?: number } | undefined | null
+): PaginationMeta {
+  return {
+    currentPage: data?.current_page || 1,
+    lastPage: data?.last_page || 1,
+    perPage: data?.per_page || 20,
+    total: data?.total || 0,
+  };
+}
+
+// ===== 셀렉트 옵션 (공용 룩업용) =====
+export interface SelectOption {
+  id: string;
+  name: string;
+}