Terms Agreement

가입 폼에서 약관 동의를 받는 영역입니다. 전체 동의 체크박스와 약관별 체크박스, 필수/선택 표시, 약관 전문 링크로 구성됩니다. 이 페이지는 약관 동의에 쓰는 shadcn Checkbox와 Radio Group 컴포넌트도 함께 설명합니다.

Preview

<TermsAgreement
  terms={terms}
  value={agreed}
  onChange={setAgreed}
/>

Behavior

• 전체 동의를 누르면 모든 약관이 한 번에 켜지고, 다시 누르면 모두 꺼집니다.
• 일부만 체크하면 전체 동의가 중간 상태(−)로 보입니다.
• 필수 약관이 하나라도 빠지면 가입 버튼을 눌러도 필수 약관에 모두 동의해 주세요. 오류가 나오고 요청은 나가지 않습니다.
• 보기 링크는 약관 전문을 새 창으로 엽니다.

Configure the terms

동의받을 약관은 meerkit.config.ts에서 정합니다. 개발자가 약관을 추가·삭제하거나 필수 여부를 바꿀 수 있습니다.

export default defineMeerkitConfig({
  signup: {
    terms: [
      { id: "terms", label: "이용약관 동의", required: true, href: "/terms" },
      { id: "privacy", label: "개인정보 수집 및 이용 동의", required: true, href: "/privacy" },
      { id: "marketing", label: "마케팅 정보 수신 동의", required: false },
      { id: "age14", label: "만 14세 이상입니다", required: true },
    ],
  },
});

What the server receives

{
  "user_id": "newbie",
  "name": "신입",
  "email": "newbie@example.com",
  "password": "••••••••",
  "agreed_terms": ["terms", "privacy"]
}

• 체크한 약관의 id만 배열로 갑니다. 체크하지 않은 선택 약관(marketing)은 빠집니다.
• 필수 약관 동의 여부는 서버도 다시 확인해야 합니다. 화면 검사는 우회할 수 있습니다.
• 동의 시각을 증빙해야 한다면 서버가 agreed_at을 함께 저장하세요 (Data Model 참고).

Legal pages

킷에는 샘플 약관 페이지 /terms, /privacy가 들어 있어 보기 링크가 바로 동작합니다. 샘플 문구이므로 실제 서비스에서는 반드시 법무 검토를 거친 내용으로 교체하세요. 이미 약관 페이지가 있다면 href를 그 주소로 바꾸면 됩니다.

Checkbox

shadcn Checkbox 기반입니다. 체크, 해제, 중간 상태(indeterminate)를 지원합니다.

<div className="flex items-center gap-3">
  <Checkbox id="agree" checked={checked} onCheckedChange={setChecked} />
  <Label htmlFor="agree">동의합니다</Label>
</div>

• 항상 Label과 htmlFor/id로 묶어, 글자를 눌러도 체크되게 하세요.
• 키보드: Space로 토글, Tab으로 이동합니다.
• 오류 상태는 aria-invalid를 주면 테두리가 빨갛게 바뀝니다.

Radio Group

여러 선택지 중 하나만 고를 때 씁니다. 가입 폼의 선택 항목 성별이 이 컴포넌트를 사용합니다.

<RadioGroup value={gender} onValueChange={setGender}>
  <div className="flex items-center gap-2">
    <RadioGroupItem id="g-male" value="male" />
    <Label htmlFor="g-male">남성</Label>
  </div>
  ...
</RadioGroup>

• 키보드: 방향키로 선택지를 이동하며 고르고, Tab은 그룹 전체를 한 번에 지나갑니다.
• 가입 폼에서 켜려면 signup.optionalFields에 "gender"를 넣으세요.

Props