From 86914f0bc6d6b2e59327cce0c29099a7e15f65e5 Mon Sep 17 00:00:00 2001
From: king <heoseungpil@gmail.com>
Date: Fri, 14 Aug 2026 17:37:52 +0900
Subject: [PATCH] =?UTF-8?q?feat(cafe24):=20=EC=98=88=EC=95=BD=20=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=81=EC=9D=84=20=ED=95=9C=EA=B8=80=20=ED=98=95=EC=8B=9D("2?=
 =?UTF-8?q?026=EB=85=84=2008=EC=9B=94=2020=EC=9D=BC"=20/=20"=EC=98=A4?=
 =?UTF-8?q?=ED=9B=84=2007=EC=8B=9C=2030=EB=B6=84")=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

datetime-local 을 date+time 으로 나눈 뒤에도 여전히 브라우저가 강제하는 표시
형식("2026. 08. 20.", "오후 07:30")이 남아 있었다. 네이티브 date/time input 은
표시 형식을 CSS 로 바꿀 수 없다(브라우저·로캘가 강제) — 지원되는 방법이 없다.

코드 편집기의 오버레이 방식(.cf24-code-input 투명 textarea 를 .cf24-code-hl 색칠된
글자 위에 겹치는 것)을 그대로 적용했다. 네이티브 date/time input 을 opacity:0 으로
완전히 투명하게 두고, 우리가 형식화한 텍스트(.cf24-dt-display) 바로 위에 포개 놓는다.
클릭·키보드·달력 팝업은 네이티브가 그대로 처리하고(elementFromPoint 로 클릭이
네이티브에 도달하는지 확인함), 화면에 보이는 글자만 JS(paintDate/paintTime)가
input/change 마다 다시 그린다. input.value 자체는 형식과 무관하게 항상
YYYY-MM-DD / HH:MM 이라 제출 시 합치는 로직(store.parse_schedule_at 이 받는 형식)은
전혀 바뀌지 않았다.

정오/자정 12시간제 변환(0시→오전 12시, 12시→오후 12시)을 포함해 처리한다.

폭도 줄여달라는 요청에 맞춰, 실측으로 잘리지 않는 최소값(글자크기 12px·필드폭
117px)을 찾아 적용했다 — 이전 174px 대비 크게 줄었다.

검증(브라우저 실측): 표시 텍스트가 정확한 한글 형식으로 나옴, 정오/자정 처리 정확,
잘림 없음, 클릭이 실제 네이티브 input 에 도달, 제출 시 hidden 필드가
"2026-08-20T19:30" 으로 정확히 조합됨, 가로 스크롤 없음. 백엔드 무변경이라
유닛테스트 61개 그대로 통과.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../cafe24/templates/cafe24/_editor.html      | 17 ++++++-
 .../cafe24/templates/cafe24/products.html     | 40 ++++++++++++++-
 .../cafe24/templates/cafe24/schedules.html    |  2 +-
 .../cafe24/templates/cafe24/system.html       |  2 +-
 app/static/cafe24.css                         | 49 +++++++++++++++++--
 docs/CAFE24_MODULE.md                         | 17 +++++--
 6 files changed, 114 insertions(+), 13 deletions(-)

diff --git a/app/modules/cafe24/templates/cafe24/_editor.html b/app/modules/cafe24/templates/cafe24/_editor.html
index 840bc1e..359a0d2 100644
--- a/app/modules/cafe24/templates/cafe24/_editor.html
+++ b/app/modules/cafe24/templates/cafe24/_editor.html
@@ -96,9 +96,22 @@
     <div class="cf24-schedule-grid">
       <label class="cf24-schedule-datetime">
         <span>예약 시각</span>
+        {# 네이티브 date/time input 은 브라우저가 표시 형식을 강제한다(CSS로 못 바꿈).
+           그래서 코드 편집기와 같은 방식을 쓴다 — 투명한 네이티브 input 을 우리가
+           그린 형식화된 텍스트 위에 겹친다. 클릭·키보드·달력 팝업은 네이티브 그대로
+           동작하고, 보이는 글자만 "2026년 08월 20일"/"오후 07시 30분" 형식이다.
+           value 는 그대로 YYYY-MM-DD / HH:MM 이라 제출 시 합치는 로직은 그대로다. #}
         <span class="cf24-schedule-datetime-row">
-          <input class="cf24-schedule-input" type="date" id="cf24-schedule-date" required />
-          <input class="cf24-schedule-input" type="time" id="cf24-schedule-time" required />
+          <span class="cf24-dt-field">
+            <span class="cf24-dt-display" id="cf24-schedule-date-display" aria-hidden="true">연도.월.일</span>
+            <input class="cf24-dt-native" type="date" id="cf24-schedule-date"
+                   aria-label="예약 날짜" required />
+          </span>
+          <span class="cf24-dt-field">
+            <span class="cf24-dt-display" id="cf24-schedule-time-display" aria-hidden="true">시:분</span>
+            <input class="cf24-dt-native" type="time" id="cf24-schedule-time"
+                   aria-label="예약 시간" required />
+          </span>
         </span>
       </label>
       <label>
diff --git a/app/modules/cafe24/templates/cafe24/products.html b/app/modules/cafe24/templates/cafe24/products.html
index 538a311..6056006 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 %}
-<link rel="stylesheet" href="/static/cafe24.css?v=20260814u" />
+<link rel="stylesheet" href="/static/cafe24.css?v=20260814v" />
 {% endblock %}
 
 {% block content %}
@@ -234,6 +234,44 @@
       });
     }
 
