게시물 보기

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

데이타 식별자

{
  "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">게시판 명</small></div>
    <h1 class="fs-3 mt-4 mb-4">게시물의 제목이 표시됩니다.</h1>
    <div>
        24-07-22 22:23 by 등록인
    </div>
    <p>
        H:Dev+는 MVC(Model-View-Controller) 모델을 기반으로 하며,
        Back-End 영역에서 Model과 Controller를 제공하여 Front-End
        개발에 집중할 수 있도록 지원합니다. Front-End와 Back-End 간의
        통신은 RESTful 방식을 사용합니다. 이를 위해 .....
    </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",
      "bbs_name": "free board",
      "bbs_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].bbs_name게시판 명
post[0].bbs_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

게시판 명

게시물의 제목이 표시됩니다.

24-07-22 22:23 by
등록인

H:Dev+는 MVC(Model-View-Controller) 모델을 기반으로 하며, Back-End 영역에서 Model과 Controller를 제공하여 Front-End 개발에 집중할 수 있도록 지원합니다. Front-End와 Back-End 간의 통신은 RESTful 방식을 사용합니다. 이를 위해 Connector을 통해 POST 요청(Request)을 보내고 JSON 형태로 결과를 반환(Response)합니다. URL 대신 dataID를 사용하여 고유 리소스 식별자를 지정하며, 보안을 위해 secureKey가 필요합니다.

태그1 태그2 태그3 
<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].bbs_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">수정</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">삭제</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]['bbs_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">수정</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">삭제</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>

관련 링크