blob: 7e95dd4e27d04dddc27f5c4aea52a4ef087079b3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
# 설계공종코드 선택기 (Engineering Discipline Selector)
내부 PostgreSQL DB에서 설계공종코드(CD_CLF='PLJP43')를 조회하는 공용 컴포넌트입니다.
## 기능
- 내부 PostgreSQL DB에서 설계공종코드 실시간 검색
- 코드와 이름으로 필터링 가능
- 페이지네이션 지원
- 반응형 다이얼로그 UI
- 서버 액션을 활용한 최적화된 성능
## 사용법
### 기본 사용법
```tsx
import { EngineeringDisciplineSelector, DisciplineCode } from '@/components/common/discipline'
function MyComponent() {
const [selectedDiscipline, setSelectedDiscipline] = useState<DisciplineCode>()
return (
<EngineeringDisciplineSelector
selectedDiscipline={selectedDiscipline}
onDisciplineSelect={(discipline) => {
console.log('선택된 설계공종:', discipline)
setSelectedDiscipline(discipline)
}}
/>
)
}
```
### 커스터마이징
```tsx
<EngineeringDisciplineSelector
selectedDiscipline={selectedDiscipline}
onDisciplineSelect={handleSelect}
placeholder="설계공종을 선택해주세요"
className="w-full h-10"
disabled={false}
searchOptions={{ limit: 50 }}
/>
```
## Props
| Prop | 타입 | 필수 | 기본값 | 설명 |
|------|------|------|--------|------|
| `selectedDiscipline` | `DisciplineCode` | ❌ | - | 선택된 설계공종 |
| `onDisciplineSelect` | `(discipline: DisciplineCode) => void` | ✅ | - | 설계공종 선택 시 호출되는 콜백 |
| `disabled` | `boolean` | ❌ | `false` | 비활성화 여부 |
| `placeholder` | `string` | ❌ | `"설계공종을 선택하세요"` | 플레이스홀더 텍스트 |
| `className` | `string` | ❌ | - | 추가 CSS 클래스 |
| `searchOptions` | `Partial<DisciplineSearchOptions>` | ❌ | `{ limit: 100 }` | 검색 옵션 |
## 타입
### DisciplineCode
```tsx
interface DisciplineCode {
CD: string // 설계공종코드
USR_DF_CHAR_18: string // 설계공종명
}
```
### DisciplineSearchOptions
```tsx
interface DisciplineSearchOptions {
searchTerm?: string // 검색어
limit?: number // 조회 제한 수
}
```
## 데이터 소스
**내부 PostgreSQL DB**
- **테이블**: cmctbCd (NONSAP 스키마)
- **조건**: CD_CLF = 'PLJP43'
- **필드**:
- CD (설계공종코드)
- USR_DF_CHAR_18 (설계공종명)
## 동작 방식
1. **서버 액션 호출**: Next.js 서버 액션을 통한 안전한 데이터 페칭
2. **PostgreSQL 조회**: Drizzle ORM을 사용하여 cmctbCd 테이블에서 조회
3. **검색 최적화**: ILIKE를 사용한 대소문자 무관 검색
4. **성능 최적화**: useTransition을 활용한 논블로킹 UI 업데이트
## 주의사항
- 내부 PostgreSQL DB 연결이 필요합니다
- NONSAP 스키마의 cmctbCd 테이블에 데이터가 있어야 합니다
|