+    // 예약 시각 — 네이티브 date/time input 은 투명하게 두고(opacity:0), 보이는
+    // 글자는 우리가 원하는 형식으로 직접 그린다("2026년 08월 20일" / "오후 07시 30분").
+    // input 의 value 자체는 그대로 YYYY-MM-DD / HH:MM 이라 제출 로직은 안 바뀐다.
+    (function setupScheduleDateTime() {
+      var dateEl = document.getElementById("cf24-schedule-date");
+      var timeEl = document.getElementById("cf24-schedule-time");
+      var dateOut = document.getElementById("cf24-schedule-date-display");
+      var timeOut = document.getElementById("cf24-schedule-time-display");
+      if (!dateEl || !timeEl) return;
+
+      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] + "일";
+      }
+
+      function paintTime() {
+        var v = timeEl.value; // "HH:MM" (24시간제 고정 — 로캘과 무관)
+        if (!v) { timeOut.textContent = "시:분"; return; }
+        var parts = v.split(":");
+        var h = parseInt(parts[0], 10);
+        var period = h < 12 ? "오전" : "오후";
+        var h12 = h % 12;
+        if (h12 === 0) h12 = 12;
+        timeOut.textContent = period + " " + pad2(h12) + "시 " + parts[1] + "분";
+      }
+
+      dateEl.addEventListener("input", paintDate);
+      dateEl.addEventListener("change", paintDate);
+      timeEl.addEventListener("input", paintTime);
+      timeEl.addEventListener("change", paintTime);
+      paintDate();
+      paintTime();
+    })();
+
     // 예약 폼 — 편집기 내용을 hidden 에 복사해 함께 보낸다(폼이 서로 형제라서).
     // 날짜·시간도 두 개의 별도 input 값을 합쳐 서버가 기대하는 형식으로 만든다.
     var schedForm = pane.querySelector("#cf24-schedule-form");
diff --git a/app/modules/cafe24/templates/cafe24/schedules.html b/app/modules/cafe24/templates/cafe24/schedules.html
index 267f813..55a70c4 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 %}
-<link rel="stylesheet" href="/static/cafe24.css?v=20260814u" />
+<link rel="stylesheet" href="/static/cafe24.css?v=20260814v" />
 {% endblock %}
 
 {% block content %}
diff --git a/app/modules/cafe24/templates/cafe24/system.html b/app/modules/cafe24/templates/cafe24/system.html
index 6b437a4..6879210 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 %}
-<link rel="stylesheet" href="/static/cafe24.css?v=20260814u" />
+<link rel="stylesheet" href="/static/cafe24.css?v=20260814v" />
 {% endblock %}
 
 {% block content %}
