fix(approval): 결재선/참조 Select 값 변경 불가 버그 수정

- SelectValue children 조건부 렌더링 → placeholder prop으로 이동
- Radix UI Select 상태 관리 문제 해결
- @/lib/api barrel export 추가 (빌드 오류 해결)

수정 파일:
- ApprovalLineSection.tsx: SelectValue 수정
- ReferenceSection.tsx: SelectValue 수정
- src/lib/api/index.ts: 신규 생성

빌드 검증: npm run build 성공 (349 페이지)

CURRENT_WORKS.md

@@ -1,5 +1,59 @@
 # SAM React 작업 현황
 
+## 2026-01-09 (목) - TODO-1 결재선/참조 Select 버그 수정
+
+### 작업 목표
+- 결재선/참조 Select 컴포넌트에서 선택한 직원 정보가 표시되지 않는 버그 수정
+- @/lib/api barrel export 추가 (빌드 오류 해결)
+
+### 수정된 파일
+| 파일명 | 설명 |
+|--------|------|
+| `src/components/approval/DocumentCreate/ApprovalLineSection.tsx` | SelectValue 버그 수정 |
+| `src/components/approval/DocumentCreate/ReferenceSection.tsx` | SelectValue 버그 수정 |
+| `src/lib/api/index.ts` | 신규 생성 - barrel export |
+
+### 주요 변경 내용
+
+#### 1. SelectValue 버그 수정
+**문제**: Radix UI SelectValue의 children prop에 조건부 렌더링 사용 시 Select 상태 관리가 깨짐
+
+**해결**: children 제거, placeholder prop으로 이동
+```tsx
+// Before (버그)
+<SelectValue placeholder="부서명 / 직책명 / 이름 ▼">
+  {person.name ? `${person.department} / ${person.position} / ${person.name}` : null}
+</SelectValue>
+
+// After (수정)
+<SelectValue
+  placeholder={
+    person.name && !person.id.startsWith('temp-')
+      ? `${person.department || ''} / ${person.position || ''} / ${person.name}`
+      : "부서명 / 직책명 / 이름 ▼"
+  }
+/>
+```
+
+#### 2. @/lib/api barrel export
+Phase 2.3 자재관리 작업에서 사용하는 import 경로 지원:
+```typescript
+// src/lib/api/index.ts
+export { ApiClient, withTokenRefresh } from './client';
+export { serverFetch } from './fetch-wrapper';
+export { AUTH_CONFIG } from './auth/auth-config';
+
+export const apiClient = new ApiClient({
+  mode: 'api-key',
+  apiKey: process.env.API_KEY,
+});
+```
+
+### 빌드 검증
+✅ Next.js 빌드 성공 (349 페이지)
+
+---
+
 ## 2026-01-09 (목) - Phase 2.3 자재관리(품목관리) API 연동
 
 ### 작업 목표
@@ -535,7 +589,6 @@ useEffect(() => {
 
 ### 다음 작업
 - Phase D~L 진행 (계획 문서 참조)
-- TODO-1: 결재선/참조 Select 변경 불가 문제 해결 ← 2025-01-09 수정 완료
+- ~~TODO-1: 결재선/참조 Select 변경 불가 문제~~ ✅ 2026-01-09 수정 완료
-- 채권현황 console.log 제거 ← 2025-01-09 정리 완료
 
 ---

src/components/approval/DocumentCreate/ApprovalLineSection.tsx

@@ -75,11 +75,13 @@ export function ApprovalLineSection({ data, onChange }: ApprovalLineSectionProps
                 onValueChange={(value) => handleChange(index, value)}
               >
                 <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="부서명 / 직책명 / 이름 ▼">
+                  <SelectValue
-                    {person.name && !person.id.startsWith('temp-')
+                    placeholder={
-                      ? `${person.department || ''} / ${person.position || ''} / ${person.name}`
+                      person.name && !person.id.startsWith('temp-')
-                      : null}
+                        ? `${person.department || ''} / ${person.position || ''} / ${person.name}`
-                  </SelectValue>
+                        : "부서명 / 직책명 / 이름 ▼"
+                    }
+                  />
                 </SelectTrigger>
                 <SelectContent>
                   {employees.map((employee) => (

src/components/approval/DocumentCreate/ReferenceSection.tsx

@@ -75,11 +75,13 @@ export function ReferenceSection({ data, onChange }: ReferenceSectionProps) {
                 onValueChange={(value) => handleChange(index, value)}
               >
                 <SelectTrigger className="flex-1">
-                  <SelectValue placeholder="부서명 / 직책명 / 이름 ▼">
+                  <SelectValue
-                    {person.name && !person.id.startsWith('temp-')
+                    placeholder={
-                      ? `${person.department || ''} / ${person.position || ''} / ${person.name}`
+                      person.name && !person.id.startsWith('temp-')
-                      : null}
+                        ? `${person.department || ''} / ${person.position || ''} / ${person.name}`
-                  </SelectValue>
+                        : "부서명 / 직책명 / 이름 ▼"
+                    }
+                  />
                 </SelectTrigger>
                 <SelectContent>
                   {employees.map((employee) => (

src/lib/api/index.ts

@@ -0,0 +1,16 @@
+// lib/api/index.ts
+// API 클라이언트 배럴 익스포트
+
+export { ApiClient, withTokenRefresh } from './client';
+export { serverFetch } from './fetch-wrapper';
+export { AUTH_CONFIG } from './auth/auth-config';
+
+// Server-side API 클라이언트 인스턴스
+// 서버 액션에서 사용
+import { ApiClient } from './client';
+import { AUTH_CONFIG } from './auth/auth-config';
+
+export const apiClient = new ApiClient({
+  mode: 'api-key',
+  apiKey: process.env.API_KEY,
+});