09One time read at once by three cities
Move the time in the reference city and the other two rows cut to their own values in the same frame, with a next-day marker attached to any row that crossed midnight.
Best forScheduling screens where a time difference must be visible, such as booking a call with an overseas team
steps(1, end)aria-livetranslateY
<main class="stage">
<div class="tz is-demo">
<ul class="tz__rows">
<li class="tz__row tz__row--base" data-r="0" data-next="0">
<span class="tz__city">
<span class="tz__ic" aria-hidden="true"><svg viewBox="0 0 256 256" width="14" height="14"><g fill="currentColor"><path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2"/><path d="M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24m88 104a87.6 87.6 0 0 1-3.33 24h-38.51a157.4 157.4 0 0 0 0-48h38.51a87.6 87.6 0 0 1 3.33 24m-114 40h52a115.1 115.1 0 0 1-26 45a115.3 115.3 0 0 1-26-45m-3.9-16a140.8 140.8 0 0 1 0-48h59.88a140.8 140.8 0 0 1 0 48ZM40 128a87.6 87.6 0 0 1 3.33-24h38.51a157.4 157.4 0 0 0 0 48H43.33A87.6 87.6 0 0 1 40 128m114-40h-52a115.1 115.1 0 0 1 26-45a115.3 115.3 0 0 1 26 45m52.33 0h-35.62a135.3 135.3 0 0 0-22.3-45.6A88.29 88.29 0 0 1 206.37 88Zm-98.74-45.6A135.3 135.3 0 0 0 85.29 88H49.63a88.29 88.29 0 0 1 57.96-45.6M49.63 168h35.66a135.3 135.3 0 0 0 22.3 45.6A88.29 88.29 0 0 1 49.63 168m98.78 45.6a135.3 135.3 0 0 0 22.3-45.6h35.66a88.29 88.29 0 0 1-57.96 45.6"/></g></svg></span>
<span class="tz__name">New York</span>
</span>
<span class="tz__slot">
<span class="tz__t">07:00</span>
<span class="tz__f" data-k="a">07:00</span>
<span class="tz__f" data-k="b">09:00</span>
<span class="tz__f" data-k="c">12:00</span>
</span>
<span class="tz__ctl">
<button class="tz__nudge" type="button" data-d="-1" aria-label="back 30 minutes"><svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true"><g fill="currentColor"><path d="M160 48v160l-80-80Z" opacity=".2"/><path d="M163.06 40.61a8 8 0 0 0-8.72 1.73l-80 80a8 8 0 0 0 0 11.32l80 80A8 8 0 0 0 168 208V48a8 8 0 0 0-4.94-7.39M152 188.69L91.31 128L152 67.31Z"/></g></svg></button>
<button class="tz__nudge" type="button" data-d="1" aria-label="forward 30 minutes"><svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true"><g fill="currentColor"><path d="m176 128l-80 80V48Z" opacity=".2"/><path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z"/></g></svg></button>
</span>
<span class="tz__rail" role="slider" tabindex="0" id="tz-rail" aria-label="Reference city time" aria-valuemin="0" aria-valuemax="1410" aria-valuenow="420" aria-valuetext="New York 07:00">
<span class="tz__fill"></span>
</span>
</li>
<li class="tz__row" data-r="1" data-next="0">
<span class="tz__city"><span class="tz__name">London</span></span>
<span class="tz__slot">
<span class="tz__t">12:00</span>
<span class="tz__f" data-k="a">12:00</span>
<span class="tz__f" data-k="b">14:00</span>
<span class="tz__f" data-k="c">17:00</span>
</span>
<span class="tz__badge">next day</span>
</li>
<li class="tz__row" data-r="2" data-next="0">
<span class="tz__city"><span class="tz__name">Seoul</span></span>
<span class="tz__slot">
<span class="tz__t">20:00</span>
<span class="tz__f" data-k="a">20:00</span>
<span class="tz__f" data-k="b">22:00</span>
<span class="tz__f" data-k="c">01:00</span>
</span>
<span class="tz__badge">next day</span>
</li>
</ul>
<p class="tz__live" id="tz-live" aria-live="polite"></p>
</div>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-quick;
$easing: $ease-spring;
$color: $subject-mint;
@include stage($stage-ink);
.tz {
box-sizing: border-box;
width: min(300px, 90vw);
color: $subject-cream;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.tz__rows {
display: flex;
flex-direction: column;
gap: $sp-1;
margin: 0;
padding: 0;
list-style: none;
}
.tz__row {
display: grid;
grid-template-columns: 116px 1fr auto;
align-items: center;
gap: $sp-2;
padding: $sp-1 $sp-2;
border-radius: $r-sm;
background-color: rgba($subject-cream, .07);
}
.tz__row--base {
row-gap: $sp-1;
background-color: rgba($color, .14);
}
// 도시 이름은 로케일마다 길이가 다르다 — 칸을 넘기지 말고 칸 안에서 잘린다
.tz__city {
display: flex;
align-items: center;
gap: $sp-1;
min-width: 0;
overflow: hidden;
}
.tz__ic { display: inline-flex; flex: 0 0 auto; color: $color; }
.tz__ic svg { display: block; }
.tz__name {
min-width: 0;
overflow: hidden;
font-size: 12px;
line-height: 16px;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.tz__slot { display: grid; }
.tz__t,
.tz__f {
grid-area: 1 / 1;
justify-self: start;
font-size: 18px;
line-height: 24px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: .01em;
}
.tz__row--base .tz__t,
.tz__row--base .tz__f {
font-size: 22px;
line-height: 26px;
color: $color;
}
// 루프 전용 값 석 장 — 사람이 조작하면 위의 실제 값이 다시 보인다
.tz__f { display: none; }
.tz.is-demo .tz__f { display: block; }
.tz.is-demo .tz__t { display: none; }
.tz__ctl {
display: flex;
align-items: center;
gap: $sp-1;
}
.tz__nudge {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
width: 24px;
height: 24px;
border: 0;
border-radius: $r-xs;
background-color: rgba($subject-cream, .14);
color: $subject-cream;
cursor: pointer;
}
.tz__nudge svg { display: block; }
.tz__nudge:focus-visible,
.tz__rail:focus-visible { outline: 3px solid $color; outline-offset: 2px; }
.tz__rail {
grid-column: 1 / -1;
position: relative;
display: block;
height: 6px;
overflow: hidden;
border-radius: $r-pill;
background-color: rgba($subject-cream, .18);
cursor: ew-resize;
}
.tz__fill {
display: block;
width: 100%;
height: 100%;
border-radius: $r-pill;
background-color: $color;
transform: scaleX(var(--p, .2979));
transform-origin: left center; // 규칙8: 타임존 채움 좌측 기준
}
// 날짜가 넘어간 줄에만 붙는 표시 — 정적 상태에서는 data-next 가 켠다
.tz__badge {
padding: 0 $sp-1;
border-radius: $r-xs;
background-color: $subject-blue;
color: $subject-cream;
font-size: 10px;
line-height: 16px;
font-weight: 700;
white-space: nowrap;
opacity: 0;
}
.tz:not(.is-demo) .tz__row[data-next="1"] .tz__badge { opacity: 1; }
.tz__live {
position: absolute;
margin: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
// ── 자동 루프 ──────────────────────────────────────────
// 세 줄은 같은 keyframes 를 쓴다 — 한 프레임에 함께 갈린다(steps). 사이를 채우는 건
// 기준 줄의 막대(scaleX)와 배지의 translateY 팝이다
.tz.is-demo .tz__f {
animation-duration: $dur-loop;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
animation-fill-mode: backwards;
}
.tz.is-demo .tz__f[data-k="a"] { animation-name: tz-a; }
.tz.is-demo .tz__f[data-k="b"] { animation-name: tz-b; }
.tz.is-demo .tz__f[data-k="c"] { animation-name: tz-c; }
@keyframes tz-a {
0% { opacity: 1; }
30% { opacity: 0; }
86% { opacity: 1; }
100% { opacity: 1; }
}
@keyframes tz-b {
0% { opacity: 0; }
30% { opacity: 1; }
58% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes tz-c {
0% { opacity: 0; }
58% { opacity: 1; }
86% { opacity: 0; }
100% { opacity: 0; }
}
.tz.is-demo .tz__fill {
animation-name: tz-slide;
animation-duration: $dur-loop;
animation-timing-function: $easing;
animation-iteration-count: infinite;
animation-fill-mode: backwards;
}
@keyframes tz-slide {
0% { transform: scaleX(.2979); }
20% { transform: scaleX(.2979); }
30% { transform: scaleX(.383); }
48% { transform: scaleX(.383); }
58% { transform: scaleX(.5106); }
76% { transform: scaleX(.5106); }
86% { transform: scaleX(.2979); }
100% { transform: scaleX(.2979); }
}
.tz.is-demo .tz__row[data-r="2"] .tz__badge {
animation-name: tz-badge, tz-badge-pop;
animation-duration: $dur-loop, $dur-loop;
animation-timing-function: steps(1, end), $easing;
animation-iteration-count: infinite, infinite;
animation-fill-mode: backwards, backwards;
}
// 배지는 값과 같은 프레임에 나가고 들어온다 — 01:00 인데 다음날 표시만 없는 프레임을 만들지 않는다
@keyframes tz-badge {
0% { opacity: 0; }
58% { opacity: 1; }
86% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes tz-badge-pop {
0% { transform: translateY(7px); }
58% { transform: translateY(7px); }
67% { transform: translateY(0); }
80% { transform: translateY(0); }
86% { transform: translateY(7px); }
100% { transform: translateY(7px); }
}
@media (max-width: 340px) {
.tz__row { grid-template-columns: 104px 1fr auto; gap: $sp-1; }
.tz__name { font-size: 11px; line-height: 14px; }
.tz__t,
.tz__f { font-size: 16px; line-height: 20px; }
.tz__row--base .tz__t,
.tz__row--base .tz__f { font-size: 19px; line-height: 22px; }
.tz__nudge { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.tz.is-demo .tz__f,
.tz.is-demo .tz__fill,
.tz.is-demo .tz__row[data-r="2"] .tz__badge { animation: none !important; }
.tz.is-demo .tz__f[data-k="b"],
.tz.is-demo .tz__f[data-k="c"] { display: none; }
}html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #17141a;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.tz {
box-sizing: border-box;
width: min(300px, 90vw);
color: #fff7e6;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
}
.tz__rows {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
.tz__row {
display: grid;
grid-template-columns: 116px 1fr auto;
align-items: center;
gap: 8px;
padding: 4px 8px;
border-radius: 8px;
background-color: rgba(255, 247, 230, 0.07);
}
.tz__row--base {
row-gap: 4px;
background-color: rgba(76, 212, 166, 0.14);
}
.tz__city {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
overflow: hidden;
}
.tz__ic {
display: inline-flex;
flex: 0 0 auto;
color: #4cd4a6;
}
.tz__ic svg {
display: block;
}
.tz__name {
min-width: 0;
overflow: hidden;
font-size: 12px;
line-height: 16px;
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.tz__slot {
display: grid;
}
.tz__t,
.tz__f {
grid-area: 1/1;
justify-self: start;
font-size: 18px;
line-height: 24px;
font-weight: 800;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
}
.tz__row--base .tz__t,
.tz__row--base .tz__f {
font-size: 22px;
line-height: 26px;
color: #4cd4a6;
}
.tz__f {
display: none;
}
.tz.is-demo .tz__f {
display: block;
}
.tz.is-demo .tz__t {
display: none;
}
.tz__ctl {
display: flex;
align-items: center;
gap: 4px;
}
.tz__nudge {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
width: 24px;
height: 24px;
border: 0;
border-radius: 4px;
background-color: rgba(255, 247, 230, 0.14);
color: #fff7e6;
cursor: pointer;
}
.tz__nudge svg {
display: block;
}
.tz__nudge:focus-visible,
.tz__rail:focus-visible {
outline: 3px solid #4cd4a6;
outline-offset: 2px;
}
.tz__rail {
grid-column: 1/-1;
position: relative;
display: block;
height: 6px;
overflow: hidden;
border-radius: 999px;
background-color: rgba(255, 247, 230, 0.18);
cursor: ew-resize;
}
.tz__fill {
display: block;
width: 100%;
height: 100%;
border-radius: 999px;
background-color: #4cd4a6;
transform: scaleX(var(--p, 0.2979));
transform-origin: left center;
}
.tz__badge {
padding: 0 4px;
border-radius: 4px;
background-color: #2f6df6;
color: #fff7e6;
font-size: 10px;
line-height: 16px;
font-weight: 700;
white-space: nowrap;
opacity: 0;
}
.tz:not(.is-demo) .tz__row[data-next="1"] .tz__badge {
opacity: 1;
}
.tz__live {
position: absolute;
margin: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.tz.is-demo .tz__f {
animation-duration: 2s;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
animation-fill-mode: backwards;
}
.tz.is-demo .tz__f[data-k=a] {
animation-name: tz-a;
}
.tz.is-demo .tz__f[data-k=b] {
animation-name: tz-b;
}
.tz.is-demo .tz__f[data-k=c] {
animation-name: tz-c;
}
@keyframes tz-a {
0% {
opacity: 1;
}
30% {
opacity: 0;
}
86% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes tz-b {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
58% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes tz-c {
0% {
opacity: 0;
}
58% {
opacity: 1;
}
86% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.tz.is-demo .tz__fill {
animation-name: tz-slide;
animation-duration: 2s;
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
animation-iteration-count: infinite;
animation-fill-mode: backwards;
}
@keyframes tz-slide {
0% {
transform: scaleX(0.2979);
}
20% {
transform: scaleX(0.2979);
}
30% {
transform: scaleX(0.383);
}
48% {
transform: scaleX(0.383);
}
58% {
transform: scaleX(0.5106);
}
76% {
transform: scaleX(0.5106);
}
86% {
transform: scaleX(0.2979);
}
100% {
transform: scaleX(0.2979);
}
}
.tz.is-demo .tz__row[data-r="2"] .tz__badge {
animation-name: tz-badge, tz-badge-pop;
animation-duration: 2s, 2s;
animation-timing-function: steps(1, end), cubic-bezier(0.2, 0.8, 0.2, 1);
animation-iteration-count: infinite, infinite;
animation-fill-mode: backwards, backwards;
}
@keyframes tz-badge {
0% {
opacity: 0;
}
58% {
opacity: 1;
}
86% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes tz-badge-pop {
0% {
transform: translateY(7px);
}
58% {
transform: translateY(7px);
}
67% {
transform: translateY(0);
}
80% {
transform: translateY(0);
}
86% {
transform: translateY(7px);
}
100% {
transform: translateY(7px);
}
}
@media (max-width: 340px) {
.tz__row {
grid-template-columns: 104px 1fr auto;
gap: 4px;
}
.tz__name {
font-size: 11px;
line-height: 14px;
}
.tz__t,
.tz__f {
font-size: 16px;
line-height: 20px;
}
.tz__row--base .tz__t,
.tz__row--base .tz__f {
font-size: 19px;
line-height: 22px;
}
.tz__nudge {
width: 22px;
height: 22px;
}
}
@media (prefers-reduced-motion: reduce) {
.tz.is-demo .tz__f,
.tz.is-demo .tz__fill,
.tz.is-demo .tz__row[data-r="2"] .tz__badge {
animation: none !important;
}
.tz.is-demo .tz__f[data-k=b],
.tz.is-demo .tz__f[data-k=c] {
display: none;
}
}// 실제 동작: 시차는 Intl 실시간 값이 아니라 기준 도시에서 몇 min 떨어졌는지를 적은 고정 배열이다.
// 기준 시각이 바뀌면 세 줄을 한 번에 다시 그린다 — 한 값에서 세 줄이 나오므로 어긋날 수가 없다
var root = document.querySelector('.tz');
var rail = document.getElementById('tz-rail');
var live = document.getElementById('tz-live');
var rows = root.querySelectorAll('.tz__row');
var OFF = [0, 300, 780];
var MAX = 1410, STEP = 30;
var base = 7 * 60;
function pad(n) { return (n < 10 ? '0' : '') + n; }
function apply() {
root.classList.remove('is-demo');
var say = [];
for (var i = 0; i < rows.length; i++) {
var m = base + OFF[i], t = m % 1440;
var next = m >= 1440 ? '1' : '0';
rows[i].querySelector('.tz__t').textContent = pad(Math.floor(t / 60)) + ':' + pad(t % 60);
rows[i].setAttribute('data-next', next);
var b = rows[i].querySelector('.tz__badge');
say.push(rows[i].querySelector('.tz__name').textContent + ' ' + rows[i].querySelector('.tz__t').textContent
+ (next === '1' && b ? ' ' + b.textContent : ''));
}
rail.style.setProperty('--p', (base / MAX).toFixed(4));
rail.setAttribute('aria-valuenow', String(base));
rail.setAttribute('aria-valuetext', say[0]);
live.textContent = say.join(' · ');
}
function move(d) { base = Math.max(0, Math.min(MAX, base + d * STEP)); apply(); }
root.addEventListener('click', function (e) {
var b = e.target.closest('.tz__nudge');
if (b) { move(Number(b.getAttribute('data-d'))); rail.focus({ preventScroll: true }); }
});
rail.addEventListener('keydown', function (e) {
var d = e.key === 'ArrowRight' || e.key === 'ArrowUp' ? 1 : e.key === 'ArrowLeft' || e.key === 'ArrowDown' ? -1 : 0;
if (d) { e.preventDefault(); move(d); return; }
if (e.key === 'Home' || e.key === 'End') { e.preventDefault(); base = e.key === 'Home' ? 0 : MAX; apply(); }
});
rail.addEventListener('pointerdown', function (e) {
var r = rail.getBoundingClientRect();
base = Math.round(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) * MAX / STEP) * STEP;
apply();
});import { useRef, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./ThreeCityConvert.module.scss";
type KeyEvt = { key: string; preventDefault(): void };
type PtrEvt = { clientX: number; currentTarget: { getBoundingClientRect(): { left: number; width: number } } };
type Box<T> = { current: T };
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type RailVars = CSSProperties & { "--p"?: string };
/** 기준 도시에서 몇 분 떨어졌는지 — Intl 실시간 값이 아니라 고정 오프셋이다 */
export type City = { name: string; offset: number };
export type ThreeCityConvertProps = {
cities?: [City, City, City];
base?: number;
nextDayLabel?: string;
sliderLabel?: string;
minusLabel?: string;
plusLabel?: string;
duration?: number;
easing?: string;
color?: string;
};
const MAX = 1410;
const STEP = 30;
const DEMO = [420, 540, 720]; // 격자 미리보기(.isDemo) 루프가 훑는 기준 시각 석 장
const GLOBE = (
<g fill="currentColor">
<path d="M224 128a96 96 0 1 1-96-96a96 96 0 0 1 96 96" opacity=".2" />
<path d="M128 24a104 104 0 1 0 104 104A104.12 104.12 0 0 0 128 24m88 104a87.6 87.6 0 0 1-3.33 24h-38.51a157.4 157.4 0 0 0 0-48h38.51a87.6 87.6 0 0 1 3.33 24m-114 40h52a115.1 115.1 0 0 1-26 45a115.3 115.3 0 0 1-26-45m-3.9-16a140.8 140.8 0 0 1 0-48h59.88a140.8 140.8 0 0 1 0 48ZM40 128a87.6 87.6 0 0 1 3.33-24h38.51a157.4 157.4 0 0 0 0 48H43.33A87.6 87.6 0 0 1 40 128m114-40h-52a115.1 115.1 0 0 1 26-45a115.3 115.3 0 0 1 26 45m52.33 0h-35.62a135.3 135.3 0 0 0-22.3-45.6A88.29 88.29 0 0 1 206.37 88Zm-98.74-45.6A135.3 135.3 0 0 0 85.29 88H49.63a88.29 88.29 0 0 1 57.96-45.6M49.63 168h35.66a135.3 135.3 0 0 0 22.3 45.6A88.29 88.29 0 0 1 49.63 168m98.78 45.6a135.3 135.3 0 0 0 22.3-45.6h35.66a88.29 88.29 0 0 1-57.96 45.6" />
</g>
);
const CARET_LEFT = (
<g fill="currentColor">
<path d="M160 48v160l-80-80Z" opacity=".2" />
<path d="M163.06 40.61a8 8 0 0 0-8.72 1.73l-80 80a8 8 0 0 0 0 11.32l80 80A8 8 0 0 0 168 208V48a8 8 0 0 0-4.94-7.39M152 188.69L91.31 128L152 67.31Z" />
</g>
);
const CARET_RIGHT = (
<g fill="currentColor">
<path d="m176 128l-80 80V48Z" opacity=".2" />
<path d="m181.66 122.34l-80-80A8 8 0 0 0 88 48v160a8 8 0 0 0 13.66 5.66l80-80a8 8 0 0 0 0-11.32M104 188.69V67.31L164.69 128Z" />
</g>
);
function pad(n: number) {
return (n < 10 ? "0" : "") + n;
}
function hhmm(m: number) {
const t = m % 1440;
return pad(Math.floor(t / 60)) + ":" + pad(t % 60);
}
export default function ThreeCityConvert({
cities = [
{ name: "New York", offset: 0 },
{ name: "London", offset: 300 },
{ name: "Seoul", offset: 780 },
],
base = 7 * 60,
nextDayLabel = "next day",
sliderLabel = "Reference city time",
minusLabel = "back 30 minutes",
plusLabel = "forward 30 minutes",
duration = 220,
easing = "cubic-bezier(.2,.8,.2,1)",
color = "#4cd4a6",
}: ThreeCityConvertProps) {
const [demo, setDemo] = useState(true);
const [at, setAt] = useState(base);
const rail = useRef<HTMLSpanElement | null>(null) as Box<HTMLSpanElement | null>;
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
const railVars: RailVars = { "--p": (at / MAX).toFixed(4) };
// 세 줄이 한 값에서 나오므로 어긋날 수가 없다 — 같은 렌더에 함께 갈린다
const lines = cities.map((c) => ({ name: c.name, t: hhmm(at + c.offset), next: at + c.offset >= 1440 }));
const say = lines.map((l) => `${l.name} ${l.t}${l.next ? " " + nextDayLabel : ""}`);
function move(d: number) {
setDemo(false);
setAt((p) => Math.max(0, Math.min(MAX, p + d * STEP)));
}
function onKey(e: KeyEvt) {
const d = e.key === "ArrowRight" || e.key === "ArrowUp" ? 1 : e.key === "ArrowLeft" || e.key === "ArrowDown" ? -1 : 0;
if (d) {
e.preventDefault();
move(d);
return;
}
if (e.key === "Home" || e.key === "End") {
e.preventDefault();
setDemo(false);
setAt(e.key === "Home" ? 0 : MAX);
}
}
function onDown(e: PtrEvt) {
const r = e.currentTarget.getBoundingClientRect();
const p = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width));
setDemo(false);
setAt(Math.round((p * MAX) / STEP) * STEP);
}
function nudge(d: number, label: string) {
return (
<button
className={styles.nudge}
type="button"
aria-label={label}
onClick={() => {
move(d);
if (rail.current) rail.current.focus({ preventScroll: true });
}}
>
<svg viewBox="0 0 256 256" width="14" height="14" aria-hidden="true">{d < 0 ? CARET_LEFT : CARET_RIGHT}</svg>
</button>
);
}
return (
<div className={`${styles.tz} ${demo ? styles.isDemo : ""}`} style={vars}>
<ul className={styles.rows}>
{lines.map((l, i) => (
<li
key={l.name}
className={`${styles.row} ${i === 0 ? styles.rowBase : ""}`}
data-r={i}
data-next={l.next ? "1" : "0"}
>
<span className={styles.city}>
{i === 0 ? (
<span className={styles.ic} aria-hidden="true">
<svg viewBox="0 0 256 256" width="14" height="14">{GLOBE}</svg>
</span>
) : null}
<span className={styles.name}>{l.name}</span>
</span>
<span className={styles.slot}>
<span className={styles.t}>{l.t}</span>
{DEMO.map((d, k) => (
<span className={styles.f} data-k={["a", "b", "c"][k]} key={d}>
{hhmm(d + cities[i].offset)}
</span>
))}
</span>
{i === 0 ? (
<span className={styles.ctl}>
{nudge(-1, minusLabel)}
{nudge(1, plusLabel)}
</span>
) : (
<span className={styles.badge}>{nextDayLabel}</span>
)}
{i === 0 ? (
<span
className={styles.rail}
style={railVars}
role="slider"
tabIndex={0}
aria-label={sliderLabel}
aria-valuemin={0}
aria-valuemax={MAX}
aria-valuenow={at}
aria-valuetext={say[0]}
ref={(el: HTMLSpanElement | null) => {
rail.current = el;
}}
onKeyDown={onKey}
onPointerDown={onDown}
>
<span className={styles.fill} />
</span>
) : null}
</li>
))}
</ul>
<p className={styles.live} aria-live="polite">{say.join(" · ")}</p>
</div>
);
}09 One time read at once by three cities — Measured area 1.799% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · 9 time picker ui patterns, from a point to a span
The post this demo lives in
9 time picker ui patterns, from a point to a spanA time picker ui is the part of a screen where someone sets a time without typing it. These nine go past a single time o See all demos in this post
