코멘트 수정

등록된 코멘트와 답글을 수정하는 기능을 구현하기 위해 필요한 요청 데이터 식별자와 응답 결과 구조를 안내합니다.

데이타 식별자

{
  "dataID": "SAVE_REPLY_COMMENT",
  "post_key": "E477FEEB837326JEUDYFC505D20C022",
  "parent_comment_key": "A1B2C3D4E5F6837326JEUDYFC505D20C",
  "comment_key": "A1B2C3D4E5F6837326JEUDYFC505D20C",
  "comment": "Modified comment content"
}
KeyDescription
dataID수정도 등록과 동일하게 SAVE_REPLY_COMMENT를 사용하며 comment_key가 함께 전송되면 신규 등록이 아닌 수정으로 처리됩니다.
post_key코멘트가 속한 게시물의 고유 키로 id가 post인 영역의 data-post-key 값에서 자동으로 채워집니다.
parent_comment_key폼이 속한 코멘트의 고유 키로 이 값이 있어야 수정 요청으로 전송됩니다.
comment_key수정할 코멘트의 고유 키로 수정 버튼 클릭시 hidden 항목으로 폼에 자동 추가됩니다.
comment수정된 코멘트 내용으로 수정 버튼 클릭시 기존 내용이 자동으로 채워집니다.

HTML

<div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022">
    <div class="h-div-comment" data-comment-key="A1B2C3D4E5F6...">
        <p>Comment content is displayed here.</p>
        <a href="#" class="h-btn-reply-modify">EDIT</a>

        <form class="h-form-reply-comment" style="display:none;">
            <input type="hidden" name="parent_comment_key" value="A1B2C3D4E5F6...">
            <textarea name="comment" rows="1" class="form-control"></textarea>
            <button type="button" class="h-btn-submit-reply btn btn-primary">Save</button>
            <button type="button" class="h-btn-cancel-reply btn btn-light">Cancel</button>
        </form>

        <div class="h-div-reply-comment-list" style="display:none;">
            <div class="h-div-reply-comment" data-comment-key="F6E5D4C3B2A1...">
                <p>Reply content is displayed here.</p>
                <a href="#" class="h-btn-reply-modify">EDIT</a>
                <form class="h-form-reply-comment" style="display:none;">
                    <input type="hidden" name="parent_comment_key" value="F6E5D4C3B2A1...">
                    <textarea name="comment" rows="1" class="form-control"></textarea>
                    <button type="button" class="h-btn-submit-reply btn btn-primary">Save</button>
                    <button type="button" class="h-btn-cancel-reply btn btn-light">Cancel</button>
                </form>
            </div>
        </div>
    </div>
</div>
  • div
    <div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022"></div>

    게시물 영역으로 id는 post로 필수 설정해야 하며 data-post-key에 Response Result의 post[0].post_key 값이 필수로 지정되어야 합니다.

  • div
    <div class="h-div-comment" data-comment-key="A1B2C3D4E5F6..."></div>

    코멘트 한 건이 표시되는 영역으로 class 선택자에 h-div-comment가 필수로 포함되어야 하며 data-comment-key에 해당 코멘트의 comment_key 값이 필수로 지정되어야 합니다.

  • a
    <a href="#" class="h-btn-reply-modify"></a>

    코멘트 수정 버튼으로 class 선택자에 h-btn-reply-modify가 필수로 포함되어야 하며 h-div-comment 영역 안에 위치해야 합니다. 클릭시 GET_COMMENT로 기존 내용을 조회해 같은 영역의 폼을 채워 수정 모드로 전환합니다.

  • form
    <form class="h-form-reply-comment" style="display:none;"></form>

    수정에 사용되는 폼으로 class 선택자에 h-form-reply-comment가 필수로 포함되어야 하며 수정 버튼과 같은 h-div-comment 영역 안에 위치해야 합니다. 답글 입력 폼과 동일한 폼을 재사용합니다.

  • parent_comment_key
    <input type="hidden" name="parent_comment_key" value="A1B2C3D4E5F6...">

    폼이 속한 코멘트의 고유 키로 name은 parent_comment_key로 필수 설정해야 합니다.

  • comment
    <textarea name="comment" rows="1" class="form-control"></textarea>

    코멘트 입력란으로 name은 comment로 필수 설정해야 하며 수정 버튼 클릭시 기존 내용이 자동으로 채워집니다.

  • button
    <button type="button" class="h-btn-submit-reply btn btn-primary"></button>

    수정 내용 저장 버튼으로 class 선택자에 h-btn-submit-reply가 필수로 포함되어야 합니다.

  • button
    <button type="button" class="h-btn-cancel-reply btn btn-light"></button>

    수정 취소 버튼으로 class 선택자에 h-btn-cancel-reply가 필수로 포함되어야 합니다. 클릭시 입력 내용과 comment_key가 함께 제거됩니다.

  • div
    <div class="h-div-reply-comment" data-comment-key="F6E5D4C3B2A1..."></div>

    답글 한 건이 표시되는 영역으로 class 선택자에 h-div-reply-comment가 필수로 포함되어야 하며 data-comment-key에 해당 답글의 comment_key 값이 필수로 지정되어야 합니다.

  • a
    <a href="#" class="h-btn-reply-modify"></a>

    답글 수정 버튼으로 코멘트와 동일하게 h-btn-reply-modify를 사용하며 h-div-reply-comment 영역 안에 위치해야 합니다.

Response Result

{
  "result": true,
  "post_key": "E477FEEB837326JEUDYFC505D20C022"
}
KeyDescription
result코멘트 수정 성공 여부
post_key코멘트가 속한 게시물 고유 키
  • 본인이 작성한 코멘트만 수정할 수 있으며 다른 회원의 코멘트를 수정 요청하면 result가 false로 반환됩니다.
  • 수정이 성공하면 코멘트 목록을 자동으로 다시 조회하여 화면에 반영합니다.

