react-konva로 2D 맵 시각화 구현하기

import { Stage, Layer, Rect, Circle, Ellipse, Line, Arrow, Star, RegularPolygon, Text } from 'react-konva'

function ShapeShowcase() {
  return (
    <Stage width={600} height={400}>
      <Layer>
        {/* 사각형 (둥근 모서리) */}
        <Rect x={20} y={20} width={100} height={60} fill="#3b82f6" cornerRadius={8} />

        {/* 원 */}
        <Circle x={200} y={60} radius={40} fill="#10b981" />

        {/* 타원 */}
        <Ellipse x={320} y={60} radiusX={60} radiusY={30} fill="#f59e0b" />

        {/* 직선 */}
        <Line points={[20, 150, 200, 150]} stroke="#6b7280" strokeWidth={2} />

        {/* 꺾인 선 (다각형 외곽선) */}
        <Line
          points={[20, 200, 80, 160, 140, 200, 140, 260, 20, 260]}
          closed
          stroke="#ef4444"
          strokeWidth={2}
          fill="rgba(239,68,68,0.1)"
        />

        {/* 부드러운 곡선 (tension 사용) */}
        <Line
          points={[200, 180, 260, 140, 320, 200, 380, 160]}
          stroke="#8b5cf6"
          strokeWidth={3}
          tension={0.5}
        />

        {/* 화살표 */}
        <Arrow
          points={[20, 320, 150, 320]}
          stroke="#1d4ed8"
          fill="#1d4ed8"
          strokeWidth={2}
          pointerLength={10}
          pointerWidth={8}
        />

        {/* 정삼각형 (RegularPolygon, sides=3) */}
        <RegularPolygon x={260} y={310} sides={3} radius={40} fill="#f97316" />

        {/* 별 */}
        <Star
          x={380} y={310}
          numPoints={5}
          innerRadius={20}
          outerRadius={40}
          fill="#eab308"
        />
      </Layer>
    </Stage>
  )
}

<Rect
  x={50} y={50} width={200} height={100}

  // 채우기
  fill="#3b82f6"
  opacity={0.8}

  // 테두리
  stroke="#1d4ed8"
  strokeWidth={2}

  // 그림자
  shadowColor="rgba(0,0,0,0.3)"
  shadowBlur={10}
  shadowOffsetX={4}
  shadowOffsetY={4}

  // 회전 / 변환
  rotation={15}           // 도(degree) 단위
  scaleX={1.2}
  offsetX={100}           // 회전 기준점 이동
/>

import { useState } from 'react'
import { Stage, Layer, Circle, Text } from 'react-konva'

function InteractiveCircle() {
  const [label, setLabel] = useState('도형 위에 마우스를 올려보세요')
  const [color, setColor] = useState('#3b82f6')

  return (
    <Stage width={500} height={300}>
      <Layer>
        <Text x={10} y={10} text={label} fontSize={16} fill="#374151" />
        <Circle
          x={250} y={180} radius={60}
          fill={color}
          // 호버 시 색상 변경 + 커서 변경
          onMouseEnter={(e) => {
            setColor('#1d4ed8')
            setLabel('호버 중!')
            // 캔버스 커서 스타일 변경
            e.target.getStage()!.container().style.cursor = 'pointer'
          }}
          onMouseLeave={(e) => {
            setColor('#3b82f6')
            setLabel('도형 위에 마우스를 올려보세요')
            e.target.getStage()!.container().style.cursor = 'default'
          }}
          // 클릭 이벤트
          onClick={() => setLabel('클릭됨!')}
          // 우클릭
          onContextMenu={(e) => {
            e.evt.preventDefault() // 브라우저 기본 메뉴 방지
            setLabel('우클릭됨!')
          }}
        />
      </Layer>
    </Stage>
  )
}

import { useState } from 'react'
import { Stage, Layer, Rect } from 'react-konva'

function DraggableBox() {
  const [pos, setPos] = useState({ x: 50, y: 50 })

  return (
    <Stage width={500} height={400}>
      <Layer>
        <Rect
          x={pos.x}
          y={pos.y}
          width={100}
          height={100}
          fill="#3b82f6"
          draggable                          // ← 이것만 추가하면 드래그 활성화
          onDragEnd={(e) => {               // 드래그 종료 시 위치 저장
            setPos({ x: e.target.x(), y: e.target.y() })
          }}
        />
      </Layer>
    </Stage>
  )
}

import { useState } from 'react'
import { Stage, Layer, Star, Text } from 'react-konva'

type ShapeItem = { id: string; x: number; y: number; isDragging: boolean }

const initialItems: ShapeItem[] = [
  { id: 'a', x: 100, y: 100, isDragging: false },
  { id: 'b', x: 250, y: 150, isDragging: false },
  { id: 'c', x: 400, y: 100, isDragging: false },
]

