기술을 뜯고, 사고를 담다.

5 분 소요

달력을 어떻게 닫아도 사라지는 값 — react-datepicker와 draft 상태 분리

개발 회고 — 2026-07-07 (화)

오늘 작업 요약

날짜 범위 필터의 시분초 입력 유실 버그를 근본 원인 수준에서 해결하고, 별도 세션에서는 색상 토큰 관리 도구 구축과 SplitView 레이아웃 개선, Cypress 테스트 실행 최적화를 진행했다. 총 4개 커밋(grid-service-web 주요 커밋 1개 + 백엔드 타임존 작업 3개)과, 별도로 정리된 grid-service-web 추가 작업이 있었다.

세션 1 — 날짜 입력 버그 수정

  • DateInput 날짜 범위 필터 버그 수정 — 달력 선택 후 키보드로 시분초를 입력할 때 값이 사라지거나 자동보정되던 문제 해결
  • DateInput 테스트 케이스 추가 — 날짜+시간 입력 회귀 테스트 작성
  • 다국어 파일 업데이트 — 그리드 한/영 다국어 파일 수정
  • 타임존 처리 확장(백엔드) — DB 시간 타입 컬럼과 특정 그리드 포맷에 DB 타임존 반영

세션 2 — 색상 토큰 도구 및 테스트 최적화

  • 색상 토큰 가이드 문서와 하드코딩 hex 검출 린트 스크립트, 색상 자동 매핑 유틸리티 신규 구축
  • SplitView 레이아웃 개선 — 툴팁 텍스트 스타일 분리 및 관련 상태 처리 수정
  • Cypress 자동 테스트 최적화 — 무조건 반복 방식에서 실패 시에만 재시도하는 방식으로 변경

STAR 정리

Situation (상황)

검색/필터 다이얼로그에서 날짜를 달력으로 선택한 뒤 키보드로 시분초를 직접 입력하면, react-datepicker 내부의 입력값 리셋 동작 때문에 타이핑한 값이 사라지거나 의도치 않게 자동보정되는 문제가 있었다. 필터 삭제/초기화 시 에러 상태가 정리되지 않아 버튼이 계속 비활성화 상태로 남는 문제도 있었다. 한편 별도 세션에서는 SCSS 전반에 하드코딩된 hex 색상값이 많아 토큰 체계와 어긋나 있었고, Cypress 테스트가 성공 여부와 무관하게 항상 3회 반복 실행되어 전체 테스트 시간이 불필요하게 길었다.

Task (과제)

  1. 날짜+시간 입력값이 유실되지 않도록 입력 흐름 자체를 재설계
  2. 필터 삭제/초기화 시 에러 상태가 함께 정리되도록 수정
  3. 날짜 뒤에 시분초가 붙는 형식을 파싱 로직이 인식하도록 확장
  4. 회귀 테스트로 날짜+시간 입력 케이스를 커버
  5. 하드코딩된 색상값을 찾아내고 기존 토큰에 자동 매핑하는 도구 구축
  6. SplitView의 툴팁 레이아웃 개선
  7. Cypress 테스트의 불필요한 반복 실행을 줄여 실행 시간 단축

