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

5 분 소요

hitArea가 두 번 설정되어 있었다 — JS 붙여넣기가 남긴 흔적

개발 회고 — 2026-06-16 (화)

오늘 작업 요약

타임라인 UI의 색상/레이아웃 정리를 마무리하고, 프레임 상태를 시각적으로 피드백하는 작업을 진행했다. 이어서 별도 세션에서는 그리드 리팩토링 브랜치의 타입 정리와 테스트 체크리스트 작성을 진행하던 중, JS 코드를 TS로 옮기는 과정에서 발생한 버그 하나를 발견해 수정했다.

첫 번째 세션 (UI 정리)

  • editMode dim 색상 통일 — 차트, 그래프 캘린더, 타임라인의 편집 모드 오버레이 색상 일관화
  • 미선택 프레임 UI 정리 및 드롭다운 레이아웃 시프트 방지
  • 프레임 생성 중 오버레이 표시 (진행 중)
  • 그리드 코너 색상 토큰화 (진행 중)
  • 그리드 frameId 초기화 로직 추가 (진행 중)

두 번째 세션 (그리드 리팩토링)

  • 붙여넣기 과정에서 어긋난 들여쓰기 전체 정리
  • 헤더 아이콘 설정 로직이 타입 선언과 구현을 합친 형태임을 확인
  • 그리드 선택 정보 타입에 필드 추가 이유 명확화
  • 리팩토링 포팅 변경사항에 대한 테스트 체크리스트 8개 항목 작성
  • 컬럼 헤더 셀의 클릭 영역(hitArea)이 중복 설정된 버그 발견 및 수정

STAR 정리

Situation (상황)

타임라인/프레임 UI에서 편집 모드 오버레이 색상이 컴포넌트마다 제각각이었고, 드롭다운 메뉴를 열 때 페이지 레이아웃이 흔들리는 문제가 있었다. 한편 별도로 진행 중이던 그리드 리팩토링 브랜치에서는, 기존 JS 코드를 TS로 포팅하는 과정에서 붙여넣기로 인한 들여쓰기 불일치와, 컬럼 헤더 메뉴 아이콘의 클릭 영역이 정의된 위치와 실제 아이콘 위치가 어긋나는 문제가 있었다.

Task (과제)

  1. 편집 모드 오버레이 색상을 여러 컴포넌트에 걸쳐 통일
  2. 드롭다운 오픈 시 레이아웃 시프트 방지
  3. 프레임 생성 진행 상태를 사용자에게 시각적으로 피드백
  4. 그리드 코너 색상 등 하드코딩된 값을 토큰 기반으로 전환
  5. 리팩토링 포팅 코드의 타입 정합성 확인 및 테스트 범위 정의
  6. 포팅 과정에서 발생한 잠재적 버그(컬럼 헤더 클릭 영역 문제) 원인 파악 및 수정

Action (행동)

  • 차트, 그래프 캘린더, 타임라인 스타일/컴포넌트에서 편집 모드 오버레이 색상을 통일된 값으로 수정
  • 미선택 프레임의 스타일을 정리하고, 드롭다운 컴포넌트의 스타일과 레이아웃 로직을 수정해 메뉴가 열려도 페이지 레이아웃이 흔들리지 않도록 처리
  • 프레임 생성 중 오버레이를 추가하는 작업을 시작함 (z-index, 포인터 이벤트 처리 로직은 아직 진행 중)
  • 그리드 코너 색상을 하드코딩된 값에서 그리드 토큰(surfaceHeader)으로 교체
  • 새 그리드 생성 시 frameId를 할당하는 로직을 추가함 (정확한 초기화 타이밍은 아직 결정 전)
  • 붙여넣기로 발생한 4-space 들여쓰기를 프로젝트 컨벤션인 2-space로 전체 수정
  • 헤더 아이콘 설정 로직을 검토해, 기존 타입 선언 파일과 JS 구현이 하나의 TS 파일로 합쳐진 형태임을 확인
  • 그리드 선택 정보 타입에 새로 추가된 필드(행 인디케이터 선택, 컬럼 헤더 선택)가 어떤 상호작용에서 쓰이는지 명확히 함
  • 리팩토링 포팅 변경사항에 대해 검증해야 할 8개 항목(푸터 메뉴 아이콘, 집계 유형 선택기, 행 그룹 집계, 컬럼 드래그, 행 그룹 패널 드래그, 선택 인터랙션, 헤더 아이콘 설정, 스타일시트)을 테스트 체크리스트로 정리
  • 컬럼 헤더 셀의 메뉴 아이콘 클릭 영역이 중복으로 설정되어 있던 것을 발견 — 붙여넣기 과정에서 클릭 영역 정의 코드가 한 번 더 추가되면서, 두 번째 정의가 첫 번째를 덮어써 실제 아이콘 위치와 클릭 가능 영역이 어긋나 있었음. 중복 라인을 제거하고, 원본 JS 코드에서 클릭 영역이 한 번만 정의되어 있는지 grep으로 재확인해 수정이 올바른지 검증

Result (결과)

  • 편집 모드 색상 통일과 드롭다운 레이아웃 시프트 방지는 완료되어 커밋됨
  • 프레임 생성 오버레이, 그리드 코너 색상 토큰화, frameId 초기화는 아직 진행 중 상태로 남음
  • 그리드 리팩토링 세션에서는 들여쓰기 정리, 타입 필드 용도 명확화, 테스트 체크리스트 작성이 완료됨
  • 컬럼 헤더 클릭 영역 중복 버그를 발견해 수정함 — 수정 전에는 메뉴 아이콘의 실제 표시 위치와 클릭 가능 영역이 어긋나 있어 사용자가 아이콘을 눌러도 반응하지 않는 상태였을 것으로 추정됨 (실제 사용자 영향 여부는 배포 전이라 확인 전)

