docs: 다양한 문서 및 가이드 업데이트

- 여러 문서의 내용을 업데이트하여 최신 정보를 반영하였습니다.
- 컴포넌트 개발 가이드와 관련된 문서의 목차를 재구성하고, V2 및 Zod 레이아웃 시스템에 대한 내용을 추가하였습니다.
- 화면 컴포넌트 개발 가이드를 개선하여 핵심 원칙과 패턴을 명확히 설명하였습니다.
- 불필요한 문서 및 가이드를 삭제하고, 통합된 가이드를 통해 개발자들이 쉽게 참고할 수 있도록 하였습니다.
This commit is contained in:
kjs
2026-01-28 17:36:19 +09:00
parent e0ee375f01
commit 95bef976a5
276 changed files with 2544 additions and 2495 deletions
+31 -31
View File
@@ -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/` | 검색 필터 참조 |