fix: Adjust merge logic to rely on CRDT timestamps

[kwaksj329]

📂 작업 내용

closes #188

• 작업 내용

💡 자세한 설명

1. 동기화 로직 수정

• LWWMap 클래스에 #sortedStrokes 배열 추가: 시간순으로 정렬된 스트로크들 관리
• findSortedInsertIndex: 정렬된 배열에 새로운 스트로크를 삽입할 인덱스 찾는 함수
• insertSortedStroke: 정렬된 배열에 새로운 스트로크 삽입 및 해당 결과 반환 (middle or end)
• insertSortedStroke 가 반환한 스트로크 삽입 위치 middle / end에 따라 드로잉 로직 변경됨

2. 드로잉 로직 수정

• 스트로크 삽입 위치가 middle인 경우: redraw 수행
  • B가 그림 그림 ➡️ A(나)가 방금 그림 그림 ➡️ B의 스트로크 정보 소켓으로 수신 받음 ➡️
    내가 방금 그린 그림보다 더 먼저 그려진 그림이므로 middle 위치에 삽입 되어야 하고, 방금 그린 그림보다 아래에 깔려야함
• 스트로크 삽입 위치가 end인 경우:
  • strokeData.points.length가 2보다 큰 경우는 FILL 모드인 경우임 ➡️ 채우기 operation 수행
  • strokeData.points.length가 2와 같거나 작은 경우는 PEN 모드인 경우임 ➡️ 스트로크 그리기 operation 수행

const renderStroke = useCallback(
    (strokeData: DrawingData, position: 'middle' | 'end') => {
      if (position === 'middle') {
        operation.redrawCanvas();
      } else {
        if (strokeData.points.length > 2) {
          operation.applyFill(strokeData);
        } else {
          operation.drawStroke(strokeData);
        }
      }
    },
    [operation],
  );

3. 보조 함수 추가

• createDrawingData: style, timestamp 속성 추가해주는 함수
• renderStroke: 스트로크 렌더링 로직 중앙화 (redrawCanvas / applyFill / drawStroke)

📗 참고 자료 & 구현 결과 (선택)

timestamp 기반 병합 로직 반영 전

• 왼쪽 브라우저 창 + 아이패드에서 동시에 같은 영역 FILL 클릭 시 ➡️ 병합 제대로 되지 않아 다른 화면 보임

2024-12-03.3.00.40.mov

timestamp 기반 병합 로직 반영 후

• 왼쪽 브라우저 창 + 아이패드에서 동시에 같은 영역 FILL 클릭 시 ➡️ 병합되어 동일한 캔버스 화면 보임

2024-12-03.3.19.10.mov

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

[github-actions]

📚 Storybook preview deployed to: Visit Storybook Preview

[github-actions]

🧹 Storybook preview for PR #190 has been removed.