diff --git a/apps/as/src/pages/dashboard/lib/national-as-map.module.css b/apps/as/src/pages/dashboard/lib/national-as-map.module.css index 754f0d3d8..3a735138c 100644 --- a/apps/as/src/pages/dashboard/lib/national-as-map.module.css +++ b/apps/as/src/pages/dashboard/lib/national-as-map.module.css @@ -56,14 +56,12 @@ fill: rgba(0, 150, 255, 0.2) !important; stroke: #0066cc; stroke-width: 1; - vector-effect: non-scaling-stroke; } .svgContainer :global(svg) :global(.cls-1) { fill: rgba(0, 150, 255, 0.2) !important; stroke: #0066cc; stroke-width: 1; - vector-effect: non-scaling-stroke; } .svgContainer :global(svg) :global(.basin) { @@ -93,7 +91,6 @@ fill: rgba(0, 209, 209, 0.5); stroke: #399ac3; stroke-width: 1.3; - vector-effect: non-scaling-stroke; } .popup { diff --git a/apps/as/src/pages/dashboard/lib/use-national-as-map.ts b/apps/as/src/pages/dashboard/lib/use-national-as-map.ts index 60d12b752..3dbcb22ec 100644 --- a/apps/as/src/pages/dashboard/lib/use-national-as-map.ts +++ b/apps/as/src/pages/dashboard/lib/use-national-as-map.ts @@ -247,6 +247,11 @@ export function useNationalAsMap(basinDocPrgrsList: BasinDocPrgrsResponseDto[] | svg = svgLayerRef.current.querySelector("svg"); if (!svg) throw new Error("SVG element not found in loaded content"); + // 확대·축소해도 선 두께 유지. CSS 의 vector-effect 는 W3C CSS 검사 오류로 처리되므로 SVG 속성으로 지정 + svg.querySelectorAll("path, polygon, polyline").forEach((shape) => { + shape.setAttribute("vector-effect", "non-scaling-stroke"); + }); + applyViewBox(svg, stageRef.current); groups = collectBasinGroups(svg); labels = labelsLayerRef.current ? createLabels(labelsLayerRef.current, groups) : []; diff --git a/packages/common/components/src/ui/combobox/index.tsx b/packages/common/components/src/ui/combobox/index.tsx index 64298bc4e..d5209f864 100644 --- a/packages/common/components/src/ui/combobox/index.tsx +++ b/packages/common/components/src/ui/combobox/index.tsx @@ -117,7 +117,7 @@ function ComboboxContent({ data-slot="combobox-content" data-chips={!!anchor} className={cn( - "group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)+--spacing(7))] overflow-hidden rounded-sm border-input bg-popover text-popover-foreground shadow-md duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", + "group/combobox-content max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) ring-foreground/10 data-[chips=true]:min-w-(--anchor-width) *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative min-w-[calc(var(--anchor-width)_+_theme(spacing.7))] overflow-hidden rounded-sm border-input bg-popover text-popover-foreground shadow-md duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none", className, )} {...props} @@ -132,7 +132,7 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {