03習慣7日ドットカード

<main class="stage">
<div class="cw is-demo" id="cw">
  <div class="cw__head">
    <p class="cw__title">今週の習慣</p>
    <p class="cw__say" id="say" role="status" aria-live="polite">今週は13マス埋めました</p>
  </div>
  <div class="cw__main">
    <div class="cw__rows">
      <div class="cw__row">
        <span class="cw__name">水2L</span>
        <div class="cw__days" id="row0"></div>
      </div>
      <div class="cw__row">
        <span class="cw__name">ストレッチ</span>
        <div class="cw__days" id="row1"></div>
      </div>
      <div class="cw__row">
        <span class="cw__name">読書20p</span>
        <div class="cw__days" id="row2"></div>
      </div>
    </div>
    <div class="cw__ringBox">
      <svg class="cw__ring" viewBox="0 0 64 64" aria-hidden="true">
        <circle class="cw__track" cx="32" cy="32" r="26"/>
        <circle class="cw__fill" id="ring" cx="32" cy="32" r="26"/>
      </svg>
      <b class="cw__pct" id="pct">62%</b>
    </div>
  </div>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;

// 습관 7일 점 카드 — 세 줄 × 7일 점. 점은 진짜 <button> 이라 aria-pressed 로 눌린 상태가 그대로 읽히고,
// 오른쪽 링은 채운 칸 수 ÷ 전체 칸 수를 stroke-dashoffset 으로 감는다 (둘레는 JS 가 2πr 로 계산해 넣는다).
// 미리보기(.is-demo)는 21개 점을 차례로 채우고 링을 0 에서 목표까지 감는다.
// 애니메이션 선언은 인라인 style 보다 위 단계라, JS 가 넣은 offset 값을 미리보기가 덮는다.

$duration: $dur-loop;
$easing: $ease-spring;
$color: $subject-blue;

@include stage($stage-paper);

.cw { display: flex; flex-direction: column; gap: $sp-3; width: 100%; max-width: 424px; }

.cw__head { display: flex; align-items: baseline; justify-content: space-between; gap: $sp-2; flex-wrap: wrap; }
.cw__title { margin: 0; font-weight: 800; font-size: clamp(13px, 3.4vw, 15px); color: $subject-ink; }
.cw__say { margin: 0; font-weight: 700; font-size: clamp(9px, 2.4vw, 11px); color: rgba($subject-ink, .62); }

.cw__main { display: flex; align-items: center; gap: $sp-4; }
.cw__rows { flex: 1 1 auto; display: flex; flex-direction: column; gap: $sp-2; min-width: 0; }

.cw__row { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: $sp-2; }
.cw__name {
  font-weight: 700; font-size: clamp(9px, 2.4vw, 11px); color: $subject-ink;
  overflow: hidden; text-overflow: clip; white-space: nowrap;
}
.cw__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: $sp-1; }
.cw__dot {
  width: 100%; max-width: 22px; aspect-ratio: 1; border-radius: 50%; padding: 0; cursor: pointer;
  border: 2px solid rgba($subject-ink, .22); background: transparent;
}
.cw__dot[aria-pressed="true"] { border-color: $color; background: $color; }
.cw__dot:focus-visible { outline: 2px solid $subject-ink; outline-offset: 2px; }

.cw__ringBox { position: relative; display: grid; place-items: center; width: 88px; height: 88px; flex: 0 0 auto; }
.cw__ring { width: 88px; height: 88px; transform: rotate(-90deg); }
.cw__track { fill: none; stroke: rgba($subject-ink, .14); stroke-width: 8; }
.cw__fill {
  fill: none; stroke: $color; stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 163.36; stroke-dashoffset: 54;
}
.cw__pct {
  position: absolute; font-weight: 800; font-size: clamp(13px, 3.4vw, 15px); color: $subject-ink;
}

// ── 격자 미리보기 ───────────────────────────────────────────────
.cw.is-demo .cw__dot {
  animation-name: cwDot; animation-duration: $duration; animation-timing-function: $easing;
  animation-iteration-count: infinite; animation-fill-mode: backwards;
  animation-delay: calc(var(--i) * 24ms);
}
@keyframes cwDot {
  0%   { transform: scale(.4); border-color: rgba($subject-ink, .22); background-color: transparent; }
  10%  { transform: scale(1); border-color: $color; background-color: $color; }
  74%  { transform: scale(1); border-color: $color; background-color: $color; }
  84%  { transform: scale(.4); border-color: rgba($subject-ink, .22); background-color: transparent; }
  100% { transform: scale(.4); border-color: rgba($subject-ink, .22); background-color: transparent; }
}
.cw.is-demo .cw__fill {
  animation-name: cwRing; animation-duration: $duration; animation-timing-function: $easing;
  animation-iteration-count: infinite;
}
@keyframes cwRing {
  0%   { stroke-dashoffset: 163.36; }
  62%  { stroke-dashoffset: 54; }
  84%  { stroke-dashoffset: 163.36; }
  100% { stroke-dashoffset: 163.36; }
}

@media (max-width: 340px) {
  .cw { gap: $sp-2; }
  .cw__main { gap: $sp-2; }
  .cw__row { grid-template-columns: 48px 1fr; gap: $sp-1; }
  .cw__dot { max-width: 14px; border-width: 2px; }
  .cw__ringBox { width: 56px; height: 56px; }
  .cw__ring { width: 56px; height: 56px; }
}

// reduce 에서는 점과 링을 멈추고 지금 기록 한 장만 보여 준다
@media (prefers-reduced-motion: reduce) {
  .cw.is-demo .cw__dot { animation: none !important; transform: none !important; }
  .cw.is-demo .cw__fill { animation: none !important; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #ffffff;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.cw {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 424px;
}

.cw__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.cw__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(13px, 3.4vw, 15px);
  color: #17141a;
}

.cw__say {
  margin: 0;
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 11px);
  color: rgba(23, 20, 26, 0.62);
}

.cw__main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cw__rows {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.cw__row {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 8px;
}

.cw__name {
  font-weight: 700;
  font-size: clamp(9px, 2.4vw, 11px);
  color: #17141a;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.cw__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cw__dot {
  width: 100%;
  max-width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  border: 2px solid rgba(23, 20, 26, 0.22);
  background: transparent;
}

.cw__dot[aria-pressed=true] {
  border-color: #2f6df6;
  background: #2f6df6;
}

.cw__dot:focus-visible {
  outline: 2px solid #17141a;
  outline-offset: 2px;
}

.cw__ringBox {
  position: relative;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
}

.cw__ring {
  width: 88px;
  height: 88px;
  transform: rotate(-90deg);
}

.cw__track {
  fill: none;
  stroke: rgba(23, 20, 26, 0.14);
  stroke-width: 8;
}

.cw__fill {
  fill: none;
  stroke: #2f6df6;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 163.36;
  stroke-dashoffset: 54;
}

.cw__pct {
  position: absolute;
  font-weight: 800;
  font-size: clamp(13px, 3.4vw, 15px);
  color: #17141a;
}

.cw.is-demo .cw__dot {
  animation-name: cwDot;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
  animation-delay: calc(var(--i) * 24ms);
}

@keyframes cwDot {
  0% {
    transform: scale(0.4);
    border-color: rgba(23, 20, 26, 0.22);
    background-color: transparent;
  }
  10% {
    transform: scale(1);
    border-color: #2f6df6;
    background-color: #2f6df6;
  }
  74% {
    transform: scale(1);
    border-color: #2f6df6;
    background-color: #2f6df6;
  }
  84% {
    transform: scale(0.4);
    border-color: rgba(23, 20, 26, 0.22);
    background-color: transparent;
  }
  100% {
    transform: scale(0.4);
    border-color: rgba(23, 20, 26, 0.22);
    background-color: transparent;
  }
}
.cw.is-demo .cw__fill {
  animation-name: cwRing;
  animation-duration: 2s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-iteration-count: infinite;
}

@keyframes cwRing {
  0% {
    stroke-dashoffset: 163.36;
  }
  62% {
    stroke-dashoffset: 54;
  }
  84% {
    stroke-dashoffset: 163.36;
  }
  100% {
    stroke-dashoffset: 163.36;
  }
}
@media (max-width: 340px) {
  .cw {
    gap: 8px;
  }
  .cw__main {
    gap: 8px;
  }
  .cw__row {
    grid-template-columns: 48px 1fr;
    gap: 4px;
  }
  .cw__dot {
    max-width: 14px;
    border-width: 2px;
  }
  .cw__ringBox {
    width: 56px;
    height: 56px;
  }
  .cw__ring {
    width: 56px;
    height: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cw.is-demo .cw__dot {
    animation: none !important;
    transform: none !important;
  }
  .cw.is-demo .cw__fill {
    animation: none !important;
  }
}

var STORE = 'godrich-habit-week';
var DAYS = 7;
var DOT_LABEL = '{h} {d}日目';
var SAY_TEXT = '今週は{n}マス埋めました';
var CIRC = 2 * Math.PI * 26;   // r=26 원의 둘레. stroke-dasharray 와 offset 이 이 값을 나눠 쓴다
var root = document.getElementById('cw');
var ring = document.getElementById('ring');
var pctEl = document.getElementById('pct');
var sayEl = document.getElementById('say');
// 습관 이름은 화면에 이미 있으므로 DOM 에서 읽는다 — 같은 글자를 JS 에 한 번 더 적지 않는다
var names = Array.prototype.map.call(document.querySelectorAll('.cw__name'), function (el) { return el.textContent; });
var marks = [
  [1, 1, 1, 0, 1, 1, 0],
  [1, 1, 0, 1, 1, 0, 0],
  [1, 0, 1, 1, 0, 1, 0]
];

function load() {
  try {
    var raw = window.localStorage.getItem(STORE);
    if (raw) { marks = JSON.parse(raw); }
  } catch (e) { /* 저장소가 막힌 창에서는 기본 기록 그대로 */ }
}
function save() {
  try { window.localStorage.setItem(STORE, JSON.stringify(marks)); } catch (e) { /* 저장만 건너뛴다 */ }
}
function total() {
  var n = 0;
  for (var r = 0; r < marks.length; r++) {
    for (var d = 0; d < DAYS; d++) { n += marks[r][d]; }
  }
  return n;
}
function paint() {
  var n = total(), all = marks.length * DAYS;
  var p = n / all;
  ring.style.strokeDasharray = String(CIRC);
  ring.style.strokeDashoffset = String(CIRC * (1 - p));
  pctEl.textContent = Math.round(p * 100) + '%';
  sayEl.textContent = SAY_TEXT.replace('{n}', String(n));
}
function build() {
  for (var r = 0; r < marks.length; r++) {
    var box = document.getElementById('row' + r);
    for (var d = 0; d < DAYS; d++) {
      var b = document.createElement('button');
      b.type = 'button';
      b.className = 'cw__dot';
      b.style.setProperty('--i', String(r * DAYS + d));
      b.setAttribute('aria-pressed', marks[r][d] ? 'true' : 'false');
      b.setAttribute('aria-label', DOT_LABEL.replace('{h}', names[r]).replace('{d}', String(d + 1)));
      b.setAttribute('data-r', String(r));
      b.setAttribute('data-d', String(d));
      box.appendChild(b);
    }
  }
}
load();
build();
paint();
document.addEventListener('click', function (e) {
  var b = e.target.closest ? e.target.closest('.cw__dot') : null;
  if (!b) { return; }
  root.classList.remove('is-demo');
  var r = Number(b.getAttribute('data-r')), d = Number(b.getAttribute('data-d'));
  marks[r][d] = marks[r][d] ? 0 : 1;
  b.setAttribute('aria-pressed', marks[r][d] ? 'true' : 'false');
  save();
  paint();
});

// WeekDotCard — vanilla 판(run/297/demo/03-habit-checklist-week/index.html) 의 React 포트.
// 점은 진짜 <button> 이라 aria-pressed 로 눌린 상태가 그대로 읽히고, 링은 채운 칸 비율만큼 감긴다.
import { useEffect, useState } from "react";
import type { CSSProperties } from "react";
import styles from "./WeekDotCard.module.scss";

export type WeekDotCardProps = {
  duration?: number;
  easing?: string;
  color?: string;
};

type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
type DotVars = CSSProperties & { "--i"?: string };

const STORE = "godrich-habit-week";
const DAYS = 7;
const TITLE = "이번 주 습관";
const NAMES = ["물 2L", "스트레칭", "책 20쪽"];
const DOT_LABEL = "{h} {d}일째";
const SAY_TEXT = "이번 주 {n}칸 채웠습니다";
const CIRC = 2 * Math.PI * 26;   // r=26 원의 둘레. stroke-dasharray 와 offset 이 이 값을 나눠 쓴다
const START: number[][] = [
  [1, 1, 1, 0, 1, 1, 0],
  [1, 1, 0, 1, 1, 0, 0],
  [1, 0, 1, 1, 0, 1, 0],
];

export default function WeekDotCard({
  duration = 2000,
  easing = "cubic-bezier(.2, .8, .2, 1)",
  color = "#2f6df6",
}: WeekDotCardProps) {
  const [marks, setMarks] = useState<number[][]>(START);
  const [demo, setDemo] = useState(true);
  const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };

  useEffect(() => {
    try {
      const raw = window.localStorage.getItem(STORE);
      if (raw) { setMarks(JSON.parse(raw) as number[][]); }
    } catch (e) { /* 저장소가 막힌 창에서는 기본 기록 그대로 */ }
  }, []);

  function save(next: number[][]) {
    try { window.localStorage.setItem(STORE, JSON.stringify(next)); } catch (e) { /* 저장만 건너뛴다 */ }
  }
  function toggle(r: number, d: number) {
    setDemo(false);
    const next = marks.map((row, ri) => row.map((v, di) => (ri === r && di === d ? (v ? 0 : 1) : v)));
    setMarks(next);
    save(next);
  }

  let filled = 0;
  for (let r = 0; r < marks.length; r++) {
    for (let d = 0; d < DAYS; d++) { filled += marks[r][d]; }
  }
  const ratio = filled / (marks.length * DAYS);
  const cls = [styles.root, demo ? styles.isDemo : ""].filter(Boolean).join(" ");
  const dotVars = (i: number): DotVars => ({ "--i": String(i) });

  return (
    <main className={styles.stage}>
      <div className={cls} style={vars}>
        <div className={styles.head}>
          <p className={styles.title}>{TITLE}</p>
          <p className={styles.say} role="status" aria-live="polite">
            {SAY_TEXT.replace("{n}", String(filled))}
          </p>
        </div>
        <div className={styles.main}>
          <div className={styles.rows}>
            {marks.map((row, r) => (
              <div className={styles.row} key={r}>
                <span className={styles.name}>{NAMES[r]}</span>
                <div className={styles.days}>
                  {row.map((v, d) => (
                    <button
                      className={styles.dot}
                      key={d}
                      type="button"
                      aria-pressed={v ? "true" : "false"}
                      aria-label={DOT_LABEL.replace("{h}", NAMES[r]).replace("{d}", String(d + 1))}
                      style={dotVars(r * DAYS + d)}
                      onClick={() => toggle(r, d)}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>
          <div className={styles.ringBox}>
            <svg className={styles.ring} viewBox="0 0 64 64" aria-hidden="true">
              <circle className={styles.track} cx="32" cy="32" r="26" />
              <circle
                className={styles.fill}
                cx="32"
                cy="32"
                r="26"
                style={{ strokeDasharray: String(CIRC), strokeDashoffset: String(CIRC * (1 - ratio)) }}
              />
            </svg>
            <b className={styles.pct}>{Math.round(ratio * 100)}%</b>
          </div>
        </div>
      </div>
    </main>
  );
}