diff --git a/app/static/cafe24.css b/app/static/cafe24.css
index 1180b10..4234d41 100644
--- a/app/static/cafe24.css
+++ b/app/static/cafe24.css
@@ -622,20 +622,61 @@
 
 /* 날짜/시간을 별도 input 으로 나눈다 — datetime-local 은 한국어 로캘에서
    "2026. 08. 14. 오후 07:00" 형태로 길어져 auto-fit minmax(160px, 1fr) 칸에
-   잘렸다(실측). date/time 은 각각 폭이 고정이라 잘릴 일이 없다. */
+   잘렸다(실측). 지금은 표시 텍스트를 우리가 직접 그리므로(아래 .cf24-dt-*) 폭이
+   예측 가능해 예전만큼 넓게 잡을 필요가 없다. */
 .cf24-schedule-datetime {
   grid-column: span 2;
-  min-width: 220px;
+  max-width: 240px;
 }
 
 .cf24-schedule-datetime-row {
   display: flex;
-  gap: var(--sp-8, 8px);
+  gap: 6px;
 }
 
-.cf24-schedule-datetime-row .cf24-schedule-input {
+/* ── 날짜/시간 표시 형식을 직접 그리는 오버레이 ──
+   네이티브 date/time input 은 표시 형식을 CSS 로 바꿀 수 없다(브라우저·로캘가
+   강제). 코드 편집기(.cf24-code-input 위 .cf24-code-hl)와 같은 원리로, 투명한
+   네이티브 input 을 우리가 그린 텍스트 위에 완전히 겹쳐 클릭·키보드·달력 팝업은
+   네이티브 그대로 쓰고 보이는 글자만 형식화한다. */
+.cf24-dt-field {
+  position: relative;
   flex: 1 1 0;
   min-width: 0;
+  height: 32px;
+}
+
+.cf24-dt-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 0 6px;
+  border: 1px solid var(--color-subtle-ash, #e5e5e5);
+  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 부족해 잘렸다). */
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  pointer-events: none; /* 클릭은 위에 겹친 네이티브 input 이 받는다 */
+}
+
+.cf24-dt-native {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  opacity: 0; /* 완전히 투명 — 아래 .cf24-dt-display 가 그대로 비쳐 보인다 */
+  cursor: pointer;
 }
 
 .cf24-schedule-input {
diff --git a/docs/CAFE24_MODULE.md b/docs/CAFE24_MODULE.md
index 2b53fa9..ef3f5a0 100644
--- a/docs/CAFE24_MODULE.md
+++ b/docs/CAFE24_MODULE.md
@@ -176,10 +176,19 @@ app/modules/cafe24/             ← 상품관리 모듈
   JS 가 hidden 에 복사해 함께 보낸다.
 - **입력은 날짜/시간 별도 input** 이다(`type=date` + `type=time`). `datetime-local`
   단일 입력은 한국어 로캘에서 표시 폭이 브라우저마다 달라 잘리는 사고가 있었다(실제
-  발생 — "2026. 08. 14. 오후 07:00" 형태). 두 input 은 각각 폭이 고정이라 잘릴 일이
-  없다. 제출 직전 JS 가 두 값을 `"YYYY-MM-DD" + "T" + "HH:MM"` 로 합쳐 hidden
-  `scheduled_at` 에 넣는다 — 서버(`store.parse_schedule_at`)는 예전과 같은 형식을
-  받으므로 백엔드는 그대로다.
+  발생 — "2026. 08. 14. 오후 07:00" 형태).
+- **보이는 글자는 우리가 직접 그린다** — 네이티브 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 부족해 잘렸다).
+- 제출 직전 JS 가 두 input 의 `value`(형식과 무관하게 항상 `YYYY-MM-DD` / `HH:MM`)를
+  `"YYYY-MM-DD" + "T" + "HH:MM"` 로 합쳐 hidden `scheduled_at` 에 넣는다 —
+  서버(`store.parse_schedule_at`)는 예전과 같은 형식을 받으므로 백엔드는 그대로다.
 - **시각은 KST 로 해석**한다. 과거 시각은 거부하되
   폼을 채우는 동안 시간이 흐른 경우를 위해 1분 여유를 둔다.
 - **실행은 `app/modules/cafe24/worker.py`** — compose 서비스 `dbx-cafe24-worker` 가