fix(cafe24): 예약 날짜/시간 — 칸 전체 클릭 반응 + 요일 표시 + 날짜 폭 확대

1) 칸 전체를 클릭해야 팝업이 뜨지 않던 문제

네이티브 date/time input 은 자신의 달력 아이콘(우측 끝 작은 영역)을 클릭해야만
팝업이 뜬다. 투명한 네이티브 input 을 칸 전체 크기로 늘려놔도 그 작은 아이콘
영역만 반응하는 건 그대로였다 — 실제 "오른쪽 부분을 선택해야 나온다"로 보고된
문제 그대로다.

클릭 핸들러에서 showPicker() 를 직접 호출해 칸 어디를 클릭해도 팝업이 뜨게
했다. 미지원 브라우저에서는 조용히 무시되고 기존처럼 포커스만 이동한다.

실제 클릭(진짜 사용자 제스처)으로 검증했다 — showPicker() 는 클릭당 한 번만
유효한 제스처를 소비하므로, 같은 클릭에서 두 번째 호출을 시도하면
"NotAllowedError: requires a user gesture" 가 나는 것으로 첫 호출이 성공했음을
간접 확인했다. 이 미리보기 도구는 네이티브 OS 팝업을 스크린샷에 담지 못해
시각적으로는 확인할 수 없었다(도구 제약이지 코드 문제 아님).

2) 요일 표시

"2026년 08월 20일" 뒤에 "(목)" 을 붙인다. new Date("YYYY-MM-DD") 로 문자열을
그대로 파싱하면 UTC 로 해석돼 하루 밀릴 수 있어, 연/월/일을 분해해
new Date(y, mo-1, d) 로 로컬 시간대 기준으로 만든 뒤 getDay() 를 쓴다.

3) 날짜 칸 폭 확대

요일이 붙어 텍스트가 길어진 만큼 날짜 칸을 시간 칸보다 넓게 잡았다
(flex: 1.7 대 1). 라벨 전체 폭도 240px→300px 로 늘렸다.

검증: 유닛테스트 61개 통과(백엔드 무변경). 브라우저 실측 — "2026년 08월 20일 (목)"
표시 확인, 날짜/시간 칸 모두 잘림 없음(날짜 185px·시간 109px), showPicker 지원
확인, 가로 스크롤 없음.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-14 17:47:03 +09:00
parent 86914f0bc6
commit 67c28ae1c7
6 changed files with 52 additions and 18 deletions
+13 -6
View File
@@ -180,12 +180,19 @@ app/modules/cafe24/ ← 상품관리 모듈
- **보이는 글자는 우리가 직접 그린다** — 네이티브 date/time input 은 표시 형식을
CSS 로 바꿀 수 없어서(브라우저·로캘가 강제), 코드 편집기(`.cf24-code-input`
`.cf24-code-hl`)와 같은 원리로 투명한(`opacity:0`) 네이티브 input 을 형식화한
텍스트(`.cf24-dt-display`, `"2026년 08월 20일"` / `"오후 07시 30분"`) 위에 완전히
겹친다. 클릭·키보드·달력 팝업은 네이티브 그대로 동작하고(`elementFromPoint`
클릭이 네이티브에 꽂히는지 확인함), 보이는 글자만 형식화된다. `input`/`change`
이벤트마다 JS(`paintDate`/`paintTime`)가 다시 그린다.
글자크기 12px·필드폭 117px 는 "2026년 08월 20일" 이 잘리지 않는 실측 최소값이다
(13px 는 4px 부족해 잘렸다).
텍스트(`.cf24-dt-display`, `"2026년 08월 20일 (목)"` / `"오후 07시 30분"`) 위에
완전히 겹친다. `input`/`change` 이벤트마다 JS(`paintDate`/`paintTime`)가 다시
그린다. 날짜에는 요일도 붙인다(`new Date(y, mo-1, d).getDay()` — 문자열을 그대로
`new Date("YYYY-MM-DD")` 로 파싱하면 UTC 로 해석돼 하루 밀릴 수 있어 연/월/일을
분해해 로컬 시간대로 만든다).
- **클릭은 칸 전체 어디서든 반응한다.** 네이티브 date/time input 은 기본적으로
자신의 달력 아이콘(우측 끝 작은 영역)을 클릭해야만 팝업이 뜨고, 칸 전체를
덮도록 늘려도 그 작은 아이콘 영역만 반응한다(실제 겪은 문제 — "오른쪽 부분을
선택해야 나온다"). `showPicker()` 를 클릭 핸들러에서 직접 호출해 칸 어디를
클릭해도 팝업이 뜨게 했다. 미지원 브라우저에서는 조용히 무시되고 기존처럼
포커스만 이동한다(기능 저하 없이 안전하게 대체).
- 글자크기 12px, 날짜 칸은 시간 칸보다 넓게(`flex: 1.7` vs `1`) 잡는다 — 날짜 칸에
요일까지 들어가 더 길기 때문이다. 값은 실측으로 잘리지 않는 조합을 골랐다.
- 제출 직전 JS 가 두 input 의 `value`(형식과 무관하게 항상 `YYYY-MM-DD` / `HH:MM`)를
`"YYYY-MM-DD" + "T" + "HH:MM"` 로 합쳐 hidden `scheduled_at` 에 넣는다 —
서버(`store.parse_schedule_at`)는 예전과 같은 형식을 받으므로 백엔드는 그대로다.