757 lines
34 KiB
TypeScript
757 lines
34 KiB
TypeScript
import { Fragment, useState, type CSSProperties, type MouseEvent, type ReactNode } from "react"
|
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { ChartColumnIcon, LayoutGridIcon, ListChecksIcon, SettingsIcon, type LucideIcon } from "lucide-react"
|
|
import {
|
|
GNB,
|
|
GNBBrand,
|
|
GNBMobileMenu,
|
|
GNBNav,
|
|
GNBUser,
|
|
GNBUtilities,
|
|
Avatar,
|
|
AvatarFallback,
|
|
AvatarImage,
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
LNB,
|
|
LNBBrand,
|
|
LNBGroup,
|
|
LNBItem,
|
|
LNBNav,
|
|
LNBProfile,
|
|
LNBMobileHeader,
|
|
LNBMobileBrand,
|
|
LNBMobileGroup,
|
|
LNBMobileLink,
|
|
LNBMobileMenu,
|
|
} from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// LNB is a composition pattern. Layout visual reference is the ui-viz LNB (272px green column, 18/700 items, Beige current item joined
|
|
// to the content, Black 10% hover, Black 20% open group). The menu data and the current location are local sample data for this Story
|
|
// (no router). The content next to the column is a positioned surface with `--hm-lnb-join` rounded left corners: the LNB Mode page
|
|
// owns it, here it only shows the connection. The column is desktop only (hidden below 1024px).
|
|
|
|
const testLogo =
|
|
"data:image/svg+xml;utf8," +
|
|
encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="120" height="32"><rect width="120" height="32" rx="4" fill="#fff" fill-opacity=".9"/><text x="60" y="21" font-size="13" font-weight="700" text-anchor="middle" fill="#123328">TEST LOGO</text></svg>')
|
|
|
|
const photo =
|
|
"data:image/svg+xml;utf8," +
|
|
encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="#266651"/><circle cx="40" cy="31" r="14" fill="#bddfd4"/><rect x="14" y="50" width="52" height="40" rx="22" fill="#bddfd4"/></svg>')
|
|
// An address that cannot load, so the Radix fallback shows.
|
|
const brokenPhoto = "data:image/png;base64,broken"
|
|
|
|
const profileData = {
|
|
name: "김한맥",
|
|
description: "프로젝트 관리자",
|
|
photo,
|
|
fallback: "김",
|
|
}
|
|
|
|
const profileActions: { label: string; destructive?: boolean }[] = [
|
|
{ label: "프로필 설정" },
|
|
{ label: "로그아웃", destructive: true },
|
|
]
|
|
|
|
function ProfileAvatar() {
|
|
return (
|
|
<Avatar>
|
|
<AvatarImage src={profileData.photo} alt="" />
|
|
<AvatarFallback>{profileData.fallback}</AvatarFallback>
|
|
</Avatar>
|
|
)
|
|
}
|
|
|
|
function ProfileMenu({ trigger, side = "bottom", align = "start", modal, matchTrigger = false, defaultOpen = false }: { trigger: ReactNode; side?: "top" | "right" | "bottom" | "left"; align?: "start" | "center" | "end"; modal?: boolean; matchTrigger?: boolean; defaultOpen?: boolean }) {
|
|
return (
|
|
<DropdownMenu modal={modal} defaultOpen={defaultOpen}>
|
|
<DropdownMenuTrigger asChild>{trigger}</DropdownMenuTrigger>
|
|
<DropdownMenuContent side={side} align={align} className={matchTrigger ? "min-w-(--radix-dropdown-menu-trigger-width)" : undefined}>
|
|
<DropdownMenuLabel>{profileData.name}</DropdownMenuLabel>
|
|
{profileActions.map((action) => (
|
|
<Fragment key={action.label}>
|
|
{action.destructive ? <DropdownMenuSeparator /> : null}
|
|
<DropdownMenuItem variant={action.destructive ? "destructive" : "default"}>{action.label}</DropdownMenuItem>
|
|
</Fragment>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
|
|
const shellStyle: CSSProperties = {
|
|
display: "grid",
|
|
gridTemplateColumns: "var(--hm-lnb-width) minmax(0, 1fr)",
|
|
minHeight: 460,
|
|
background: "var(--hm-lnb-background-end)",
|
|
}
|
|
const contentStyle: CSSProperties = {
|
|
position: "relative",
|
|
// Keep connected content in the second track when the first-track LNB becomes display:none at <=1023px.
|
|
// Without explicit placement, Grid auto-placement moves it into the now-empty 0px LNB track.
|
|
gridColumn: 2,
|
|
minWidth: 0,
|
|
padding: 34,
|
|
borderRadius: "var(--hm-lnb-join) 0 0 var(--hm-lnb-join)",
|
|
background: "var(--hm-sem-bg-content)",
|
|
}
|
|
|
|
type Child = { id: string; label: string }
|
|
type LocalNode = { id: string; label: string; icon?: LucideIcon; children?: LocalNode[] }
|
|
|
|
function Menu({
|
|
initial = "overview",
|
|
groupOpen = true,
|
|
logo,
|
|
eyebrow = "한맥 업무 시스템",
|
|
brand = "프로젝트 대시보드",
|
|
longLabels,
|
|
many,
|
|
height,
|
|
profile = true,
|
|
}: {
|
|
initial?: string | null
|
|
groupOpen?: boolean
|
|
logo?: string
|
|
eyebrow?: string
|
|
/** `null`: no LNBBrand (a GNB above carries the service identity). */
|
|
brand?: string | null
|
|
longLabels?: boolean
|
|
many?: boolean
|
|
height?: number
|
|
/** Story composition only: GNB + LNB gives profile ownership to the GNB. */
|
|
profile?: boolean
|
|
}) {
|
|
const [current, setCurrent] = useState<string | null>(initial)
|
|
const [open, setOpen] = useState(groupOpen)
|
|
const go = (id: string) => (event: MouseEvent) => {
|
|
event.preventDefault()
|
|
setCurrent(id)
|
|
}
|
|
const children: Child[] = longLabels
|
|
? [
|
|
{ id: "tasks/list", label: "전사 프로젝트 포트폴리오의 진행 현황 목록" },
|
|
{ id: "tasks/board", label: "업무 보드" },
|
|
]
|
|
: [
|
|
{ id: "tasks/list", label: "메뉴 2-1" },
|
|
{ id: "tasks/board", label: "메뉴 2-2" },
|
|
]
|
|
const extra = many ? Array.from({ length: 8 }, (_, i) => ({ id: `extra-${i}`, label: `추가 메뉴 ${i + 1}` })) : []
|
|
return (
|
|
<div style={{ ...shellStyle, height }}>
|
|
<LNB>
|
|
{brand !== null ? (
|
|
<LNBBrand>
|
|
{logo ? <img src={logo} alt="" /> : null}
|
|
<span>
|
|
{eyebrow ? <small>{eyebrow}</small> : null}
|
|
<strong>{brand}</strong>
|
|
</span>
|
|
</LNBBrand>
|
|
) : null}
|
|
<LNBNav aria-label="서비스 메뉴">
|
|
<LNBItem href="#overview" active={current === "overview"} onClick={go("overview")}>
|
|
<LayoutGridIcon aria-hidden="true" />
|
|
{longLabels ? "프로젝트 현황과 전체 일정을 한눈에 보는 개요" : "메뉴 1"}
|
|
</LNBItem>
|
|
<LNBGroup label={longLabels ? "업무 관리와 진행 상황 점검" : "메뉴 2"} current={Boolean(current?.startsWith("tasks/"))} open={open} onOpenChange={setOpen}>
|
|
{children.map((child) => (
|
|
<LNBItem key={child.id} href={`#${child.id}`} active={current === child.id} onClick={go(child.id)}>
|
|
{child.label}
|
|
</LNBItem>
|
|
))}
|
|
</LNBGroup>
|
|
<LNBItem href="#reports" active={current === "reports"} onClick={go("reports")}>
|
|
<ChartColumnIcon aria-hidden="true" />
|
|
메뉴 3
|
|
</LNBItem>
|
|
<LNBItem href="#settings" active={current === "settings"} onClick={go("settings")}>
|
|
<SettingsIcon aria-hidden="true" />
|
|
메뉴 4
|
|
</LNBItem>
|
|
{extra.map((item) => (
|
|
<LNBItem key={item.id} href={`#${item.id}`} active={current === item.id} onClick={go(item.id)}>
|
|
<ListChecksIcon aria-hidden="true" />
|
|
{item.label}
|
|
</LNBItem>
|
|
))}
|
|
</LNBNav>
|
|
{profile ? (
|
|
<ProfileMenu
|
|
side="right"
|
|
align="end"
|
|
matchTrigger
|
|
trigger={
|
|
<LNBProfile name={longLabels ? "김한맥 (한맥기술 인프라사업본부 스마트시설팀)" : profileData.name} description={longLabels ? "통합 시스템 관리자 · 인프라사업본부" : profileData.description}>
|
|
<Avatar>
|
|
<AvatarImage src={longLabels ? brokenPhoto : profileData.photo} alt="" />
|
|
<AvatarFallback>{profileData.fallback}</AvatarFallback>
|
|
</Avatar>
|
|
</LNBProfile>
|
|
}
|
|
/>
|
|
) : null}
|
|
</LNB>
|
|
<div style={contentStyle}>
|
|
<h2 className="text-lg font-bold">연결된 콘텐츠</h2>
|
|
<p className="text-sm text-muted-foreground" data-current-menu>
|
|
선택: {current ?? "없음"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 3-depth: an `LNBGroup` nested in a group (no depth prop). The selected link is `active`, every group on its path is `current`, and
|
|
// each group's `open` is kept here so the nested group stays open after the outer one is closed and reopened.
|
|
const thirdLevelChildren = (long?: boolean): Child[] =>
|
|
long
|
|
? [
|
|
{ id: "projects/design/tokens", label: "컬러 토큰" },
|
|
{ id: "projects/design/components", label: "컴포넌트 스타일 규칙" },
|
|
{ id: "projects/design/layout", label: "레이아웃 규칙과 화면 폭별 여백 그리드 기준" },
|
|
]
|
|
: [
|
|
{ id: "projects/design/tokens", label: "컬러 토큰" },
|
|
{ id: "projects/design/components", label: "컴포넌트 스타일" },
|
|
{ id: "projects/design/layout", label: "레이아웃 규칙" },
|
|
]
|
|
|
|
function ThirdLevelMenu({
|
|
initial = "projects/design/tokens",
|
|
projectOpen = true,
|
|
designOpen = true,
|
|
longLabels,
|
|
many,
|
|
height,
|
|
}: {
|
|
initial?: string | null
|
|
projectOpen?: boolean
|
|
designOpen?: boolean
|
|
longLabels?: boolean
|
|
many?: boolean
|
|
height?: number
|
|
}) {
|
|
const [current, setCurrent] = useState<string | null>(initial)
|
|
const extra = many ? Array.from({ length: 6 }, (_, i) => ({ id: `extra-${i}`, label: `추가 메뉴 ${i + 1}` })) : []
|
|
const [open, setOpen] = useState({ projects: projectOpen, design: designOpen })
|
|
const go = (id: string) => (event: MouseEvent) => {
|
|
event.preventDefault()
|
|
setCurrent(id)
|
|
}
|
|
const onPath = (id: string) => Boolean(current?.startsWith(`${id}/`))
|
|
return (
|
|
<div style={{ ...shellStyle, height }}>
|
|
<LNB>
|
|
<LNBBrand>
|
|
<span>
|
|
<small>한맥 업무 시스템</small>
|
|
<strong>프로젝트 대시보드</strong>
|
|
</span>
|
|
</LNBBrand>
|
|
<LNBNav aria-label="서비스 메뉴">
|
|
<LNBItem href="#overview" active={current === "overview"} onClick={go("overview")}>
|
|
<LayoutGridIcon aria-hidden="true" />
|
|
대시보드
|
|
</LNBItem>
|
|
<LNBGroup label="프로젝트 관리" current={onPath("projects")} open={open.projects} onOpenChange={(value) => setOpen((state) => ({ ...state, projects: value }))}>
|
|
<LNBGroup label="디자인 관리" current={onPath("projects/design")} open={open.design} onOpenChange={(value) => setOpen((state) => ({ ...state, design: value }))}>
|
|
{thirdLevelChildren(longLabels).map((child) => (
|
|
<LNBItem key={child.id} href={`#${child.id}`} active={current === child.id} onClick={go(child.id)}>
|
|
{child.label}
|
|
</LNBItem>
|
|
))}
|
|
</LNBGroup>
|
|
<LNBItem href="#projects/tasks" active={current === "projects/tasks"} onClick={go("projects/tasks")}>
|
|
업무 목록
|
|
</LNBItem>
|
|
<LNBItem href="#projects/schedule" active={current === "projects/schedule"} onClick={go("projects/schedule")}>
|
|
일정 관리
|
|
</LNBItem>
|
|
</LNBGroup>
|
|
<LNBItem href="#reports" active={current === "reports"} onClick={go("reports")}>
|
|
<ChartColumnIcon aria-hidden="true" />
|
|
현황 보고
|
|
</LNBItem>
|
|
<LNBItem href="#settings" active={current === "settings"} onClick={go("settings")}>
|
|
<SettingsIcon aria-hidden="true" />
|
|
설정
|
|
</LNBItem>
|
|
{extra.map((item) => (
|
|
<LNBItem key={item.id} href={`#${item.id}`} active={current === item.id} onClick={go(item.id)}>
|
|
<ListChecksIcon aria-hidden="true" />
|
|
{item.label}
|
|
</LNBItem>
|
|
))}
|
|
</LNBNav>
|
|
<ProfileMenu side="right" align="end" matchTrigger trigger={<LNBProfile name={profileData.name} description={profileData.description}><ProfileAvatar /></LNBProfile>} />
|
|
</LNB>
|
|
<div style={contentStyle}>
|
|
<h2 className="text-lg font-bold">연결된 콘텐츠</h2>
|
|
<p className="text-sm text-muted-foreground" data-current-menu>
|
|
선택: {current ?? "없음"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function localProfile(longLabels?: boolean) {
|
|
return {
|
|
name: longLabels ? "김한맥 (한맥기술 인프라사업본부 스마트시설팀)" : profileData.name,
|
|
description: longLabels ? "통합 시스템 관리자 · 인프라사업본부" : profileData.description,
|
|
photo: longLabels ? brokenPhoto : profileData.photo,
|
|
}
|
|
}
|
|
|
|
function simpleNav(longLabels?: boolean, many?: boolean): LocalNode[] {
|
|
const children: LocalNode[] = longLabels
|
|
? [
|
|
{ id: "tasks/list", label: "전사 프로젝트 포트폴리오의 진행 현황 목록" },
|
|
{ id: "tasks/board", label: "업무 보드" },
|
|
]
|
|
: [
|
|
{ id: "tasks/list", label: "메뉴 2-1" },
|
|
{ id: "tasks/board", label: "메뉴 2-2" },
|
|
]
|
|
const extra: LocalNode[] = many ? Array.from({ length: 8 }, (_, i) => ({ id: `extra-${i}`, label: `추가 메뉴 ${i + 1}`, icon: ListChecksIcon })) : []
|
|
return [
|
|
{ id: "overview", label: longLabels ? "프로젝트 현황과 전체 일정을 한눈에 보는 개요" : "메뉴 1", icon: LayoutGridIcon },
|
|
{ id: "tasks", label: longLabels ? "업무 관리와 진행 상황 점검" : "메뉴 2", children },
|
|
{ id: "reports", label: "메뉴 3", icon: ChartColumnIcon },
|
|
{ id: "settings", label: "메뉴 4", icon: SettingsIcon },
|
|
...extra,
|
|
]
|
|
}
|
|
|
|
function thirdLevelNav(longLabels?: boolean, many?: boolean): LocalNode[] {
|
|
const extra: LocalNode[] = many ? Array.from({ length: 6 }, (_, i) => ({ id: `extra-${i}`, label: `추가 메뉴 ${i + 1}`, icon: ListChecksIcon })) : []
|
|
return [
|
|
{ id: "overview", label: "대시보드", icon: LayoutGridIcon },
|
|
{
|
|
id: "projects",
|
|
label: "프로젝트 관리",
|
|
children: [
|
|
{ id: "projects/design", label: "디자인 관리", children: thirdLevelChildren(longLabels) },
|
|
{ id: "projects/tasks", label: "업무 목록" },
|
|
{ id: "projects/schedule", label: "일정 관리" },
|
|
],
|
|
},
|
|
{ id: "reports", label: "현황 보고", icon: ChartColumnIcon },
|
|
{ id: "settings", label: "설정", icon: SettingsIcon },
|
|
...extra,
|
|
]
|
|
}
|
|
|
|
// Story-only responsive composition. Desktop LNB and mobile Sheet are two views over one tree and one state source.
|
|
function ResponsiveSpecimen({
|
|
nodes,
|
|
initial,
|
|
initialOpen,
|
|
logo,
|
|
eyebrow = "한맥 업무 시스템",
|
|
brand = "프로젝트 대시보드",
|
|
longLabels,
|
|
height,
|
|
}: {
|
|
nodes: LocalNode[]
|
|
initial: string | null
|
|
initialOpen: Record<string, boolean>
|
|
logo?: string
|
|
eyebrow?: string
|
|
brand?: string
|
|
longLabels?: boolean
|
|
height?: number
|
|
}) {
|
|
const [current, setCurrent] = useState<string | null>(initial)
|
|
const [open, setOpen] = useState<Record<string, boolean>>(initialOpen)
|
|
const profile = localProfile(longLabels)
|
|
const go = (id: string) => (event: MouseEvent) => {
|
|
event.preventDefault()
|
|
setCurrent(id)
|
|
}
|
|
const onPath = (id: string) => Boolean(current?.startsWith(`${id}/`))
|
|
const isOpen = (id: string) => open[id] ?? true
|
|
const lnbMenu = (items: LocalNode[]): ReactNode =>
|
|
items.map((node) =>
|
|
node.children ? (
|
|
<LNBGroup
|
|
key={node.id}
|
|
label={node.label}
|
|
current={onPath(node.id)}
|
|
open={isOpen(node.id)}
|
|
onOpenChange={(value) => setOpen((state) => ({ ...state, [node.id]: value }))}
|
|
>
|
|
{lnbMenu(node.children)}
|
|
</LNBGroup>
|
|
) : (
|
|
<LNBItem key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
|
|
{node.icon ? <node.icon aria-hidden="true" /> : null}
|
|
{node.label}
|
|
</LNBItem>
|
|
)
|
|
)
|
|
const sheetMenu = (items: LocalNode[]): ReactNode =>
|
|
items.map((node) =>
|
|
node.children ? (
|
|
<LNBMobileGroup key={node.id} label={node.label} data-open={isOpen(node.id) ? "" : undefined}>
|
|
{isOpen(node.id) ? sheetMenu(node.children) : null}
|
|
</LNBMobileGroup>
|
|
) : (
|
|
<LNBMobileLink key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
|
|
{node.label}
|
|
</LNBMobileLink>
|
|
)
|
|
)
|
|
const brandContent = (
|
|
<>
|
|
{logo ? <img src={logo} alt="" /> : null}
|
|
<span>
|
|
{eyebrow ? <small>{eyebrow}</small> : null}
|
|
<strong>{brand}</strong>
|
|
</span>
|
|
</>
|
|
)
|
|
const profileTrigger = (
|
|
<LNBProfile name={profile.name} description={profile.description}>
|
|
<Avatar>
|
|
<AvatarImage src={profile.photo} alt="" />
|
|
<AvatarFallback>{profileData.fallback}</AvatarFallback>
|
|
</Avatar>
|
|
</LNBProfile>
|
|
)
|
|
return (
|
|
<div
|
|
className="grid min-w-0 grid-cols-1 bg-[var(--hm-lnb-background-end)] lg:grid-cols-[var(--hm-lnb-width)_minmax(0,1fr)]"
|
|
style={{ minHeight: height ?? 460, height }}
|
|
data-story-slot="responsive-lnb-specimen"
|
|
>
|
|
<LNB>
|
|
<LNBBrand>{brandContent}</LNBBrand>
|
|
<LNBNav aria-label="서비스 메뉴">{lnbMenu(nodes)}</LNBNav>
|
|
<ProfileMenu side="right" align="end" matchTrigger trigger={profileTrigger} />
|
|
</LNB>
|
|
<div className="flex min-w-0 flex-col lg:col-start-2" data-story-slot="lnb-content-stack">
|
|
<div className="lg:hidden" data-story-slot="local-mobile-menu">
|
|
<LNBMobileHeader>
|
|
<LNBMobileMenu title="서비스 메뉴">
|
|
{sheetMenu(nodes)}
|
|
<div className="mt-4 border-t border-border pt-4">
|
|
<ProfileMenu
|
|
modal={false}
|
|
trigger={
|
|
<LNBProfile
|
|
name={profile.name}
|
|
description={profile.description}
|
|
>
|
|
<Avatar>
|
|
<AvatarImage src={profile.photo} alt="" />
|
|
<AvatarFallback>{profileData.fallback}</AvatarFallback>
|
|
</Avatar>
|
|
</LNBProfile>
|
|
}
|
|
/>
|
|
</div>
|
|
</LNBMobileMenu>
|
|
<LNBMobileBrand asChild>
|
|
<div>{brandContent}</div>
|
|
</LNBMobileBrand>
|
|
</LNBMobileHeader>
|
|
</div>
|
|
{/* Content paints above the navigation join strip, within the same LNB Mode. */}
|
|
<div className="relative min-w-0 flex-1 max-lg:rounded-t-[var(--hm-lnb-mobile-join)] bg-[var(--hm-sem-bg-content)] p-[34px] lg:rounded-l-[var(--hm-lnb-join)]" data-story-slot="connected-content">
|
|
<h2 className="text-lg font-bold">연결된 콘텐츠</h2>
|
|
<p className="text-sm text-muted-foreground" data-current-menu>
|
|
선택: {current ?? "없음"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// LNB Mode: desktop column and LNB Mobile Header/Sheet share one local tree and state.
|
|
// This responsive change stays within LNB Mode.
|
|
const standaloneNav: LocalNode[] = [
|
|
{ id: "overview", label: "대시보드", icon: LayoutGridIcon },
|
|
{
|
|
id: "projects",
|
|
label: "프로젝트 관리",
|
|
children: [
|
|
{
|
|
id: "projects/design",
|
|
label: "디자인 관리",
|
|
children: [
|
|
{ id: "projects/design/tokens", label: "컬러 토큰" },
|
|
{ id: "projects/design/components", label: "컴포넌트 스타일" },
|
|
{ id: "projects/design/layout", label: "레이아웃 규칙" },
|
|
],
|
|
},
|
|
{ id: "projects/tasks", label: "업무 목록" },
|
|
{ id: "projects/schedule", label: "일정 관리" },
|
|
],
|
|
},
|
|
{ id: "reports", label: "현황 보고", icon: ChartColumnIcon },
|
|
{ id: "settings", label: "설정", icon: SettingsIcon },
|
|
]
|
|
|
|
function Standalone({ mobileOpen = false, profileOpen = false }: { mobileOpen?: boolean; profileOpen?: boolean }) {
|
|
const [current, setCurrent] = useState("projects/design/tokens")
|
|
const [open, setOpen] = useState<Record<string, boolean>>({})
|
|
const go = (id: string) => (event: MouseEvent) => {
|
|
event.preventDefault()
|
|
setCurrent(id)
|
|
}
|
|
const onPath = (id: string) => current.startsWith(`${id}/`)
|
|
const lnbMenu = (nodes: LocalNode[]): ReactNode =>
|
|
nodes.map((node) =>
|
|
node.children ? (
|
|
<LNBGroup
|
|
key={node.id}
|
|
label={node.label}
|
|
current={onPath(node.id)}
|
|
open={open[node.id] ?? true}
|
|
onOpenChange={(value) => setOpen((state) => ({ ...state, [node.id]: value }))}
|
|
>
|
|
{lnbMenu(node.children)}
|
|
</LNBGroup>
|
|
) : (
|
|
<LNBItem key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
|
|
{node.icon ? <node.icon aria-hidden="true" /> : null}
|
|
{node.label}
|
|
</LNBItem>
|
|
)
|
|
)
|
|
const sheetMenu = (nodes: LocalNode[]): ReactNode =>
|
|
nodes.map((node) =>
|
|
node.children ? (
|
|
<LNBMobileGroup key={node.id} label={node.label}>
|
|
{sheetMenu(node.children)}
|
|
</LNBMobileGroup>
|
|
) : (
|
|
<LNBMobileLink key={node.id} href={`#${node.id}`} active={current === node.id} onClick={go(node.id)}>
|
|
{node.label}
|
|
</LNBMobileLink>
|
|
)
|
|
)
|
|
const brand = (
|
|
<span>
|
|
<small>한맥 업무 시스템</small>
|
|
<strong>프로젝트 대시보드</strong>
|
|
</span>
|
|
)
|
|
return (
|
|
// LNB Mode owns its height independently of Dashboard.
|
|
<div
|
|
className="grid min-h-0 min-w-0 grid-cols-1 bg-[var(--hm-lnb-background-end)] lg:grid-cols-[var(--hm-lnb-width)_minmax(0,1fr)]"
|
|
style={{ height: "100dvh" }}
|
|
data-story-slot="responsive-lnb-specimen"
|
|
>
|
|
<LNB>
|
|
<LNBBrand>{brand}</LNBBrand>
|
|
<LNBNav aria-label="서비스 메뉴">{lnbMenu(standaloneNav)}</LNBNav>
|
|
<ProfileMenu side="right" align="end" defaultOpen={profileOpen} matchTrigger trigger={<LNBProfile name={profileData.name} description={profileData.description}><ProfileAvatar /></LNBProfile>} />
|
|
</LNB>
|
|
<div className="flex min-h-0 min-w-0 flex-1 flex-col" data-story-slot="lnb-content-stack">
|
|
<div className="lg:hidden" data-story-slot="local-mobile-menu">
|
|
<LNBMobileHeader>
|
|
<LNBMobileMenu title="서비스 메뉴" defaultOpen={mobileOpen}>
|
|
{sheetMenu(standaloneNav)}
|
|
<div className="mt-4 border-t border-border pt-4">
|
|
<ProfileMenu
|
|
modal={false}
|
|
trigger={
|
|
<LNBProfile
|
|
name={profileData.name}
|
|
description={profileData.description}
|
|
>
|
|
<ProfileAvatar />
|
|
</LNBProfile>
|
|
}
|
|
/>
|
|
</div>
|
|
</LNBMobileMenu>
|
|
<LNBMobileBrand asChild>
|
|
<div>{brand}</div>
|
|
</LNBMobileBrand>
|
|
</LNBMobileHeader>
|
|
</div>
|
|
<main className="relative min-h-0 min-w-0 flex-1 overflow-auto max-lg:rounded-t-[var(--hm-lnb-mobile-join)] bg-[var(--hm-sem-bg-content)] p-[34px] lg:rounded-l-[var(--hm-lnb-join)]" data-story-slot="connected-content">
|
|
<h2 className="text-lg font-bold">연결된 콘텐츠</h2>
|
|
<p className="text-sm text-muted-foreground" data-current-menu>
|
|
선택: {current}
|
|
</p>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// A 390px viewport for the mobile Stories (the switch is a viewport media query, so a narrow container cannot show it).
|
|
const mobileViewport = {
|
|
parameters: { viewport: { options: { hmMobile: { name: "Mobile 390", styles: { width: "390px", height: "844px" }, type: "mobile" } } } },
|
|
globals: { viewport: { value: "hmMobile", isRotated: false } },
|
|
}
|
|
|
|
// Representative-board preview of a Story at a fixed viewport. The LNB/bar switch is a viewport media query, so the board embeds the
|
|
// verification Story (the same `Standalone` composition) in an iframe of that width instead of rebuilding it in a narrow container.
|
|
// Each iframe is its own document, so the closed Sheets do not share a portal or focus with the board.
|
|
function ViewportPreview({ story, label, width, height }: { story: string; label: string; width: number; height: number }) {
|
|
return (
|
|
<figure className="grid min-w-0 content-start gap-2">
|
|
<figcaption className="text-sm text-muted-foreground">
|
|
{label} · {width}px
|
|
</figcaption>
|
|
<div className="max-w-full overflow-x-auto">
|
|
<iframe
|
|
title={`${label} ${width}px`}
|
|
src={`iframe.html?id=patterns-layout-lnb--${story}&viewMode=story`}
|
|
width={width}
|
|
height={height}
|
|
className="box-content block border border-black/10"
|
|
/>
|
|
</div>
|
|
</figure>
|
|
)
|
|
}
|
|
|
|
const meta = { title: "Patterns/Layout/LNB", component: LNB, parameters: { layout: "fullscreen", controls: { disable: true } } } satisfies Meta<typeof LNB>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
// Representative Story: the common Story page with the column in every state side by side. Hover and click work on the real items.
|
|
// The specimens are bounded LNB columns (their own frame, not the viewport width), so they stay on the page inner.
|
|
export const All: Story = {
|
|
name: "LNB",
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader
|
|
kicker={STORY_KICKER.patterns}
|
|
title="LNB"
|
|
description="화면 왼쪽의 지역 내비게이션입니다. 1024px 이상에서 표시하고, 1023px 이하는 숨긴 뒤 모바일 메뉴로 대체합니다."
|
|
/>
|
|
<StorySection title="Overview" description="모든 뎁스 18px. 선택은 Beige 면 + 초록 글자, 왼쪽 모서리 8로 콘텐츠와 오목하게 이어집니다.">
|
|
<StateBoard
|
|
min={560}
|
|
states={[
|
|
{ id: "selected", label: "Selected", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} /> },
|
|
{ id: "third-selected", label: "3뎁스 메뉴 · 선택", note: "3뎁스는 20px 들여쓰기와 1px 그린 연결선으로 구분하며, 선은 마지막 메뉴에서 끝납니다. 선택은 베이지, 상위 경로는 노란색입니다.", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": true }} /> },
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="States" description="그룹 펼침·접힘과 하위 선택에 따른 표시입니다. 선택된 경로의 상위는 접혀도 노란색을 유지합니다.">
|
|
<StateBoard
|
|
min={560}
|
|
states={[
|
|
{ id: "default", label: "Default · 기존 LNB", note: "선택 없음, 2뎁스 그룹 접힘. 항목에 마우스를 올리면 Black 10%가 콘텐츠 경계까지 닿습니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: false }} /> },
|
|
{ id: "expanded", label: "Expanded · 2뎁스 펼침", note: "하위 선택 없이 펼친 그룹: Black 20% 면 + 1px 초록 선.", children: <ResponsiveSpecimen nodes={simpleNav()} initial={null} initialOpen={{ tasks: true }} /> },
|
|
{ id: "selected-child", label: "Selected Child · 2뎁스 선택", note: "하위 선택: 상위 이름·화살표가 노란색, 하위는 Beige.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="tasks/list" initialOpen={{ tasks: true }} /> },
|
|
{ id: "collapsed-with-selection", label: "Collapsed With Selection · 접힘", note: "하위가 선택된 채 접힌 그룹도 상위가 노란색을 유지합니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="tasks/list" initialOpen={{ tasks: false }} /> },
|
|
{ id: "third-second-collapsed", label: "3뎁스 메뉴 · 2뎁스 접힘", note: "디자인 관리를 접어도 선택된 경로의 1·2뎁스 표시를 유지합니다. 하위 메뉴와 연결선이 함께 숨겨집니다.", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: true, "projects/design": false }} /> },
|
|
{ id: "third-first-collapsed", label: "3뎁스 메뉴 · 1뎁스 접힘", note: "프로젝트 관리를 접어도 노란색을 유지합니다. 다시 펼치면 디자인 관리의 열림 상태가 그대로입니다(open은 화면이 관리).", children: <ResponsiveSpecimen nodes={thirdLevelNav()} initial="projects/design/tokens" initialOpen={{ projects: false, "projects/design": true }} /> },
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Variants" description="로고 유무와 긴 이름입니다.">
|
|
<StateBoard
|
|
min={560}
|
|
states={[
|
|
{ id: "with-logo", label: "With Logo · 로고 있음(테스트 이미지)", note: "로고는 서비스명 위, 같은 시작선. 없으면 영역·간격 없이 서비스명만 둡니다.", children: <ResponsiveSpecimen nodes={simpleNav()} initial="overview" initialOpen={{ tasks: true }} logo={testLogo} /> },
|
|
{ id: "long", label: "Long labels", note: "긴 이름은 줄바꿈되며 항목 높이가 늘어납니다.", children: <ResponsiveSpecimen nodes={simpleNav(true)} initial="tasks/list" initialOpen={{ tasks: true }} longLabels /> },
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Usage · Scroll" description="메뉴가 열보다 길면 메뉴 영역만 세로로 스크롤하고 브랜드·프로필은 그대로입니다(높이 460).">
|
|
<StateBoard
|
|
min={560}
|
|
states={[
|
|
{ id: "scroll", label: "Scroll", children: <ResponsiveSpecimen nodes={simpleNav(false, true)} initial="overview" initialOpen={{ tasks: true }} height={460} /> },
|
|
{ id: "third-scroll", label: "3뎁스 메뉴 · Scroll", note: "3뎁스·연결선·긴 이름도 메뉴 영역 안에서 함께 스크롤됩니다. 스크롤 영역은 브랜드 바로 아래에서 시작해 프로필 바로 위에서 끝납니다.", children: <ResponsiveSpecimen nodes={thirdLevelNav(true, true)} initial="projects/design/layout" initialOpen={{ projects: true, "projects/design": true }} longLabels height={460} /> },
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection
|
|
title="Usage · LNB Standalone 반응형 (GNB 없음)"
|
|
description="1024px 이상은 왼쪽 LNB의 브랜드·프로필을, 1023px 이하는 LNB를 숨긴 뒤 Local 모바일 바와 Sheet의 메뉴·프로필을 사용합니다. 열림·키보드·Escape는 LNB Standalone Mobile Menu Open에서 확인합니다."
|
|
>
|
|
<div className="flex flex-wrap items-start gap-6">
|
|
<ViewportPreview story="standalone-desktop" label="Desktop" width={1024} height={640} />
|
|
<ViewportPreview story="standalone-mobile" label="Mobile" width={390} height={640} />
|
|
</div>
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Default: Story = { tags: ["verification"], render: () => <Menu initial={null} groupOpen={false} /> }
|
|
export const Selected: Story = { tags: ["verification"], render: () => <Menu /> }
|
|
export const Expanded: Story = { tags: ["verification"], render: () => <Menu initial={null} /> }
|
|
export const SelectedChild: Story = { tags: ["verification"], name: "Selected Child", render: () => <Menu initial="tasks/list" /> }
|
|
export const CollapsedWithSelection: Story = { tags: ["verification"], name: "Collapsed With Selection", render: () => <Menu initial="tasks/list" groupOpen={false} /> }
|
|
export const WithLogo: Story = { tags: ["verification"], name: "With Logo", render: () => <Menu logo={testLogo} /> }
|
|
export const LongLabels: Story = { tags: ["verification"], name: "Long Labels", render: () => <Menu initial="tasks/list" longLabels /> }
|
|
export const Scroll: Story = { tags: ["verification"], render: () => <Menu many height={460} /> }
|
|
export const ThirdLevel: Story = { tags: ["verification"], name: "Third Level", render: () => <ThirdLevelMenu /> }
|
|
export const ThirdLevelLongLabels: Story = { tags: ["verification"], name: "Third Level Long Labels", render: () => <ThirdLevelMenu initial="projects/design/components" longLabels /> }
|
|
export const ThirdLevelScroll: Story = { tags: ["verification"], name: "Third Level Scroll", render: () => <ThirdLevelMenu initial="projects/design/layout" longLabels many height={460} /> }
|
|
|
|
// VERIFICATION ONLY: legacy GNB + LNB technical check, forbidden in operating pages. The GNB owns the brand,
|
|
// so the LNB below has no LNBBrand and the menu starts at the column top.
|
|
export const WithGNB: Story = {
|
|
tags: ["verification"],
|
|
name: "VERIFICATION ONLY · GNB + LNB",
|
|
render: () => (
|
|
<div>
|
|
<p role="note">VERIFICATION ONLY — 기존 혼합 구조 기술 검증. 운영 사용 금지.</p>
|
|
<GNB>
|
|
<GNBMobileMenu title="메뉴">
|
|
<div className="mt-4 border-t border-border pt-4">
|
|
<ProfileMenu
|
|
modal={false}
|
|
trigger={
|
|
<GNBUser
|
|
name={profileData.name}
|
|
description={profileData.description}
|
|
className="w-full justify-start !text-foreground [&_[data-slot=gnb-user-description]]:!text-muted-foreground [&_[data-slot=gnb-user-text]]:!grid"
|
|
>
|
|
<ProfileAvatar />
|
|
</GNBUser>
|
|
}
|
|
/>
|
|
</div>
|
|
</GNBMobileMenu>
|
|
<GNBBrand href="#overview">
|
|
<span>
|
|
<small>한맥 업무 시스템</small>
|
|
<strong>프로젝트 대시보드</strong>
|
|
</span>
|
|
</GNBBrand>
|
|
<GNBNav />
|
|
<GNBUtilities className="hidden lg:flex">
|
|
<ProfileMenu align="end" trigger={<GNBUser name={profileData.name} description={profileData.description}><ProfileAvatar /></GNBUser>} />
|
|
</GNBUtilities>
|
|
</GNB>
|
|
<Menu brand={null} profile={false} />
|
|
</div>
|
|
),
|
|
}
|
|
|
|
// LNB without a GNB, responsive. Desktop (>= 1024px): the column. Mobile (<= 1023px): the column is hidden and the connected-content
|
|
// column becomes a full-width stack whose first row opens a Sheet with the same tree, selected item and every depth.
|
|
export const StandaloneDesktop: Story = { tags: ["verification"], name: "LNB Standalone Desktop", render: () => <Standalone /> }
|
|
export const LNBProfileMenuOpen: Story = { tags: ["verification"], name: "LNB Profile Menu Open", render: () => <Standalone profileOpen /> }
|
|
export const StandaloneMobile: Story = { tags: ["verification"], name: "LNB Standalone Mobile", ...mobileViewport, render: () => <Standalone /> }
|
|
export const StandaloneMobileMenuOpen: Story = {
|
|
tags: ["verification"],
|
|
name: "LNB Standalone Mobile Menu Open",
|
|
...mobileViewport,
|
|
render: () => <Standalone mobileOpen />,
|
|
}
|