회원 가입

회원가입 페이지 구현에 필요한 데이터 항목, 전송 형식, 응답 구조를 포함한 전체 흐름을 설명합니다.
프론트엔드와 백엔드 연결을 위해 필요한 식별자와 예제 코드도 함께 제공합니다.

데이타 식별자

{
  "dataID": "SIGN_UP"
}

HTML

<form id="frm_sign_up">
    <input type="hidden" name="return_url" id="return_url" value="/user/sign-in">
    <label for="email">Email</label>
    <input type="email" id="email" name="email">
    <label for="cell_phone">Mobile phone</label>
    <input type="text" id="cell_phone" name="cell_phone">
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
    <label for="nickname">Nickname</label>
    <input type="text" id="nickname" name="nickname">
    <label for="avatar_1">Avatar1</label>
    <input type="radio" id="avatar_1" name="avatar_url" value="/avatar/avatar1.svg">
    <label for="birth_y">Birthday (year)</label>
    <select id="birth_y" name="birth_y">
        <option value="">Select year</option>
        <option value="2090">2090</option>
        <option value="2089">2089</option>
    </select>
    <label for="birth_m">Birthday (month)</label>
    <select id="birth_m" name="birth_m">
        <option value="">Select month</option>
        <option value="1">January</option>
        <option value="12">December</option>
    </select>
    <label for="birth_d">Birthday (day)</label>
    <select id="birth_d" name="birth_d">
        <option value="">Select day</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
    <label for="password">Password</label>
    <input type="password" id="password" name="password">
    <label for="password_re">Confirm password</label>
    <input type="password" id="password_re" name="password_re">
    <input type="checkbox" id="receive_message" name="receive_message" value="Y">
    <label for="receive_message">I agree to receive news and information.</label>
    <input type="checkbox" id="term_agree" name="term_agree" value="Y">
    <label for="term_agree">I agree to the Terms of Service and Privacy Policy.</label>
    <button type="submit">Sign up</button>
