66 lines
2.7 KiB
TypeScript
66 lines
2.7 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
|
|
// NOTE: 실제 audit/activity API가 생기면 여기서 호출. 현재는 mock.
|
|
const MOCK = [
|
|
{ kind: "edit", who: "gbpark", msg: "메뉴명 수정", target: "메뉴 관리", meta: "mnu_00231 · 메뉴관리 → 메뉴 관리", time: "2일 전" },
|
|
{ kind: "add", who: "gbpark", msg: "하위 메뉴 추가", target: "공통 코드 / 다국어", meta: "mnu_00248 · /admin/i18n", time: "4일 전" },
|
|
{ kind: "edit", who: "park", msg: "URL 변경", target: "화면 관리", meta: "/admin/screen → /admin/screenMng", time: "6일 전" },
|
|
{ kind: "del", who: "gbpark", msg: "메뉴 비활성화", target: "테스트", meta: "mnu_00197 · status: inactive", time: "1주 전" },
|
|
];
|
|
|
|
const iconFor = (kind: string) => {
|
|
if (kind === "add")
|
|
return (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
|
|
<path d="M12 5v14M5 12h14" />
|
|
</svg>
|
|
);
|
|
if (kind === "del")
|
|
return (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
|
|
<path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
|
|
</svg>
|
|
);
|
|
return (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2">
|
|
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
|
<path d="m18.5 2.5 3 3L12 15l-4 1 1-4z" />
|
|
</svg>
|
|
);
|
|
};
|
|
|
|
export function MenuActivityPanel() {
|
|
return (
|
|
<div className="v5-mm-pane on v5-mm-pane-wrap">
|
|
<div style={{ marginBottom: "1rem" }}>
|
|
<div className="v5-mm-step" style={{ marginBottom: ".4rem" }}>
|
|
<span className="num">03</span>Activity
|
|
</div>
|
|
<h2 style={{ margin: 0, fontSize: "1.35rem", fontWeight: 700, letterSpacing: "-.025em" }}>
|
|
활동 로그 <span style={{ fontSize: ".72rem", color: "var(--v5-text-muted)", fontWeight: 500 }}>· 최근 {MOCK.length}건</span>
|
|
</h2>
|
|
<p style={{ margin: ".35rem 0 1rem", fontSize: ".7rem", color: "var(--v5-text-muted)" }}>
|
|
* 현재는 샘플 데이터입니다. audit 로그 API 연동 예정.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="v5-mm-act-list">
|
|
{MOCK.map((a, i) => (
|
|
<div className="v5-mm-act" key={i}>
|
|
<div className={`v5-mm-act-ico ${a.kind}`}>{iconFor(a.kind)}</div>
|
|
<div className="v5-mm-act-body">
|
|
<div className="v5-mm-act-title">
|
|
<b>{a.who}</b> {a.msg} · <b>{a.target}</b>
|
|
</div>
|
|
<div className="v5-mm-act-meta">{a.meta}</div>
|
|
</div>
|
|
<span className="v5-mm-act-time">{a.time}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|