폼 작성

위젯 만들기

회원정보 수정

회원정보 수정 페이지를 구현하기 위해 필요한 요청 데이터 식별자와 응답 결과 구조를 안내합니다.
각 필드의 설명과 사용 방식은 아래 설명을 참고하여 연동 시 참고하시기 바랍니다.

데이타 식별자

{
  "dataID": "MODIFY_USER",
  "token": "9a2b3c4d5e6f7g8h9i0j",
  "return_url": "https://example.com/profile/update-success",
  "fail_redirect_url": "https://example.com/login",
  "my_notice_limit": 10,
  "page": 1,
  "block_number": 5,
  "my_post_list_flg": "Y",
  "my_post_list_limit": 5,
  "my_notice_flg": "Y",
  "post_responder_flg": "Y",
  "post_responder_limit": 3
}

Key	Description
dataID	데이터 고유값
token	회원인증 후 get parameter로 수신한 인증토큰(만료시간:10분)
return_url	정보 수정 완료 후 이동할 URL
fail_redirect_url	로그인이 되지 않은 상태로 접근 시 이동할 URL
my_notice_limit	나의 알림 가져올 개수
page	나의 알림 페이지 번호
block_number	나의 알림 페이지 표시 개수
my_post_list_flg	내가 작성한 게시글 목록 가져오기 여부 : Y 또는 설정안함
my_post_list_limit	내가 작성한 게시글 목록을 가져올 개수
my_notice_flg	나의 알림 가져오기 여부 : Y 또는 설정안함
post_responder_flg	나의 글에 반응한 사람 목록 가져오기 여부 : Y 또는 설정안함
post_responder_limit	나의 알림 가져올 개수

HTML

<form id="frm_member">
    <input type="hidden" name="token" id="token" value="9a2b3c4d5e6f7g8h9i0j">
    <input type="hidden" name="auth_expire_url" id="auth_expire_url" value="/user/sign-in">
    <input type="hidden" name="return_url" id="return_url" value="/mypage/view">
    <label for="email">이메일</label>
    <input type="email" :value="output.member[0].email" id="email" name="email">
    <label for="cell_phone">휴대전화</label>
    <input type="text" :value="output.member[0].cell_phone" id="cell_phone" name="cell_phone">
    <label for="name">이름</label>
    <input type="text" :value="output.member[0].name" id="name" name="name">
    <label for="nickname">닉네임</label>
    <input type="text" :value="output.member[0].nickname" id="nickname" name="nickname">
    <div>
        <label for="avatar_1">아바타 1</label>
        <input class="" type="radio" id="avatar_1" name="avatar_url" value="/avatar/url-1" :checked="output.member[0].avatar_url=='/avatar/url-1'">
        <label for="avatar_1">아바타 2</label>
        <input class="" type="radio" id="avatar_2" name="avatar_url" value="/avatar/url-2" :checked="output.member[0].avatar_url=='/avatar/url-2'">
    </div>
    <div>
        <label for="birth_y">생일(년)</label>
        <select class="form-select" id="birth_y" name="birth_y">
            <option value="" :selected="!output.member[0].birth_y?'selected':''">년도 선택</option>
            <option v-for="y in Array.from({ length: 80 }, (_, i) => new Date().getFullYear() - i)" :value="y" :selected="output.member[0].birth_y == y?'selected':''">{{ y }}년</option>
        </select>
    </div>
    <div>
        <label for="birth_m">생일(월)</label>
        <select class="form-select" id="birth_m" name="birth_m">
            <option value="" :selected="!output.member[0].birth_m?'selected':''">월 선택</option>
            <option v-for="m in 12" :value="m" :selected="output.member[0].birth_m == m?'selected':''">{{ m }}월</option>
        </select>
    </div>
    <div>
        <label for="birth_d">생일(일)</label>
        <select id="birth_d" name="birth_d">
            <option value="" :selected="!output.member[0].birth_d?'selected':''">일 선택</option>
            <option v-for="d in 31" :value="d" :selected="output.member[0].birth_d == d?'selected':''">{{ d }}일</option>
        </select>
    </div>
    <input type="checkbox" id="receive_message_flg" name="receive_message_flg" value="Y" :checked="output.member[0].receive_message_flg=='Y'?'checked':''"><label class="form-check-label" for="receive_message_flg">소식 및 정보등의 수신 동의.</label>
    <button type="submit" class="mx-1 btn border-hbnc-primary bg-hanbnc-primary-3 border border-3 px-4">확인</button>
