[개발 회고] 화면에 보이는 마지막 날과 저장되는 종료일은 다르다
화면에 보이는 마지막 날과 저장되는 종료일은 다르다
개발 회고 — 2026-07-23 (목)
오늘 작업 요약
캘린더 일정을 드래그로 리사이즈할 때 발생하는 날짜 변환 로직을 분석하고 정리했다. 화면에 보이는 날짜와 실제로 저장되는 종료일 값이 서로 다른 표현 방식을 쓰고 있다는 것을 확인하고, 이를 양방향으로 변환하는 유틸 함수와 테스트를 작성했다. 그 외에 레이아웃 버그 수정 1건과 UI 개선 4건을 완료했다.
- 캘린더 일정 리사이즈 핵심 로직 리팩토링 — 리사이즈 관련 날짜 변환 유틸 함수 정리
- 캘린더 이벤트 포맷팅 유틸 테스트 작성 — 리사이즈 시 날짜 변환 로직과 월뷰 종일/시간 지정 이벤트 분류 로직 검증(40개 이상의 테스트 케이스)
- 캘린더 그리드 레이아웃 버그 수정 — 날짜 칸의 컬럼 경계선이 중복되던 문제 정리
- UI 개선 4건 — 필터 배지 추가(그리드/캘린더/타임라인), 워크스페이스 UI 리디자인, 그리드 경계선 정리, 아이콘 디자인 개선
커밋 요약: 5개 커밋 완료, 리사이즈 리팩토링은 아직 진행 중(미커밋)
STAR 정리
Situation (상황)
캘린더 라이브러리에서 일정을 드래그로 늘리거나 줄일 때, 화면에 보이는 마지막 날짜와 실제로 저장해야 하는 종료일 값이 서로 다른 방식으로 표현되고 있었다. 캘린더 라이브러리는 내부적으로 “종료일 다음 날 자정”을 종료 시각으로 쓰는 방식(exclusive)을 쓰는데, 이 때문에 화면에 보이는 마지막 날과 실제 저장되는 값 사이에 변환이 필요했다. 게다가 종일 이벤트와 시간이 지정된 이벤트가 종료일을 표현하는 방식도 서로 달라서(하나는 자정 기준, 하나는 특정 시각 기준), 리사이즈 저장 로직이 이 둘을 구분하지 못하면 오류가 생길 수 있는 상태였다. 실제로 메인 배포 버전에서는 시작일 쪽 리사이즈는 정상 동작했지만, 종료일 쪽 리사이즈는 화면상으로는 바뀐 것처럼 보여도 실제로는 저장에 실패하는 버그가 있었다.
Task (과제)
- 리사이즈 시 화면에 보이는 날짜와 저장용 종료일 값을 정확히 양방향 변환하는 로직 정리
- 종일 이벤트와 시간 지정 이벤트의 종료일 표현 차이를 반영한 리사이즈 저장 로직 설계
- 관련 로직을 테스트로 충분히 검증
- 별개로 발견된 레이아웃 버그와 UI 개선 사항 처리
Action (행동)
- 리사이즈 관련 날짜 변환을 전담하는 유틸 함수들을 정리함. 화면에 보이는 마지막 날짜 문자열을 계산하는 함수, 그 값을 저장용 종료일 값으로 다시 변환하는 함수, 날짜 문자열에 일수를 더하는 보조 함수 등을 만들고, 캘린더 컴포넌트가 이 유틸을 사용하도록 연결함
- 리사이즈 시 날짜가 양방향으로 정확히 변환되는지, 그리고 월뷰에서 종일 이벤트와 시간 지정 이벤트가 올바르게 분류되는지를 검증하는 테스트를 40개 이상 작성함
- 캘린더 그리드에서 날짜 칸의 컬럼 경계선이 이중으로 겹쳐 보이던 스타일 문제를 정리함
- 그리드·캘린더·타임라인에 필터 배지를 추가하고, 워크스페이스 UI를 다시 디자인하고, 그리드 경계선 스타일을 정리하고, 아이콘 디자인을 개선함
Result (결과)
- 리사이즈 관련 날짜 변환 로직과 테스트는 정리되었으나, 실제 리사이즈 기능 자체는 아직 미커밋 상태로 진행 중임
- 메인 배포 버전 기준으로 확인된 버그는 다음과 같이 정리됨: 왼쪽(시작일) 리사이즈는 정상 동작, 오른쪽(종료일) 리사이즈는 화면상 변경처럼 보이나 실제 저장에는 실패하는 상태(현재 수정 중), 종료일이 설정되지 않은 이벤트를 멀티데이로 전환할 때의 처리는 아직 스펙 재검토가 필요한 상태
- 레이아웃 버그 수정과 UI 개선 4건은 완료되어 커밋됨
실제 측정 가능한 지표
| 지표 | 확인 방법 | 비고 |
|---|---|---|
| 완료된 커밋 수 | git log --stat (오늘 범위) |
5개 커밋 |
| 신규 작성된 테스트 케이스 수 | 테스트 파일 내 it()/test() 블록 수 |
40개 이상 |
| 종료일 리사이즈 버그 재현 여부 | 메인 배포 버전에서 오른쪽 핸들 드래그 후 저장 결과 확인 | 화면 표시와 실제 저장값 불일치 확인됨 |
| 레이아웃 버그(컬럼 경계선 중복) 수정 확인 | 브라우저에서 캘린더 그리드 렌더링 결과 비교 | 수정 전/후 스크린샷 비교 가능 |
| 리사이즈 유틸 함수의 테스트 커버리지 | 테스트 러너의 커버리지 리포트 | 실제 수치는 아직 확인 전 |
추정 가능한 효과 (근거 포함)
- 날짜 변환 로직 정리로 리사이즈 버그의 근본 해결 가능성 (추정): 화면 표시용 날짜와 저장용 종료일 값을 명확히 구분하는 변환 함수를 마련하면서, 기존에 화면과 저장값이 불일치하던 문제를 근본적으로 해결할 기반이 마련되었을 것으로 예상됨. 근거: 변환을 전담하는 유틸 함수와 이를 검증하는 다수의 테스트가 작성된 것을 확인함. 다만 실제 리사이즈 기능 자체가 아직 미커밋 상태이므로, 버그가 실제로 해결되었는지는 다음 단계에서 확인이 필요함
- 테스트 선행 작성으로 이후 통합 시 회귀 위험 감소 (추정): 리사이즈 로직을 실제로 연결하기 전에 날짜 변환 유틸에 대한 테스트를 먼저 충분히 작성해두면서, 이후 컴포넌트에 통합할 때 발생할 수 있는 회귀를 조기에 발견할 가능성이 높아졌을 것으로 예상됨. 근거: 40개 이상의 테스트 케이스가 리사이즈 로직 통합 이전에 작성된 것을 확인함
더 측정하면 좋은 지표
- 오른쪽(종료일) 리사이즈 버그의 실제 수정 여부: 수정 완료 후 메인 배포 버전과 동일한 시나리오로 재현 테스트
- 종료일 미설정 이벤트의 멀티데이 전환 시나리오: 다양한 초기 상태(종료일 없음, 종일/시간 지정 등) 조합으로 자동화 테스트 작성
- 리사이즈 유틸 함수의 실제 테스트 커버리지: 커버리지 리포트로 미검증 분기가 남아있는지 확인
- 월뷰/주뷰/일뷰별 리사이즈 동작의 일관성: 세 가지 뷰에서 동일한 리사이즈 시나리오를 각각 수행해 결과 비교
- 필터 배지, 워크스페이스 UI 개선의 시각적 영향: 변경 전/후 스크린샷 비교로 실제 개선 여부 확인
오늘 배운 것
- 캘린더 라이브러리의 리사이즈 기능은 화면에 별도의 물리적 핸들 요소가 있는 게 아니라, 마우스가 이벤트의 가장자리 영역에 들어왔는지를 감지하는 방식으로 동작한다는 것을 확인함. 리사이즈 핸들처럼 보이는 UI는 스타일과 이벤트 리스너의 조합만으로 구현되어 있음
- 월뷰에서 캘린더 라이브러리가 내부적으로 사용하는 종료일 표현 방식(마지막으로 보이는 날의 다음 날 자정)과, 화면에 실제로 보여지는 날짜 사이에 복잡성이 있다는 것을 배움. 이 때문에 리사이즈 시 화면에 보이는 값과 저장할 값을 양방향으로 변환하는 과정이 반드시 필요함
- 종일 이벤트와 시간이 지정된 이벤트가 종료일을 표현하는 방식이 다르다는 것(하나는 자정 기준, 다른 하나는 특정 시각 기준)을 확인함. 리사이즈 저장 로직이 이 둘을 구분해서 처리해야 정확하다는 것을 배움
- “더보기” 팝오버에서 이벤트를 정렬할 때, 여러 날에 걸친 이벤트를 가장 먼저, 그다음 단일일 종일 이벤트, 마지막으로 단일일 시간 지정 이벤트 순으로 배치하면 사용자 입장에서 긴 일정을 먼저 확인할 수 있어 UX상 의도가 명확해진다는 것을 다시 확인함
어려웠던 점 / 막힌 부분
- 리사이즈가 실제로 어디서 일어나는지 DOM 상에서 눈에 보이는 핸들 요소가 없어서, 초반에는 “어느 지점에서 리사이즈 동작이 시작되는가”를 추적하기 어려웠다. 캘린더 라이브러리의 API와 내부 동작 방식을 분석하고 나서야 구조를 이해할 수 있었음
- 메인 배포 버전에서 시작일 쪽 리사이즈는 정상 동작하지만, 종료일 쪽 리사이즈는 화면상으로는 바뀐 것처럼 보여도 실제 저장에는 실패하는 버그를 확인함. 현재 관련 변환 함수로 수정 작업이 진행 중
- 종료일이 아예 설정되지 않은 이벤트를 여러 날에 걸친 이벤트로 바꾸는 경우, 기존 구현에서 종료일 값을 어떻게 채워야 하는지 처리가 미흡한 것을 발견함. 스펙을 다시 정리할 필요가 있음
내일 하면 좋은 작업
- 캘린더 일정 편집/리사이즈 스펙 정리 및 재구현
- 메인 배포 버전 기준 버그 재확인: 종료일 미설정 이벤트의 종료일 쪽 리사이즈 미동작
- 종료일 없는 종일 이벤트를 여러 날에 걸친 이벤트로 바꿀 때 종료일 값을 자동으로 채우는 로직 검토
- 리사이즈/수정 시 종일 여부 플래그와 종료일이 함께 정확히 업데이트되는지 검증
- 날짜 변환 유틸 리팩토링을 완료하고 테스트와 함께 커밋
- 캘린더 리사이즈 로직에 대한 통합 테스트 — 월뷰, 주뷰, 일뷰 각각 검증
한 줄 요약
캘린더 이벤트 리사이즈의 복잡한 날짜 변환 로직을 분석하고 정리한, 기술 부채 정산의 하루였다.
댓글남기기