112 lines
3.7 KiB
TypeScript
112 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { Building2, Layers, UserCog, Rocket, Check } from "lucide-react";
|
|
|
|
export const WIZARD_STEPS = [
|
|
{ n: 1, key: "basic", label: "기본 정보", icon: Building2, desc: "회사 · 접속 주소 · DB" },
|
|
{ n: 2, key: "template", label: "템플릿 선택", icon: Layers, desc: "복사할 기준 데이터" },
|
|
{ n: 3, key: "admin", label: "관리자 계정", icon: UserCog, desc: "초기 관리자 생성" },
|
|
{ n: 4, key: "run", label: "생성 진행", icon: Rocket, desc: "DB · 스키마 · 복사" },
|
|
] as const;
|
|
|
|
export default function StepIndicator({ current }: { current: number }) {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "stretch",
|
|
background: "var(--v5-surface-solid)",
|
|
borderBottom: "1px solid var(--v5-border)",
|
|
}}
|
|
>
|
|
{WIZARD_STEPS.map((s, i) => {
|
|
const done = current > s.n;
|
|
const active = current === s.n;
|
|
return (
|
|
<div
|
|
key={s.key}
|
|
style={{
|
|
flex: 1,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: "0.65rem",
|
|
padding: "0.75rem 1rem",
|
|
position: "relative",
|
|
background: active ? "rgba(var(--v5-cyan-rgb), 0.06)" : "transparent",
|
|
borderRight: i < WIZARD_STEPS.length - 1 ? "1px solid var(--v5-border)" : "none",
|
|
transition: "background 0.25s",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 26,
|
|
height: 26,
|
|
borderRadius: 7,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: done
|
|
? "rgb(var(--v5-green-rgb))"
|
|
: active
|
|
? "var(--v5-cyan)"
|
|
: "var(--v5-bg-subtle)",
|
|
color: done || active ? "#fff" : "var(--v5-text-muted)",
|
|
fontFamily: "var(--v5-font-mono)",
|
|
fontSize: "0.62rem",
|
|
fontWeight: 700,
|
|
boxShadow: active ? "0 0 14px rgba(var(--v5-cyan-rgb), 0.5)" : "none",
|
|
transition: "all 0.25s",
|
|
flexShrink: 0,
|
|
}}
|
|
>
|
|
{done ? <Check size={13} strokeWidth={2.5} /> : s.n}
|
|
</div>
|
|
<div style={{ minWidth: 0, flex: 1 }}>
|
|
<div
|
|
style={{
|
|
fontSize: "0.52rem",
|
|
fontWeight: 700,
|
|
letterSpacing: "0.15em",
|
|
textTransform: "uppercase",
|
|
color: done || active ? "var(--v5-text-sec)" : "var(--v5-text-muted)",
|
|
fontFamily: "var(--v5-font-mono)",
|
|
}}
|
|
>
|
|
STEP {s.n} / {WIZARD_STEPS.length}
|
|
</div>
|
|
<div
|
|
style={{
|
|
fontSize: "0.75rem",
|
|
fontWeight: active || done ? 700 : 500,
|
|
color: active
|
|
? "var(--v5-cyan)"
|
|
: done
|
|
? "var(--v5-text)"
|
|
: "var(--v5-text-sec)",
|
|
marginTop: 1,
|
|
letterSpacing: "-0.01em",
|
|
}}
|
|
>
|
|
{s.label}
|
|
</div>
|
|
</div>
|
|
{active && (
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
left: 0,
|
|
right: 0,
|
|
bottom: -1,
|
|
height: 2,
|
|
background:
|
|
"linear-gradient(90deg, transparent, var(--v5-cyan), transparent)",
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|