# Members

정적 사이트에 회원 기능을 붙입니다. 가입·로그인·로그아웃·탈퇴·프로필·비밀번호 변경·소셜 로그인, 로그인 상태·등급에 따른 조건부 노출까지 HTML 속성만으로 동작합니다.

## 배포 시 자동 연결

회원 관련 `data-saeroon-*` 속성이 있는 HTML을 배포하면, `@saeroon/web-sdk` 스크립트와 사이트 식별 정보가 자동으로 주입됩니다. 이때 SDK가 사이트(테넌트)를 해석할 수 있도록 공개 키를 함께 넘깁니다.

```bash
npx @saeroon/cli deploy ./my-site --pk pk_live_XXXX
```

공개 키(`pk_live_…`)는 브라우저에 노출되어도 안전한 키입니다. 발급은 [키 관리](https://developers.saeroon.com/keys)에서 합니다.

## 가입·로그인 폼

`<form>` 에 `data-saeroon-auth="<모드>"` 를 붙입니다. 모드는 `register`(가입)·`login`(로그인)·`profile`(프로필 수정)·`password`(비밀번호 변경)입니다.

```html
<!-- 가입 -->
<form data-saeroon-auth="register" data-redirect="/welcome">
  <input name="email" type="email" required />
  <input name="password" type="password" required />
  <input name="name" />
  <label><input type="checkbox" name="marketingConsent" /> 마케팅 수신 동의</label>
  <button type="submit">가입</button>
  <div data-saeroon-error></div>
</form>

<!-- 로그인 -->
<form data-saeroon-auth="login">
  <input name="email" type="email" required />
  <input name="password" type="password" required />
  <button type="submit">로그인</button>
  <div data-saeroon-error></div>
</form>
```

`data-redirect` 를 두면 성공 후 그 경로로 이동합니다.

## 로그아웃·탈퇴·소셜 로그인

버튼·링크에 `data-saeroon-auth` 값을 지정합니다.

```html
<button data-saeroon-auth="logout" data-redirect="/">로그아웃</button>
<button data-saeroon-auth="withdraw" data-confirm="정말 탈퇴할까요?">탈퇴</button>

<a data-saeroon-auth="kakao">카카오로 시작</a>
<a data-saeroon-auth="naver">네이버로 시작</a>
```

소셜 로그인은 `kakao`·`naver`·`google`·`apple` 을 지원합니다.

## 조건부 노출과 프로필 바인딩

로그인 여부·등급으로 요소를 보이거나 숨깁니다.

```html
<div data-saeroon-if="logged-in">환영합니다, <span data-saeroon-bind="user.name"></span>님</div>
<div data-saeroon-if="logged-out"><a data-saeroon-auth="kakao">로그인</a></div>
<div data-saeroon-if="tier:vip,gold">등급 회원 전용 안내</div>
```

- `data-saeroon-if` 값: `logged-in` · `logged-out` · `tier:<등급1,등급2,…>`
- `data-saeroon-bind="user.<필드>"` 로 프로필 값을 채웁니다(예: `user.name`·`user.email`·`user.displayName`). 접두사는 `user.` 입니다.

## 등급을 코드로 부여 — 회원 쿠폰

등급(tier)은 결제·운영자 지정 외에 **쿠폰 코드**로도 영구 부여할 수 있습니다(컴프 — 할인 아님). 운영자가
`npx @saeroon/cli coupon create --site <siteId> --tier Gold --count 100 --json`(또는 MCP `saeroon.platform.coupon.*`)로
코드를 발급하고, 회원이 코드를 입력하면 등급이 오릅니다. 서버가 단일사용·회수를 강제하고, 부여 출처는
`entitlementSource: "coupon"` 으로 남아 결제 후원자와 구분됩니다. 앱(네이티브)에서의 redeem·출처 계약은
[앱 백엔드 붙이기](/docs/app-backend)를 참고하세요.

## 회원 명단 보기

가입한 회원은 [hosting 대시보드](https://hosting.saeroon.com)의 사이트 상세에서 확인합니다.

## 속성 요약

| 속성 | 위치 | 뜻 |
|---|---|---|
| `data-saeroon-auth="register\|login\|profile\|password"` | `<form>` | 인증 폼 모드 |
| `data-saeroon-auth="logout\|withdraw"` | 버튼 | 로그아웃·탈퇴 |
| `data-saeroon-auth="kakao\|naver\|google\|apple"` | 버튼·링크 | 소셜 로그인 |
| `data-saeroon-if="logged-in\|logged-out\|tier:…"` | 임의 요소 | 조건부 노출 |
| `data-saeroon-bind="user.<필드>"` | 임의 요소 | 프로필 값 바인딩 |

각 폼의 필드 이름을 포함한 전체 속성 표는 [Attributes](/docs/attributes)에 있습니다. 게시판·댓글은 [Boards](/docs/boards)를 참고하세요.