6901baab8e
주요 변경사항: - 격자 설정을 편집 탭에서 항상 표시 (해상도 설정 하단) - 그리드 컬럼 수 동적 조정 가능 (1-24) - 컴포넌트 생성 시 현재 그리드 컬럼 수 기반 자동 계산 - 컴포넌트 너비가 설정한 컬럼 수대로 정확히 표시되도록 수정 수정된 파일: - ScreenDesigner: 컴포넌트 드롭 시 gridColumns와 style.width 동적 계산 - UnifiedPropertiesPanel: 격자 설정 UI 통합, 차지 컬럼 수 설정 시 width 자동 계산 - RealtimePreviewDynamic: getWidth 우선순위 수정, DOM 크기 디버깅 로그 추가 - 8개 컴포넌트: componentStyle.width를 항상 100%로 고정 * ButtonPrimaryComponent * TextInputComponent * NumberInputComponent * TextareaBasicComponent * DateInputComponent * TableListComponent * CardDisplayComponent 문제 해결: - 컴포넌트 내부에서 component.style.width를 재사용하여 이중 축소 발생 - 해결: 부모 컨테이너(RealtimePreviewDynamic)가 width 제어, 컴포넌트는 항상 100% - 결과: 파란 테두리와 내부 콘텐츠가 동일한 크기로 정확히 표시
92 lines
2.7 KiB
TypeScript
92 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React, { useMemo } from "react";
|
|
import { NumberingRuleConfig } from "@/types/numbering-rule";
|
|
|
|
interface NumberingRulePreviewProps {
|
|
config: NumberingRuleConfig;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export const NumberingRulePreview: React.FC<NumberingRulePreviewProps> = ({
|
|
config,
|
|
compact = false
|
|
}) => {
|
|
const generatedCode = useMemo(() => {
|
|
if (!config.parts || config.parts.length === 0) {
|
|
return "규칙을 추가해주세요";
|
|
}
|
|
|
|
const parts = config.parts
|
|
.sort((a, b) => a.order - b.order)
|
|
.map((part) => {
|
|
if (part.generationMethod === "manual") {
|
|
return part.manualConfig?.value || "XXX";
|
|
}
|
|
|
|
const autoConfig = part.autoConfig || {};
|
|
|
|
switch (part.partType) {
|
|
// 1. 순번 (자동 증가)
|
|
case "sequence": {
|
|
const length = autoConfig.sequenceLength || 3;
|
|
const startFrom = autoConfig.startFrom || 1;
|
|
return String(startFrom).padStart(length, "0");
|
|
}
|
|
|
|
// 2. 숫자 (고정 자릿수)
|
|
case "number": {
|
|
const length = autoConfig.numberLength || 4;
|
|
const value = autoConfig.numberValue || 0;
|
|
return String(value).padStart(length, "0");
|
|
}
|
|
|
|
// 3. 날짜
|
|
case "date": {
|
|
const format = autoConfig.dateFormat || "YYYYMMDD";
|
|
const now = new Date();
|
|
const year = now.getFullYear();
|
|
const month = String(now.getMonth() + 1).padStart(2, "0");
|
|
const day = String(now.getDate()).padStart(2, "0");
|
|
|
|
switch (format) {
|
|
case "YYYY": return String(year);
|
|
case "YY": return String(year).slice(-2);
|
|
case "YYYYMM": return `${year}${month}`;
|
|
case "YYMM": return `${String(year).slice(-2)}${month}`;
|
|
case "YYYYMMDD": return `${year}${month}${day}`;
|
|
case "YYMMDD": return `${String(year).slice(-2)}${month}${day}`;
|
|
default: return `${year}${month}${day}`;
|
|
}
|
|
}
|
|
|
|
// 4. 문자
|
|
case "text":
|
|
return autoConfig.textValue || "TEXT";
|
|
|
|
default:
|
|
return "XXX";
|
|
}
|
|
});
|
|
|
|
return parts.join(config.separator || "");
|
|
}, [config]);
|
|
|
|
if (compact) {
|
|
return (
|
|
<div className="rounded-md bg-muted px-2 py-1">
|
|
<code className="text-xs font-mono text-foreground">{generatedCode}</code>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<p className="text-xs text-muted-foreground sm:text-sm">코드 미리보기</p>
|
|
<div className="rounded-md bg-muted p-3 sm:p-4">
|
|
<code className="text-sm font-mono text-foreground sm:text-base">{generatedCode}</code>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|