feat: 요일별 스트릭 표시용 CheckMarkGroup 컴포넌트 추가

[hamxxn]

Summary

읽기 전용으로 체크 여부를 나열하는 UI(요일별 스트릭 등)가 필요해서 shared/ui/check-mark에 CheckMarkGroup 컴파운드 컴포넌트를 추가했다. CheckIcon도 함께 추가했다.

Related Issues

• close feat: 요일별 스트릭 표시용 CheckMarkGroup 컴포넌트 추가 #22

PR Point (To Reviewer)

• 원래 이슈에서는 Checkbox라는 이름으로 시작했는데, 클릭 불가능한 순수 표시 컴포넌트(폼 컨트롤 아님, onClick/role=checkbox 없음)라 <input type="checkbox">를 연상시키는 이름을 피하려고 CheckMarkGroup으로 바꿨다.
• 이슈의 완료조건 스니펫은 Item이 isChecked/label을 직접 받는 단일 컴포넌트 형태였지만, 구현 중에 Item/Indicator/Label 세 조각으로 분리했다. Item이 isChecked를 Context로 하위 Indicator/Label에 전달하는 방식이라, label 없이 인디케이터만 쓰거나 Label의 텍스트 색을 isChecked에 따라 다르게 하는 것도 자연스럽게 지원된다. 아래 사용법 참고.
• CHECK_MARK_BASE.LABEL_BASE(라벨 타이포 클래스)는 아직 Figma 타이포 토큰이 확정되지 않아 빈 문자열로 남아있다 — 후속 확인 필요.

사용법

import { CheckMarkGroup } from "@/shared/ui/check-mark";

const WEEK_DAYS = [
  { label: "월", isChecked: true },
  { label: "화", isChecked: true },
  { label: "토", isChecked: false },
  { label: "일", isChecked: false },
];

function WeekStreak() {
  return (
    <CheckMarkGroup>
      {WEEK_DAYS.map((day) => (
        <CheckMarkGroup.Item key={day.label} isChecked={day.isChecked}>
          <CheckMarkGroup.Indicator />
          <CheckMarkGroup.Label label={day.label} />
        </CheckMarkGroup.Item>
      ))}
    </CheckMarkGroup>
  );
}

// label 없이 인디케이터만 쓰는 것도 가능
<CheckMarkGroup>
  <CheckMarkGroup.Item isChecked={true}>
    <CheckMarkGroup.Indicator />
  </CheckMarkGroup.Item>
</CheckMarkGroup>;

Screenshot

ETC

없음

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
aligner	Ready	Preview	Aug 12, 2026 1:41am

[sohxxny]

고생하셨습니다! 이거 타이포 결정되면 그때 수정하고 머지할까요?

[thwjddlqslek]

수고하셨습니다!

[thwjddlqslek]

읽기 전용인 컴포넌트임을 코드만으로는 파악하기 어려울 같아요!
주석 추가 or HTMLAttributes에서 이벤트 핸들러를 omit or pick 해서 타입을 좁히는게 좋을 듯 합니당

label쪽도 동일합니닷

[hamxxn]

넵!