kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

제목 및 헤더 설정 기능 추가

This commit is contained in:
dohyeons 2025-10-23 14:27:27 +09:00
parent 6422dac2a4
commit afe4074d37
1 changed files with 43 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/components/admin/dashboard/widgets/custom-metric/CustomMetricConfigSidebar.tsx
View File

@ -35,6 +35,8 @@ export default function CustomMetricConfigSidebar({
);
const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
const [customTitle, setCustomTitle] = useState<string>(element.customTitle || element.title || "");
const [showHeader, setShowHeader] = useState<boolean>(element.showHeader !== false);
// 쿼리 실행 결과 처리
const handleQueryTest = (result: any) => {
@ -136,6 +138,8 @@ export default function CustomMetricConfigSidebar({
// 저장
const handleSave = () => {
onApply({
customTitle: customTitle,
showHeader: showHeader,
customMetricConfig: {
metrics,
},
@ -170,31 +174,64 @@ export default function CustomMetricConfigSidebar({
{/* 본문: 스크롤 가능 영역 */}
<div className="flex-1 overflow-y-auto p-3">
<div className="space-y-3">
{/* 헤더 설정 */}
<div className="rounded-lg bg-white p-3 shadow-sm">
<div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">헤더 설정</div>
<div className="space-y-2">
{/* 제목 입력 */}
<div>
<label className="mb-0.5 block text-[9px] font-medium text-gray-500">제목</label>
<Input
value={customTitle}
onChange={(e) => setCustomTitle(e.target.value)}
placeholder="위젯 제목을 입력하세요"
className="h-8 text-xs"
style={{ fontSize: "12px" }}
/>
</div>
{/* 헤더 표시 여부 */}
<div className="flex items-center justify-between">
<label className="text-[9px] font-medium text-gray-500">헤더 표시</label>
<button
onClick={() => setShowHeader(!showHeader)}
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
showHeader ? "bg-primary" : "bg-gray-300"
}`}
>
<span
className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
showHeader ? "translate-x-5" : "translate-x-0.5"
}`}
/>
</button>
</div>
</div>
</div>
{/* 데이터 소스 타입 선택 */}
<div className="rounded-lg bg-white p-3 shadow-sm">
<div className="mb-2 text-[10px] font-semibold tracking-wide text-gray-500 uppercase">데이터 소스 타입</div>
<div className="grid grid-cols-2 gap-2">
<button
onClick={() => handleDataSourceTypeChange("database")}
className={`flex h-20 flex-col items-center justify-center gap-2 rounded border transition-all ${
className={`flex h-16 items-center justify-center rounded border transition-all ${
dataSourceType === "database"
? "border-primary bg-primary/5 text-primary"
: "border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-300"
}`}
>
<span className="text-2xl">🗄️</span>
<span className="text-xs font-medium">데이터베이스</span>
<span className="text-sm font-medium">데이터베이스</span>
</button>
<button
onClick={() => handleDataSourceTypeChange("api")}
className={`flex h-20 flex-col items-center justify-center gap-2 rounded border transition-all ${
className={`flex h-16 items-center justify-center rounded border transition-all ${
dataSourceType === "api"
? "border-primary bg-primary/5 text-primary"
: "border-gray-200 bg-gray-50 text-gray-600 hover:border-gray-300"
}`}
>
<span className="text-2xl">🌐</span>
<span className="text-xs font-medium">REST API</span>
<span className="text-sm font-medium">REST API</span>
</button>
</div>
</div>