컴포넌트 WYSIWYG 개선 및 구분선 리사이즈 방향 제한

frontend/components/report/designer/CanvasComponent.tsx

@@ -409,45 +409,19 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
     switch (component.type) {
       case "text":
-        return (
-          <div className="h-full w-full">
-            <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
-              <span>텍스트 필드</span>
-              {hasBinding && <span className="text-blue-600">● 연결됨</span>}
-            </div>
-            <div
-              style={{
-                fontSize: `${component.fontSize}px`,
-                color: component.fontColor,
-                fontWeight: component.fontWeight,
-                textAlign: component.textAlign as "left" | "center" | "right",
-                whiteSpace: "pre-wrap",
-              }}
-              className="w-full"
-            >
-              {displayValue}
-            </div>
-          </div>
-        );
-
       case "label":
         return (
-          <div className="h-full w-full">
+          <div
-            <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
+            className="h-full w-full"
-              <span>레이블</span>
+            style={{
-              {hasBinding && <span className="text-blue-600">● 연결됨</span>}
+              fontSize: `${component.fontSize}px`,
-            </div>
+              color: component.fontColor,
-            <div
+              fontWeight: component.fontWeight,
-              style={{
+              textAlign: component.textAlign as "left" | "center" | "right",
-                fontSize: `${component.fontSize}px`,
+              whiteSpace: "pre-wrap",
-                color: component.fontColor,
+            }}
-                fontWeight: component.fontWeight,
+          >
-                textAlign: component.textAlign as "left" | "center" | "right",
+            {displayValue}
-                whiteSpace: "pre-wrap",
-              }}
-            >
-              {displayValue}
-            </div>
           </div>
         );
 
@@ -470,10 +444,6 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
             return (
               <div className="h-full w-full overflow-auto">
-                <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
-                  <span>테이블</span>
-                  <span className="text-blue-600">● 연결됨 ({queryResult.rows.length}행)</span>
-                </div>
                 <table
                   className="w-full border-collapse text-xs"
                   style={{
@@ -530,30 +500,26 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
         // 기본 테이블 (데이터 없을 때)
         return (
-          <div className="h-full w-full">
+          <div className="flex h-full w-full items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
-            <div className="mb-1 text-xs text-gray-500">테이블</div>
+            쿼리를 연결하세요
-            <div className="flex h-[calc(100%-20px)] items-center justify-center border-2 border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
-              쿼리를 연결하세요
-            </div>
           </div>
         );
 
       case "image":
         return (
           <div className="h-full w-full overflow-hidden">
-            <div className="mb-1 text-xs text-gray-500">이미지</div>
             {component.imageUrl ? (
               <img
                 src={getFullImageUrl(component.imageUrl)}
                 alt="이미지"
                 style={{
                   width: "100%",
-                  height: "calc(100% - 20px)",
+                  height: "100%",
                   objectFit: component.objectFit || "contain",
                 }}
               />
             ) : (
-              <div className="flex h-[calc(100%-20px)] w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
+              <div className="flex h-full w-full items-center justify-center border border-dashed border-gray-300 bg-gray-50 text-xs text-gray-400">
                 이미지를 업로드하세요
               </div>
             )}
@@ -611,9 +577,8 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
         return (
           <div className="h-full w-full">
-            <div className="mb-1 text-xs text-gray-500">서명란</div>
             <div
-              className={`flex h-[calc(100%-20px)] gap-2 ${
+              className={`flex h-full gap-2 ${
                 sigLabelPos === "top"
                   ? "flex-col"
                   : sigLabelPos === "bottom"
@@ -675,8 +640,7 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
 
         return (
           <div className="h-full w-full">
-            <div className="mb-1 text-xs text-gray-500">도장란</div>
+            <div className="flex h-full gap-2">
-            <div className="flex h-[calc(100%-20px)] gap-2">
               {stampPersonName && <div className="flex items-center text-xs font-medium">{stampPersonName}</div>}
               <div className="relative flex-1">
                 {component.imageUrl ? (
@@ -983,38 +947,30 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         const isQR = barcodeType === "QR";
 
         return (
-          <div className="flex h-full w-full flex-col">
+          <div 
-            <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
+            className="flex h-full w-full items-center justify-center overflow-hidden"
-              <span>{isQR ? "QR코드" : `바코드 (${barcodeType})`}</span>
+            style={{ backgroundColor: barcodeBackground }}
-              {component.barcodeFieldName && component.queryId && (
+          >
-                <span className="text-blue-600">● 연결됨</span>
+            {isQR ? (
-              )}
+              <QRCodeRenderer
-            </div>
+                value={barcodeValue}
-            <div 
+                size={Math.min(component.width, component.height) - 10}
-              className="flex flex-1 items-center justify-center overflow-hidden"
+                fgColor={barcodeColor}
-              style={{ backgroundColor: barcodeBackground }}
+                bgColor={barcodeBackground}
-            >
+                level={qrErrorLevel}
-              {isQR ? (
+              />
-                <QRCodeRenderer
+            ) : (
-                  value={barcodeValue}
+              <BarcodeRenderer
-                  size={Math.min(component.width - 20, component.height - 40)}
+                value={barcodeValue}
-                  fgColor={barcodeColor}
+                format={barcodeType}
-                  bgColor={barcodeBackground}
+                width={component.width}
-                  level={qrErrorLevel}
+                height={component.height}
-                />
+                displayValue={showBarcodeText}
-              ) : (
+                lineColor={barcodeColor}
-                <BarcodeRenderer
+                background={barcodeBackground}
-                  value={barcodeValue}
+                margin={barcodeMargin}
-                  format={barcodeType}
+              />
-                  width={component.width - 20}
+            )}
-                  height={component.height - 40}
-                  displayValue={showBarcodeText}
-                  lineColor={barcodeColor}
-                  background={barcodeBackground}
-                  margin={barcodeMargin}
-                />
-              )}
-            </div>
           </div>
         );
 
@@ -1047,15 +1003,8 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
         const isChecked = getCheckboxValue();
 
         return (
-          <div className="flex h-full w-full flex-col">
+          <div 
-            <div className="mb-1 flex items-center justify-between text-xs text-gray-500">
+            className={`flex h-full w-full items-center gap-2 ${
-              <span>체크박스</span>
-              {component.checkboxFieldName && component.queryId && (
-                <span className="text-blue-600">● 연결됨</span>
-              )}
-            </div>
-            <div 
-              className={`flex flex-1 items-center gap-2 ${
                 checkboxLabelPosition === "left" ? "flex-row-reverse justify-end" : ""
               }`}
             >
@@ -1087,17 +1036,17 @@ export function CanvasComponent({ component }: CanvasComponentProps) {
                 )}
               </div>
               {/* 레이블 */}
-              {checkboxLabel && (
+            {/* 레이블 */}
-                <span
+            {checkboxLabel && (
-                  style={{
+              <span
-                    fontSize: `${component.fontSize || 14}px`,
+                style={{
-                    color: component.fontColor || "#374151",
+                  fontSize: `${component.fontSize || 14}px`,
-                  }}
+                  color: component.fontColor || "#374151",
-                >
+                }}
-                  {checkboxLabel}
+              >
-                </span>
+                {checkboxLabel}
-              )}
+              </span>
-            </div>
+            )}
           </div>
         );