You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
373 lines
18 KiB
JavaScript
373 lines
18 KiB
JavaScript
/* 아리 — 대시보드(벤토) · RON 디자인 언어 */
|
|
const { useState, useEffect, useRef } = React;
|
|
const D = window.AriData;
|
|
|
|
/* ---------- 아이콘 ---------- */
|
|
const P = {
|
|
spark: "M12 3l1.9 5.2L19 10l-5.1 1.8L12 17l-1.9-5.2L5 10l5.1-1.8z|M19 4v3|M5 17v3",
|
|
grid: "M3 3h7v7H3z|M14 3h7v7h-7z|M14 14h7v7h-7z|M3 14h7v7H3z",
|
|
route: "M6 19a3 3 0 1 0 0-6 3 3 0 0 0 0 6z|M18 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6z|M9 16h6a3 3 0 0 0 3-3V11",
|
|
cal: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
|
|
check: "M9 11l3 3L22 4|M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11",
|
|
tick: "M20 6 9 17l-5-5",
|
|
mail: "M22 7 13.03 12.7a1.94 1.94 0 0 1-2.06 0L2 7|M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z",
|
|
target: "M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z|M12 8a4 4 0 1 0 0 8 4 4 0 0 0 0-8z|M12 12h.01",
|
|
heart: "M19 14c1.5-1.5 3-3.4 3-5.5A4.5 4.5 0 0 0 12 5.5 4.5 4.5 0 0 0 2 8.5c0 2.1 1.5 4 3 5.5l7 7z",
|
|
wallet: "M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0 0 4h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5|M16 12h.01",
|
|
brain: "M12 5a3 3 0 1 0-5.9.8A3 3 0 0 0 4 9.5 3 3 0 0 0 6 14a3 3 0 0 0 6 1zM12 5a3 3 0 1 1 5.9.8A3 3 0 0 1 20 9.5 3 3 0 0 1 18 14a3 3 0 0 1-6 1z|M12 5v14",
|
|
zap: "M13 2 3 14h9l-1 8 10-12h-9z",
|
|
more: "M5 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0zM11 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0zM17 12a1 1 0 1 0 2 0 1 1 0 0 0-2 0z",
|
|
search: "M21 21l-4.34-4.34|M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z",
|
|
bell: "M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9|M10.3 21a1.94 1.94 0 0 0 3.4 0",
|
|
sun: "M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z|M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4",
|
|
moon: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z",
|
|
video: "M23 7l-7 5 7 5zM1 5h15a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H1a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z",
|
|
send: "M22 2 11 13|M22 2 15 22l-4-9-9-4z",
|
|
up: "M12 19V5|M5 12l7-7 7 7",
|
|
foot: "M4 16c0-2 .5-4 2-4s2 1 2 3 .5 4-1 4-3-1-3-3z|M8 7c0-2 .5-3 1.5-3S11 5 11 7s0 3-1.5 3S8 9 8 7z|M14 16c0-2-.5-4-2-4s-2 1-2 3-.5 4 1 4 3-1 3-3z|M16 7c0-2-.5-3-1.5-3S13 5 13 7s0 3 1.5 3S16 9 16 7z",
|
|
drop: "M12 2.7S5 10 5 14a7 7 0 0 0 14 0c0-4-7-11.3-7-11.3z",
|
|
zzz: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z|M16 4h4l-4 4h4",
|
|
pin: "M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z|M12 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
|
|
file: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z|M14 2v6h6",
|
|
pen: "M12 20h9|M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z",
|
|
bookmark: "M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z",
|
|
plus: "M12 5v14|M5 12h14",
|
|
share: "M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7|M16 6l-4-4-4 4|M12 2v13",
|
|
back: "M19 12H5|M12 19l-7-7 7-7",
|
|
};
|
|
function I({ d, w }) {
|
|
return (
|
|
<svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
|
strokeWidth={w || 1.9} strokeLinecap="round" strokeLinejoin="round">
|
|
{P[d].split("|").map((s, i) => <path key={i} d={s} />)}
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
/* ---------- 색 ---------- */
|
|
const C = { blue: "#83a2db", blueD: "#6286c9", red: "#ce6969", navy: "#10141a", teal: "#5fa6a0", mauve: "#9c8bcb" };
|
|
const TONE = { blue: C.blue, violet: C.mauve, coral: C.red, green: C.teal };
|
|
|
|
/* ---------- 네비 ---------- */
|
|
const NAV = [
|
|
{ id: "dash", label: "대시보드", icon: "grid", href: "아리 대시보드 (RON).html" },
|
|
{ id: "journey", label: "여정", icon: "route", href: "아리 대시보드 (RON v2).html" },
|
|
{ id: "cal", label: "일정", icon: "cal", href: "#" },
|
|
{ id: "task", label: "작업", icon: "check", badge: "4", href: "#" },
|
|
{ id: "mail", label: "메일", icon: "mail", href: "#" },
|
|
{ id: "life", label: "라이프", icon: "heart", href: "#" },
|
|
];
|
|
const RAIL = [
|
|
{ icon: "back", label: "뒤로" }, { sep: true },
|
|
{ icon: "grid", label: "오늘 개요", active: true },
|
|
{ icon: "cal", label: "일정" },
|
|
{ icon: "check", label: "할 일" },
|
|
{ icon: "target", label: "목표" },
|
|
{ icon: "heart", label: "건강" },
|
|
{ icon: "wallet", label: "지출" },
|
|
{ icon: "zap", label: "자동화" },
|
|
{ sep: true },
|
|
{ icon: "plus", label: "추가" },
|
|
];
|
|
const CHIPS = [
|
|
{ icon: "cal", text: "내일 오후 비워줘" },
|
|
{ icon: "mail", text: "중요 메일만 요약" },
|
|
{ icon: "video", text: "14시 미팅 준비" },
|
|
];
|
|
const PRIO = { 높음: "high", 보통: "mid", 낮음: "low" };
|
|
const AVCOL = [C.navy, C.red, C.blue];
|
|
const KICON = { file: "file", pen: "pen", bookmark: "bookmark" };
|
|
|
|
function App() {
|
|
const [theme, setTheme] = useState("light");
|
|
const [tasks, setTasks] = useState(D.tasks);
|
|
const [autos, setAutos] = useState(D.automations);
|
|
const ref = useRef(null);
|
|
|
|
useEffect(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);
|
|
useEffect(() => {
|
|
const el = ref.current;
|
|
const id = requestAnimationFrame(() => el && el.classList.add("enter"));
|
|
return () => cancelAnimationFrame(id);
|
|
}, []);
|
|
|
|
const toggle = (id) => setTasks((t) => t.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
|
|
const toggleAuto = (i) => setAutos((a) => a.map((x, j) => (j === i ? { ...x, on: !x.on } : x)));
|
|
const openCount = tasks.filter((t) => !t.done).length;
|
|
|
|
return (
|
|
<div className="app" ref={ref}>
|
|
{/* ===== 상단바 ===== */}
|
|
<header className="top">
|
|
<div className="brand">
|
|
<div className="brand-mark"><I d="spark" /></div>
|
|
<span className="brand-name">아리</span>
|
|
</div>
|
|
<nav className="nav">
|
|
{NAV.map((m) => (
|
|
<a key={m.id} href={m.href} className={m.id === "dash" ? "active" : ""}>
|
|
<I d={m.icon} />{m.label}
|
|
{m.badge && <span className="badge">{m.badge}</span>}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
<div className="top-actions">
|
|
<button className="circ" aria-label="검색"><I d="search" /></button>
|
|
<button className="circ dot" aria-label="메일"><I d="mail" /></button>
|
|
<button className="circ dot" aria-label="알림"><I d="bell" /></button>
|
|
<button className="circ" aria-label="테마" onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
|
|
<I d={theme === "light" ? "moon" : "sun"} />
|
|
</button>
|
|
<div className="avatar">{D.user.initial}</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* ===== 무대 ===== */}
|
|
<div className="stage">
|
|
<aside className="rail">
|
|
{RAIL.map((r, i) =>
|
|
r.sep ? <span className="sep" key={i} /> : (
|
|
<button key={i} className={r.active ? "active" : ""} aria-label={r.label}>
|
|
<I d={r.icon} /><span className="tip">{r.label}</span>
|
|
</button>
|
|
)
|
|
)}
|
|
</aside>
|
|
|
|
<main className="main">
|
|
{/* 페이지 헤더 */}
|
|
<div className="pagehead">
|
|
<div className="ph-titles">
|
|
<h1 className="ph-title">좋은 아침이에요, {D.user.name}님</h1>
|
|
<p className="ph-sub">{D.today} · 일정 <b>4건</b> · 할 일 <b>{openCount}개</b> · 메일 <b>{D.emailCount}통</b></p>
|
|
</div>
|
|
<div className="ph-right">
|
|
<div className="ph-weather"><I d="sun" /><b>{D.weather.temp}°</b> {D.weather.cond}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ===== 벤토 ===== */}
|
|
<div className="bento">
|
|
{/* 히어로 — 브리핑 + 명령 */}
|
|
<section className="hero2 span2">
|
|
<span className="hero-spark"><I d="spark" />아리 브리핑</span>
|
|
<p className="brief2" dangerouslySetInnerHTML={{ __html: D.briefingNote }} />
|
|
<div className="qchips">
|
|
{CHIPS.map((c, i) => <button className="qchip" key={i}><I d={c.icon} />{c.text}</button>)}
|
|
</div>
|
|
<div className="cmd2">
|
|
<I d="spark" />
|
|
<input placeholder="오늘 하루, 무엇이든 맡겨보세요…" />
|
|
<button className="send" aria-label="보내기"><I d="send" /></button>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 오늘 일정 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="cal" /></div>
|
|
<div><div className="wtitle">오늘 일정</div><div className="wsub">4개 · 다음까지 2시간</div></div>
|
|
<button className="wtool"><I d="more" /></button>
|
|
</div>
|
|
<div className="tl">
|
|
{D.schedule.map((e, i) => (
|
|
<div className="tl-row" key={i}>
|
|
<div className="tl-time">{e.time}</div>
|
|
<div className="tl-body" style={{ "--accent": TONE[e.tone] }}>
|
|
<div className="tl-title">{e.title}</div>
|
|
<div className="tl-meta"><span>{e.tag}</span><span className="dur">{e.dur}</span></div>
|
|
</div>
|
|
{e.soon && <span className="tl-soon">곧</span>}
|
|
</div>
|
|
))}
|
|
<div className="tl-note"><I d="bell" />{D.conflict}</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 할 일 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="check" /></div>
|
|
<div className="wtitle">할 일</div>
|
|
<span className="wcount">{openCount}개 남음</span>
|
|
</div>
|
|
<div className="tlist">
|
|
{tasks.map((t, idx) => {
|
|
const focus = !t.done && idx === 0;
|
|
return (
|
|
<div key={t.id} className={"trow" + (t.done ? " done" : "")} onClick={() => toggle(t.id)}>
|
|
<div className="tbox"><I d="tick" w="3" /></div>
|
|
<div className="tbody"><div className="tt2">{t.title}</div><div className="tm2">{t.project}</div></div>
|
|
{focus ? <span className="tnow">지금</span> : !t.done && <span className={"tprio " + PRIO[t.prio]}>{t.prio}</span>}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 이번 주 집중도 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="zap" /></div>
|
|
<div><div className="wtitle">이번 주 집중도</div><div className="wsub">딥 워크 시간</div></div>
|
|
</div>
|
|
<div className="fstat">
|
|
<b>27.4</b><span className="u">시간</span>
|
|
<span className="delta"><I d="up" />+12%</span>
|
|
</div>
|
|
<div className="chart2">
|
|
<svg viewBox="0 0 300 88" preserveAspectRatio="none">
|
|
<defs>
|
|
<linearGradient id="fg" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0" stopColor={C.blue} stopOpacity="0.34" />
|
|
<stop offset="1" stopColor={C.blue} stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M6 64 L48 52 L90 58 L132 34 L174 42 L216 20 L258 30 L294 14 L294 88 L6 88 Z" fill="url(#fg)" />
|
|
<polyline points="6,64 48,52 90,58 132,34 174,42 216,20 258,30 294,14"
|
|
fill="none" stroke={C.blueD} strokeWidth="2.4" strokeLinejoin="round" strokeLinecap="round" />
|
|
<circle cx="216" cy="20" r="4.2" fill={C.red} stroke="var(--card)" strokeWidth="2.5" />
|
|
</svg>
|
|
<div className="chart-x">{["월","화","수","목","금","토","일"].map((d) => <span key={d}>{d}</span>)}</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* 목표 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="target" /></div>
|
|
<div className="wtitle">목표</div>
|
|
</div>
|
|
<div className="goals2">
|
|
{D.goals.map((g, i) => {
|
|
const col = [C.blue, C.red, C.mauve][i % 3];
|
|
return (
|
|
<div key={i}>
|
|
<div className="goal2-top"><span className="goal2-title">{g.title}</span><span className="goal2-pct">{g.pct}%</span></div>
|
|
<div className="gbar"><i style={{ width: g.pct + "%", background: col }} /></div>
|
|
<div className="gsub2">{g.sub}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 미팅 준비 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="video" /></div>
|
|
<div className="wtitle">미팅 준비</div>
|
|
</div>
|
|
<div className="mtg-when"><b>{D.meeting.title}</b> · {D.meeting.when}</div>
|
|
<div className="mtg-ppl">
|
|
{D.meeting.people.slice(0, 3).map((p, i) => <div className="av" key={i} style={{ background: AVCOL[i] }}>{p[0]}</div>)}
|
|
<span className="more">{D.meeting.people.join(", ")}</span>
|
|
</div>
|
|
<ul className="mtg-brief">
|
|
{D.meeting.brief.map((b, i) => <li key={i}><span className="dot" />{b}</li>)}
|
|
</ul>
|
|
<button className="mtg-cta"><I d="spark" />브리핑 열기</button>
|
|
</section>
|
|
|
|
{/* 메일 요약 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="mail" /></div>
|
|
<div className="wtitle">메일 요약</div>
|
|
<span className="wcount">{D.emailCount}통</span>
|
|
</div>
|
|
<div className="mails2">
|
|
{D.emails.map((m, i) => (
|
|
<div className="mrow" key={i}>
|
|
<span className="mdot" style={{ background: TONE[m.tone] }} />
|
|
<div className="mbody">
|
|
<div className="mfrom"><b>{m.from}</b>{m.task && <span className="mtask">할 일</span>}<span className="mtime">{m.time}</span></div>
|
|
<div className="msubj">{m.subj}</div>
|
|
<div className="msum">{m.summary}</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 건강 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="heart" /></div>
|
|
<div className="wtitle">건강 & 웰니스</div>
|
|
</div>
|
|
<div className="rings2">
|
|
{D.health.rings.map((r, i) => {
|
|
const ico = { footprints: "foot", moonZz: "zzz", droplet: "drop" }[r.icon];
|
|
const col = [C.red, C.mauve, C.blue][i % 3];
|
|
return (
|
|
<div className="ring2" key={i}>
|
|
<div className="dial2" style={{ background: `conic-gradient(${col} ${r.pct}%, var(--card-2) 0)` }}><I d={ico} /></div>
|
|
<div className="rv2">{r.val}</div>
|
|
<div className="rl2">{r.label}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="nudge2"><I d="drop" />{D.health.nudge}</div>
|
|
</section>
|
|
|
|
{/* 지출 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="wallet" /></div>
|
|
<div className="wtitle">이번 달 지출</div>
|
|
</div>
|
|
<div className="fbig"><b>{D.finance.spentPct}%</b><span className="u">예산 사용</span></div>
|
|
<div className="fdelta">{D.finance.delta}</div>
|
|
<div className="fbar"><i style={{ width: D.finance.spentPct + "%" }} /></div>
|
|
<div className="frange"><span>₩{D.finance.spent}</span><span>₩{D.finance.budget}</span></div>
|
|
<div className="fsubs">
|
|
{D.finance.subs.map((s, i) => (
|
|
<div className="fsub" key={i}><span className="nm">{s.name}</span><span className="dt">{s.date}</span><span className="amt">₩{s.amt}</span></div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 자동화 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="zap" /></div>
|
|
<div className="wtitle">자동화</div>
|
|
</div>
|
|
<div className="auto">
|
|
{autos.map((a, i) => (
|
|
<div className="arow" key={i}>
|
|
<div className="aic"><I d={a.icon} /></div>
|
|
<div className="abody"><div className="awhen">{a.when}</div><div className="athen">→ {a.then}</div></div>
|
|
<div className={"toggle" + (a.on ? " on" : "")} onClick={() => toggleAuto(i)}><i /></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* 지식/메모 */}
|
|
<section className="wcard">
|
|
<div className="whead">
|
|
<div className="wicon"><I d="brain" /></div>
|
|
<div className="wtitle">지식 & 메모</div>
|
|
</div>
|
|
<div className="klist">
|
|
{D.knowledge.map((k, i) => (
|
|
<div className="krow" key={i}>
|
|
<div className="kic"><I d={KICON[k.icon] || "file"} /></div>
|
|
<div className="kbody"><div className="kt">{k.title}</div><div className="ks">{k.src}</div></div>
|
|
<span className="ktag">{k.tag}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
|