Patterns
AISummaryPanel
AI가 생성한 요약과 핵심 시사점을 구조화하여 보여주는 패널 컴포넌트입니다.
AISummaryPanel
AI 분석 결과를 구조화된 형식으로 보여주는 패널입니다. 요약 본문, 핵심 시사점(Takeaways), 신뢰도 지표까지 포함합니다.
Examples
AI SummaryAI Generated
2026년 1분기 서울 오피스 시장은 AI/빅테크 기업의 공간 수요 증가로 인해 강남 권역 공실률이 전분기 대비 1.2%p 하락했습니다.
Key Takeaways
- 1강남 프라임 오피스 공실률 5.2%로 역대 최저 근접
- 2AI 기업 확장이 전체 순흡수량의 40% 차지
- 3임대료는 전년 동기 대비 평균 8.3% 상승
신뢰도: 87%12 sources2026.03.04 09:30
import { AISummaryPanel } from "@seoulpi/ui/ai-summary-panel";
function Example() {
return (
<AISummaryPanel
summary="분석 결과 요약 텍스트..."
keyTakeaways={["시사점 1", "시사점 2"]}
confidence={87}
sourcesCount={12}
/>
);
}Variants
- Inline: 아티클 본문 내에 삽입되는 형태 (기본값)
- Sidebar: 사이드 패널에 최적화된 좁은 레이아웃
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "AI Summary" | 패널 제목 |
summary | string | — | AI 요약 텍스트 |
keyTakeaways | string[] | [] | 핵심 시사점 목록 |
confidence | number | — | AI 신뢰도 (0–100) |
sourcesCount | number | — | 참조 소스 수 |
generatedAt | string | — | 생성 시각 |
isLoading | boolean | false | 로딩 시 스켈레톤 표시 |
variant | "inline" | "sidebar" | "inline" | 레이아웃 변형 |
Usage Notes
- AI 생성 콘텐츠임을 "AI Generated" 뱃지로 명확히 표시합니다.
isLoading상태를 활용하여 AI 응답 대기 중 스켈레톤 UI를 제공하세요.confidence값이 높을수록 사용자의 신뢰를 증진시킵니다.