</form>

token
```
<input type="hidden" name="token" id="token" value="9a2b3c4d5e6f7g8h9i0j">
```
회원인증 후 get parameter로 수신한 인증토큰(만료시간:10분)

auth_expire_url

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

인증토큰 만료시 이동할 URL

return_url

<input type="hidden" name="return_url" id="return_url" value="/mypage/view">

정보 저장 후 Redirect URL(미 입력시 사이트 인덱스)

email

<input type="email" :value="output.member[0].email" id="email" name="email">

사용자 이메일

cell_phone

<input type="text" :value="output.member[0].cell_phone" id="cell_phone" name="cell_phone">

휴대전화

name

<input type="text" :value="output.member[0].name" id="name" name="name">

사용자 이름

nickname

<input type="text" :value="output.member[0].nickname" id="nickname" name="nickname">

닉네임

avatar_url

<input class="" type="radio" id="avatar_1" name="avatar_url" value="/avatar/url-1" :checked="output.member[0].avatar_url=='/avatar/url-1'">

아바타 1 URL

avatar_url

<input class="" type="radio" id="avatar_2" name="avatar_url" value="/avatar/url-2" :checked="output.member[0].avatar_url=='/avatar/url-2'">

아바타 2 URL

birth_y

<select class="form-select" id="birth_y" name="birth_y"></select>

생일(년)

birth_m

<select class="form-select" id="birth_m" name="birth_m"></select>

생일(월)

birth_d

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

생일(일)

receive_message_flg

<input type="checkbox" id="receive_message_flg" name="receive_message_flg" value="Y" :checked="output.member[0].receive_message_flg=='Y'?'checked':''">

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

Response Result

{
  "avatar_url": "https://cdn.example.com/avatar/a1.png",
  "birth_d": 15,
  "birth_m": 7,
  "birth_y": 1990,
  "cell_phone": "010-1234-5678",
  "create_date": "2023-02-14T10:30:00Z",
  "nickname": "member nickname",
  "name": "member name",
  "level": 3,
  "receive_agree_date": "2023-02-14T10:35:00Z",
  "receive_message_flg": "Y",
  "seq": 102938,
  "member_post_count": 27,
  "member_comment_count": 53,
  "member_like_count": 120
}

Key	Description
avatar_url	아바타 URL
nickname	닉네임
name	이름
level	회원 Level
member_post_count	회원이 작성한 게시물 수
member_comment_count	회원이 응답한 코멘트 수
member_like_count	회원이 보낸 좋아요 수

