feat: integrate latest HMDesign design system updates
This commit is contained in:
DESKTOP-KPCP6AL\ㅅㅎ committed
1 parent
99faec189e
commit
1c4e0bb9a1
209 files changed
+8845
-552
No files matched your search
+2
-99
@@ -1,102 +1,5 @@
|
||||
import { useState } from "react"
|
||||
import { ArrowRight, Check, ChevronRight, Layers3, LayoutGrid, Palette, Sparkles } from "lucide-react"
|
||||
import { Button } from "@hm-design/ui"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hm-design/ui"
|
||||
import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@hm-design/ui"
|
||||
import { Input } from "@hm-design/ui"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@hm-design/ui"
|
||||
|
||||
const colors = [
|
||||
{ name: "HM Green", value: "#123328", tone: "dark" },
|
||||
{ name: "HM Brown", value: "#3E3523", tone: "dark" },
|
||||
{ name: "Content Beige", value: "#F5F0E5", tone: "light" },
|
||||
{ name: "Surface White", value: "#FFFFFF", tone: "light" },
|
||||
] as const
|
||||
import WorkDashboard from "./work-dashboard/WorkDashboard"
|
||||
|
||||
export default function App() {
|
||||
const [projectName, setProjectName] = useState("")
|
||||
const [category, setCategory] = useState("")
|
||||
const [saved, setSaved] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="hm-app min-h-screen bg-background text-foreground">
|
||||
<header className="hm-topbar">
|
||||
<div className="hm-container flex items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="hm-mark" aria-hidden="true">HM</span>
|
||||
<div><p className="hm-brand-name">HM Design System</p><p className="hm-brand-caption">한맥 디자인 시스템 · UI Preview</p></div>
|
||||
</div>
|
||||
<span className="hm-topbar-status"><span aria-hidden="true" /> Prototype 01</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="hm-container pb-16 pt-10 md:pt-14">
|
||||
<div className="hm-breadcrumb mb-7 flex items-center gap-2 text-sm"><span>Design System</span><ChevronRight size={14} aria-hidden="true" /><strong>Overview</strong></div>
|
||||
|
||||
<section className="hm-hero grid gap-8 p-7 md:grid-cols-[minmax(0,1fr)_255px] md:p-10">
|
||||
<div className="relative z-10">
|
||||
<div className="hm-eyebrow"><Sparkles size={14} aria-hidden="true" /> FIRST LOOK · HM UI</div>
|
||||
<h1>한맥의 기본 UI를<br /><span>한 화면에서 확인하세요.</span></h1>
|
||||
<p className="hm-hero-copy">기존 디자인 자료의 색상과 형태를 바탕으로 shadcn 컴포넌트를 구성한 초기 미리보기입니다. 실제 화면에서 조작하며 다음 단계를 결정할 수 있습니다.</p>
|
||||
<a className="hm-hero-link" href="#components">컴포넌트 살펴보기 <ArrowRight size={17} aria-hidden="true" /></a>
|
||||
</div>
|
||||
<div className="hm-hero-art" aria-hidden="true"><div className="hm-hero-art-line" /><div className="hm-hero-art-square"><LayoutGrid size={45} strokeWidth={1.2} /></div><div className="hm-hero-art-pill"><span /><span /><span /></div></div>
|
||||
</section>
|
||||
|
||||
<section id="components" className="mt-12 scroll-mt-8">
|
||||
<div className="hm-section-heading mb-5 flex flex-wrap items-end justify-between gap-3">
|
||||
<div><p className="hm-section-kicker">COMPONENTS</p><h2>기본 컴포넌트</h2><p>버튼과 입력 컨트롤의 형태, 상태, 조합을 빠르게 살펴봅니다.</p></div>
|
||||
<span className="hm-count">5 components</span>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-5 lg:grid-cols-[1.05fr_.95fr]">
|
||||
<Card className="hm-panel">
|
||||
<CardHeader className="hm-panel-header"><div className="hm-panel-icon"><Layers3 size={18} aria-hidden="true" /></div><CardTitle>Button</CardTitle><CardDescription>주요 행동부터 보조 행동까지</CardDescription></CardHeader>
|
||||
<CardContent className="hm-panel-content">
|
||||
<div className="hm-control-row">
|
||||
<Button onClick={() => setSaved(true)}>주요 버튼</Button>
|
||||
<Button variant="primary" appearance="solid" onClick={() => setSaved(true)}>일반 실행</Button>
|
||||
<Button variant="primary" appearance="outline">보조 버튼</Button>
|
||||
</div>
|
||||
<div className="hm-control-row mt-4">
|
||||
<Button variant="cancel" appearance="solid" onClick={() => setSaved(false)}>취소</Button>
|
||||
<Button variant="destructive" appearance="outline">삭제</Button>
|
||||
<Button disabled>비활성</Button>
|
||||
</div>
|
||||
<p className="hm-component-note">기존 버튼 규격의 Green 실행, Gray 취소, Red Outline 삭제 표현을 참고했습니다.</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="hm-panel">
|
||||
<CardHeader className="hm-panel-header"><div className="hm-panel-icon"><Palette size={18} aria-hidden="true" /></div><CardTitle>Color & surface</CardTitle><CardDescription>초기 화면에 사용한 HM 컬러</CardDescription></CardHeader>
|
||||
<CardContent className="hm-panel-content"><div className="hm-swatch-grid">{colors.map((color) => <div className="hm-swatch" key={color.name}><span className={`hm-swatch-color hm-swatch-color--${color.tone}`} style={{ backgroundColor: color.value }} /><span className="hm-swatch-name">{color.name}</span><span className="hm-swatch-value">{color.value}</span></div>)}</div></CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 grid gap-5 lg:grid-cols-[1.05fr_.95fr]">
|
||||
<Card className="hm-panel">
|
||||
<CardHeader className="hm-panel-header"><div className="hm-panel-icon"><LayoutGrid size={18} aria-hidden="true" /></div><CardTitle>Input & Select</CardTitle><CardDescription>업무 화면의 기본 입력 조합</CardDescription></CardHeader>
|
||||
<CardContent className="hm-panel-content">
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="hm-field"><label htmlFor="project-name">프로젝트명</label><Input id="project-name" size="medium" placeholder="프로젝트명을 입력하세요" value={projectName} onChange={(event) => { setProjectName(event.target.value); setSaved(false) }} /></div>
|
||||
<div className="hm-field"><label htmlFor="project-category">분류</label><Select value={category} onValueChange={(value) => { setCategory(value); setSaved(false) }}><SelectTrigger id="project-category" size="medium" className="w-full"><SelectValue placeholder="분류 선택" /></SelectTrigger><SelectContent><SelectItem value="design">디자인 검토</SelectItem><SelectItem value="development">개발 적용</SelectItem><SelectItem value="operation">운영 관리</SelectItem></SelectContent></Select></div>
|
||||
</div>
|
||||
<div className="hm-form-footer mt-6 flex flex-wrap items-center justify-between gap-3"><p aria-live="polite">{saved ? <><Check size={15} aria-hidden="true" /> 입력 상태를 확인했습니다.</> : "값을 입력하고 버튼을 눌러 상태를 확인해 보세요."}</p><Button variant="primary" appearance="solid" onClick={() => setSaved(true)}>상태 확인</Button></div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="hm-panel hm-panel--showcase">
|
||||
<CardHeader className="hm-panel-header"><div className="hm-panel-icon"><LayoutGrid size={18} aria-hidden="true" /></div><CardTitle>Card & Dialog</CardTitle><CardDescription>콘텐츠 영역과 팝업 동작</CardDescription></CardHeader>
|
||||
<CardContent className="hm-panel-content"><div className="hm-inner-card"><span className="hm-inner-card-label">PREVIEW CARD</span><h3>하나의 작업을 명확하게</h3><p>카드 안에서 정보를 정리하고 필요한 행동으로 이어지는 구성을 확인합니다.</p>
|
||||
<Dialog><DialogTrigger asChild><Button variant="primary" appearance="outline">Dialog 열기</Button></DialogTrigger><DialogContent><DialogHeader><DialogTitle>작업 확인</DialogTitle><DialogDescription>현재 입력한 내용을 확인한 뒤 계속 진행할 수 있습니다.</DialogDescription></DialogHeader><DialogBody><div className="hm-dialog-summary"><span>프로젝트명</span><strong>{projectName || "입력 전"}</strong><span>분류</span><strong>{category === "design" ? "디자인 검토" : category === "development" ? "개발 적용" : category === "operation" ? "운영 관리" : "선택 전"}</strong></div></DialogBody><DialogFooter><DialogClose asChild><Button variant="cancel" appearance="solid">닫기</Button></DialogClose><DialogClose asChild><Button variant="primary" appearance="solid" onClick={() => setSaved(true)}>확인</Button></DialogClose></DialogFooter></DialogContent></Dialog>
|
||||
</div></CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer className="hm-footer mt-12 flex flex-wrap items-center justify-between gap-3 text-sm"><span>HM Design System · 초기 UI Preview</span><span>React · Tailwind CSS v4 · shadcn/ui · Storybook</span></footer>
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
return <WorkDashboard />
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user