Section

빌더에서 콘텐츠 묶음 단위예요. 제목·설명·더보기와 함께 블록을 구성해요.

사용법

Section은 빌더에서 콘텐츠 묶음 단위예요. 제목·설명·더보기 액션과 함께 블록을 구성해요.

#가전#생활#나눔

스타일 커스터마이징

Section 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<Section
  className="shadow-md"
  style={{
    --gtd-component-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<Section
  classNames={{
    header: "my-section-header",
    copy: "my-section-copy",
    title: "my-section-title",
    desc: "my-section-desc",
    action: "my-section-action",
    body: "my-section-body"
  }}
/>

CSS 변수

변수	설명

인터페이스

SectionProps

속성	타입	기본값	설명
title	string	—	섹션 제목
description	string	—	부제
action	ReactNode	—	헤더 우측 액션
spacing	"sm" \| "md" \| "lg"	md	세로 간격
children*	ReactNode	—	섹션 본문
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { Section } from "@/components/ui/Section";