실제 측정 가능한 지표

지표 확인 방법 비고
완료된 커밋 수 및 변경 파일 git log --stat (오늘 범위) 2개 커밋, 4개 파일 변경
진행 중(미커밋) 파일 범위 git diff --stat (unstaged) Frame, GridManager, PageStore 등
hitArea 중복 버그의 실제 존재 여부 수정 전 코드에서 Rect(...) 정의가 몇 번 나오는지 grep 원본 JS 대비 중복 여부 확인 완료
컬럼 헤더 메뉴 아이콘 클릭 가능 여부 브라우저에서 실제 클릭/hover 테스트 수정 후 회귀 확인 필요
리팩토링 테스트 체크리스트 실행 결과 8개 항목 각각 수동/자동 테스트 실행 아직 실행 전
들여쓰기 정리 범위 git diff 라인 수 (공백만 바뀐 라인 vs 실질 변경 라인 구분) 변경 라인 대부분이 포맷팅성 변경인지 확인 가능

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

  • hitArea 버그 수정으로 실제 클릭 불가 상태 해소 (추정): 중복 정의된 클릭 영역이 아이콘 실제 위치보다 위쪽에 있었기 때문에, 수정 전에는 사용자가 메뉴 아이콘을 눌러도 반응하지 않았을 가능성이 높음. 근거: 코드 상 두 번째 Rect 정의가 첫 번째를 덮어쓰는 구조를 확인했고, 좌표값(y=-16~0 vs 실제 아이콘 y=0~12)이 겹치지 않음을 확인함. 다만 이 버그가 실제 배포된 적이 있는지, 사용자가 영향을 받았는지는 별도 확인이 필요함.
  • 색상 토큰화로 테마 변경 대응력 향상 (추정): 그리드 코너 색상을 하드코딩에서 토큰으로 바꾸면서, 이후 테마가 추가되거나 변경될 때 해당 값만 수정하면 되는 구조가 됨. 근거: cornerColor가 gridTokens.surfaceHeader로 교체된 것을 확인함. 다만 이 작업은 아직 진행 중이라 전체 적용 범위는 확정되지 않음.

더 측정하면 좋은 지표

  1. hitArea 버그의 실제 영향 범위: 배포 이력을 확인해 이 버그가 프로덕션에 반영된 적이 있었는지, 있었다면 얼마나 오래 존재했는지 추적
  2. 들여쓰기 정리 커밋의 diff 노이즈: 포맷팅 전용 커밋으로 분리되어 있는지, 실질 로직 변경과 섞여있지 않은지 확인
  3. 드롭다운 레이아웃 시프트 방지 효과: CLS(Cumulative Layout Shift) 지표를 Lighthouse로 전/후 비교
  4. 8개 테스트 체크리스트 실행 결과: 통과/실패 항목을 정리해 리팩토링 브랜치의 안정성 근거로 남기기
  5. frameId 초기화 타이밍 결정에 따른 사이드 이펙트: 여러 초기화 시점 후보를 실제로 테스트해 회귀 여부 비교

오늘 배운 것

  • 편집 모드처럼 여러 컴포넌트에 걸쳐 나타나는 시각 요소는, 색상 하나만 통일해도 사용자가 느끼는 일관성에 꽤 큰 영향을 준다는 것을 다시 확인함
  • 드롭다운으로 인한 레이아웃 시프트는 위치 지정 방식이나 고정 크기 설정으로 방지할 수 있다는 점
  • JS 코드를 TS로 포팅할 때는 단순 붙여넣기 후 타입만 맞추는 것으로 끝내면 안 되고, 원본 코드의 의도(왜 이 필드가 필요한지, 값이 왜 그렇게 설정됐는지)를 하나하나 확인해야 숨어있는 버그를 잡을 수 있다는 것을 실감함
  • 좌표 기반 클릭 영역처럼 눈에 잘 안 띄는 버그는, 원본 코드와의 diff/grep 비교가 가장 확실한 검증 방법이라는 점

어려웠던 점 / 막힌 부분

  • 프레임 생성 오버레이 작업에서 z-index와 포인터 이벤트 처리를 정확히 어떻게 쌓아야 할지 아직 결정하지 못함
  • 새 그리드의 frameId를 정확히 언제, 어느 단계에서 할당해야 하는지 초기화 타이밍을 아직 확정하지 못함

내일 하면 좋은 작업

  1. 프레임 생성 오버레이 UI 완성 및 테스트 (프레임 선택 상태 포함)
  2. 그리드 코너 색상 변경이 실제로 시각적 일관성을 주는지 확인
  3. 그리드 생성 로직 전체 흐름을 재검토해 frameId 할당 위치 최종 결정
  4. 진행 중인 파일 변경사항 마무리 후 커밋
  5. 관련 Cypress 테스트 로컬 실행
  6. 그리드 리팩토링 브랜치의 8개 테스트 체크리스트 실행
  7. 추가 포팅 파일들의 타입 에러 검토

한 줄 요약

오늘은 타임라인 UI 정리를 마무리하고, 그리드 리팩토링 과정에서 숨어있던 클릭 영역 버그를 찾아 고친 하루였다.

댓글남기기

참고