From 67c28ae1c72bdf0cad85e786fd99df844598bedf Mon Sep 17 00:00:00 2001 From: king Date: Fri, 14 Aug 2026 17:47:03 +0900 Subject: [PATCH] =?UTF-8?q?fix(cafe24):=20=EC=98=88=EC=95=BD=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C/=EC=8B=9C=EA=B0=84=20=E2=80=94=20=EC=B9=B8=20?= =?UTF-8?q?=EC=A0=84=EC=B2=B4=20=ED=81=B4=EB=A6=AD=20=EB=B0=98=EC=9D=91=20?= =?UTF-8?q?+=20=EC=9A=94=EC=9D=BC=20=ED=91=9C=EC=8B=9C=20+=20=EB=82=A0?= =?UTF-8?q?=EC=A7=9C=20=ED=8F=AD=20=ED=99=95=EB=8C=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../cafe24/templates/cafe24/_editor.html | 4 ++-- .../cafe24/templates/cafe24/products.html | 23 +++++++++++++++++-- .../cafe24/templates/cafe24/schedules.html | 2 +- .../cafe24/templates/cafe24/system.html | 2 +- app/static/cafe24.css | 20 +++++++++++----- docs/CAFE24_MODULE.md | 19 ++++++++++----- 6 files changed, 52 insertions(+), 18 deletions(-) diff --git a/app/modules/cafe24/templates/cafe24/_editor.html b/app/modules/cafe24/templates/cafe24/_editor.html index 359a0d2..94fd1f8 100644 --- a/app/modules/cafe24/templates/cafe24/_editor.html +++ b/app/modules/cafe24/templates/cafe24/_editor.html @@ -102,12 +102,12 @@ 동작하고, 보이는 글자만 "2026년 08월 20일"/"오후 07시 30분" 형식이다. value 는 그대로 YYYY-MM-DD / HH:MM 이라 제출 시 합치는 로직은 그대로다. #} - + - + diff --git a/app/modules/cafe24/templates/cafe24/products.html b/app/modules/cafe24/templates/cafe24/products.html index 6056006..5225a73 100644 --- a/app/modules/cafe24/templates/cafe24/products.html +++ b/app/modules/cafe24/templates/cafe24/products.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} {% block content %} @@ -244,13 +244,20 @@ var timeOut = document.getElementById("cf24-schedule-time-display"); if (!dateEl || !timeEl) return; + var WEEKDAY = ["일", "월", "화", "수", "목", "금", "토"]; + function pad2(n) { return (n < 10 ? "0" : "") + n; } function paintDate() { var v = dateEl.value; // "YYYY-MM-DD" if (!v) { dateOut.textContent = "연도.월.일"; return; } var p = v.split("-"); - dateOut.textContent = p[0] + "년 " + p[1] + "월 " + p[2] + "일"; + var y = parseInt(p[0], 10), mo = parseInt(p[1], 10), d = parseInt(p[2], 10); + // new Date(y, mo-1, d) 는 로컬 시간대로 만들어져 날짜가 밀리지 않는다 + // (문자열을 그대로 new Date("YYYY-MM-DD") 로 파싱하면 UTC 로 해석돼 하루 + // 어긋날 수 있다). + var weekday = WEEKDAY[new Date(y, mo - 1, d).getDay()]; + dateOut.textContent = p[0] + "년 " + p[1] + "월 " + p[2] + "일 (" + weekday + ")"; } function paintTime() { @@ -264,6 +271,18 @@ timeOut.textContent = period + " " + pad2(h12) + "시 " + parts[1] + "분"; } + // 네이티브 달력/시간 팝업은 브라우저가 자체 아이콘(우측 끝) 클릭에만 반응하고 + // 칸 전체 클릭에는 반응하지 않는다. showPicker() 를 직접 호출해 칸 어디를 + // 클릭해도 팝업이 뜨게 한다. 지원하지 않는 브라우저에서는 조용히 무시되고 + // 포커스만 이동한다(기존 동작 그대로 유지되므로 안전). + function openPicker(el) { + if (typeof el.showPicker === "function") { + try { el.showPicker(); } catch (err) { /* 사용자 제스처 밖 호출 등 — 무시 */ } + } + } + dateEl.addEventListener("click", function () { openPicker(dateEl); }); + timeEl.addEventListener("click", function () { openPicker(timeEl); }); + dateEl.addEventListener("input", paintDate); dateEl.addEventListener("change", paintDate); timeEl.addEventListener("input", paintTime); diff --git a/app/modules/cafe24/templates/cafe24/schedules.html b/app/modules/cafe24/templates/cafe24/schedules.html index 55a70c4..72fece2 100644 --- a/app/modules/cafe24/templates/cafe24/schedules.html +++ b/app/modules/cafe24/templates/cafe24/schedules.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} {% block content %} diff --git a/app/modules/cafe24/templates/cafe24/system.html b/app/modules/cafe24/templates/cafe24/system.html index 6879210..3d4e34a 100644 --- a/app/modules/cafe24/templates/cafe24/system.html +++ b/app/modules/cafe24/templates/cafe24/system.html @@ -1,7 +1,7 @@ {% extends "erp_base.html" %} {% block head_extra %} - + {% endblock %} {% block content %} diff --git a/app/static/cafe24.css b/app/static/cafe24.css index 4234d41..4b5b605 100644 --- a/app/static/cafe24.css +++ b/app/static/cafe24.css @@ -622,11 +622,11 @@ /* 날짜/시간을 별도 input 으로 나눈다 — datetime-local 은 한국어 로캘에서 "2026. 08. 14. 오후 07:00" 형태로 길어져 auto-fit minmax(160px, 1fr) 칸에 - 잘렸다(실측). 지금은 표시 텍스트를 우리가 직접 그리므로(아래 .cf24-dt-*) 폭이 - 예측 가능해 예전만큼 넓게 잡을 필요가 없다. */ + 잘렸다(실측). 지금은 표시 텍스트를 우리가 직접 그리므로(아래 .cf24-dt-*) 폭을 + 내용에 맞춰 조절한다. */ .cf24-schedule-datetime { grid-column: span 2; - max-width: 240px; + max-width: 300px; } .cf24-schedule-datetime-row { @@ -641,11 +641,19 @@ 네이티브 그대로 쓰고 보이는 글자만 형식화한다. */ .cf24-dt-field { position: relative; - flex: 1 1 0; min-width: 0; height: 32px; } +/* 날짜 칸에 요일까지 표시("2026년 08월 20일 (목)")하므로 시간 칸보다 넓게 잡는다. */ +.cf24-dt-field-date { + flex: 1.7 1 0; +} + +.cf24-dt-field-time { + flex: 1 1 0; +} + .cf24-dt-display { display: flex; align-items: center; @@ -658,8 +666,8 @@ border-radius: var(--r-lg, 10px); background: var(--color-canvas-white, #fff); color: var(--color-rich-black, #0a0a0a); - /* 12px 는 실측으로 고른 값 — "2026년 08월 20일" 이 117px 칸에 잘리지 않는 최소 - 폭·글자크기 조합이다(13px 는 4px 부족해 잘렸다). */ + /* 12px 는 실측으로 고른 값 — 날짜 칸에 요일까지 들어가도 잘리지 않는 폭·글자크기 + 조합이다. */ font-size: 12px; white-space: nowrap; overflow: hidden; diff --git a/docs/CAFE24_MODULE.md b/docs/CAFE24_MODULE.md index ef3f5a0..00bd3dd 100644 --- a/docs/CAFE24_MODULE.md +++ b/docs/CAFE24_MODULE.md @@ -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`)는 예전과 같은 형식을 받으므로 백엔드는 그대로다.