코멘트 추가

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

데이타 식별자

{
  "dataID": "SAVE_COMMENT",
  "post_key": "E477FEEB837326JEUDYFC505D20C022",
  "comment": "Comment content"
}
KeyDescription
dataID코멘트 등록은 SAVE_COMMENT, 답글 등록은 SAVE_REPLY_COMMENT를 사용합니다. 폼에 parent_comment_key가 포함되어 있으면 자동으로 SAVE_REPLY_COMMENT로 전송됩니다.
post_key코멘트를 등록할 게시물의 고유 키로 id가 post인 영역의 data-post-key 값에서 자동으로 채워집니다.
comment코멘트 내용으로 입력란의 name이 comment로 지정되어 있어야 전송됩니다.
parent_comment_key답글 등록시에만 사용하며 답글을 달 대상 코멘트의 comment_key 값입니다.

HTML

<div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022">
    <form id="frm_comment">
        <textarea id="comment" name="comment" rows="1" class="form-control"></textarea>
        <button type="button" id="btn_save_comment" class="btn btn-primary px-4">Save</button>
    </form>

    <div class="h-div-comment" data-comment-key="A1B2C3D4E5F6...">
        <p>Comment content is displayed here.</p>
        <a href="#" class="h-btn-reply-comment">REPLY</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...">
                <span>@Parent writer</span>
                <p>Reply content is displayed here.</p>
            </div>
        </div>
    </div>
</div>
  • div
    <div id="post" data-post-key="E477FEEB837326JEUDYFC505D20C022"></div>

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

  • form
    <form id="frm_comment"></form>

    코멘트 입력 폼으로 id는 frm_comment로 필수 설정해야 합니다.

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

    코멘트 입력란으로 name은 comment로 필수 설정해야 합니다. 입력 후 Shift + Enter 키로도 저장됩니다.

  • button
    <button type="button" id="btn_save_comment" class="btn btn-primary px-4"></button>

    코멘트 저장 버튼으로 id는 btn_save_comment로 필수 설정해야 합니다.

  • 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-comment"></a>

    답글 입력폼을 여는 버튼으로 class 선택자에 h-btn-reply-comment가 필수로 포함되어야 합니다.

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

    답글 입력 폼으로 class 선택자에 h-form-reply-comment가 필수로 포함되어야 하며 h-div-comment 또는 h-div-reply-comment 영역 안에 위치해야 합니다.

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

    답글 대상 코멘트의 고유 키로 name은 parent_comment_key로 필수 설정해야 합니다. 이 값이 있는 폼은 SAVE_REPLY_COMMENT로 전송됩니다.

  • 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가 필수로 포함되어야 합니다.

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

    답글 목록이 표시되는 영역으로 class 선택자에 h-div-reply-comment-list가 필수로 포함되어야 합니다. h-btn-show-reply-comment 버튼으로 열고 닫을 수 있습니다.

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

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

Response Result