function DraggableStars() {
  const [items, setItems] = useState(initialItems)

  const handleDragStart = (id: string) => {
    setItems((prev) =>
      prev.map((item) => ({ ...item, isDragging: item.id === id }))
    )
  }

  const handleDragEnd = (id: string, x: number, y: number) => {
    setItems((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, x, y, isDragging: false } : item
      )
    )
  }

  return (
    <Stage width={600} height={300}>
      <Layer>
        <Text text="별을 드래그해보세요" x={10} y={10} fontSize={16} />
        {items.map((item) => (
          <Star
            key={item.id}
            x={item.x}
            y={item.y}
            numPoints={5}
            innerRadius={20}
            outerRadius={40}
            fill="#eab308"
            draggable
            // 드래그 중일 때 크기와 그림자로 시각 피드백
            scaleX={item.isDragging ? 1.3 : 1}
            scaleY={item.isDragging ? 1.3 : 1}
            shadowBlur={item.isDragging ? 15 : 0}
            shadowColor="rgba(0,0,0,0.4)"
            onDragStart={() => handleDragStart(item.id)}
            onDragEnd={(e) => handleDragEnd(item.id, e.target.x(), e.target.y())}
          />
        ))}
      </Layer>
    </Stage>
  )
}

<Rect
  x={100} y={100} width={80} height={80}
  fill="#10b981"
  draggable
  // 스테이지 경계 안으로만 이동 가능하도록 제한
  dragBoundFunc={(pos) => ({
    x: Math.max(0, Math.min(pos.x, 500 - 80)),
    y: Math.max(0, Math.min(pos.y, 400 - 80)),
  })}
/>

{/* 수평 방향으로만 이동 */}
<Rect
  x={100} y={250} width={80} height={40}
  fill="#f59e0b"
  draggable
  dragBoundFunc={function(pos) {
    return { x: pos.x, y: this.absolutePosition().y }
  }}
/>

Stage (캔버스 전체 영역)
  └── Layer (도형 그룹)
        └── Shape (Rect, Circle, Text, Group 등)

import { Stage, Layer, Rect, Text } from 'react-konva'

function SimpleCanvas() {
  return (
    <Stage width={800} height={600}>
      <Layer>
        <Rect x={10} y={10} width={200} height={100} fill="#3b82f6" />
        <Text x={20} y={20} text="Hello Konva" fontSize={18} fill="white" />
      </Layer>
    </Stage>
  )
}

const VIRTUAL_WIDTH = 1000  // 가상 캔버스 기준 너비
const CANVAS_PADDING = 30   // 여백

function calcCanvasScale(
  containerW: number,
  containerH: number,
  mapW?: number,
  mapH?: number,
) {
  // 맵 비율에 맞는 가상 높이 계산
  const virtualH = mapW && mapH
    ? VIRTUAL_WIDTH * (mapH / mapW)
    : 600

  // 컨테이너에 맞는 스케일 계산 (패딩 제외)
  const scaleX = (containerW - CANVAS_PADDING * 2) / VIRTUAL_WIDTH
  const scaleY = (containerH - CANVAS_PADDING * 2) / virtualH

  // 비율 유지를 위해 더 작은 스케일 사용
  const scale = Math.min(scaleX, scaleY)

  return {
    scaleX: scale,
    scaleY: scale,
    offsetX: CANVAS_PADDING,
    offsetY: CANVAS_PADDING,
  }
}

<Stage
  width={containerWidth}
  height={containerHeight}
  scaleX={scaleX}
  scaleY={scaleY}
  x={offsetX}
  y={offsetY}
>
  <Layer>
    {/* 도형은 가상 좌표(0~1000)로만 계산 */}
    <Rect x={100} y={50} width={300} height={200} fill="#3b82f6" />
  </Layer>
</Stage>

const VIRTUAL_WIDTH = 1000

function calcPixelsPerUnit(mapWidthInMeters: number) {
  // 1미터당 가상 픽셀 수
  return VIRTUAL_WIDTH / mapWidthInMeters
}

// 사용 예시
const pxPerMeter = calcPixelsPerUnit(50) // → 20

// 맵에서 x=3m, y=4m 위치, 5m x 6m 크기인 영역의 픽셀 좌표
const region = {
  x: 3 * pxPerMeter,      // → 60
  y: 4 * pxPerMeter,      // → 80
  width: 5 * pxPerMeter,  // → 100
  height: 6 * pxPerMeter, // → 120
}

import { Group, Rect, Text } from 'react-konva'

interface RegionData {
  layout: { x: number; y: number; width: number; height: number } // 미터 단위
  name: string
  color: string
}

interface RegionShapeProps {
  region: RegionData
  pxPerUnit: number  // 단위당 픽셀 수
}

const LABEL_OFFSET = 16
const BORDER_STROKE = 2
const FILL_ALPHA = 0.15
const INSET = 3

