회원 가입

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

데이타 식별자

{
  "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">이메일</label>
    <input type="email" id="email" name="email">
    <label for="cell_phone">휴대전화</label>
    <input type="text" id="cell_phone" name="cell_phone">
    <label for="name">이름</label>
    <input type="text" id="name" name="name">
    <label for="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">생일(년)</label>
    <select id="birth_y" name="birth_y">
        <option value="">년도 선택</option>
        <option value="2090">2090년</option>
        <option value="2089">2089년</option>
    </select>
    <label for="birth_m">생일(월)</label>
    <select id="birth_m" name="birth_m">
        <option value="">월 선택</option>
        <option value="1">1월</option>
        <option value="12">12월</option>
    </select>
    <label for="birth_d">생일(일)</label>
    <select id="birth_d" name="birth_d">
        <option value="">일 선택</option>
        <option value="1">1일</option>
        <option value="2">2일</option>
    </select>
    <label for="password">비밀번호</label>
    <input type="password" id="password" name="password">
    <label for="password_re">비밀번호 재입력</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">소식 및 정보수신에 동의합니다.</label>
    <input type="checkbox" id="term_agree" name="term_agree" value="Y">
    <label for="term_agree">이용약관 및 개인정보 처리방침에 동의합니다.</label>
    <button type="submit">회원가입</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">회원가입</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">이용약관 및 개인정보 처리방침에 동의합니다.</label>
            </div>
            <div class="invalid-feedback">
                서비스 이용약관에 동의해주세요.
            </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">이메일</label>
                    <input type="email" class="form-control" data-validation="email" data-validation-type="replace" id="email" name="email" placeholder="이메일을 입력하세요" 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">휴대전화</label>
                    <input type="text" class="form-control" data-validation="number" data-validation-type="replace" id="cell_phone" name="cell_phone" placeholder="휴대전화 번호를 입력하세요">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="name" class="form-label">이름</label>
                    <input type="text" class="form-control" data-validation="not-empty" id="name" name="name" placeholder="이름을 입력하세요">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="nickname" class="form-label">닉네임</label>
                    <input type="text" class="form-control" data-validation="not-empty" id="nickname" name="nickname" placeholder="닉네임을 입력하세요">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation"><label for="email" class="form-label">아바타</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">생일(년)</label>
                <select class="form-select" id="birth_y" name="birth_y" data-validation="not-empty">
                    <option value="">년도 선택</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">생일(월)</label>
                <select class="form-select" id="birth_m" name="birth_m" data-validation="not-empty">
                    <option value="">월 선택</option>
                    <option value="1">1월</option>
                    <option value="12">12월</option>
                </select>
            </div>
            <div class="col-6">
                <label for="birth_d" class="form-label">생일(일)</label>
                <select class="form-select" id="birth_d" name="birth_d" data-validation="not-empty">
                    <option value="">일 선택</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">비밀번호</label>
                    <input type="password" class="form-control" data-validation="password-8-32" id="password" name="password" placeholder="비밀번호를 입력하세요" data-gtm-form-interact-field-id="1">
                    <div class="invalid-feedback"> 비밀번호를 확인하세요.</div>
                    <small class="form-text">8~32자리의 영문+숫자+특수문자 조합</small>
                </div>
            </div>
            <div class="col-12">
                <div class="form-group has-validation">
                    <label for="password_re" class="form-label">비밀번호 재입력</label>
                    <input type="password" class="form-control" data-validation="password-8-32" id="password_re" name="password_re" placeholder="비밀번호를 다시한번 입력하세요">
                    <div class="invalid-feedback"> 비밀번호를 확인하세요.</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">소식 및 정보수신에 동의합니다.</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">회원가입</button>
        <p class="my-3"><a href="#">로그인</a><span class="mx-2">|</span><a href="#">비밀번호 찾기</a></p>
    </div>
</form>

관련 링크