위젯 만들기

위젯을 화면에 노출하기 위해 필요한 요청 데이터 식별자와 응답 구조를 안내합니다.
콘솔에서 생성된 위젯은 어떤 요청이든 데이터 식별자에 widget 속성(배열)으로 추가하면 응답의 widget 노드로 함께 내려받습니다.

데이타 식별자

{
  "dataID": "GET_POST_LIST",
  "board_seq": 301,
  "widget": ["top_post"]
}
KeyDescription
dataID임의의 데이터 식별자 - 위젯은 모든 요청에 함께 실을 수 있습니다(예: GET_POST_LIST)
board_seq원래 요청이 사용하는 속성 - widget 속성은 기존 요청 속성에 그대로 덧붙입니다
widget콘솔에서 생성된 위젯 코드를 요소로 하는 배열

HTML

<div class="h-widget">
    <h6>{{ output.widget.top_post.widget_name }}</h6>
    <ul class="list-group list-group-flush">
        <li class="list-group-item" v-for="post in output.widget.top_post.content_list">
            <a :href="'/community/detail?post_key=' + post.post_key">
                <span class="crop-text-1">{{ post.subject }}</span>
            </a>
            <small>{{ post.nickname }} · {{ post.create_date }}</small>
        </li>
    </ul>
</div>
  • div
    <div class="h-widget"></div>

    위젯을 감싸는 영역

  • h6
    <h6></h6>

    위젯 제목 영역 - description 등 위젯 메타를 노출합니다

  • li
    <li class="list-group-item" v-for="post in output.widget.top_post.content_list"></li>

    content_list를 반복하여 각 콘텐츠(게시물)를 출력합니다

  • a
    <a :href="'/community/detail?post_key=' + post.post_key"></a>

    콘텐츠 상세 링크 - post_key로 상세 경로를 구성합니다

  • small
    <small></small>

    콘텐츠 부가 정보(등록일 등) 영역

Response Result

