68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import { useState } from 'react';
|
|
import Badge from '@common/components/ui/Badge';
|
|
import SidePanel from '@common/components/ui/SidePanel';
|
|
|
|
const Section = ({ title, desc, children }: { title: string; desc?: string; children: React.ReactNode }) => (
|
|
<div className="mb-8">
|
|
<h2 className="wing-section-header mb-1">{title}</h2>
|
|
{desc && <p className="wing-section-desc mb-4">{desc}</p>}
|
|
<div>{children}</div>
|
|
</div>
|
|
);
|
|
|
|
const SidePanelSection = () => {
|
|
const [visible, setVisible] = useState(false);
|
|
return (
|
|
<>
|
|
<Section title="SidePanel" desc="wing-panel-right/left 사이드패널">
|
|
<button
|
|
className="wing-btn wing-btn-secondary"
|
|
onClick={() => setVisible(!visible)}
|
|
>
|
|
{visible ? '사이드패널 닫기' : '사이드패널 열기'}
|
|
</button>
|
|
</Section>
|
|
{visible && (
|
|
<SidePanel
|
|
position="right"
|
|
width="default"
|
|
header={
|
|
<div className="flex items-center justify-between w-full">
|
|
<span className="wing-title">상세 정보</span>
|
|
<button className="wing-btn wing-btn-secondary" onClick={() => setVisible(false)}>닫기</button>
|
|
</div>
|
|
}
|
|
footer={
|
|
<button className="wing-btn wing-btn-primary w-full">저장</button>
|
|
}
|
|
>
|
|
<div className="p-3 space-y-3">
|
|
<div className="wing-info-row">
|
|
<span className="wing-info-label">상태</span>
|
|
<Badge color="green">정상</Badge>
|
|
</div>
|
|
<div className="wing-info-row">
|
|
<span className="wing-info-label">분류</span>
|
|
<Badge>공지사항</Badge>
|
|
</div>
|
|
<div className="wing-info-row">
|
|
<span className="wing-info-label">작성자</span>
|
|
<span className="wing-info-value">이동녘</span>
|
|
</div>
|
|
<div className="wing-info-row">
|
|
<span className="wing-info-label">작성일</span>
|
|
<span className="wing-info-value">2026-03-10</span>
|
|
</div>
|
|
<div className="wing-info-row">
|
|
<span className="wing-info-label">조회수</span>
|
|
<span className="wing-info-value">142</span>
|
|
</div>
|
|
</div>
|
|
</SidePanel>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SidePanelSection;
|