+ {emptyState?.icon && (
+
+ );
+ };
+
+ // 선택된 항목들
+ const selectedItems = useMemo(() => {
+ return data.filter((item) => selectedIds.has(getRowKey(item)));
+ }, [data, selectedIds, getRowKey]);
+
+ // 필터 옵션에 카운트 추가
+ const filterOptionsWithCount = useMemo(() => {
+ if (!tabFilter) return [];
+ return tabFilter.options.map((opt) => ({
+ ...opt,
+ count: opt.value === 'all'
+ ? data.length
+ : data.filter((item) => item[tabFilter.key] === opt.value).length,
+ }));
+ }, [tabFilter, data]);
+
+ return (
+ {title}
+ {description &&{description}
} +
+ {/* 검색/필터 */}
+ {(search || tabFilter) && (
+
+
+
+
+ )}
+
+ {/* 벌크 액션 */}
+ {bulkActions.length > 0 && selectedIds.size > 0 && (
+
+
+
+ {selectedIds.size}개 선택됨
+
+
+ {bulkActions
+ .filter((action) => !action.minSelected || selectedIds.size >= action.minSelected)
+ .map((action) => (
+
+ ))}
+
+
+ )}
+
+ {/* 메인 테이블 카드 */}
+
+
+
+ {tabFilter
+ ? `${filterOptionsWithCount.find((o) => o.value === filterValue)?.label || ''} 목록`
+ : '전체 목록'}{' '}
+ ({processedData.length}개)
+
+
+
+ {/* 탭 필터 */}
+ {tabFilter && (
+
+
+
+ );
+}
+
+export default DataTable;
\ No newline at end of file
diff --git a/src/components/common/DataTable/Pagination.tsx b/src/components/common/DataTable/Pagination.tsx
new file mode 100644
index 00000000..8e88a3a0
--- /dev/null
+++ b/src/components/common/DataTable/Pagination.tsx
@@ -0,0 +1,143 @@
+/**
+ * Pagination Component
+ *
+ * 테이블 페이지네이션 공통 컴포넌트
+ */
+
+'use client';
+
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import type { PaginationProps } from './types';
+
+export function Pagination({
+ currentPage,
+ totalPages,
+ totalItems,
+ startIndex,
+ endIndex,
+ onPageChange,
+ pageSize,
+ onPageSizeChange,
+ pageSizeOptions,
+}: PaginationProps) {
+ if (totalItems === 0) return null;
+
+ // 표시할 페이지 번호 계산
+ const getVisiblePages = () => {
+ const pages: (number | 'ellipsis')[] = [];
+ const maxVisible = 5;
+
+ if (totalPages <= maxVisible + 2) {
+ // 전체 페이지가 적으면 모두 표시
+ for (let i = 1; i <= totalPages; i++) {
+ pages.push(i);
+ }
+ } else {
+ // 항상 첫 페이지
+ pages.push(1);
+
+ // 현재 페이지 주변
+ const start = Math.max(2, currentPage - 1);
+ const end = Math.min(totalPages - 1, currentPage + 1);
+
+ if (start > 2) {
+ pages.push('ellipsis');
+ }
+
+ for (let i = start; i <= end; i++) {
+ pages.push(i);
+ }
+
+ if (end < totalPages - 1) {
+ pages.push('ellipsis');
+ }
+
+ // 항상 마지막 페이지
+ pages.push(totalPages);
+ }
+
+ return pages;
+ };
+
+ return (
+
+
+ )}
+
+ {/* 로딩 상태 */}
+ {loading ? (
+
+
+ ) : paginatedData.length === 0 ? (
+ renderEmptyState()
+ ) : (
+ <>
+ {/* 모바일 카드 뷰 */}
+
+ {paginatedData.map((row, index) => (
+
+
+ {/* 데스크톱 테이블 */}
+ onRowClick?.(row)}
+ >
+
+ ))}
+
+ {selection?.enabled && (
+ handleSelectRow(row)}
+ onClick={(e) => e.stopPropagation()}
+ />
+ )}
+
+ {rowActions.length > 0 && (
+
+ {columns
+ .filter((col) => col.renderMobile !== null)
+ .map((col) => {
+ const value = row[col.key];
+ const rendered = col.renderMobile
+ ? col.renderMobile(value, row, index)
+ : col.render
+ ? col.render(value, row, index)
+ : value;
+ if (rendered === null) return null;
+ return (
+
+
+ {rendered}
+
+ );
+ })}
+
+ {rowActions
+ .filter((action) => !action.visible || action.visible(row))
+ .map((action) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+ {/* 페이지네이션 */}
+
+
+ );
+}
+
+export default Pagination;
\ No newline at end of file
diff --git a/src/components/common/DataTable/SearchFilter.tsx b/src/components/common/DataTable/SearchFilter.tsx
new file mode 100644
index 00000000..6ddb0771
--- /dev/null
+++ b/src/components/common/DataTable/SearchFilter.tsx
@@ -0,0 +1,58 @@
+/**
+ * SearchFilter Component
+ *
+ * 검색 입력과 드롭다운 필터를 제공하는 공통 컴포넌트
+ */
+
+'use client';
+
+import { Search } from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import type { SearchFilterProps } from './types';
+
+export function SearchFilter({
+ searchValue,
+ onSearchChange,
+ searchConfig,
+ filterValue,
+ onFilterChange,
+ filterOptions,
+}: SearchFilterProps) {
+ return (
+
+
+ 전체 {totalItems}개 중 {startIndex + 1}-{Math.min(endIndex, totalItems)}개 표시
+
+ {pageSizeOptions && onPageSizeChange && (
+
+
+ 페이지당
+
+
+ )}
+
+
+
+
+ {getVisiblePages().map((page, index) => {
+ if (page === 'ellipsis') {
+ return (
+
+ ...
+
+ );
+ }
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+}
+
+export default SearchFilter;
\ No newline at end of file
diff --git a/src/components/common/DataTable/StatCards.tsx b/src/components/common/DataTable/StatCards.tsx
new file mode 100644
index 00000000..2d18a8ac
--- /dev/null
+++ b/src/components/common/DataTable/StatCards.tsx
@@ -0,0 +1,46 @@
+/**
+ * StatCards Component
+ *
+ * 통계 카드 그리드 컴포넌트
+ */
+
+'use client';
+
+import { Card, CardContent } from '@/components/ui/card';
+import type { StatCardsProps } from './types';
+
+export function StatCards({ stats, onStatClick }: StatCardsProps) {
+ return (
+
+
+ {filterOptions && filterOptions.length > 0 && onFilterChange && (
+
+ )}
+
+ {stats.map((stat, index) => (
+ {
+ if (onStatClick && stat.filterValue) {
+ onStatClick(stat.filterValue);
+ }
+ }}
+ >
+
+
+
+ ))}
+
+ );
+}
+
+export default StatCards;
\ No newline at end of file
diff --git a/src/components/common/DataTable/TabFilter.tsx b/src/components/common/DataTable/TabFilter.tsx
new file mode 100644
index 00000000..c089c362
--- /dev/null
+++ b/src/components/common/DataTable/TabFilter.tsx
@@ -0,0 +1,31 @@
+/**
+ * TabFilter Component
+ *
+ * 탭 형태의 필터 컴포넌트
+ */
+
+'use client';
+
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import type { TabFilterProps } from './types';
+
+export function TabFilter({ value, onChange, options }: TabFilterProps) {
+ return (
+
+
+
+
+ {stat.icon && (
+ + {stat.label} +
+{stat.value}
+
+
+ {options.map((option) => (
+
+ {option.label}
+ {option.count !== undefined && ` (${option.count})`}
+
+ ))}
+
+
+
+
+ );
+ }
+
+ return + 알 수 없는 필드 타입: {field.field_type} +
+
+
+ );
+ }
+
+ return (
+ 표시할 섹션이 없습니다.
+품목 유형을 선택하거나 필수 필드를 입력해주세요.
+
+ {sectionsWithVisibleFields.map((section) => (
+
+ );
+}
+
+export default DynamicFormRenderer;
\ No newline at end of file
diff --git a/src/components/items/DynamicItemForm/DynamicSection.tsx b/src/components/items/DynamicItemForm/DynamicSection.tsx
new file mode 100644
index 00000000..8ed23c94
--- /dev/null
+++ b/src/components/items/DynamicItemForm/DynamicSection.tsx
@@ -0,0 +1,162 @@
+/**
+ * DynamicSection Component
+ *
+ * 동적 섹션 렌더링 (Card + 접기/펼치기 + 필드 그리드)
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { DynamicField } from './DynamicField';
+import type { DynamicSectionProps, DynamicField as DynamicFieldType } from './types';
+import { cn } from '@/lib/utils';
+
+/**
+ * 필드를 그리드 레이아웃으로 정렬
+ */
+function organizeFieldsIntoGrid(fields: DynamicFieldType[]): DynamicFieldType[][] {
+ if (fields.length === 0) return [];
+
+ // 정렬: order_no → grid_row → grid_col
+ const sortedFields = [...fields].sort((a, b) => {
+ if (a.order_no !== b.order_no) return a.order_no - b.order_no;
+ if ((a.grid_row || 1) !== (b.grid_row || 1)) return (a.grid_row || 1) - (b.grid_row || 1);
+ return (a.grid_col || 1) - (b.grid_col || 1);
+ });
+
+ // 행별로 그룹화
+ const rows: Map
+
+ {section.is_collapsible && (
+
+ {isOpen ? (
+
+
+ {section.description && (
+
+ {section.description}
+ )} +
+
+ ) : (
+ // 일반 섹션: 필드 그리드 렌더링
+ 부품 구성 (BOM)
++ 기존 BOMSection 컴포넌트 통합 예정 +
+
+ {fieldRows.map((rowFields, rowIndex) => (
+
+ )}
+
+ {rowFields.map((field) => (
+
+ ))}
+ = 2 && 'md:col-span-2',
+ field.grid_span && field.grid_span >= 3 && 'lg:col-span-3',
+ field.grid_span && field.grid_span >= 4 && 'lg:col-span-4'
+ )}
+ >
+ onChange(field.field_key, value)}
+ onBlur={() => onBlur(field.field_key)}
+ disabled={disabled}
+ />
+
+ ))}
+
+
+ );
+ }
+
+ return (
+
+
+
+
+ {field.help_text && !error && (
+ {field.help_text}
+ )} + + {error &&{error}
} +
+
+ );
+}
+
+export default CheckboxField;
diff --git a/src/components/items/DynamicItemForm/fields/CustomField.tsx b/src/components/items/DynamicItemForm/fields/CustomField.tsx
new file mode 100644
index 00000000..dcadd75e
--- /dev/null
+++ b/src/components/items/DynamicItemForm/fields/CustomField.tsx
@@ -0,0 +1,479 @@
+/**
+ * CustomField Component
+ *
+ * 특수 필드 컴포넌트 래퍼 (전개도, BOM 등)
+ * - custom:drawing-canvas → DrawingCanvas
+ * - custom:bending-detail-table → BendingDetailTable (전개도 상세 테이블)
+ * - custom:bom-table → BOMSection
+ *
+ * 기존 ItemForm의 특수 컴포넌트를 재사용하면서 동적 폼과 통합
+ */
+
+'use client';
+
+import { useState, useCallback } from 'react';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { FileImage, Plus, Trash2 } from 'lucide-react';
+import type { DynamicFieldProps, FormValue } from '../types';
+import type { BendingDetail, BOMLine } from '@/types/item';
+import { cn } from '@/lib/utils';
+
+// ===== BOM 테이블 컴포넌트 =====
+
+interface BOMTableProps {
+ value: BOMLine[];
+ onChange: (lines: BOMLine[]) => void;
+ disabled?: boolean;
+}
+
+function BOMTable({ value, onChange, disabled }: BOMTableProps) {
+ const bomLines = Array.isArray(value) ? value : [];
+
+ const addLine = () => {
+ const newLine: BOMLine = {
+ id: `bom-${Date.now()}`,
+ childItemCode: '',
+ childItemName: '',
+ quantity: 1,
+ unit: 'EA',
+ };
+ onChange([...bomLines, newLine]);
+ };
+
+ const updateLine = (index: number, field: keyof BOMLine, fieldValue: string | number) => {
+ const updated = [...bomLines];
+ updated[index] = { ...updated[index], [field]: fieldValue };
+ onChange(updated);
+ };
+
+ const removeLine = (index: number) => {
+ onChange(bomLines.filter((_, i) => i !== index));
+ };
+
+ return (
+
+
+
+ {field.help_text && !error && (
+ {field.help_text}
+ )} + + {error &&{error}
} +
+ 부품 구성 (BOM)
+
+
+
+
+ ) : (
+ 등록된 BOM 항목이 없습니다.
+위 버튼을 클릭하여 품목을 추가하세요.
+
+
+ )}
+
+
+ {bomLines.map((line, index) => (
+ 품목코드
+ 품목명
+ 수량
+ 단위
+
+
+ updateLine(index, 'childItemCode', e.target.value)}
+ disabled={disabled}
+ />
+ updateLine(index, 'childItemName', e.target.value)}
+ disabled={disabled}
+ />
+ updateLine(index, 'quantity', parseInt(e.target.value) || 1)}
+ disabled={disabled}
+ />
+ updateLine(index, 'unit', e.target.value)}
+ disabled={disabled}
+ />
+
+
+ ))}
+
+
+
+
+
+
+ 폭 합계: {totalWidth.toFixed(1)} mm
+
+
+
+
+
+ ) : (
+ 전개도 상세 데이터가 없습니다.
+위 버튼을 클릭하여 행을 추가하세요.
+
+
+ )}
+
+
+ {details.map((row, index) => (
+ No
+ 입력값
+ 연신율
+ 계산값
+ 합계
+ 음영
+
+
+
+ ))}
+
+ {row.no}
+
+ updateRow(index, 'input', parseFloat(e.target.value) || 0)}
+ disabled={disabled}
+ />
+ updateRow(index, 'elongation', parseFloat(e.target.value) || 0)}
+ disabled={disabled}
+ />
+
+ {(row.input + row.elongation).toFixed(1)}
+
+
+ {row.sum.toFixed(1)}
+
+
+ updateRow(index, 'shaded', e.target.checked)}
+ disabled={disabled}
+ className="h-4 w-4"
+ />
+
+
+
+
+
+
+
+ {/* 파일 업로드 */}
+ {inputMethod === 'file' && (
+
+ {value ? (
+
+ )}
+
+ {/* 직접 그리기 (플레이스홀더) */}
+ {inputMethod === 'drawing' && (
+
+ 
+
+
+ ) : (
+
+
+
+
+ )}
+
+
+ )}
+ 직접 그리기 기능은 준비 중입니다.
+기존 DrawingCanvas 컴포넌트와 통합 예정
+
+
+ );
+ }
+ };
+
+ // 커스텀 필드는 자체 레이블이 있으므로 별도 레이블 불필요
+ return (
+ + 알 수 없는 커스텀 필드 타입: {field.field_type} +
+
+ {renderCustomComponent()}
+
+ {field.help_text && !error && (
+
+ );
+}
+
+export default CustomField;
\ No newline at end of file
diff --git a/src/components/items/DynamicItemForm/fields/DateField.tsx b/src/components/items/DynamicItemForm/fields/DateField.tsx
new file mode 100644
index 00000000..27b69515
--- /dev/null
+++ b/src/components/items/DynamicItemForm/fields/DateField.tsx
@@ -0,0 +1,100 @@
+/**
+ * DateField Component
+ *
+ * 날짜 선택 필드 (date, date-range)
+ */
+
+'use client';
+
+import { useState } from 'react';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import { CalendarIcon } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Label } from '@/components/ui/label';
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover';
+import type { DynamicFieldProps } from '../types';
+import { cn } from '@/lib/utils';
+
+export function DateField({
+ field,
+ value,
+ error,
+ onChange,
+ onBlur,
+ disabled,
+}: DynamicFieldProps) {
+ const [open, setOpen] = useState(false);
+
+ // 값을 Date 객체로 변환
+ const dateValue = value ? new Date(value as string) : undefined;
+ const isValidDate = dateValue && !isNaN(dateValue.getTime());
+
+ const handleSelect = (date: Date | undefined) => {
+ if (date) {
+ // ISO 문자열로 변환 (YYYY-MM-DD)
+ onChange(format(date, 'yyyy-MM-dd'));
+ } else {
+ onChange(null);
+ }
+ setOpen(false);
+ onBlur();
+ };
+
+ return (
+ {field.help_text}
+ )} + + {error &&{error}
} +
+
+
+
+
+
+
+
+
+
+
+ {field.help_text && !error && (
+
+ );
+}
+
+export default DateField;
\ No newline at end of file
diff --git a/src/components/items/DynamicItemForm/fields/DropdownField.tsx b/src/components/items/DynamicItemForm/fields/DropdownField.tsx
new file mode 100644
index 00000000..882e2e74
--- /dev/null
+++ b/src/components/items/DynamicItemForm/fields/DropdownField.tsx
@@ -0,0 +1,118 @@
+/**
+ * DropdownField Component
+ *
+ * 드롭다운/선택 필드 (dropdown, searchable-dropdown)
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import type { DynamicFieldProps, DropdownOption } from '../types';
+import { cn } from '@/lib/utils';
+
+export function DropdownField({
+ field,
+ value,
+ error,
+ onChange,
+ onBlur,
+ disabled,
+}: DynamicFieldProps) {
+ const [options, setOptions] = useState{field.help_text}
+ )} + + {error &&{error}
} +
+
+
+
+
+ {field.help_text && !error && (
+
+ );
+}
+
+export default DropdownField;
diff --git a/src/components/items/DynamicItemForm/fields/FileField.tsx b/src/components/items/DynamicItemForm/fields/FileField.tsx
new file mode 100644
index 00000000..f26806c2
--- /dev/null
+++ b/src/components/items/DynamicItemForm/fields/FileField.tsx
@@ -0,0 +1,203 @@
+/**
+ * FileField Component
+ *
+ * 파일 업로드 필드
+ */
+
+'use client';
+
+import { useRef, useState } from 'react';
+import { Upload, X, FileText } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import type { DynamicFieldProps } from '../types';
+import { cn } from '@/lib/utils';
+
+/**
+ * 파일 크기 포맷팅
+ */
+function formatFileSize(bytes: number): string {
+ if (bytes === 0) return '0 Bytes';
+ const k = 1024;
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+export function FileField({
+ field,
+ value,
+ error,
+ onChange,
+ onBlur,
+ disabled,
+}: DynamicFieldProps) {
+ const inputRef = useRef{field.help_text}
+ )} + + {error &&{error}
} +
+
+
+ {/* 드래그 앤 드롭 영역 */}
+
+ );
+}
+
+export default FileField;
\ No newline at end of file
diff --git a/src/components/items/DynamicItemForm/fields/NumberField.tsx b/src/components/items/DynamicItemForm/fields/NumberField.tsx
new file mode 100644
index 00000000..4b95795c
--- /dev/null
+++ b/src/components/items/DynamicItemForm/fields/NumberField.tsx
@@ -0,0 +1,122 @@
+/**
+ * NumberField Component
+ *
+ * 숫자 입력 필드 (number, currency)
+ */
+
+'use client';
+
+import { useCallback } from 'react';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import type { DynamicFieldProps } from '../types';
+import { cn } from '@/lib/utils';
+
+/**
+ * 숫자 포맷팅 (천단위 콤마)
+ */
+function formatNumber(value: number | string, isCurrency: boolean): string {
+ const num = typeof value === 'string' ? parseFloat(value) : value;
+ if (isNaN(num)) return '';
+
+ if (isCurrency) {
+ return num.toLocaleString('ko-KR');
+ }
+ return num.toString();
+}
+
+/**
+ * 포맷팅된 문자열을 숫자로 변환
+ */
+function parseFormattedNumber(value: string): number {
+ // 콤마 제거 후 숫자로 변환
+ const cleaned = value.replace(/,/g, '');
+ const num = parseFloat(cleaned);
+ return isNaN(num) ? 0 : num;
+}
+
+export function NumberField({
+ field,
+ value,
+ error,
+ onChange,
+ onBlur,
+ disabled,
+}: DynamicFieldProps) {
+ const isCurrency = field.field_type === 'currency';
+ const numValue = typeof value === 'number' ? value : parseFormattedNumber(String(value || '0'));
+
+ const handleChange = useCallback(
+ (e: React.ChangeEvent
+
+
+
+
+ {/* 선택된 파일 목록 */}
+ {files.length > 0 && (
+ + 클릭하거나 파일을 드래그하세요 +
++ {accept !== '*' ? `허용 형식: ${accept}` : '모든 형식 허용'} | + 최대 {formatFileSize(maxSize)} +
+
+ {files.map((file, index) => (
+
+ )}
+
+ {field.help_text && !error && (
+
+
+ ))}
+
+
+ {!disabled && !field.is_readonly && (
+
+ )}
+
+
+ {file.name}
+{formatFileSize(file.size)}
+{field.help_text}
+ )} + + {error &&{error}
} +
+
+
+
+ );
+}
+
+export default NumberField;
\ No newline at end of file
diff --git a/src/components/items/DynamicItemForm/fields/TextField.tsx b/src/components/items/DynamicItemForm/fields/TextField.tsx
new file mode 100644
index 00000000..0833c89d
--- /dev/null
+++ b/src/components/items/DynamicItemForm/fields/TextField.tsx
@@ -0,0 +1,83 @@
+/**
+ * TextField Component
+ *
+ * 텍스트 입력 필드 (textbox, textarea)
+ */
+
+'use client';
+
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import type { DynamicFieldProps } from '../types';
+import { cn } from '@/lib/utils';
+
+export function TextField({
+ field,
+ value,
+ error,
+ onChange,
+ onBlur,
+ disabled,
+}: DynamicFieldProps) {
+ const isTextarea = field.field_type === 'textarea';
+ const displayValue = value === null || value === undefined ? '' : String(value);
+
+ const handleChange = (e: React.ChangeEvent
+ {isCurrency && (
+
+ ₩
+
+ )}
+
+
+
+ {field.help_text && !error && (
+ {field.help_text}
+ )} + + {error &&{error}
} +
+
+
+ {isTextarea ? (
+
+ ) : (
+
+ )}
+
+ {field.help_text && !error && (
+
+ );
+}
+
+export default TextField;
\ No newline at end of file
diff --git a/src/components/items/DynamicItemForm/fields/index.ts b/src/components/items/DynamicItemForm/fields/index.ts
new file mode 100644
index 00000000..fa0eda6a
--- /dev/null
+++ b/src/components/items/DynamicItemForm/fields/index.ts
@@ -0,0 +1,11 @@
+/**
+ * 동적 필드 컴포넌트 인덱스
+ */
+
+export { TextField } from './TextField';
+export { DropdownField } from './DropdownField';
+export { NumberField } from './NumberField';
+export { DateField } from './DateField';
+export { CheckboxField } from './CheckboxField';
+export { FileField } from './FileField';
+export { CustomField } from './CustomField';
diff --git a/src/components/items/DynamicItemForm/hooks/index.ts b/src/components/items/DynamicItemForm/hooks/index.ts
new file mode 100644
index 00000000..dba7ffb4
--- /dev/null
+++ b/src/components/items/DynamicItemForm/hooks/index.ts
@@ -0,0 +1,7 @@
+/**
+ * 동적 폼 훅 인덱스
+ */
+
+export { useFormStructure, clearFormStructureCache, invalidateFormStructureCache } from './useFormStructure';
+export { useConditionalFields } from './useConditionalFields';
+export { useDynamicFormState } from './useDynamicFormState';
diff --git a/src/components/items/DynamicItemForm/hooks/useConditionalFields.ts b/src/components/items/DynamicItemForm/hooks/useConditionalFields.ts
new file mode 100644
index 00000000..ccd54783
--- /dev/null
+++ b/src/components/items/DynamicItemForm/hooks/useConditionalFields.ts
@@ -0,0 +1,256 @@
+/**
+ * useConditionalFields Hook
+ *
+ * 조건부 섹션/필드 표시 로직을 처리하는 훅
+ * - 필드 값에 따른 섹션 표시/숨김
+ * - 필드 값에 따른 필드 표시/숨김
+ * - 조건 평가 (equals, in, not_equals 등)
+ */
+
+'use client';
+
+import { useMemo } from 'react';
+import type {
+ ConditionalSection,
+ ConditionalField,
+ DynamicSection,
+ Condition,
+ FormData,
+ UseConditionalFieldsReturn,
+} from '../types';
+
+/**
+ * 단일 조건 평가
+ */
+function evaluateCondition(condition: Condition, values: FormData): boolean {
+ const fieldValue = values[condition.field_key];
+
+ switch (condition.operator) {
+ case 'equals':
+ return fieldValue === condition.value;
+
+ case 'not_equals':
+ return fieldValue !== condition.value;
+
+ case 'in':
+ if (Array.isArray(condition.value)) {
+ return condition.value.includes(fieldValue as string);
+ }
+ return false;
+
+ case 'not_in':
+ if (Array.isArray(condition.value)) {
+ return !condition.value.includes(fieldValue as string);
+ }
+ return true;
+
+ case 'contains':
+ if (typeof fieldValue === 'string' && typeof condition.value === 'string') {
+ return fieldValue.includes(condition.value);
+ }
+ return false;
+
+ case 'greater_than':
+ if (typeof fieldValue === 'number' && typeof condition.value === 'number') {
+ return fieldValue > condition.value;
+ }
+ return false;
+
+ case 'less_than':
+ if (typeof fieldValue === 'number' && typeof condition.value === 'number') {
+ return fieldValue < condition.value;
+ }
+ return false;
+
+ default:
+ return true;
+ }
+}
+
+/**
+ * 섹션의 display_condition 평가
+ */
+function isSectionConditionMet(section: DynamicSection, values: FormData): boolean {
+ // display_condition이 없으면 항상 표시
+ if (!section.display_condition) {
+ return true;
+ }
+
+ return evaluateCondition(section.display_condition, values);
+}
+
+/**
+ * 조건부 섹션 규칙에 따른 표시 여부 결정
+ */
+function evaluateConditionalSections(
+ sections: DynamicSection[],
+ conditionalSections: ConditionalSection[],
+ values: FormData
+): Set{field.help_text}
+ )} + + {error &&{error}
} +
+
+ );
+ }
+
+ // 에러 상태
+ if (structureError) {
+ return (
+
+
+ );
+ };
+
+ if (useDynamic) {
+ return (
+ <>
+
+ 🧪 폼 모드:
+
+ {useDynamic ? 'Dynamic' : 'Legacy'}
+
+
+
+