68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
|
|
type Scope = "admin" | "user";
|
|
|
|
interface Props {
|
|
scope: Scope;
|
|
adminCount: number;
|
|
userCount: number;
|
|
onChange: (s: Scope) => void;
|
|
}
|
|
|
|
export function MenuScopePanel({ scope, adminCount, userCount, onChange }: Props) {
|
|
return (
|
|
<aside className="v5-mm-col v5-mm-col-scope">
|
|
<div className="v5-mm-col-hd">
|
|
<div>
|
|
<div className="v5-mm-step">
|
|
<span className="num">01</span>Scope
|
|
</div>
|
|
<h3>스코프</h3>
|
|
<p>메뉴 타입을 선택하세요</p>
|
|
</div>
|
|
</div>
|
|
<div className="v5-mm-scope-list">
|
|
<div
|
|
className={`v5-mm-scope${scope === "admin" ? " on" : ""}`}
|
|
onClick={() => onChange("admin")}
|
|
>
|
|
<div className="v5-mm-scope-top">
|
|
<div className="v5-mm-scope-ico">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M12 2 2 7l10 5 10-5-10-5z" />
|
|
<path d="m2 17 10 5 10-5M2 12l10 5 10-5" />
|
|
</svg>
|
|
</div>
|
|
<div className="v5-mm-scope-cnt">{adminCount}</div>
|
|
</div>
|
|
<div>
|
|
<div className="v5-mm-scope-name">관리자</div>
|
|
<div className="v5-mm-scope-desc">시스템·업무·리포트 관리 화면</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`v5-mm-scope${scope === "user" ? " on" : ""}`}
|
|
onClick={() => onChange("user")}
|
|
>
|
|
<div className="v5-mm-scope-top">
|
|
<div className="v5-mm-scope-ico">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</svg>
|
|
</div>
|
|
<div className="v5-mm-scope-cnt">{userCount}</div>
|
|
</div>
|
|
<div>
|
|
<div className="v5-mm-scope-name">사용자</div>
|
|
<div className="v5-mm-scope-desc">최종 사용자 대시보드·업무</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|