95bef976a5
- 여러 문서의 내용을 업데이트하여 최신 정보를 반영하였습니다. - 컴포넌트 개발 가이드와 관련된 문서의 목차를 재구성하고, V2 및 Zod 레이아웃 시스템에 대한 내용을 추가하였습니다. - 화면 컴포넌트 개발 가이드를 개선하여 핵심 원칙과 패턴을 명확히 설명하였습니다. - 불필요한 문서 및 가이드를 삭제하고, 통합된 가이드를 통해 개발자들이 쉽게 참고할 수 있도록 하였습니다.
112 lines
2.5 KiB
TypeScript
112 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* V2ComponentRenderer
|
|
*
|
|
* V2 컴포넌트를 동적으로 렌더링하는 컴포넌트
|
|
* props.v2Type에 따라 적절한 컴포넌트를 렌더링
|
|
*/
|
|
|
|
import React, { forwardRef, useMemo } from "react";
|
|
import {
|
|
V2ComponentProps,
|
|
isV2Input,
|
|
isV2Select,
|
|
isV2Date,
|
|
isV2Text,
|
|
isV2Media,
|
|
isV2List,
|
|
isV2Layout,
|
|
isV2Group,
|
|
isV2Biz,
|
|
isV2Hierarchy,
|
|
} from "@/types/v2-components";
|
|
import { V2Input } from "./V2Input";
|
|
import { V2Select } from "./V2Select";
|
|
import { V2Date } from "./V2Date";
|
|
import { V2List } from "./V2List";
|
|
import { V2Layout } from "./V2Layout";
|
|
import { V2Group } from "./V2Group";
|
|
import { V2Media } from "./V2Media";
|
|
import { V2Biz } from "./V2Biz";
|
|
import { V2Hierarchy } from "./V2Hierarchy";
|
|
|
|
interface V2ComponentRendererProps {
|
|
props: V2ComponentProps;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* V2 컴포넌트 렌더러
|
|
*/
|
|
export const V2ComponentRenderer = forwardRef<HTMLDivElement, V2ComponentRendererProps>(
|
|
({ props, className }, ref) => {
|
|
const component = useMemo(() => {
|
|
// 타입 가드를 사용하여 적절한 컴포넌트 렌더링
|
|
if (isV2Input(props)) {
|
|
return <V2Input {...props} />;
|
|
}
|
|
|
|
if (isV2Select(props)) {
|
|
return <V2Select {...props} />;
|
|
}
|
|
|
|
if (isV2Date(props)) {
|
|
return <V2Date {...props} />;
|
|
}
|
|
|
|
if (isV2Text(props)) {
|
|
// V2Text는 V2Input의 textarea 모드로 대체
|
|
// 필요시 별도 구현
|
|
return (
|
|
<div className="p-2 border rounded text-sm text-muted-foreground">
|
|
V2Text (V2Input textarea 모드 사용 권장)
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isV2Media(props)) {
|
|
return <V2Media {...props} />;
|
|
}
|
|
|
|
if (isV2List(props)) {
|
|
return <V2List {...props} />;
|
|
}
|
|
|
|
if (isV2Layout(props)) {
|
|
return <V2Layout {...props} />;
|
|
}
|
|
|
|
if (isV2Group(props)) {
|
|
return <V2Group {...props} />;
|
|
}
|
|
|
|
if (isV2Biz(props)) {
|
|
return <V2Biz {...props} />;
|
|
}
|
|
|
|
if (isV2Hierarchy(props)) {
|
|
return <V2Hierarchy {...props} />;
|
|
}
|
|
|
|
// 알 수 없는 타입
|
|
return (
|
|
<div className="p-2 border border-destructive rounded text-sm text-destructive">
|
|
알 수 없는 컴포넌트 타입: {(props as { v2Type?: string }).v2Type}
|
|
</div>
|
|
);
|
|
}, [props]);
|
|
|
|
return (
|
|
<div ref={ref} className={className}>
|
|
{component}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
V2ComponentRenderer.displayName = "V2ComponentRenderer";
|
|
|
|
export default V2ComponentRenderer;
|
|
|