<div class="container">
<div class="row">
  <div class="col-12 mb-5">
    <div class="px-lg-4 mb-5">
      <!-- USER PROFILE START -->
      <div class="mb-3 row rounded-3 py-3">
        <div class="col-12 col-md-12 col-lg-auto mb-3 mb-sm-0 d-flex justify-content-center align-items-center">
          <div class="mx-4" style="width:6rem;">
            <img colon:src="output.user.avatar_url" class="img-fluid" />
          </div>
        </div>
        <div class="w-100 my-2 ps-3 py-3 me-4 rounded-3 col-12 col-md-12 col-lg media-body d-flex flex-column align-items-start justify-content-center">
          <div class="w-100 text-center text-lg-start d-flex align-items-center justify-content-start">
            <h4>
              {{output.user.nickname}}
            </h4>
            <small class="d-block my-2 ms-2">({{output.user.name}})</small>
          </div>
          <div class="w-100 mt-2 row row-cols-sm-auto justify-content-center justify-content-lg-start">
            <div class="col-6 col-sm-3">
              <span class="w-100 mt-2 badge text-white rounded-pill bg-secondary">Level : {{output.member[0].level.toLocaleString()}}</span>
            </div>
            <div class="col-6 col-sm-3">
              <span class="w-100 mt-2 badge text-white rounded-pill bg-secondary">Post : {{output.member_post_count ? output.member_post_count.toLocaleString() : 0}}</span>
            </div>
            <div class="col-6 col-sm-3">
              <span class="ms-3 mt-2 badge text-white rounded-pill bg-secondary">Comment : {{output.member_comment_count ? output.member_comment_count.toLocaleString() : 0}}</span>
            </div>
            <div class="col-6 col-sm-3">
              <span class="ms-3 mt-2 badge text-white rounded-pill bg-secondary">Like : {{output.member_like_count ? output.member_like_count.toLocaleString() : 0}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- USER PROFILE START -->
      <!-- MODIFY FORM START -->
      <form id="frm_member" class="my-5">
        <input type="hidden" name="return_url" id="return_url" value="/mypage/view"/>
        <div class="setting-item">
          <div class="row g-2 align-items-center">
            <div class="col-md-5">
              <h6>이메일</h6>
              <p class="small mb-0">사용하시는 이메일 주소를 입력하세요.</p>
            </div><!-- col -->
            <div class="col-md">
              <input type="email" :value="output.member[0].email" class="form-control" data-validation="email" data-validation-type="replace" id="email" name="email" placeholder="이메일을 입력하세요" data-gtm-form-interact-field-id="0">
            </div><!-- col -->
          </div><!-- row -->
        </div>
        <div class="setting-item">
          <div class="row g-2 align-items-center">
            <div class="col-md-5">
              <h6>휴대전화</h6>
              <p class="small mb-0">휴대전화번호를 입력하세요.</p>
            </div><!-- col -->
            <div class="col-md">
              <input type="text" :value="output.member[0].cell_phone" class="form-control" data-validation="number" data-validation-type="replace" id="cell_phone" name="cell_phone" placeholder="휴대전화 번호를 입력하세요">
            </div><!-- col -->
          </div><!-- row -->
        </div>
        <div class="setting-item">
          <div class="row g-2 align-items-center">
            <div class="col-md-5">
              <h6>이름</h6>
              <p class="small mb-0">이름을 입력하세요.</p>
            </div><!-- col -->
            <div class="col-md">
              <input type="text" :value="output.member[0].name" class="form-control" data-validation="not-empty" id="name" name="name" placeholder="이름을 입력하세요">
            </div><!-- col -->
          </div><!-- row -->
        </div>
        <div class="setting-item">
          <div class="row g-2 align-items-center">
            <div class="col-md-5">
              <h6>닉네임</h6>
              <p class="small mb-0">포럼 등에서 사용할 닉네임을 입력하세요.</p>
            </div><!-- col -->
            <div class="col-md">
              <input type="text" :value="output.member[0].nickname" class="form-control" data-validation="not-empty" id="nickname" name="nickname" placeholder="닉네임을 입력하세요">
            </div><!-- col -->
          </div><!-- row -->
        </div>
        <div class="setting-item">
          <div class="row g-2 align-items-center">
            <div class="col-md-5">
              <h6>아바타</h6>
              <p class="small mb-0">프로필 아바타를 선택하세요.</p>
            </div><!-- col -->
            <div class="col-md">
              <div class="d-flex flex-wrap justify-content-start align-items-center">
                <? foreach ($arrAvatar as $intKey => $strResult) { ?>
                <div class="me-2 my-1 text-center">
                  <label class="form-check-label avatar avatar-lg" for="avatar_<?= $intKey + 1; ?>"><img src="<?= $strResult; ?>"/></label>
                  <input class="" type="radio" id="avatar_<?= $intKey + 1; ?>" name="avatar_url" value="<?= $strResult; ?>" :checked="output.member[0].avatar_url=='<?=$strResult;?>'">
                </div>
                <? } ?>
              </div>
            </div><!-- col -->
          </div><!-- row -->
        </div>
        <div class="setting-item">
          <div class="row g-2 align-items-center">
            <div class="col-md-5">
              <h6>생일</h6>
              <p class="small mb-0">생일을 선택하세요.</p>
            </div><!-- col -->
            <div class="col-md">
              <div class="row">
                <div class="col">
                  <label for="birth_y" class="form-label visually-hidden">생일(년)</label>
                  <select class="form-select" id="birth_y" name="birth_y" data-validation="not-empty">
                    <option value="" :selected="!output.member[0].birth_y?'selected':''">년도 선택</option>
                    <option v-for="y in Array.from({ length: 80 }, (_, i) => new Date().getFullYear() - i)" :value="y" :selected="output.member[0].birth_y == y?'selected':''">{{ y }}년</option>
                  </select>
                </div>
                <div class="col">
                  <label for="birth_m" class="form-label visually-hidden">생일(월)</label>
                  <select class="form-select" id="birth_m" name="birth_m" data-validation="not-empty">
                    <option value="" :selected="!output.member[0].birth_m?'selected':''">월 선택</option>
                    <option v-for="m in 12" :value="m" :selected="output.member[0].birth_m == m?'selected':''">{{ m }}월</option>
                  </select>
                </div>
                <div class="col">
                  <label for="birth_d" class="form-label visually-hidden">생일(일)</label>
                  <select class="form-select" id="birth_d" name="birth_d" data-validation="not-empty">
                    <option value="" :selected="!output.member[0].birth_d?'selected':''">일 선택</option>
                    <option v-for="d in 31" :value="d" :selected="output.member[0].birth_d == d?'selected':''">{{ d }}일</option>
                  </select>
                </div>
              </div>
            </div><!-- col -->
          </div><!-- row -->
        </div>
        <div class="setting-item">
          <div class="row g-2 align-items-center">
            <div class="col-md-5">
              <h6>소식 및 정보 수신</h6>
              <p class="small mb-0">소식 및 정보 수신 여부를 선택하세요.</p>
            </div><!-- col -->
            <div class="col-md">
              <div class="form-group has-validation">
                <div class="form-check lh-base mt-3">
                  <input class="form-check-input" type="checkbox" id="receive_message_flg" name="receive_message_flg" value="Y" :checked="output.member[0].receive_message_flg=='Y'"><label class="form-check-label" for="receive_message_flg">소식 및 정보등의 수신 동의.</label>
                </div>
              </div>
            </div><!-- col -->
          </div><!-- row -->
        </div>

        <div class="my-5 text-center">
          <div class="my-4 text-center mb-5">
            <button type="submit" class="mx-1 btn border-hbnc-primary bg-hanbnc-primary-3 border border-3 px-4">확인</button>
            <a href="/profile/" class="mx-1 btn border-gray-default-op-50 bg-gray-light border border-3 px-4">취소</a>
          </div>
        </div>
      </form>
      <!-- MODIFY FORM END -->
    </div>
  </div>
</div>
</div>
<script setup lang="ts">
</script>

<div class="container">
    <div class="row">
        <div class="col-12 col-lg-9 border-md-end-none border-end mb-5">
            <div class="px-lg-4 mb-5">
                <!-- USER PROFILE START -->
                <div class="mb-3 row rounded-3 py-3">
                    <div class="col-12 col-md-12 col-lg-auto mb-3 mb-sm-0 d-flex justify-content-center align-items-center">
                        <div class="mx-4" style="width:6rem;">
                            <img src="<?= $output['member'][0]['avatar_url']; ?>" class="img-fluid">
                        </div>
                    </div><!-- media-img -->
                    <div class="w-100 my-2 ps-3 py-3 me-4 rounded-3 col-12 col-md-12 col-lg media-body d-flex flex-column align-items-start justify-content-center">
                        <div class="w-100 text-center text-lg-start d-flex align-items-center justify-content-start">
                            <h4>
                                <?= $output['member'][0]['nickname']; ?>
                            </h4>
                            <small class="d-block my-2 ms-2">(<?= $output['member'][0]['name']; ?>)</small>
                        </div>
                        <div class="w-100 mt-2 row row-cols-sm-auto justify-content-center justify-content-lg-start">
                            <div class="col-6 col-sm-3">
                                <span class="w-100 mt-2 badge text-white rounded-pill bg-secondary">Level : <?= number_format($output['member'][0]['level']); ?></span>
                            </div>
                            <div class="col-6 col-sm-3">
                                <span class="w-100 mt-2 badge text-white rounded-pill bg-secondary">Post : <?= number_format($output['member'][0]['member_post_count']); ?></span>
                            </div>
                            <div class="col-6 col-sm-3">
                                <span class="ms-3 mt-2 badge text-white rounded-pill bg-secondary">Comment : <?= number_format($output['member'][0]['member_comment_count']); ?></span>
                            </div>
                            <div class="col-6 col-sm-3">
                                <span class="ms-3 mt-2 badge text-white rounded-pill bg-secondary">Like : <?= number_format($output['member'][0]['member_like_count']); ?></span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- USER PROFILE START -->
                <!-- MY NOTICE LIST START -->
                <? if (is_array($output['notice_list']) && count($output['notice_list']) > 0) { ?>
                    <div>
                        <ul class="list-group list-group-flush my-5">
                            <? foreach ($output['notice_list'] as $intKey => $arrResult) { ?>
                                <li class="list-group-item py-3 bg-transparent">
                                    <p class="d-sm-flex flex-wrap align-items-center mb-2">
                                        <a href="" class="avatar avatar-sm me-2 d-none d-sm-inline"><img src="<?= $arrResult['avatar_url']; ?>" alt=""></a>
                                        <span class="fs-sm"><?= $arrResult['notice_message']; ?></span>
                                        <span class="my-2 text-secondary text-nowrap fs-xs ms-auto d-flex align-items-center justify-content-end">
                                        <i class="far fa-clock me-1"></i><small><?= $arrResult['create_date']; ?></small>
                                        </span>
                                    </p>
                                    <? if ($arrResult['notice_content']) { ?>
                                        <div class="card border-0">
                                            <div class="card-body small"><?= $arrResult['notice_content']; ?></div>
                                        </div>
                                    <? } ?>
                                </li>
                            <? } ?>
                        </ul>
                        <!-- PAGINATION START -->
                        <div class="mt-2">
                            <div class="my-4">
                                <nav>
                                    <ul class="pagination justify-content-center mb-0">
                                        <li class="page-item"><a class="page-link border-0 bg-transparent" href="<?= $output['pagination']['paging']['first']['link']; ?>" data-page="<?= $output['pagination']['paging']['first']['number']; ?>"><small>FIRST</small></a></li>
                                        <li class="page-item"><a class="page-link border-0 bg-transparent" href="<?= $output['pagination']['paging']['prev']['link']; ?>" data-page="<?= $output['pagination']['paging']['prev']['number']; ?>"><small>PREV</small></a></li>
                                        <? foreach ($output['pagination']['paging']['page'] ?: [1] as $intKey => $arrResult) { ?>
                                            <li class="page-item"><a class="border-0 page-link <? if ($output['pagination']['page'] == $arrResult['number'] || !$arrResult['number']) { ?>active<? } else { ?>bg-transparent<? } ?>" href="<?= $arrResult['link']; ?>" data-page="<?= $arrResult['number']; ?>"><?= number_format($arrResult['number'] ? $arrResult['number'] : 1); ?></a></li>
                                        <? } ?>
                                        <li class="page-item"><a class="page-link border-0 bg-transparent" href="<?= $output['pagination']['paging']['next']['link']; ?>" data-page="<?= $output['pagination']['paging']['next']['number']; ?>"><small>NEXT</small></i></a></li>
                                        <li class="page-item"><a class="page-link border-0 bg-transparent" href="<?= $output['pagination']['paging']['end']['link']; ?>" data-page="<?= $output['pagination']['paging']['end']['number']; ?>"><small>LAST</small></a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                        <!-- PAGINATION END -->
                    </div>
                <? } else { ?>
                    <div class="my-4 px-3 py-4 text-center rounded-3 d-flex align-items-center justify-content-center"><i class="far fa-bell me-2"></i> <small>활동 내역이 없습니다.</small></div>
                <? } ?>
                <!-- MY NOTICE LIST END -->
            </div>
        </div>
    </div>
</div>

User Discussions

ADD

등록된 글이 없습니다.

회원정보 수정

데이타 식별자

HTML

Response Result

Example

닉네임

이메일

휴대전화

이름

닉네임

아바타

생일

소식 및 정보 수신

관련 링크

User Discussions

시작하기

회원

포럼 / 게시판

웹 폼

위젯

회원정보 수정

데이타 식별자

HTML

Response Result

Example

닉네임

이메일

휴대전화

이름

닉네임

아바타

생일

소식 및 정보 수신

관련 링크

User Discussions