f3b07ac875
- 루트 문서 30개를 도메인별 하위 폴더로 이동 - accounting/, architecture/, dev/, guides/, security/ 등 카테고리 분류 - archive/ 폴더에 QA 스크린샷 이동 - _index.md 문서 맵 업데이트 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
159 lines
4.8 KiB
Markdown
159 lines
4.8 KiB
Markdown
# 공통 컴포넌트 패턴 분석
|
|
|
|
> Phase 3 마이그레이션 진행하면서 발견되는 공통화 후보 패턴 수집
|
|
> 페이지 마이그레이션 완료 후 이 리스트 기반으로 공통 컴포넌트 설계
|
|
|
|
## 최종 목표: IntegratedDetailTemplate Config 통합
|
|
|
|
공통 컴포넌트 추출 후 `IntegratedDetailTemplate`의 필드 config 옵션으로 통합
|
|
|
|
**현재 지원 타입:**
|
|
```typescript
|
|
type: 'text' | 'select' | 'date' | 'textarea' | 'number' | 'checkbox'
|
|
```
|
|
|
|
**확장 예정 타입:**
|
|
```typescript
|
|
// 주소 입력
|
|
{ name: 'address', label: '주소', type: 'address', withCoords?: boolean }
|
|
|
|
// 파일 업로드
|
|
{ name: 'files', label: '첨부파일', type: 'file-upload', maxSize?: number, multiple?: boolean, accept?: string }
|
|
|
|
// 음성 메모
|
|
{ name: 'memo', label: '메모', type: 'voice-memo' }
|
|
|
|
// 삭제 확인 (페이지 레벨 옵션)
|
|
deleteConfirm?: { title: string, message: string }
|
|
```
|
|
|
|
**장점:**
|
|
- 페이지별 config만 수정하면 UI 자동 구성
|
|
- 일관된 UX/UI 보장
|
|
- 유지보수 용이
|
|
|
|
## 발견된 패턴 목록
|
|
|
|
### 1. 주소 입력 (Address Input)
|
|
| 발견 위치 | 구성 요소 | 특이사항 |
|
|
|-----------|-----------|----------|
|
|
| site-management/SiteDetailForm | 우편번호 찾기 버튼 + 주소 Input + 상세주소 | 경도/위도 필드 별도 |
|
|
|
|
**공통 요소:**
|
|
- Daum Postcode API 연동 (`useDaumPostcode` 훅 이미 존재)
|
|
- 우편번호 찾기 버튼
|
|
- 기본주소 (자동 입력)
|
|
- 상세주소 (수동 입력)
|
|
|
|
**변형 가능성:**
|
|
- 경도/위도 필드 포함 여부
|
|
- 읽기 전용 모드 지원
|
|
|
|
---
|
|
|
|
### 2. 파일 업로드 (File Upload)
|
|
| 발견 위치 | 구성 요소 | 특이사항 |
|
|
|-----------|-----------|----------|
|
|
| site-management/SiteDetailForm | 드래그앤드롭 영역 + 파일 목록 | 10MB 제한, 다중 파일 |
|
|
| structure-review/StructureReviewDetailForm | 드래그앤드롭 영역 + 파일 목록 | 10MB 제한, 다중 파일 (동일 패턴) |
|
|
|
|
**공통 요소:**
|
|
- 드래그앤드롭 영역 (점선 박스)
|
|
- 클릭하여 파일 선택
|
|
- 드래그 중 시각적 피드백
|
|
- 파일 크기 검증
|
|
|
|
**변형 가능성:**
|
|
- 허용 파일 타입 (이미지만 / 문서만 / 전체)
|
|
- 단일 vs 다중 파일
|
|
- 최대 파일 크기
|
|
- 최대 파일 개수
|
|
|
|
---
|
|
|
|
### 3. 파일 목록 (File List)
|
|
| 발견 위치 | 구성 요소 | 특이사항 |
|
|
|-----------|-----------|----------|
|
|
| site-management/SiteDetailForm | 파일명 + 크기 + 다운로드/삭제 | view/edit 모드별 다른 액션 |
|
|
| structure-review/StructureReviewDetailForm | 파일명 + 크기 + 다운로드/삭제 | 동일 패턴 |
|
|
|
|
**공통 요소:**
|
|
- 파일 아이콘
|
|
- 파일명 표시
|
|
- 파일 크기 표시
|
|
- 액션 버튼
|
|
|
|
**변형 가능성:**
|
|
- view 모드: 다운로드 버튼
|
|
- edit 모드: 삭제(X) 버튼
|
|
- 미리보기 지원 (이미지)
|
|
- 업로드 날짜 표시 여부
|
|
|
|
---
|
|
|
|
### 4. 음성 녹음 (Voice Recorder)
|
|
| 발견 위치 | 구성 요소 | 특이사항 |
|
|
|-----------|-----------|----------|
|
|
| site-management/SiteDetailForm | 녹음 버튼 (Textarea 내부) | edit 모드에서만 표시 |
|
|
|
|
**공통 요소:**
|
|
- 녹음 시작/중지 버튼
|
|
- Textarea와 연동 (STT 결과 입력)
|
|
|
|
**변형 가능성:**
|
|
- 버튼 위치 (Textarea 내부 / 외부)
|
|
- 녹음 시간 제한
|
|
- 녹음 중 시각적 피드백
|
|
|
|
---
|
|
|
|
### 5. 삭제 확인 다이얼로그 (Delete Confirmation Dialog)
|
|
| 발견 위치 | 구성 요소 | 특이사항 |
|
|
|-----------|-----------|----------|
|
|
| structure-review/StructureReviewDetailForm | AlertDialog + 제목 + 설명 + 취소/삭제 버튼 | view 모드에서 삭제 버튼 클릭 시 |
|
|
|
|
**공통 요소:**
|
|
- AlertDialog 컴포넌트 사용
|
|
- 제목: "[항목명] 삭제"
|
|
- 설명: 삭제 확인 메시지 + 되돌릴 수 없음 경고
|
|
- 취소/삭제 버튼
|
|
|
|
**변형 가능성:**
|
|
- 항목명 커스터마이징
|
|
- 삭제 후 리다이렉트 경로
|
|
- 추가 경고 메시지
|
|
|
|
---
|
|
|
|
## 추가 예정
|
|
|
|
> Phase 3 마이그레이션 진행하면서 새로운 패턴 발견 시 여기에 추가
|
|
|
|
### 예상 패턴 (확인 필요)
|
|
- [ ] 이미지 미리보기 (썸네일)
|
|
- [ ] 서명 입력
|
|
- [ ] 날짜/시간 선택
|
|
- [ ] 검색 가능한 Select (Combobox)
|
|
- [ ] 태그 입력
|
|
- [ ] 금액 입력 (천단위 콤마)
|
|
|
|
---
|
|
|
|
## 공통화 우선순위 (마이그레이션 완료 후 결정)
|
|
|
|
| 우선순위 | 패턴 | 사용 빈도 | 복잡도 |
|
|
|----------|------|-----------|--------|
|
|
| - | 주소 입력 | 1 | 중 |
|
|
| - | 파일 업로드 | 2 | 상 |
|
|
| - | 파일 목록 | 2 | 중 |
|
|
| - | 음성 녹음 | 1 | 상 |
|
|
| - | 삭제 확인 다이얼로그 | 1 | 하 |
|
|
|
|
> 사용 빈도는 마이그레이션 진행하면서 카운트
|
|
|
|
---
|
|
|
|
## 변경 이력
|
|
- 2025-01-19: 초안 작성, site-management에서 4개 패턴 발견
|
|
- 2025-01-19: structure-review에서 동일 패턴 확인 (파일 업로드/목록), 삭제 확인 다이얼로그 패턴 추가
|