Members

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

배포 시 자동 연결

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

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

공개 키(pk_live_…)는 브라우저에 노출되어도 안전한 키입니다. 발급은 키 관리에서 합니다.

가입·로그인 폼

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

<!-- 가입 -->
<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 값을 지정합니다.

<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 을 지원합니다.

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

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

<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·출처 계약은 앱 백엔드 붙이기를 참고하세요.

회원 명단 보기

가입한 회원은 hosting 대시보드의 사이트 상세에서 확인합니다.

속성 요약

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