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:
@@ -102,12 +102,12 @@
|
||||
동작하고, 보이는 글자만 "2026년 08월 20일"/"오후 07시 30분" 형식이다.
|
||||
value 는 그대로 YYYY-MM-DD / HH:MM 이라 제출 시 합치는 로직은 그대로다. #}
|
||||
<span class="cf24-schedule-datetime-row">
|
||||
<span class="cf24-dt-field">
|
||||
<span class="cf24-dt-field cf24-dt-field-date">
|
||||
<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-field cf24-dt-field-time">
|
||||
<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 />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}
|
||||
<link rel="stylesheet" href="/static/cafe24.css?v=20260814v" />
|
||||
<link rel="stylesheet" href="/static/cafe24.css?v=20260814w" />
|
||||
{% 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);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}
|
||||
<link rel="stylesheet" href="/static/cafe24.css?v=20260814v" />
|
||||
<link rel="stylesheet" href="/static/cafe24.css?v=20260814w" />
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{% extends "erp_base.html" %}
|
||||
|
||||
{% block head_extra %}
|
||||
<link rel="stylesheet" href="/static/cafe24.css?v=20260814v" />
|
||||
<link rel="stylesheet" href="/static/cafe24.css?v=20260814w" />
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
+14
-6
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user