Action (행동)

  • 날짜+시간 포맷이 완성되면 Enter 키 입력 없이도 즉시 값을 커밋하도록 DateInput의 입력 처리 로직을 변경함
  • 텍스트 필드의 onChangeText 호출이 날짜 포맷 검증 로직에 막혀 draft 텍스트가 실제 입력값보다 뒤처지던 문제를 수정함
  • 검색 필터 다이얼로그에서 필터를 삭제하거나 초기화할 때 에러 상태도 함께 정리되도록 수정하고, 숫자 범위/선택 범위 행 정렬이 깨졌던 레이아웃 회귀도 함께 수정함
  • 날짜 파싱 유틸리티가 날짜 뒤에 오는 HH:mm, HH:mm:ss 형식의 시간 성분도 인식하도록 파싱 로직을 확장함
  • 날짜 범위 필드에 한정해서만 적용되도록 스타일 영향 범위를 좁힘
  • 날짜+시간 입력 회귀를 검증하는 Cypress 테스트를 새로 작성함
  • 그리드 한/영 다국어 파일을 수정함
  • 백엔드에서 특정 시간 타입 컬럼과 특정 그리드 데이터 포맷에 DB 타임존이 반영되도록 처리 범위를 확장함
  • 색상 토큰 사용 원칙, 토큰 카탈로그, 자주 하는 실수를 정리한 가이드 문서를 신규 작성함
  • SCSS 내 하드코딩된 hex 색상을 검출하는 린트 스크립트를 작성함
  • hex/rgb 색상을 ΔE2000 색상 거리 기반으로 기존 토큰에 자동 매핑하는 유틸리티를 작성함
  • SplitView의 툴팁 텍스트 스타일을 분리하고 flex 속성을 추가했으며, 툴팁 내부 텍스트를 별도 요소로 감싸고 관련 상태 처리를 수정함
  • Cypress 자동 테스트 스크립트에서 무조건 3회 반복하던 방식을 실패 시에만 재시도하는 옵션으로 변경하고, 파일 탐색 로직을 최적화함

Result (결과)

  • 날짜+시간 입력 유실 버그가 근본 원인(입력 흐름과 draft 상태의 분리 필요성) 수준에서 수정되고, 회귀 테스트로 커버됨
  • 필터 에러 상태 정리 버그와 레이아웃 회귀도 함께 해결됨
  • 색상 토큰 관리를 위한 문서와 자동화 도구(린트, 자동 매핑) 기반이 마련됨 — 아직 전체 코드베이스에 적용해 실제 하드코딩 색상을 얼마나 대체했는지는 확인 전
  • SplitView 툴팁 레이아웃이 개선됨
  • Cypress 테스트 실행 방식이 개선되어 불필요한 반복 실행이 줄어들 것으로 예상되나, 실행 시간 단축 효과는 아직 정량 측정 전
  • 자동 테스트 셀렉터 개선 작업에서 발견된 오류는 아직 미해결 상태로 다음 작업으로 이월됨

실제 측정 가능한 지표

지표 확인 방법 비고
커밋 수 및 구성 git log --stat (오늘 범위) 4개 커밋 (주요 커밋 1개 + 백엔드 타임존 커밋 3개)
신규 작성된 테스트 코드 규모 테스트 파일 라인 수 날짜+시간 입력 회귀 테스트 169줄
하드코딩 hex 색상 검출 개수 lint-no-hex.js 스크립트 실행 결과 실제 코드베이스에 몇 건 존재하는지 확인 가능
색상 자동 매핑 정확도 map-colors.js 결과와 실제 디자인 토큰 매핑을 수동 비교 ΔE2000 기준값에 따라 매핑 정확도 달라질 수 있음
Cypress 테스트 실행 시간 변화 CI 실행 로그에서 리팩토링 전/후 총 실행 시간 비교 무조건 3회 반복 → 실패 시 재시도 방식 변경 효과 확인 가능
날짜+시간 입력 버그 재현 여부 수정 전/후 수동 재현 테스트 달력 선택 후 키보드 입력 시나리오

