feat: add responsive tests for Option Settings and Split Panel

- Implemented responsive testing scripts for Option Settings and ResponsiveSplitPanel components.
- Added tests to verify layout behavior across various screen sizes (desktop, tablet, mobile).
- Generated screenshots and reports for visual validation of responsive designs.

Made-with: Cursor
This commit is contained in:
DDD1542
2026-03-12 10:04:26 +09:00
parent 00e15dd9f2
commit 45740c1457
18 changed files with 198 additions and 181 deletions

View File

@@ -26,7 +26,7 @@ import {
} from "@/components/ui/command";
import { Check, Plus, X, Info, RotateCcw } from "lucide-react";
import { icons as allLucideIcons } from "lucide-react";
import DOMPurify from "isomorphic-dompurify";
import { sanitizeSvg } from "@/lib/button-icon-map";
import { cn } from "@/lib/utils";
import { ComponentData } from "@/types/screen";
import { ColorPickerWithTransparent } from "../../common/ColorPickerWithTransparent";
@@ -370,9 +370,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
<span
className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(svgIcon.svg, {
USE_PROFILES: { svg: true },
}),
__html: sanitizeSvg(svgIcon.svg),
}}
/>
<span className="text-muted-foreground truncate text-[10px]">
@@ -525,9 +523,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
<span
className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(svgInput, {
USE_PROFILES: { svg: true },
}),
__html: sanitizeSvg(svgInput),
}}
/>
</div>
@@ -547,9 +543,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
setSvgError("유효한 SVG 코드가 아닙니다.");
return;
}
const sanitized = DOMPurify.sanitize(svgInput, {
USE_PROFILES: { svg: true },
});
const sanitized = sanitizeSvg(svgInput);
let finalName = svgName.trim();
const existingNames = new Set(
customSvgIcons.map((s) => s.name)
@@ -686,9 +680,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
<span
className="flex h-6 w-6 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(svgIcon.svg, {
USE_PROFILES: { svg: true },
}),
__html: sanitizeSvg(svgIcon.svg),
}}
/>
<span className="text-muted-foreground truncate text-[10px]">
@@ -841,9 +833,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
<span
className="flex h-8 w-8 items-center justify-center [&>svg]:h-full [&>svg]:w-full"
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(svgInput, {
USE_PROFILES: { svg: true },
}),
__html: sanitizeSvg(svgInput),
}}
/>
</div>
@@ -863,9 +853,7 @@ export const BasicTab: React.FC<ButtonTabProps> = ({
setSvgError("유효한 SVG 코드가 아닙니다.");
return;
}
const sanitized = DOMPurify.sanitize(svgInput, {
USE_PROFILES: { svg: true },
});
const sanitized = sanitizeSvg(svgInput);
let finalName = svgName.trim();
const existingNames = new Set(
customSvgIcons.map((s) => s.name)