</form>
  • form
    <form id="frm_sign_up"></form>

    회원가입 폼으로 id인 frm_sign_up는 필수입니다.

  • return_url
    <input type="hidden" name="return_url" id="return_url" value="/user/sign-in">

    회원 가입완료 후 이동할 URL

  • email
    <input type="email" id="email" name="email">

    로그인시 사용할 이메일

  • cell_phone
    <input type="text" id="cell_phone" name="cell_phone">

    회원 휴대폰 번호

  • name
    <input type="text" id="name" name="name">

    회원 이름

  • nickname
    <input type="text" id="nickname" name="nickname">

    회원 닉네임

  • avatar_url
    <input type="radio" id="avatar_1" name="avatar_url" value="/avatar/avatar1.svg">

    회원이 사용할 아바타 URL

  • birth_y
    <select id="birth_y" name="birth_y"></select>

    회원 생일 년도

  • birth_m
    <select id="birth_m" name="birth_m"></select>

    회원 생일 월

  • birth_d
    <select id="birth_d" name="birth_d"></select>

    회원 생일 일자

  • password
    <input type="password" id="password" name="password">

    회원 비밀번호. data-validation="password-8-32" 를 설정하면 숫자, 영문, 특수문자(?=.*[~!@#$%^*()+-=[]{};:?.,_)형식의 8-32자 형식으로 입력가능

  • password_re
    <input type="password" id="password_re" name="password_re">

    비밀번호 잘못입력을 방지하기 위한 확인용 비밀번호

  • receive_message
    <input type="checkbox" id="receive_message" name="receive_message" value="Y">

    소식 및 정보등의 수신 동의 : Y(동의)/N(미동의)

  • term_agree
    <input type="checkbox" id="term_agree" name="term_agree" value="Y">

    이용약관 및 개인정보 처리방침 동의여부 : Y(동의)/N(미동의) 동의시만 가입가능

Response Result

  • 회원가입 버튼 클릭시 회원 가입 처리 후 return_url로 이동합니다.

Example

<form id="frm_sign_up" class="col-12 col-lg-7 mx-auto mt-5 needs-validation form-signup">
    <input type="hidden" name="return_url" id="return_url" value="/user/sign-in">
    <div class="text-center">
        <h2 class="my-3">Sign up</h2>
    </div>
    <div class="my-4">
        <div class="form-group has-validation">
            <div class="form-check lh-base mt-3">
                <input class="form-check-input" type="checkbox" id="term_agree" name="term_agree" value="Y">
                <label class="form-check-label" for="term_agree">I agree to the Terms of Service and Privacy Policy.</label>
            </div>
            <div class="invalid-feedback">
                Please agree to the Terms of Service.
            </div>
        </div>
    </div>
    <div>
        <div class="row g-3">
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" data-validation="email" data-validation-type="replace" id="email" name="email" placeholder="Enter your email" data-gtm-form-interact-field-id="0">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="cell_phone" class="form-label">Mobile phone</label>
                    <input type="text" class="form-control" data-validation="number" data-validation-type="replace" id="cell_phone" name="cell_phone" placeholder="Enter your mobile phone number">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="name" class="form-label">Name</label>
                    <input type="text" class="form-control" data-validation="not-empty" id="name" name="name" placeholder="Enter your name">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="nickname" class="form-label">Nickname</label>
                    <input type="text" class="form-control" data-validation="not-empty" id="nickname" name="nickname" placeholder="Enter your nickname">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation"><label for="email" class="form-label">Avatar</label>
                    <div class="row flex-wrap justify-content-start align-items-center">
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_1"><img src="/_images/face_icons_circle/face_icons-circle-01.svg"></label><input class="" type="radio" id="avatar_1" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-01.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_2"><img src="/_images/face_icons_circle/face_icons-circle-02.svg"></label><input class="" type="radio" id="avatar_2" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-02.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_3"><img src="/_images/face_icons_circle/face_icons-circle-03.svg"></label><input class="" type="radio" id="avatar_3" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-03.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_4"><img src="/_images/face_icons_circle/face_icons-circle-04.svg"></label><input class="" type="radio" id="avatar_4" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-04.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_5"><img src="/_images/face_icons_circle/face_icons-circle-05.svg"></label><input class="" type="radio" id="avatar_5" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-05.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_6"><img src="/_images/face_icons_circle/face_icons-circle-06.svg"></label><input class="" type="radio" id="avatar_6" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-06.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_7"><img src="/_images/face_icons_circle/face_icons-circle-07.svg"></label><input class="" type="radio" id="avatar_7" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-07.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_8"><img src="/_images/face_icons_circle/face_icons-circle-08.svg"></label><input class="" type="radio" id="avatar_8" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-08.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_9"><img src="/_images/face_icons_circle/face_icons-circle-09.svg"></label><input class="" type="radio" id="avatar_9" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-09.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_10"><img src="/_images/face_icons_circle/face_icons-circle-10.svg"></label><input class="" type="radio" id="avatar_10" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-10.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_11"><img src="/_images/face_icons_circle/face_icons-circle-11.svg"></label><input class="" type="radio" id="avatar_11" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-11.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_12"><img src="/_images/face_icons_circle/face_icons-circle-12.svg"></label><input class="" type="radio" id="avatar_12" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-12.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_13"><img src="/_images/face_icons_circle/face_icons-circle-13.svg"></label><input class="" type="radio" id="avatar_13" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-13.svg"></div>
                        <div class="col-auto text-center"><label class="form-check-label avatar avatar-lg" for="avatar_14"><img src="/_images/face_icons_circle/face_icons-circle-14.svg"></label><input class="" type="radio" id="avatar_14" name="avatar_url" value="/_images/face_icons_circle/face_icons-circle-14.svg"></div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <label for="birth_y" class="form-label">Birthday (year)</label>
                <select class="form-select" id="birth_y" name="birth_y" data-validation="not-empty">
                    <option value="">Select year</option>
                    <option value="2023">2023</option>
                    <option value="2022">2022</option>
                    <option value="1945">1945</option>
                    <option value="1944">1944</option>
                </select>
            </div>
            <div class="col-6">
                <label for="birth_m" class="form-label">Birthday (month)</label>
                <select class="form-select" id="birth_m" name="birth_m" data-validation="not-empty">
                    <option value="">Select month</option>
                    <option value="1">January</option>
                    <option value="12">December</option>
                </select>
            </div>
            <div class="col-6">
                <label for="birth_d" class="form-label">Birthday (day)</label>
                <select class="form-select" id="birth_d" name="birth_d" data-validation="not-empty">
                    <option value="">Select day</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="31">31</option>
                </select>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" class="form-control" data-validation="password-8-32" id="password" name="password" placeholder="Enter your password" data-gtm-form-interact-field-id="1">
                    <div class="invalid-feedback"> Please check your password.</div>
                    <small class="form-text">8 to 32 characters combining letters, numbers, and special characters</small>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="password_re" class="form-label">Confirm password</label>
                    <input type="password" class="form-control" data-validation="password-8-32" id="password_re" name="password_re" placeholder="Enter your password again">
                    <div class="invalid-feedback"> Please check your password.</div>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <div class="form-check lh-base mt-3">
                        <input class="form-check-input" type="checkbox" id="receive_message" name="receive_message" value="Y">
                        <label class="form-check-label" for="remember_me">I agree to receive news and information.</label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="my-5 text-center">
        <button class="w-50 px-4 btn btn-warning border border-3 fw-bold" type="submit">Sign up</button>
        <p class="my-3"><a href="#">Sign in</a><span class="mx-2">|</span><a href="#">Find password</a></p>
    </div>
</form>

관련 링크