대시보드 방식 이전

2025-10-16 09:55:14 +09:00
parent d7613713cf
commit 18e2280623
7 changed files with 498 additions and 99 deletions
--- a/frontend/components/admin/dashboard/ResolutionSelector.tsx
+++ b/frontend/components/admin/dashboard/ResolutionSelector.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Monitor } from "lucide-react";
+
+export type Resolution = "hd" | "fhd" | "qhd" | "uhd";
+
+export interface ResolutionConfig {
+  width: number;
+  height: number;
+  label: string;
+}
+
+export const RESOLUTIONS: Record<Resolution, ResolutionConfig> = {
+  hd: {
+    width: 1280 - 360,
+    height: 720 - 312,
+    label: "HD (1280x720)",
+  },
+  fhd: {
+    width: 1920 - 360,
+    height: 1080 - 312,
+    label: "Full HD (1920x1080)",
+  },
+  qhd: {
+    width: 2560 - 360,
+    height: 1440 - 312,
+    label: "QHD (2560x1440)",
+  },
+  uhd: {
+    width: 3840 - 360,
+    height: 2160 - 312,
+    label: "4K UHD (3840x2160)",
+  },
+};
+
+interface ResolutionSelectorProps {
+  value: Resolution;
+  onChange: (resolution: Resolution) => void;
+  currentScreenResolution?: Resolution;
+}
+
+/**
+ * 현재 화면 해상도 감지
+ */
+export function detectScreenResolution(): Resolution {
+  if (typeof window === "undefined") return "fhd";
+
+  const width = window.screen.width;
+  const height = window.screen.height;
+
+  // 화면 해상도에 따라 적절한 캔버스 해상도 반환
+  if (width >= 3840 || height >= 2160) return "uhd";
+  if (width >= 2560 || height >= 1440) return "qhd";
+  if (width >= 1920 || height >= 1080) return "fhd";
+  return "hd";
+}
+
+/**
+ * 해상도 선택 컴포넌트
+ * - HD, Full HD, QHD, 4K UHD 지원
+ * - 12칸 그리드 유지, 셀 크기만 변경
+ * - 현재 화면 해상도 감지 및 경고 표시
+ */
+export function ResolutionSelector({ value, onChange, currentScreenResolution }: ResolutionSelectorProps) {
+  const currentConfig = RESOLUTIONS[value];
+  const screenConfig = currentScreenResolution ? RESOLUTIONS[currentScreenResolution] : null;
+
+  // 현재 선택된 해상도가 화면보다 큰지 확인
+  const isTooLarge =
+    screenConfig &&
+    (currentConfig.width > screenConfig.width + 360 || currentConfig.height > screenConfig.height + 312);
+
+  return (
+    <div className="flex items-center gap-2">
+      <Monitor className="h-4 w-4 text-gray-500" />
+      <Select value={value} onValueChange={(v) => onChange(v as Resolution)}>
+        <SelectTrigger className={`w-[180px] ${isTooLarge ? "border-orange-500" : ""}`}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent className="z-[99999]">
+          <SelectGroup>
+            <SelectLabel>캔버스 해상도</SelectLabel>
+            <SelectItem value="hd">
+              <div className="flex items-center gap-2">
+                <span>HD</span>
+                <span className="text-xs text-gray-500">1280x720</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="fhd">
+              <div className="flex items-center gap-2">
+                <span>Full HD</span>
+                <span className="text-xs text-gray-500">1920x1080</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="qhd">
+              <div className="flex items-center gap-2">
+                <span>QHD</span>
+                <span className="text-xs text-gray-500">2560x1440</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="uhd">
+              <div className="flex items-center gap-2">
+                <span>4K UHD</span>
+                <span className="text-xs text-gray-500">3840x2160</span>
+              </div>
+            </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      {isTooLarge && <span className="text-xs text-orange-600">⚠️ 현재 화면보다 큽니다</span>}
+    </div>
+  );
+}