Example

micky 05-30 02:53

Comment content is displayed here.

Edit 
<div id="post" :data-post-key="output.post[0].post_key">
  <div class="h-div-comment" :data-comment-key="comment.comment_key"
       v-for="comment in output.post[0].comment_list" :key="comment.comment_key">
    <div class="border-bottom px-1 py-3">
      <div class="d-flex justify-content-between align-items-center">
        <strong class="me-1">{{ comment.name }}</strong>
        <small class="text-secondary">{{ comment.create_date }}</small>
      </div>
      <p class="my-2 py-2 mb-0" v-html="comment.comment.split('\n').join('<br>')"></p>
      <div class="text-end">
        <a href="#" class="h-btn-reply-modify rounded-3 py-2 px-3 bg-gray-light ms-2 small"
           v-if="output.user.auth_flg && comment.member_seq == output.user.seq">
          <i class="fas fa-pen"></i> Edit
        </a>
      </div>
    </div>

    <form class="my-3 h-form-reply-comment" style="display:none;">
      <input type="hidden" name="parent_comment_key" :value="comment.comment_key"/>
      <textarea name="comment" rows="1" class="form-control"></textarea>
      <div class="text-end mt-2">
        <button type="button" class="h-btn-submit-reply btn btn-primary btn-sm px-3">Save</button>
        <button type="button" class="h-btn-cancel-reply btn btn-light btn-sm px-3">Cancel</button>
      </div>
    </form>

    <div class="h-div-reply-comment-list px-2 ms-4 py-3" style="display:none;">
      <div class="h-div-reply-comment" :data-comment-key="reply_comment.comment_key"
           v-for="reply_comment in comment.reply_comment" :key="reply_comment.comment_key">
        <span class="text-primary">@{{ reply_comment.to_name }}</span>
        <span v-html="reply_comment.comment.split('\n').join('<br>')"></span>
        <div class="text-end">
          <a href="#" class="h-btn-reply-modify rounded-3 py-2 px-2 border bg-white ms-2 small"
             v-if="output.user.auth_flg && reply_comment.member_seq == output.user.seq">
            <i class="fas fa-pen"></i> Edit
          </a>
        </div>
        <form class="my-3 h-form-reply-comment" style="display:none;">
          <input type="hidden" name="parent_comment_key" :value="reply_comment.comment_key"/>
          <textarea name="comment" rows="1" class="form-control"></textarea>
          <div class="text-end mt-2">
            <button type="button" class="h-btn-submit-reply btn btn-primary btn-sm px-3">Save</button>
            <button type="button" class="h-btn-cancel-reply btn btn-light btn-sm px-3">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div id="post" data-post-key="<?= $output['post'][0]['post_key']; ?>">
    <? foreach ($output['post'][0]['comment_list'] as $arrComment) { ?>
        <div class="h-div-comment" data-comment-key="<?= $arrComment['comment_key']; ?>">
            <div class="border-bottom px-1 py-3">
                <div class="d-flex justify-content-between align-items-center">
                    <strong class="me-1"><?= $arrComment['name']; ?></strong>
                    <small class="text-secondary"><?= $arrComment['create_date']; ?></small>
                </div>
                <p class="my-2 py-2 mb-0"><?= nl2br($arrComment['comment']); ?></p>
                <div class="text-end">
                    <? if ($output['user']['auth_flg'] && $arrComment['member_seq'] == $output['user']['seq']) { ?>
                        <a href="#" class="h-btn-reply-modify rounded-3 py-2 px-3 bg-gray-light ms-2 small">
                            <i class="fas fa-pen"></i> Edit
                        </a>
                    <? } ?>
                </div>
            </div>

            <form class="my-3 h-form-reply-comment" style="display:none;">
                <input type="hidden" name="parent_comment_key" value="<?= $arrComment['comment_key']; ?>"/>
                <textarea name="comment" rows="1" class="form-control"></textarea>
                <div class="text-end mt-2">
                    <button type="button" class="h-btn-submit-reply btn btn-primary btn-sm px-3">Save</button>
                    <button type="button" class="h-btn-cancel-reply btn btn-light btn-sm px-3">Cancel</button>
                </div>
            </form>

            <div class="h-div-reply-comment-list px-2 ms-4 py-3" style="display:none;">
                <? foreach ($arrComment['reply_comment'] as $arrReplyComment) { ?>
                    <div class="h-div-reply-comment" data-comment-key="<?= $arrReplyComment['comment_key']; ?>">
                        <span class="text-primary">@<?= $arrReplyComment['to_name']; ?></span>
                        <span><?= nl2br($arrReplyComment['comment']); ?></span>
                        <div class="text-end">
                            <? if ($output['user']['auth_flg'] && $arrReplyComment['member_seq'] == $output['user']['seq']) { ?>
                                <a href="#" class="h-btn-reply-modify rounded-3 py-2 px-2 border bg-white ms-2 small">
                                    <i class="fas fa-pen"></i> Edit
                                </a>
                            <? } ?>
                        </div>
                        <form class="my-3 h-form-reply-comment" style="display:none;">
                            <input type="hidden" name="parent_comment_key" value="<?= $arrReplyComment['comment_key']; ?>"/>
                            <textarea name="comment" rows="1" class="form-control"></textarea>
                            <div class="text-end mt-2">
                                <button type="button" class="h-btn-submit-reply btn btn-primary btn-sm px-3">Save</button>
                                <button type="button" class="h-btn-cancel-reply btn btn-light btn-sm px-3">Cancel</button>
                            </div>
                        </form>
                    </div>
                <? } ?>
            </div>
        </div>
    <? } ?>
</div>

관련 링크