function RegionShape({ region, pxPerUnit }: RegionShapeProps) {
  const { x: xUnit, y: yUnit, width: wUnit, height: hUnit } = region.layout

  // 미터 → 가상 픽셀 변환
  const px = xUnit * pxPerUnit
  const py = yUnit * pxPerUnit
  const pw = wUnit * pxPerUnit
  const ph = hUnit * pxPerUnit

  return (
    <Group>
      {/* 채우기 사각형 */}
      <Rect
        x={px + INSET}
        y={py + INSET}
        width={pw - INSET * 2}
        height={ph - INSET * 2}
        fill={region.color}
        opacity={FILL_ALPHA}
      />
      {/* 테두리 사각형 (별도 레이어처럼 분리) */}
      <Rect
        x={px + INSET}
        y={py + INSET}
        width={pw - INSET * 2}
        height={ph - INSET * 2}
        stroke={region.color}
        strokeWidth={BORDER_STROKE}
        fill="transparent"
      />
      {/* 라벨 */}
      <Text
        x={px + LABEL_OFFSET}
        y={py + LABEL_OFFSET}
        text={region.name}
        fontSize={18}
        fontStyle="bold"
        fill={region.color}
      />
    </Group>
  )
}

❌ 문제: 인접한 두 영역의 테두리가 겹침
┌──────┐┌──────┐
│  A   ││  B   │  ← 중간 경계선이 2px × 2 = 4px처럼 보임
└──────┘└──────┘

✅ 해결: 각 영역을 INSET만큼 안쪽으로 축소
┌──────┐ ┌──────┐
│  A  │   │  B  │  ← 간격이 생겨 자연스러운 경계
└──────┘ └──────┘

const INSET = 3  // 가상 픽셀 단위

<Rect
  x={px + INSET}
  y={py + INSET}
  width={pw - INSET * 2}
  height={ph - INSET * 2}
  fill={color}
/>

import { useEffect, useRef, useState } from 'react'

function useContainerDimensions() {
  const ref = useRef<HTMLDivElement>(null)
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 })

  useEffect(() => {
    const el = ref.current
    if (!el) return

    const observer = new ResizeObserver(([entry]) => {
      const { width, height } = entry.contentRect
      setDimensions({ width, height })
    })

    observer.observe(el)

    // 초기 크기 즉시 설정
    const rect = el.getBoundingClientRect()
    setDimensions({ width: rect.width, height: rect.height })

    return () => observer.disconnect()
  }, [])

  return { ref, ...dimensions }
}

<Stage width={width} height={height} scaleX={scale} scaleY={scale}>
  {/* 레이어 1: 기본 맵 영역 (정적, 자주 변경 안 됨) */}
  <Layer>
    {regions.map((region) => (
      <RegionShape key={region.id} region={region} pxPerUnit={pxPerUnit} />
    ))}
  </Layer>

  {/* 레이어 2: 동적 오버레이 (자주 업데이트) */}
  <Layer>
    {regions.map((region) => renderOverlay?.(region, pxPerUnit))}
  </Layer>
</Stage>

import { Layer, Stage } from 'react-konva'

const VIRTUAL_WIDTH = 1000
const CANVAS_PADDING = 30

function calcPxPerUnit(mapWidthInUnits: number) {
  return VIRTUAL_WIDTH / mapWidthInUnits
}

function calcScale(containerW: number, containerH: number, mapW: number, mapH: number) {
  const virtualH = VIRTUAL_WIDTH * (mapH / mapW)
  const sx = (containerW - CANVAS_PADDING * 2) / VIRTUAL_WIDTH
  const sy = (containerH - CANVAS_PADDING * 2) / virtualH
  const scale = Math.min(sx, sy)
  return { scaleX: scale, scaleY: scale, offsetX: CANVAS_PADDING, offsetY: CANVAS_PADDING }
}

interface MapData {
  widthInMeters: number
  heightInMeters: number
  regions: RegionData[]
}

interface MapViewerProps {
  map: MapData
  renderOverlay?: (region: RegionData, pxPerUnit: number) => React.ReactNode
}

function MapViewer({ map, renderOverlay }: MapViewerProps) {
  const { ref, width, height } = useContainerDimensions()

  const pxPerUnit = calcPxPerUnit(map.widthInMeters)
  const { scaleX, scaleY, offsetX, offsetY } = calcScale(
    width, height,
    map.widthInMeters, map.heightInMeters
  )

  const aspectRatio = map.widthInMeters / map.heightInMeters

  return (
    <div
      ref={ref}
      style={{ width: '100%', aspectRatio: String(aspectRatio) }}
    >
      {width > 0 && height > 0 && (
        <Stage
          width={width}
          height={height}
          scaleX={scaleX}
          scaleY={scaleY}
          x={offsetX}
          y={offsetY}
        >
          <Layer>
            {map.regions.map((region) => (
              <RegionShape
                key={region.id}
                region={region}
                pxPerUnit={pxPerUnit}
              />
            ))}
          </Layer>
          {renderOverlay && (
            <Layer>
              {map.regions.map((region) => renderOverlay(region, pxPerUnit))}
            </Layer>
          )}
        </Stage>
      )}
    </div>
  )
}

npm install konva react-konva