요구사항

그리드 및 데이터 구조 정의

시스템의 기초가 되는 좌표계와 상태 구조를 정의합니다.

• 그리드 좌표계: 3 x 3 행렬로 관리하며, 각 셀은 (x, y) 좌표(1 ~ 3)를 가집니다.
• 카드 객체 모델:
  • id: 고유 식별자
  • x, y: 카드의 좌상단 시작 좌표
  • w, h: 카드의 너비와 높이 (1x1, 1x2, 2x1 등)

드래그 앤 드롭 매커니즘

브라우저의 Native Drag API 대신, 더 세밀한 제어를 위해 Mouse/Touch Event를 직접 사용합니다.

• 대상 선택: 드래그 중인 카드의 중심점을 기준으로 가장 가까운 그리드 셀 (x, y)를 타겟으로 인식합니다.
• 미리보기(Ghost/Placeholder): 카드가 놓일 위치를 실시간으로 시각화하여 사용자에게 피드백을 줍니다.
• 외부 진입: 카드 목록 뷰에서 그리드로 드래그할 때, 그리드 영역에 진입(onMouseEnter)하는 순간 새로운 카드 객체를 임시 생성합니다.

카드 밀어내기 알고리즘

카드가 겹칠 때 기존 카드를 이동시키는 규칙입니다.

• 충돌 감지: 타겟 셀에 이미 다른 Card_B가 존재할 경우 충돌로 간주합니다.

• 이동 방향 결정: 드래그 중인 Card_A가 Card_B의 중심을 기준으로 어느 방향(상, 하, 좌, 우)에서 진입했는지 계산합니다.

• 재귀적 밀어내기 (Recursive Pushing):

  1. Card_B를 결정된 방향으로 1칸 이동시킵니다.
  2. 이동한 위치가 그리드 밖이거나, 또 다른 Card_C와 겹치는지 확인합니다.
  3. 만약 공간이 없다면 다른 인접한 방향으로 이동이 가능한지 탐색합니다.

• 배치 불가능 판정 (Invalid State): 모든 인접 방향으로도 밀어낼 공간이 확보되지 않는다면, 해당 위치는 '배치 불가' 상태로 표시하고 드래그 종료 시 원래 위치로 되돌립니다.

  배치 불가능한 영역 위에 있을 때는 카드를 붉은색 틴트로 표시하거나 반투명 처리합니다.

(초안)

3x3으로 이루어진 div 그리드가 있다.

그리고 1x1, 1x2, 2x1, 1x3 등의 크기를 가지는 카드가 있다. 카드 목록 뷰에는 이러한 카드가 약 15개 존재한다. 각 카드는 cardCode = ‘SLS_01_01’ 등 string으로 된 고유한 값을 가지고 있다.