{/* 좌상단 코너 + 가로 눈금자 */}
diff --git a/frontend/components/report/designer/ReportDesignerRightPanel.tsx b/frontend/components/report/designer/ReportDesignerRightPanel.tsx
index bc2eea74..ff832e21 100644
--- a/frontend/components/report/designer/ReportDesignerRightPanel.tsx
+++ b/frontend/components/report/designer/ReportDesignerRightPanel.tsx
@@ -5,6 +5,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -27,6 +28,7 @@ export function ReportDesignerRightPanel() {
currentPage,
currentPageId,
updatePageSettings,
+ getQueryResult,
} = context;
const [activeTab, setActiveTab] = useState
("properties");
const [uploadingImage, setUploadingImage] = useState(false);
@@ -918,6 +920,717 @@ export function ReportDesignerRightPanel() {
)}
+ {/* 페이지 번호 설정 */}
+ {selectedComponent.type === "pageNumber" && (
+
+
+ 페이지 번호 설정
+
+
+
+
+
+
+
+
+ )}
+
+ {/* 카드 컴포넌트 설정 */}
+ {selectedComponent.type === "card" && (
+
+
+ 카드 설정
+
+
+ {/* 제목 표시 여부 */}
+
+
+ updateComponent(selectedComponent.id, {
+ showCardTitle: e.target.checked,
+ })
+ }
+ className="h-4 w-4"
+ />
+
+
+
+ {/* 제목 텍스트 */}
+ {selectedComponent.showCardTitle !== false && (
+
+
+
+ updateComponent(selectedComponent.id, {
+ cardTitle: e.target.value,
+ })
+ }
+ placeholder="정보 카드"
+ className="h-8"
+ />
+
+ )}
+
+ {/* 라벨 너비 */}
+
+
+
+ updateComponent(selectedComponent.id, {
+ labelWidth: Number(e.target.value),
+ })
+ }
+ min={40}
+ max={200}
+ className="h-8"
+ />
+
+
+ {/* 테두리 표시 */}
+
+
+ updateComponent(selectedComponent.id, {
+ showCardBorder: e.target.checked,
+ borderWidth: e.target.checked ? 1 : 0,
+ })
+ }
+ className="h-4 w-4"
+ />
+
+
+
+ {/* 폰트 크기 설정 */}
+
+
+ {/* 색상 설정 */}
+
+
+ {/* 항목 목록 관리 */}
+
+
+
+
+
+
+ {/* 쿼리 선택 (데이터 바인딩용) */}
+
+
+
+
+
+ {/* 항목 리스트 */}
+
+ {(selectedComponent.cardItems || []).map(
+ (item: { label: string; value: string; fieldName?: string }, index: number) => (
+
+
+ 항목 {index + 1}
+
+
+
+
+
+ {
+ const currentItems = [...(selectedComponent.cardItems || [])];
+ currentItems[index] = { ...item, label: e.target.value };
+ updateComponent(selectedComponent.id, {
+ cardItems: currentItems,
+ });
+ }}
+ className="h-6 text-xs"
+ placeholder="항목명"
+ />
+
+ {selectedComponent.queryId ? (
+
+
+
+
+ ) : (
+
+
+ {
+ const currentItems = [...(selectedComponent.cardItems || [])];
+ currentItems[index] = { ...item, value: e.target.value };
+ updateComponent(selectedComponent.id, {
+ cardItems: currentItems,
+ });
+ }}
+ className="h-6 text-xs"
+ placeholder="내용"
+ />
+
+ )}
+
+
+ ),
+ )}
+
+
+
+
+ updateComponent(selectedComponent.id, {
+ resultLabel: e.target.value,
+ })
+ }
+ placeholder="합계 금액"
+ className="h-8"
+ />
+
+
+ {/* 라벨 너비 */}
+
+
+
+ updateComponent(selectedComponent.id, {
+ labelWidth: Number(e.target.value),
+ })
+ }
+ min={60}
+ max={200}
+ className="h-8"
+ />
+
+
+ {/* 숫자 포맷 */}
+
+
+
+
+
+ {/* 통화 접미사 */}
+ {selectedComponent.numberFormat === "currency" && (
+
+
+
+ updateComponent(selectedComponent.id, {
+ currencySuffix: e.target.value,
+ })
+ }
+ placeholder="원"
+ className="h-8"
+ />
+
+ )}
+
+ {/* 폰트 크기 설정 */}
+
+
+ {/* 색상 설정 */}
+
+
+ {/* 계산 항목 목록 관리 */}
+
+
+
+
+
+
+ {/* 쿼리 선택 (데이터 바인딩용) */}
+
+
+
+
+
+ {/* 항목 리스트 */}
+
+ {(selectedComponent.calcItems || []).map((item, index: number) => (
+
+
+ 항목 {index + 1}
+
+
+
+
+
+ {
+ const currentItems = [...(selectedComponent.calcItems || [])];
+ currentItems[index] = { ...currentItems[index], label: e.target.value };
+ updateComponent(selectedComponent.id, {
+ calcItems: currentItems,
+ });
+ }}
+ className="h-6 text-xs"
+ placeholder="항목명"
+ />
+
+ {/* 두 번째 항목부터 연산자 표시 */}
+ {index > 0 && (
+
+
+
+
+ )}
+
+
+ {selectedComponent.queryId ? (
+
+
+
+
+ ) : (
+
+
+ {
+ const currentItems = [...(selectedComponent.calcItems || [])];
+ currentItems[index] = {
+ ...currentItems[index],
+ value: Number(e.target.value),
+ };
+ updateComponent(selectedComponent.id, {
+ calcItems: currentItems,
+ });
+ }}
+ className="h-6 text-xs"
+ placeholder="0"
+ />
+
+ )}
+
+
+ ))}
+
+
-
- 텍스트 내용
+