구조화 목록

구조화 목록은 유사하거나 관련된 콘텐츠 집합을 표현하기 위한 형식으로 목록에 제공된 데이터에 대한 상세 정보 탐색 수단 또는 관련 기능 실행 수단으로 활용된다.

구조화 목록은 유사하거나 관련된 콘텐츠 집합을 표현하기 위한 형식으로 목록에 제공된 데이터에 대한 상세 정보 탐색 수단 또는 관련 기능 실행 수단으로 활용된다.

사용 지침

공시 데이터·신청 내역처럼 같은 형태의 정보가 여러 줄 반복될 때 사용하고, 표(Table)만큼 엄격한 격자 구조가 필요하지 않은 경우에 가벼운 대안으로 활용합니다.

예제

Default

  • 복지

    아동수당 신청 안내

    만 8세 미만 아동에게 매월 10만원을 지급하여 양육 부담을 완화하고 아동의 권리를 보장합니다. 온라인으로 간편하게 신청하실 수 있습니다.

    기간2024.01.01 - 2024.12.31

    • 조회수 1,234
    • 등록일 2024.01.01
examples/structured-list/StructuredListDefault.tsx
import { Heart, Share2 } from "lucide-react"
import { Button } from "@/components/ui/dynamic/button"
import {

Long Text

  • 청년 주거 지원 사업 안내 이미지
    청년

    청년 월세 한시 특별지원 사업 — 무주택 청년을 위한 주거비 경감 프로그램

    만 19~34세 무주택 청년에게 12개월간 월 최대 20만원의 월세를 지원합니다. 소득·자산 요건을 충족하면 거주지 관할 시·군·구청 또는 복지로(bokjiro.go.kr)에서 신청할 수 있습니다. 지원 대상은 부모와 별도 거주하는 청년 가구이며, 보증금 5천만원·월세 60만원 이하 주택에 거주하는 경우 신청이 가능합니다.

    기간2024.02.01 - 2024.12.31

    • 주관 국토교통부
    • 조회수 23,540
    • 등록일 2024.01.20
    • #청년주거
    • #월세지원
    • #복지로
examples/structured-list/StructuredListLongText.tsx
import { Heart, Share2 } from "lucide-react"
import { Button } from "@/components/ui/dynamic/button"
import {

Minimal Data

  • 공지

    2024년 전자정부 서비스 만족도 조사 결과 발표

    행정안전부는 국민이 자주 이용하는 전자정부 서비스 30종에 대한 만족도 조사 결과를 공개했습니다.

examples/structured-list/StructuredListMinimalData.tsx
import { Button } from "@/components/ui/dynamic/button"
import {
  StructuredList,

Various Badges

  • 디지털 배움터 운영 안내 이미지
    교육

    디지털 배움터 운영

    누구나 가까운 곳에서 디지털 역량을 배울 수 있도록 전국 1,000여 곳에서 무료 교육을 진행합니다.

    기간2024.03.01 - 2024.11.30

    • #디지털교육
    • #배움터
    • #무료
  • 복지

    아동수당 신청 안내

    만 8세 미만 아동에게 매월 10만원을 지급합니다.

    기간2024.01.01 - 2024.12.31

    • #아동
    • #수당
examples/structured-list/StructuredListVariousBadges.tsx
import { Button } from "@/components/ui/dynamic/button"
import {
  StructuredList,

속성

이름타입기본값설명
checkedbooleanfalseSelected/checked highlight border (KRDS `.is-check`). Only meaningful when `selectable`.
classNamestring——
selectablebooleanfalseRender as a selectable (checkbox-bearing) card.
sizeenummdCard padding scale (KRDS `.sm/.md/.lg`). Default `md` matches the current look.
variantenumvertical—