{
  "result": true,
  "post_key": "E477FEEB837326JEUDYFC505D20C022",
  "comment": [
    {
      "comment_key": "A1B2C3D4E5F6837326JEUDYFC505D20C",
      "post_key": "E477FEEB837326JEUDYFC505D20C022",
      "seq": 128,
      "root_seq": 0,
      "parent_seq": 0,
      "depth": 1,
      "to_member_seq": 0,
      "to_name": "",
      "member_seq": 300,
      "name": "micky",
      "board_seq": 100,
      "post_seq": 34,
      "comment": "Comment content",
      "create_date": "2025-05-30 02:53:34",
      "modify_date": "2025-05-30 02:53:34",
      "delete_flg": "N"
    }
  ]
}
KeyDescription
result코멘트 등록 성공 여부
post_key코멘트가 등록된 게시물 고유 키
comment[0].comment_key등록된 코멘트 고유 키
comment[0].post_key코멘트가 속한 게시물 고유 키
comment[0].seq코멘트 시퀀스
comment[0].root_seq답글 그룹의 최상위 코멘트 시퀀스(코멘트는 0)
comment[0].parent_seq답글 대상 코멘트 시퀀스(코멘트는 0)
comment[0].depth코멘트 깊이(코멘트 1, 답글 2 이상)
comment[0].to_member_seq답글 대상 회원 시퀀스
comment[0].to_name답글 대상 회원 닉네임
comment[0].member_seq작성자 회원 시퀀스
comment[0].name작성자 닉네임
comment[0].board_seq게시판 시퀀스
comment[0].post_seq게시물 시퀀스
comment[0].comment코멘트 내용
comment[0].create_date등록일시 Y-m-d H:i:s 형식
comment[0].modify_date수정일시 Y-m-d H:i:s 형식
comment[0].delete_flg삭제 여부(N 정상, Y 삭제됨)
  • 저장이 성공하면 코멘트 목록(GET_COMMENT_LIST)을 자동으로 다시 조회하여 화면에 반영합니다.
  • 게시판 설정에서 코멘트 알림이 켜져 있으면 게시물 작성자에게 알림이 발송됩니다.

Example

Comments

2
micky 05-30 02:53

Comment content is displayed here.

Reply 
<div id="post" :data-post-key="output.post[0].post_key">
  <form id="frm_comment" class="my-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h4 class="mb-0">Comments</h4>
      <small v-if="output.post[0].comment_count>0">
        <i class="fas fa-comment me-1"></i>
        <span class="comment-count">{{ output.post[0].comment_count.toLocaleString() }}</span>
      </small>
    </div>
    <div class="mb-2">
      <label for="comment" class="form-label visually-hidden">Comment</label>
      <textarea id="comment" name="comment" rows="1" class="form-control" placeholder="Input comment"></textarea>
    </div>
    <div class="text-end">
      <button type="button" id="btn_save_comment" class="btn btn-primary px-4">Save</button>
    </div>
  </form>

  <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-show-reply-comment" v-if="comment.reply_comment.length>0">
          <small>Replies {{ comment.reply_comment_cnt.toLocaleString() }}</small>
        </a>
        <a href="#" class="h-btn-reply-comment rounded-3 py-2 px-3 bg-gray-light ms-2 small">
          <i class="fas fa-comment"></i> Reply
        </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" placeholder="Input reply"></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-comment rounded-3 py-2 px-2 border bg-white ms-2 small">
            <i class="far fa-comment"></i> Reply
          </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" placeholder="Input reply"></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']; ?>">
    <form id="frm_comment" class="my-4">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h4 class="mb-0">Comments</h4>
            <? if ($output['post'][0]['comment_count'] > 0) { ?>
                <small>
                    <i class="fas fa-comment me-1"></i>
                    <span class="comment-count"><?= number_format($output['post'][0]['comment_count']); ?></span>
                </small>
            <? } ?>
        </div>
        <div class="mb-2">
            <label for="comment" class="form-label visually-hidden">Comment</label>
            <textarea id="comment" name="comment" rows="1" class="form-control" placeholder="Input comment"></textarea>
        </div>
        <div class="text-end">
            <button type="button" id="btn_save_comment" class="btn btn-primary px-4">Save</button>
        </div>
    </form>

    <? 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 (count($arrComment['reply_comment']) > 0) { ?>
                        <a href="#" class="h-btn-show-reply-comment">
                            <small>Replies <?= number_format($arrComment['reply_comment_cnt']); ?></small>
                        </a>
                    <? } ?>
                    <a href="#" class="h-btn-reply-comment rounded-3 py-2 px-3 bg-gray-light ms-2 small">
                        <i class="fas fa-comment"></i> Reply
                    </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" placeholder="Input reply"></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">
                            <a href="#" class="h-btn-reply-comment rounded-3 py-2 px-2 border bg-white ms-2 small">
                                <i class="far fa-comment"></i> Reply
                            </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" placeholder="Input reply"></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>

관련 링크