게시물 보기

게시물 보기 페이지를 구현하기 위해 필요한 요청 데이터 식별자와 응답 결과 구조를 안내합니다.

데이타 식별자

{
  "dataID": "GET_POST",
  "post_key": 1,
  "page_link_url": "/post/123/post-subject",
  "page_link_hash": "HASH",
  "page": 1,
  "list_per_page": 20,
  "block_per_page": 5
}
KeyDescription
post_key게시물 고유 키
page_link_url코멘트 목록 페이징의 링크 URL
page_link_hash페이징의 이동 링크 Hash(Hash 페이지 내에서 Hash링크로 이동해야 하는경우 필요)
page코멘트 페이지 번호
list_per_page페이지당 출력될 코멘트 개수
block_per_page페이지 내 페이징 블럭에 표시될 페이지 링크 수

HTML

<div id="post">
    <div><small class="ms-1 fw-bold">Board name</small></div>
    <h1 class="fs-3 mt-4 mb-4">The post title is displayed here.</h1>
    <div>
        24-07-22 22:23 by Author
    </div>
    <p>
        H:Dev+ is based on the MVC (Model-View-Controller) model,
        providing the Model and Controller on the Back-End so you can
        focus on Front-End development. Communication between the
        Front-End and Back-End uses the RESTful approach. To do this, .....
    </p>
    <div>
        <span>Tag1</span>
        <span>Tag2</span>
        <span>Tag3</span>
    </div>
    <div>
        <a href="/post/modify?post_key=AD570BDF1...">EDIT</a>
        <button type="button" class="h-btn-delete" data-post-key="AD570BDF1...">DELETE</button>
    </div>
</div>
  • div
    <div id="post"></div>

    게시글이 표시될 영역으로 id는 post로 필수 설정해야합니다.

  • a
    <a href="/post/modify?post_key=AD570BDF1..."></a>

    게시글 수정 버튼으로 수정페이지 URL에 Response Result의 post[0].post_key 값을 post_key파라미터에 필수로 지정해야 합니다.

  • button
    <button type="button" class="h-btn-delete" data-post-key="AD570BDF1..."></button>

    게시글 삭제 버튼으로 data-post-key에 Response Result의 post[0].post_key 값이 필수로 지정되어야 하며 class 선택자로 h-btn-delete가 필수로 포함 되어야합니다.

Response Result

{
  "post": [
    {
      "avatar_url": "/avatar/url",
      "board_name": "free board",
      "board_seq": 100,
      "contents": [
        {"content":"post content","content_html_enc": "encoded html content"}
      ],
      "create_date": "2025-05-30 02:53:34",
      "create_date_type_mdhi": "05-30 02:53",
      "member_seq": 300,
      "modify_date": "2025-05-30 02:53:34",
      "nickname": "winter",
      "post_key": "E477FEEB837326JEUDYFC505D20C022",
      "read_count": 928,
      "reg_name": "micky",
      "seq": 34,
      "subject": "Post Subject",
      "tags": [
        "tag1",
        "tag1",
        "tag2",
        "tag3"
      ],
      "related_post": [
        {
          "post_key": "E477FEEB837326JEUDYFC505D20C022",
          "subject": "Related Post Subject",
          "reg_name": "Micky",
          "avatar_url": "/avatar/url",
          "create_date": "2025-05-20 02:53:34"
        }
      ]
    }
  ]
}
KeyDescription
post[0].avatar_url아바타 URL
post[0].board_name게시판 명
post[0].board_seq게시판 시퀀스
post[0].contents게시물 내용 배열
post[0].contents[0].content게시물 내용
post[0].contents[0].content_html_encHTML 인코딩이 적용된 게시물 내용
post[0].create_date등록일시 Y-m-d H:i:s 형식
post[0].create_date_type_mdhi등록일시 y-m-d h:i 형식
post[0].member_seq게시자 회원 시퀀스
post[0].modify_date수정일시 Y-m-d H:i:s 형식
post[0].nickname게시자 닉네임(현재 시점)
post[0].post_key게시물 고유키
post[0].read_count게시물 조회수
post[0].reg_name게시자 닉네임(게시물 등록시점)
post[0].seq게시물 시퀀스
post[0].subject제목
post[0].tags태그 Array(['tag'=>'태그1'],['tag'=>'태그2'])
post[0].related_post관련 글 목록 배열
post[0].related_post[0].subject관련글 제목
post[0].related_post[0].reg_name관련글 등록인 이름
post[0].related_post[0].nickname관련글 등록인 닉네임
post[0].related_post[0].avatar_url관련글 아바타 URL
post[0].related_post[0].create_date관련글 등록일
post[0].related_post[0].post_key관련글 고유키

Example

Board name

The post title is displayed here.

24-07-22 22:23 by
Author

