feat: 품목관리 동적 렌더링 시스템 구현
- DynamicItemForm 컴포넌트 구조 생성
- DynamicField: 필드 타입별 렌더링
- DynamicSection: 섹션 단위 렌더링
- DynamicFormRenderer: 페이지 전체 렌더링
- 필드 타입별 컴포넌트 (TextField, NumberField, DropdownField, CheckboxField, DateField, FileField, CustomField)
- 커스텀 훅 (useDynamicFormState, useFormStructure, useConditionalFields)
- DataTable 공통 컴포넌트 (테이블, 페이지네이션, 검색, 탭필터, 통계카드)
- ItemFormWrapper: Feature Flag 기반 폼 선택
- 타입 정의 및 문서화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 20:14:43 +09:00
|
|
|
/**
|
2025-12-04 12:48:41 +09:00
|
|
|
* 날짜 입력 필드 컴포넌트
|
|
|
|
|
* 기존 ItemForm과 100% 동일한 디자인
|
feat: 품목관리 동적 렌더링 시스템 구현
- DynamicItemForm 컴포넌트 구조 생성
- DynamicField: 필드 타입별 렌더링
- DynamicSection: 섹션 단위 렌더링
- DynamicFormRenderer: 페이지 전체 렌더링
- 필드 타입별 컴포넌트 (TextField, NumberField, DropdownField, CheckboxField, DateField, FileField, CustomField)
- 커스텀 훅 (useDynamicFormState, useFormStructure, useConditionalFields)
- DataTable 공통 컴포넌트 (테이블, 페이지네이션, 검색, 탭필터, 통계카드)
- ItemFormWrapper: Feature Flag 기반 폼 선택
- 타입 정의 및 문서화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 20:14:43 +09:00
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
'use client';
|
|
|
|
|
|
|
|
|
|
import { Label } from '@/components/ui/label';
|
2025-12-04 12:48:41 +09:00
|
|
|
import { Input } from '@/components/ui/input';
|
|
|
|
|
import type { DynamicFieldRendererProps } from '../types';
|
feat: 품목관리 동적 렌더링 시스템 구현
- DynamicItemForm 컴포넌트 구조 생성
- DynamicField: 필드 타입별 렌더링
- DynamicSection: 섹션 단위 렌더링
- DynamicFormRenderer: 페이지 전체 렌더링
- 필드 타입별 컴포넌트 (TextField, NumberField, DropdownField, CheckboxField, DateField, FileField, CustomField)
- 커스텀 훅 (useDynamicFormState, useFormStructure, useConditionalFields)
- DataTable 공통 컴포넌트 (테이블, 페이지네이션, 검색, 탭필터, 통계카드)
- ItemFormWrapper: Feature Flag 기반 폼 선택
- 타입 정의 및 문서화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 20:14:43 +09:00
|
|
|
|
|
|
|
|
export function DateField({
|
|
|
|
|
field,
|
|
|
|
|
value,
|
|
|
|
|
onChange,
|
2025-12-04 12:48:41 +09:00
|
|
|
error,
|
feat: 품목관리 동적 렌더링 시스템 구현
- DynamicItemForm 컴포넌트 구조 생성
- DynamicField: 필드 타입별 렌더링
- DynamicSection: 섹션 단위 렌더링
- DynamicFormRenderer: 페이지 전체 렌더링
- 필드 타입별 컴포넌트 (TextField, NumberField, DropdownField, CheckboxField, DateField, FileField, CustomField)
- 커스텀 훅 (useDynamicFormState, useFormStructure, useConditionalFields)
- DataTable 공통 컴포넌트 (테이블, 페이지네이션, 검색, 탭필터, 통계카드)
- ItemFormWrapper: Feature Flag 기반 폼 선택
- 타입 정의 및 문서화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 20:14:43 +09:00
|
|
|
disabled,
|
2025-12-04 12:48:41 +09:00
|
|
|
}: DynamicFieldRendererProps) {
|
|
|
|
|
const fieldKey = field.field_key || `field_${field.id}`;
|
|
|
|
|
const stringValue = value !== null && value !== undefined ? String(value) : '';
|
feat: 품목관리 동적 렌더링 시스템 구현
- DynamicItemForm 컴포넌트 구조 생성
- DynamicField: 필드 타입별 렌더링
- DynamicSection: 섹션 단위 렌더링
- DynamicFormRenderer: 페이지 전체 렌더링
- 필드 타입별 컴포넌트 (TextField, NumberField, DropdownField, CheckboxField, DateField, FileField, CustomField)
- 커스텀 훅 (useDynamicFormState, useFormStructure, useConditionalFields)
- DataTable 공통 컴포넌트 (테이블, 페이지네이션, 검색, 탭필터, 통계카드)
- ItemFormWrapper: Feature Flag 기반 폼 선택
- 타입 정의 및 문서화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 20:14:43 +09:00
|
|
|
|
|
|
|
|
return (
|
2025-12-04 12:48:41 +09:00
|
|
|
<div>
|
|
|
|
|
<Label htmlFor={fieldKey}>
|
feat: 품목관리 동적 렌더링 시스템 구현
- DynamicItemForm 컴포넌트 구조 생성
- DynamicField: 필드 타입별 렌더링
- DynamicSection: 섹션 단위 렌더링
- DynamicFormRenderer: 페이지 전체 렌더링
- 필드 타입별 컴포넌트 (TextField, NumberField, DropdownField, CheckboxField, DateField, FileField, CustomField)
- 커스텀 훅 (useDynamicFormState, useFormStructure, useConditionalFields)
- DataTable 공통 컴포넌트 (테이블, 페이지네이션, 검색, 탭필터, 통계카드)
- ItemFormWrapper: Feature Flag 기반 폼 선택
- 타입 정의 및 문서화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 20:14:43 +09:00
|
|
|
{field.field_name}
|
2025-12-04 12:48:41 +09:00
|
|
|
{field.is_required && <span className="text-red-500"> *</span>}
|
feat: 품목관리 동적 렌더링 시스템 구현
- DynamicItemForm 컴포넌트 구조 생성
- DynamicField: 필드 타입별 렌더링
- DynamicSection: 섹션 단위 렌더링
- DynamicFormRenderer: 페이지 전체 렌더링
- 필드 타입별 컴포넌트 (TextField, NumberField, DropdownField, CheckboxField, DateField, FileField, CustomField)
- 커스텀 훅 (useDynamicFormState, useFormStructure, useConditionalFields)
- DataTable 공통 컴포넌트 (테이블, 페이지네이션, 검색, 탭필터, 통계카드)
- ItemFormWrapper: Feature Flag 기반 폼 선택
- 타입 정의 및 문서화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 20:14:43 +09:00
|
|
|
</Label>
|
2025-12-04 12:48:41 +09:00
|
|
|
<Input
|
|
|
|
|
id={fieldKey}
|
|
|
|
|
type="date"
|
|
|
|
|
value={stringValue}
|
|
|
|
|
onChange={(e) => onChange(e.target.value)}
|
|
|
|
|
disabled={disabled}
|
|
|
|
|
className={error ? 'border-red-500' : ''}
|
|
|
|
|
/>
|
|
|
|
|
{error && (
|
|
|
|
|
<p className="text-xs text-red-500 mt-1">{error}</p>
|
|
|
|
|
)}
|
|
|
|
|
{!error && field.description && (
|
|
|
|
|
<p className="text-xs text-muted-foreground mt-1">
|
|
|
|
|
* {field.description}
|
|
|
|
|
</p>
|
feat: 품목관리 동적 렌더링 시스템 구현
- DynamicItemForm 컴포넌트 구조 생성
- DynamicField: 필드 타입별 렌더링
- DynamicSection: 섹션 단위 렌더링
- DynamicFormRenderer: 페이지 전체 렌더링
- 필드 타입별 컴포넌트 (TextField, NumberField, DropdownField, CheckboxField, DateField, FileField, CustomField)
- 커스텀 훅 (useDynamicFormState, useFormStructure, useConditionalFields)
- DataTable 공통 컴포넌트 (테이블, 페이지네이션, 검색, 탭필터, 통계카드)
- ItemFormWrapper: Feature Flag 기반 폼 선택
- 타입 정의 및 문서화
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-28 20:14:43 +09:00
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|