123 lines
3.6 KiB
TypeScript
123 lines
3.6 KiB
TypeScript
"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>
|
||
);
|
||
}
|