H:Dev+ is based on the MVC (Model-View-Controller) model, providing the Model and Controller on the Back-End so you can focus on Front-End development. Communication between the Front-End and Back-End uses the RESTful approach. To do this, it sends a POST request through the Connector and returns the result as a Response in JSON format. Instead of a URL, it uses a dataID to specify a unique resource identifier, and a secureKey is required for security.

Tag1 Tag2 Tag3 
<div id="post" :data-post-key="output.post[0].post_key" class="me-3">
<div class="py-3">
  <div class="row">
    <div class="col-12">
      <div class="d-flex justify-content-between align-items-center py-3 border-bottom">
        <div>
          <small class="ms-1 fw-bold">{{ output.post[0].board_name }}</small>
        </div>
        <div class="d-flex justify-content-between align-items-center" v-if="output.user.auth_flg && output.post[0].member_seq == output.user.seq">
          <a :href="'./modify.html?post_key='+output.post[0].post_key" class="mx-1 btn btn-dark d-flex justify-content-between align-items-center lh-1"><small class="smaller d-none text-white d-md-block">Edit</small></a>
          <a href="#" data-return-url="./list.html" :data-post-key="output.post[0].post_key" class="h-btn-delete mx-1 btn btn-dark d-flex justify-content-between text-white align-items-center lh-1"><small class="smaller d-none d-md-block">Delete</small></a>
        </div>
      </div>
      <h1 class="fs-3 mt-4 mb-4">{{ output.post[0].subject }}</h1>
    </div>
  </div>
  <div class="row">
    <div class="col-12 text-start">
      <div class="d-flex justify-content-start align-items-center">
        {{ output.post[0].create_date_type_mdhi }} by
        <div class="mx-2">
          <img v-if="output.post[0].avatar_url" :src="output.post[0].avatar_url" style="max-width:1.5rem;"/>
          <i v-else class="fas fa-user-circle"></i>
        </div>
        {{ output.post[0].reg_name }}
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-12">
    <div><p v-html="output.post[0].contents[0].content"/></div>
    <div class="d-flex align-items-center justify-content-start my-4" v-if="output.post[0].tags && output.post[0].tags.length>0">
        <span v-for="tags in output.post[0].tags" class="badge bg-white border me-1 fw-normal text-hbnc-secondary me-2 px-3 py-2">
            {{ tags.tag }}
        </span>
    </div>
  </div>
</div>
</div>
<div id="post" data-post-key="<?= $output['post'][0]['post_key']; ?>" class="me-3">
    <div class="py-3">
        <div class="row">
            <div class="col-12">
                <div class="d-flex justify-content-between align-items-center py-3 border-bottom">
                    <div>
                        <small class="ms-1 fw-bold"><?= $output['post'][0]['board_name']; ?></small>
                    </div>
                    <? if ($output['user']['auth_flg'] && $output['post'][0]['member_seq'] == $output['seq']) { ?>
                        <div class="d-flex justify-content-between align-items-center" vv-if="output.user.auth_flg && output.post[0].member_seq == output.user.seq">
                            <a href="'./modify.html?post_key=<?= $output['post'][0]['post_key']; ?>" class="mx-1 btn btn-dark d-flex justify-content-between align-items-center lh-1"><small class="smaller d-none text-white d-md-block">Edit</small></a>
                            <a href="#" data-return-url="./list.html" data-post-key="<?= $output['post'][0]['post_key']; ?>" class="h-btn-delete mx-1 btn btn-dark d-flex justify-content-between text-white align-items-center lh-1"><small class="smaller d-none d-md-block">Delete</small></a>
                        </div>
                    <? } ?>
                </div>
                <h1 class="fs-3 mt-4 mb-4"><?= $output['post'][0]['subject']; ?></h1>
            </div>
        </div>
        <div class="row">
            <div class="col-12 text-start">
                <div class="d-flex justify-content-start align-items-center">
                    <?= $output['post'][0]['create_date_type_mdhi']; ?> by
                    <div class="mx-2">
                        <? if ($output['post'][0]['avatar_url']) { ?>
                            <img vv-if="output.post[0].avatar_url" src="<?= $output['post'][0]['avatar_url']; ?>" style="max-width:1.5rem;"/>
                        <? } else { ?>
                            <i class="fas fa-user-circle"></i>
                        <? } ?>
                    </div>
                    <?= $output['post'][0]['reg_name']; ?>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div><p><?= $output['post'][0]['content']; ?></p></div>
            <? if (is_array($output['post'][0]['tags']) && count($output['post'][0]['tags']) > 0) { ?>
                <div class="d-flex align-items-center justify-content-start my-4">
                    <? foreach ($output['post'][0]['tags'] as $arrTags) { ?>
                        <span vv-for="tags in output.post[0].tags" class="badge bg-white border me-1 fw-normal text-hbnc-secondary me-2 px-3 py-2">
	                    <?= $arrTags['tag']; ?>
	                </span>
                    <? } ?>
                </div>
            <? } ?>
        </div>
    </div>
</div>

관련 링크