diff options
Diffstat (limited to 'components/common/discipline/README.md')
| -rw-r--r-- | components/common/discipline/README.md | 96 |
1 files changed, 96 insertions, 0 deletions
diff --git a/components/common/discipline/README.md b/components/common/discipline/README.md new file mode 100644 index 00000000..7e95dd4e --- /dev/null +++ b/components/common/discipline/README.md @@ -0,0 +1,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 테이블에 데이터가 있어야 합니다 |
