docs: 다양한 문서 및 가이드 업데이트
- 여러 문서의 내용을 업데이트하여 최신 정보를 반영하였습니다. - 컴포넌트 개발 가이드와 관련된 문서의 목차를 재구성하고, V2 및 Zod 레이아웃 시스템에 대한 내용을 추가하였습니다. - 화면 컴포넌트 개발 가이드를 개선하여 핵심 원칙과 패턴을 명확히 설명하였습니다. - 불필요한 문서 및 가이드를 삭제하고, 통합된 가이드를 통해 개발자들이 쉽게 참고할 수 있도록 하였습니다.
This commit is contained in:
@@ -51,7 +51,7 @@ alwaysApply: false
|
||||
| `v2-split-panel-layout` | 분할 패널 | 좌우/상하 분할 |
|
||||
| `v2-numbering-rule` | 채번 규칙 | 자동 채번 생성 |
|
||||
| `v2-tabs-widget` | 탭 위젯 | 탭 레이아웃 |
|
||||
| `v2-unified-repeater` | 통합 리피터 | 행 단위 입력/저장 |
|
||||
| `v2-repeater` | 통합 리피터 | 행 단위 입력/저장 |
|
||||
| `v2-rack-structure` | 렉 구조 | 창고 렉 위치 생성 |
|
||||
| `v2-section-paper` | 섹션 페이퍼 | 섹션 컨테이너 |
|
||||
| `v2-section-card` | 섹션 카드 | 카드 컨테이너 |
|
||||
@@ -118,7 +118,7 @@ export const V2TableListDefinition = createComponentDefinition({
|
||||
"components": [
|
||||
{
|
||||
"id": "comp_xxx",
|
||||
"url": "@/lib/registry/components/unified-select",
|
||||
"url": "@/lib/registry/components/v2-select",
|
||||
"position": { "x": 100, "y": 50 },
|
||||
"size": { "width": 180, "height": 30 },
|
||||
"displayOrder": 0,
|
||||
@@ -226,7 +226,7 @@ export function convertV2ToLegacy(v2Layout: LayoutV2): LegacyLayoutData {
|
||||
// frontend/lib/schemas/componentConfig.ts
|
||||
|
||||
// 컴포넌트별 overrides 스키마
|
||||
export const unifiedSelectOverridesSchema = z.object({
|
||||
export const v2SelectOverridesSchema = z.object({
|
||||
mode: z.enum(["dropdown", "combobox", "radio", "checkbox"]).default("dropdown"),
|
||||
source: z.enum(["static", "code", "entity", "db", "distinct"]).default("distinct"),
|
||||
multiple: z.boolean().default(false),
|
||||
@@ -236,15 +236,15 @@ export const unifiedSelectOverridesSchema = z.object({
|
||||
|
||||
// 스키마 레지스트리
|
||||
export const componentOverridesSchemaRegistry: Record<string, z.ZodType<any>> = {
|
||||
"unified-select": unifiedSelectOverridesSchema,
|
||||
"unified-input": unifiedInputOverridesSchema,
|
||||
"v2-select": v2SelectOverridesSchema,
|
||||
"v2-input": v2InputOverridesSchema,
|
||||
"v2-table-list": v2TableListOverridesSchema,
|
||||
// ...
|
||||
};
|
||||
|
||||
// 기본값 레지스트리
|
||||
export const componentDefaultsRegistry: Record<string, any> = {
|
||||
"unified-select": {
|
||||
"v2-select": {
|
||||
mode: "dropdown",
|
||||
source: "distinct", // 기본: 테이블 컬럼에서 자동 로드
|
||||
multiple: false,
|
||||
@@ -254,7 +254,7 @@ export const componentDefaultsRegistry: Record<string, any> = {
|
||||
};
|
||||
```
|
||||
|
||||
### unified-select 자동 옵션 로드
|
||||
### v2-select 자동 옵션 로드
|
||||
|
||||
`webType`이 `"select"`인 컬럼을 드래그하면:
|
||||
|
||||
@@ -265,9 +265,9 @@ export const componentDefaultsRegistry: Record<string, any> = {
|
||||
```typescript
|
||||
// DynamicComponentRenderer.tsx
|
||||
|
||||
case "unified-select":
|
||||
case "v2-select":
|
||||
return (
|
||||
<UnifiedSelect
|
||||
<V2Select
|
||||
{...commonProps}
|
||||
config={{
|
||||
mode: config.mode || "dropdown",
|
||||
@@ -604,26 +604,26 @@ if (!silentActions.includes(actionType)) {
|
||||
|
||||
| inputType | 생성 위젯 | 설명 |
|
||||
|-----------|----------|------|
|
||||
| `text`, `textarea` | UnifiedInput | 텍스트 입력 |
|
||||
| `number` | UnifiedInput | 숫자 입력 |
|
||||
| `date`, `datetime` | UnifiedDate | 날짜/시간 선택 |
|
||||
| `code`, `category`, `entity` | UnifiedSelect | 선택박스 |
|
||||
| `text`, `textarea` | V2Input | 텍스트 입력 |
|
||||
| `number` | V2Input | 숫자 입력 |
|
||||
| `date`, `datetime` | V2Date | 날짜/시간 선택 |
|
||||
| `code`, `category`, `entity` | V2Select | 선택박스 |
|
||||
| `checkbox`, `radio` | 체크박스/라디오 | 선택 |
|
||||
| `image`, `file` | UnifiedMedia | 파일 업로드 |
|
||||
| `image`, `file` | V2Media | 파일 업로드 |
|
||||
|
||||
### 핵심 Unified 컴포넌트 (3개)
|
||||
### 핵심 V2 컴포넌트 (3개)
|
||||
|
||||
| 컴포넌트 | 담당 inputType | 파일 경로 |
|
||||
|----------|---------------|-----------|
|
||||
| `UnifiedInput` | text, textarea, number, password | `components/unified/UnifiedInput.tsx` |
|
||||
| `UnifiedSelect` | code, category, entity, select | `components/unified/UnifiedSelect.tsx` |
|
||||
| `UnifiedDate` | date, datetime, time, daterange | `components/unified/UnifiedDate.tsx` |
|
||||
| `V2Input` | text, textarea, number, password | `components/v2/V2Input.tsx` |
|
||||
| `V2Select` | code, category, entity, select | `components/v2/V2Select.tsx` |
|
||||
| `V2Date` | date, datetime, time, daterange | `components/v2/V2Date.tsx` |
|
||||
|
||||
### 컴포넌트 패널에서 직접 드래그 가능한 컴포넌트
|
||||
|
||||
| 컴포넌트 ID | 이름 | 설명 |
|
||||
|-------------|------|------|
|
||||
| `v2-unified-repeater` | 리피터 그리드 | 행 단위 데이터 추가/수정/삭제 |
|
||||
| `v2-repeater` | 리피터 그리드 | 행 단위 데이터 추가/수정/삭제 |
|
||||
| `v2-table-list` | 테이블 리스트 | 데이터 목록 조회/필터/정렬 |
|
||||
| `v2-table-search-widget` | 검색 필터 | 테이블 검색 조건 입력 |
|
||||
| `v2-button-primary` | 버튼 | 저장, 삭제, 조회 등 액션 |
|
||||
@@ -725,7 +725,7 @@ interface TableListConfig {
|
||||
#### 저장용 (리피터)
|
||||
|
||||
```typescript
|
||||
interface UnifiedRepeaterConfig {
|
||||
interface V2RepeaterConfig {
|
||||
mainTableName?: string; // 저장할 테이블명
|
||||
useCustomTable?: boolean; // true: mainTableName 사용
|
||||
foreignKeyColumn?: string; // FK 컬럼 (예: receiving_id)
|
||||
@@ -920,7 +920,7 @@ const getEntityJoinValue = (item: any, columnName: string): any => {
|
||||
|
||||
## 10. 폼 데이터 관리
|
||||
|
||||
### 통합 폼 시스템 (UnifiedFormContext)
|
||||
### 통합 폼 시스템 (V2FormContext)
|
||||
|
||||
```typescript
|
||||
import { useFormCompatibility } from "@/hooks/useFormCompatibility";
|
||||
@@ -949,15 +949,15 @@ const MyComponent = ({ onFormDataChange, formData }) => {
|
||||
|
||||
```typescript
|
||||
const handleChange = useCallback((value: any) => {
|
||||
// 1. UnifiedFormContext
|
||||
unifiedContext?.setValue(fieldName, value);
|
||||
// 1. V2FormContext
|
||||
v2Context?.setValue(fieldName, value);
|
||||
|
||||
// 2. ScreenContext
|
||||
screenContext?.updateFormData?.(fieldName, value);
|
||||
|
||||
// 3. 레거시 콜백
|
||||
onFormDataChange?.(fieldName, value);
|
||||
}, [fieldName, unifiedContext, screenContext, onFormDataChange]);
|
||||
}, [fieldName, v2Context, screenContext, onFormDataChange]);
|
||||
```
|
||||
|
||||
---
|
||||
@@ -1120,7 +1120,7 @@ const MyFormComponent = ({ formData, onFormDataChange }) => {
|
||||
|
||||
## 13. 표준 코드 스타일 가이드
|
||||
|
||||
**`v2-unified-repeater`** 컴포넌트를 표준으로 삼아 동일한 구조로 작성합니다.
|
||||
**`v2-repeater`** 컴포넌트를 표준으로 삼아 동일한 구조로 작성합니다.
|
||||
|
||||
### 핵심 원칙: 느슨한 결합도 (Loose Coupling)
|
||||
|
||||
@@ -1675,7 +1675,7 @@ const derivedValue = useMemo(() => data.map(x => x.value), [data]);
|
||||
- [ ] 테이블 컬럼 드래그 시 `tableName`, `columnName` 저장 확인
|
||||
- [ ] `convertLegacyToV2`에서 상위 레벨 속성 포함 확인
|
||||
- [ ] `convertV2ToLegacy`에서 상위 레벨 속성 복원 확인
|
||||
- [ ] unified-select는 `source: "distinct"` 기본값 확인
|
||||
- [ ] v2-select는 `source: "distinct"` 기본값 확인
|
||||
|
||||
### 표준 Props
|
||||
|
||||
@@ -1749,7 +1749,7 @@ const derivedValue = useMemo(() => data.map(x => x.value), [data]);
|
||||
|
||||
### 코드 스타일
|
||||
|
||||
- [ ] `v2-unified-repeater` 구조 참고
|
||||
- [ ] `v2-repeater` 구조 참고
|
||||
- [ ] 느슨한 결합도 유지 (이벤트 기반 통신)
|
||||
|
||||
### 성능 최적화
|
||||
@@ -1769,9 +1769,9 @@ const derivedValue = useMemo(() => data.map(x => x.value), [data]);
|
||||
|
||||
| 파일 | 역할 |
|
||||
|------|------|
|
||||
| `components/unified/UnifiedInput.tsx` | text, number 입력 |
|
||||
| `components/unified/UnifiedSelect.tsx` | code, entity 선택 |
|
||||
| `components/unified/UnifiedDate.tsx` | date, datetime 선택 |
|
||||
| `components/v2/V2Input.tsx` | text, number 입력 |
|
||||
| `components/v2/V2Select.tsx` | code, entity 선택 |
|
||||
| `components/v2/V2Date.tsx` | date, datetime 선택 |
|
||||
| `lib/registry/components/v2-*/` | V2 컴포넌트 폴더 |
|
||||
| `lib/api/entityJoin.ts` | 엔티티 조인 API |
|
||||
| `hooks/useFormCompatibility.ts` | 폼 호환성 브릿지 |
|
||||
@@ -1783,6 +1783,6 @@ const derivedValue = useMemo(() => data.map(x => x.value), [data]);
|
||||
|
||||
| 컴포넌트 | 경로 | 참고 사항 |
|
||||
|----------|------|-----------|
|
||||
| `v2-unified-repeater` | `lib/registry/components/v2-unified-repeater/` | **표준 참조 컴포넌트** |
|
||||
| `v2-repeater` | `lib/registry/components/v2-repeater/` | **표준 참조 컴포넌트** |
|
||||
| `v2-table-list` | `lib/registry/components/v2-table-list/` | 조회 컴포넌트 참조 |
|
||||
| `v2-table-search-widget` | `lib/registry/components/v2-table-search-widget/` | 검색 필터 참조 |
|
||||
|
||||
Reference in New Issue
Block a user