{
  "seq": "12",
  "widget_name": "Popular posts",
  "widget_code": "top_post",
  "widget_type": "board_daily_rate",
  "description": "Popular posts",
  "content_category": "200",
  "content_limit": "5",
  "content_sort": "desc",
  "create_date": "2025-01-01 12:00:13",
  "modify_date": "2025-02-01 09:11:00",
  "delete_date": null,
  "delete_flg": "N",
  "widget_key": "B9897JDFUIDYUH23A1B2C3D4E5F6",
  "content_list": [
    {
      "seq": "101",
      "post_key": "13E1106F6DBE546EA8A6E8A27C2DF19E",
      "parent_post_key": "13E1106F6DBE546EA8A6E8A27C2DF19E",
      "board_seq": "200",
      "board_name": "Notice",
      "member_seq": "3",
      "nickname": "admin",
      "avatar_url": "/_images/face_icons_circle/face_icons-circle-01.svg",
      "subject": "Subject 1",
      "status": "published",
      "create_date": "2025-01-01 12:00:13",
      "modify_date": "2025-01-02 10:00:00",
      "read_count": "120",
      "read_per_day_rate": "7.40",
      "like_cnt": "3",
      "child_post_count": "0",
      "content": "<p>This is the post content.</p>",
      "content_without_html": "This is the post content.",
      "content_summary": "This is the post content.",
      "files": "/post/2025/01/sample.jpg"
    },
    {
      "seq": "209",
      "post_key": "5A2B7C9D1E3F546EA8A6E8A27C2DF201",
      "parent_post_key": "5A2B7C9D1E3F546EA8A6E8A27C2DF201",
      "board_seq": "200",
      "board_name": "Notice",
      "member_seq": "3",
      "nickname": "admin",
      "avatar_url": "/_images/face_icons_circle/face_icons-circle-02.svg",
      "subject": "Subject 2",
      "status": "published",
      "create_date": "2025-01-04 12:00:13",
      "modify_date": "2025-01-04 12:00:13",
      "read_count": "85",
      "read_per_day_rate": "6.10",
      "like_cnt": "1",
      "child_post_count": "0",
      "content": "<p>This is the post content.</p>",
      "content_without_html": "This is the post content.",
      "content_summary": "This is the post content.",
      "files": null
    }
  ]
}
KeyDescription
widget요청에 widget 배열이 있을 때 함께 내려오는 위젯 응답 노드
widget.{widget_code}각 위젯은 요청한 위젯 코드를 키로 하여 담깁니다
seq위젯 시퀀스(내부 번호)
widget_name위젯 이름
widget_code위젯 코드
widget_type위젯 형식(board_daily_rate:조회율 순, board_create_date:등록일 순, like_count:좋아요 순, custom:사용자 지정 게시물)
description위젯 설명
content_category위젯 콘텐츠 카테고리(게시판 시퀀스). custom 형식은 사용하지 않으므로 null입니다
content_limit콘텐츠 노출 수
content_sort콘텐츠 정렬(asc or desc) - 게시판형 위젯의 게시물 정렬에 적용됩니다
create_date위젯 생성일
modify_date위젯 수정일
delete_date위젯 삭제일(미삭제 시 null)
delete_flg삭제 여부(N: 정상)
widget_key위젯 키(암호화된 위젯 식별자)
content_list위젯 콘텐츠 목록 - 게시판형(board_daily_rate/board_create_date/like_count)은 게시물 목록과 동일한 응답이고, custom은 아래 필드에 게시물 목록 필드가 병합되어 내려옵니다
content_list[].post_key콘텐츠(게시물) 키 - GET_POST 등 상세 조회와 상세 링크에 사용합니다
content_list[].content_seqcustom 형식 전용 - 콘텐츠(게시물) 시퀀스(숫자). 항목에 seq 필드는 없습니다
content_list[].subject콘텐츠(게시물) 제목 - custom 형식은 위젯 저장 시점의 제목 스냅샷입니다
content_list[].positioncustom 형식 전용 - 콘솔에서 지정한 노출 순서
content_list[].create_datecustom 형식은 콘텐츠를 위젯에 등록한 일시이며, 게시판형은 게시물 등록일입니다
content_list[].post_create_datecustom 형식 전용 - 게시물 원본 등록일. 게시물 발행일을 노출할 때는 이 필드를 사용하세요
content_list[].(post fields)custom 형식 전용 - 게시물 목록 응답과 동일한 필드가 병합됩니다(board_seq, board_name, nickname, avatar_url, read_count, read_per_day_rate, like_cnt, content, content_summary, files 등). 단 subject/create_date는 위젯 등록 시점 값이 유지되고 seq는 content_seq와 중복이라 제외됩니다
  • widget 속성은 별도 요청이 아니라 어떤 요청에든 추가할 수 있습니다. 여러 위젯 코드를 배열로 넘기면 각각 widget 노드 아래 코드별로 담깁니다.
  • content_list의 구성은 위젯 형식에 따라 달라집니다. board_daily_rate/board_create_date/like_count는 지정 게시판의 게시물을 정렬해 채우고, custom은 콘솔에서 직접 지정한 게시물로 채웁니다.
  • 게시판형 위젯의 content_list 항목은 게시물 목록 응답과 동일한 필드를 가집니다(post_key, subject, create_date, read_per_day_rate 등).
  • custom 위젯의 content_list 항목에서 create_date는 게시물 발행일이 아니라 콘텐츠를 위젯에 등록(저장)한 일시입니다. 게시물 원본 등록일은 post_create_date를 사용하세요.
  • custom 위젯의 content_list 항목에는 게시물 목록 응답의 필드(작성자 nickname, board_name, like_cnt, content_summary 등)가 함께 병합되어 내려옵니다. 게시물이 미발행(published가 아님)이거나 삭제된 경우 해당 항목은 기본 필드만 유지합니다.
  • custom 항목에는 숫자 식별자 content_seq와 암호화 키 post_key가 함께 내려옵니다. GET_POST의 post_key 파라미터는 둘 다 허용하지만, 내부 번호가 노출되지 않는 post_key(암호화 키) 사용을 권장합니다.
  • custom 위젯의 content_list는 항상 position 오름차순으로 정렬됩니다. content_sort는 게시판형 위젯의 게시물 정렬에만 적용됩니다.
  • 응답의 숫자 값(seq, content_limit, content_seq, position 등)은 문자열로 내려옵니다. 숫자 비교·정렬 시 형 변환을 해주세요.

Example

<div class="bg-white p-3 rounded-3">
<div>
  <h6 class="mb-3">{{ output.widget.top_post.widget_name }}</h6>
  <ul class="list-group list-group-flush">
    <li class="list-group-item bg-transparent px-1" v-for="post in output.widget.top_post.content_list">
      <div class="d-flex justify-content-between align-items-center">
        <a :href="'/community/detail?post_key='+post.post_key" class="text-black">
          <small class="crop-text-1">{{ post.subject }}</small>
        </a>
        <small>{{ post.nickname }} · {{ post.create_date }}</small>
      </div>
      <small class="text-muted crop-text-1">{{ post.content_summary }}</small>
    </li>
  </ul>
</div>
</div>

<div class="bg-white p-3 rounded-3">
    <div>
        <h6 class="mb-3"><?=$output['widget']['top_post']['widget_name'];?></h6>
        <ul class="list-group list-group-flush">
            <? foreach($output['widget']['top_post']['content_list'] as $intKey=>$arrPost){ ?>
                <li class="list-group-item bg-transparent px-1">
                    <div class="d-flex justify-content-between align-items-center">
                        <a href="/community/detail?post_key=<?=$arrPost['post_key'];?>" class="text-black">
                            <small class="crop-text-1"><?=$arrPost['subject'];?></small>
                        </a>
                        <small><?=$arrPost['nickname'];?> · <?=$arrPost['create_date'];?></small>
                    </div>
                    <small class="text-muted crop-text-1"><?=$arrPost['content_summary'];?></small>
                </li>
            <? } ?>
        </ul>
    </div>
</div>

관련 링크