추정 가능한 효과 (근거 포함)

  • 날짜+시간 입력 유실 버그 해결로 사용자 데이터 손실 방지 (추정): 입력 흐름이 draft 상태와 분리되어, 이전에는 달력을 닫는 방식과 무관하게 발생하던 값 유실이 해소되었을 것으로 보임. 근거: react-datepicker의 내부 리셋 동작을 확인하고, 즉시 커밋 방식으로 로직을 변경한 것을 확인함. 실제 프로덕션에서 이 버그로 인한 사용자 불편 사례가 있었는지는 별도 확인 필요.
  • Cypress 테스트 실행 시간 단축 (추정): 무조건 3회 반복하던 방식에서 실패 시에만 재시도하는 방식으로 바뀌면서, 대부분 성공하는 테스트의 경우 반복 횟수가 줄어들 것으로 예상됨. 근거: 재시도 옵션이 실패 시에만 작동하도록 코드가 수정된 것을 확인함. 실제 단축된 시간은 CI 로그 비교 없이는 확정할 수 없음.
  • 색상 토큰 가이드 및 자동화 도구로 하드코딩 색상 감소 기대 (추정): 린트 스크립트로 하드코딩된 색상을 찾아내고, 자동 매핑 유틸리티로 기존 토큰 대체를 쉽게 만들 것으로 예상됨. 근거: 두 스크립트가 신규 작성되어 하드코딩 검출과 토큰 매핑이라는 목적에 맞게 구현된 것을 확인함. 다만 아직 전체 코드베이스에 실제로 적용해본 결과는 없음.

더 측정하면 좋은 지표

  1. 날짜+시간 입력 버그의 재발 여부: 회귀 테스트를 CI에서 반복 실행해 안정적으로 통과하는지 확인
  2. 하드코딩 hex 색상의 실제 개수와 분포: 린트 스크립트를 전체 코드베이스에 돌려서 얼마나 많은 파일에 영향이 있는지 파악
  3. ΔE2000 색상 매핑의 실제 정확도: 매핑 결과를 디자이너 또는 기존 토큰 정의와 비교해 오차 범위 확인
  4. Cypress 전체 실행 시간 변화: 리팩토링 전/후 CI 파이프라인의 총 소요 시간을 실제로 비교
  5. SplitView 툴팁 레이아웃 변경의 시각적 영향: 변경 전/후 스크린샷 비교로 실제 개선 여부 확인
  6. 타임존 처리 확장의 정확성: 여러 타임존 환경에서 날짜/시간 데이터가 올바르게 표시되는지 통합 테스트로 검증

오늘 배운 것

  • react-datepicker의 입력값 리셋은 달력을 닫는 방식(Enter 입력, 외부 클릭 등)과 무관하게 발생하므로, 입력 흐름을 안정적으로 관리하려면 컴포넌트 자체의 draft 상태를 분리해서 관리해야 한다는 것을 확인함
  • 날짜 입력 UI에서 에러 상태를 언제 정리할지(필터 변경 시, 다이얼로그를 닫을 때, 초기화할 때 등) 명확히 정의하지 않으면, 사용자가 빠져나갈 수 없는 잠금 상태에 빠질 수 있다는 점
  • ΔE2000 색상 거리 계산을 활용하면 사람이 인지하는 색상 유사도에 가깝게 hex 값을 기존 토큰에 매핑할 수 있다는 것을 배움
  • Cypress에서 무조건 N회 반복하는 대신 실패 시에만 재시도하는 옵션을 사용하면, 전체 테스트 실행 시간을 단축할 수 있다는 것을 확인함

어려웠던 점 / 막힌 부분

  • ΔE2000 계산 과정에서 수치 안정성을 확보하고, hex/rgb 등 다양한 색상 형식을 정규화하는 처리가 까다로웠음
  • Windows 환경에서 스크립트를 실행할 때 경로 길이 제한으로 인한 이슈가 발생함

내일 하면 좋은 작업

  1. Cypress 테스트를 로컬에서 실행하고 관련 케이스를 추가로 검증
  2. 다른 날짜 입력 관련 컴포넌트(캘린더, 간트 차트 등)에서 동일한 유형의 이슈가 있는지 확인
  3. 자동 테스트 셀렉터 개선 작업에서 발견된 오류 수정

한 줄 요약

오늘은 날짜 범위 필터의 시분초 입력 유실 버그를 react-datepicker의 특성을 이해한 뒤 draft 상태 분리로 근본 해결하고, 색상 토큰 관리 도구와 Cypress 테스트 실행 방식을 함께 개선한 하루였다.

댓글남기기

참고