|
|
/* 아리 — 스마트 인박스 전용 페이지
|
|
|
적을 때는 분류하지 않는다 — 분류·배치·자동화는 아리가. */
|
|
|
const I = window.AriShell.Icon;
|
|
|
const Topbar = window.AriShell.Topbar;
|
|
|
const SD = window.AriSmartInbox;
|
|
|
|
|
|
/* 분류 원칙 — '일상적인 것도 작업에 넣어야 할까?'에 대한 답 */
|
|
|
const RULES = [
|
|
|
{
|
|
|
icon: "check", tone: "green",
|
|
|
title: "행동이 있으면 → 작업",
|
|
|
desc: "‘비행기 티켓 사기’도 작업이에요. 작업 트리의 ‘개인 › 여행’ 프로젝트로 들어가 다른 작업과 똑같이 보여요.",
|
|
|
},
|
|
|
{
|
|
|
icon: "cal", tone: "blue",
|
|
|
title: "시간이 정해지면 → 일정",
|
|
|
desc: "‘수요일 11시 자전거 수리’는 작업이 아니라 캘린더에 바로 등록돼요.",
|
|
|
},
|
|
|
{
|
|
|
icon: "brain", tone: "violet",
|
|
|
title: "막연하면 → 아이디어",
|
|
|
desc: "행동이 정해지지 않은 생각은 보드에 보관하고, 관련 프로젝트에 연결해둬요.",
|
|
|
},
|
|
|
{
|
|
|
icon: "clock", tone: "coral",
|
|
|
title: "개인은 섹션이 아니라 프로젝트",
|
|
|
desc: "따로 숨기거나 분리하지 않아요. 같은 작업 트리에서 필터로만 구분하고, 배치만 저녁·주말 빈 시간으로 추천해요.",
|
|
|
},
|
|
|
];
|
|
|
|
|
|
const DEST = [
|
|
|
{ label: "작업", n: 4, sub: "개인 3 · 업무 1", tone: "green", href: "작업.html" },
|
|
|
{ label: "일정", n: 2, sub: "캘린더 등록", tone: "blue", href: "일정.html" },
|
|
|
{ label: "아이디어", n: 1, sub: "보드 보관", tone: "violet", href: null },
|
|
|
];
|
|
|
|
|
|
function App() {
|
|
|
return (
|
|
|
<div className="dash">
|
|
|
<Topbar current="sbox" />
|
|
|
|
|
|
<div className="pagehead">
|
|
|
<div>
|
|
|
<div className="ph-eyebrow">
|
|
|
<span>오늘 {SD.todayRouted}건 정리</span>
|
|
|
<span className="sep" />
|
|
|
<span>분류를 고민한 시간 0초</span>
|
|
|
</div>
|
|
|
<h1 className="ph-title">스마트 인박스 <em>일단 적으세요</em></h1>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div className="work">
|
|
|
<div className="board">
|
|
|
{/* 인박스 본체 (sinbox.jsx) */}
|
|
|
<SmartInbox I={I} />
|
|
|
|
|
|
{/* 분류 원칙 */}
|
|
|
<section className="card">
|
|
|
<div className="ch">
|
|
|
<div className="ico"><I d="route" /></div>
|
|
|
<div className="htext"><h3>아리의 분류 원칙</h3><div className="sub">적을 때 고민하지 마세요</div></div>
|
|
|
</div>
|
|
|
<div className="prin-list">
|
|
|
{RULES.map((r, i) => (
|
|
|
<div className="prin" key={i} style={{ "--tone": `var(--${r.tone})` }}>
|
|
|
<span className="prin-ic"><I d={r.icon} /></span>
|
|
|
<span className="prin-body">
|
|
|
<span className="prin-title">{r.title}</span>
|
|
|
<span className="prin-desc">{r.desc}</span>
|
|
|
</span>
|
|
|
</div>
|
|
|
))}
|
|
|
</div>
|
|
|
</section>
|
|
|
|
|
|
{/* 오늘 어디로 갔나 */}
|
|
|
<section className="card">
|
|
|
<div className="ch">
|
|
|
<div className="ico"><I d="arrow" /></div>
|
|
|
<div className="htext"><h3>오늘 어디로 갔나</h3><div className="sub">{SD.todayRouted}건의 행선지</div></div>
|
|
|
</div>
|
|
|
<div className="dest-list">
|
|
|
{DEST.map((d, i) => {
|
|
|
const inner = (
|
|
|
<>
|
|
|
<span className="dest-dot" style={{ background: `var(--${d.tone})` }} />
|
|
|
<span className="dest-label">{d.label}</span>
|
|
|
<span className="dest-sub">{d.sub}</span>
|
|
|
<span className="dest-n">{d.n}</span>
|
|
|
{d.href && <span className="dest-go"><I d="arrow" /></span>}
|
|
|
</>
|
|
|
);
|
|
|
return d.href
|
|
|
? <a className="dest go" key={i} href={d.href}>{inner}</a>
|
|
|
: <div className="dest" key={i}>{inner}</div>;
|
|
|
})}
|
|
|
</div>
|
|
|
<div className="auton-note dim">
|
|
|
<I d="swap" />분류가 마음에 안 들면 칩을 눌러 바꾸세요 — 아리가 다음부터 기억해요.
|
|
|
</div>
|
|
|
</section>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
|
|
|
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
|