e27845a82f
주요 변경사항: - 드래그앤드롭 컬럼의 라벨 숨김 및 placeholder로 라벨명 표시 - 기본 높이 30px로 변경 - 5개 시스템 컬럼(id, created_date, updated_date, writer, company_code) 숨김 - AI-개발자 협업 작업 수칙 문서 작성 및 .cursorrules에 통합 파일 변경: - frontend/components/screen/ScreenDesigner.tsx * getDefaultHeight(): 기본 높이를 30px로 변경 * handleDrop(): labelDisplay false, placeholder 추가 - frontend/components/screen/panels/TablesPanel.tsx * hiddenColumns Set으로 시스템 컬럼 필터링 - .cursor/rules/ai-developer-collaboration-rules.mdc (신규) * 확인 우선, 한 번에 하나, 철저한 마무리 원칙 * 데이터베이스 검증, 코드 수정, 테스트, 커뮤니케이션 규칙 - .cursorrules * 필수 확인 규칙 섹션 추가 * 모든 작업 시작/완료 시 협업 규칙 확인 강제화
80 lines
2.7 KiB
TypeScript
80 lines
2.7 KiB
TypeScript
import React from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Grid3X3 } from "lucide-react";
|
|
import { GridSettings } from "@/types/screen-management";
|
|
|
|
interface GridPanelProps {
|
|
gridSettings: GridSettings;
|
|
onGridSettingsChange: (settings: GridSettings) => void;
|
|
}
|
|
|
|
/**
|
|
* 격자 설정 패널 (10px 고정 격자)
|
|
*
|
|
* 사용자 설정:
|
|
* - 격자 표시 ON/OFF
|
|
* - 격자 스냅 ON/OFF
|
|
*
|
|
* 자동 설정 (변경 불가):
|
|
* - 격자 크기: 10px 고정
|
|
* - 격자 간격: 10px 고정
|
|
*/
|
|
export function GridPanel({ gridSettings, onGridSettingsChange }: GridPanelProps) {
|
|
const updateSetting = <K extends keyof GridSettings>(key: K, value: GridSettings[K]) => {
|
|
onGridSettingsChange({
|
|
...gridSettings,
|
|
[key]: value,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Card className="w-full">
|
|
<CardHeader className="space-y-1 pb-3">
|
|
<div className="flex items-center gap-2">
|
|
<Grid3X3 className="h-4 w-4" />
|
|
<CardTitle className="text-base">격자 설정</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
{/* 격자 표시 */}
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="showGrid" className="flex items-center gap-2 text-sm font-medium">
|
|
<Grid3X3 className="h-4 w-4 text-muted-foreground" />
|
|
격자 표시
|
|
</Label>
|
|
<Checkbox
|
|
id="showGrid"
|
|
checked={gridSettings.showGrid ?? false}
|
|
onCheckedChange={(checked) => updateSetting("showGrid", checked as boolean)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 격자 스냅 */}
|
|
<div className="flex items-center justify-between">
|
|
<Label htmlFor="snapToGrid" className="flex items-center gap-2 text-sm font-medium">
|
|
<Grid3X3 className="h-4 w-4 text-muted-foreground" />
|
|
격자 스냅
|
|
</Label>
|
|
<Checkbox
|
|
id="snapToGrid"
|
|
checked={gridSettings.snapToGrid}
|
|
onCheckedChange={(checked) => updateSetting("snapToGrid", checked as boolean)}
|
|
/>
|
|
</div>
|
|
|
|
{/* 격자 정보 (읽기 전용) */}
|
|
<div className="mt-4 rounded-md bg-muted p-3 text-xs text-muted-foreground">
|
|
<p className="font-medium mb-1">🔧 격자 시스템</p>
|
|
<ul className="space-y-0.5">
|
|
<li>• 격자 크기: <span className="font-semibold">10px 고정</span></li>
|
|
<li>• 컴포넌트는 10px 단위로 배치됩니다</li>
|
|
<li>• 격자 스냅을 끄면 자유롭게 배치 가능</li>
|
|
</ul>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|