Frist commit
This commit is contained in:
@@ -0,0 +1,3 @@
|
||||
VITE_APP_NAME=Mail Summary
|
||||
VITE_APP_VERSION=1.0.0
|
||||
VITE_SITE_URL=https://ms.takits.me
|
||||
@@ -0,0 +1,18 @@
|
||||
FROM node:22-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
# Single .env file (no .env.main / .env.develop split).
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Mail Summary</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="메일 요약 · 주간업무보고 도구"
|
||||
/>
|
||||
<meta name="theme-color" content="#D60051" />
|
||||
<meta name="application-name" content="Mail Summary" />
|
||||
<meta name="apple-mobile-web-app-title" content="Mail Summary" />
|
||||
|
||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Mail Summary" />
|
||||
<meta property="og:title" content="Mail Summary" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="메일 요약 · 주간업무보고 도구"
|
||||
/>
|
||||
<meta property="og:locale" content="ko_KR" />
|
||||
<meta property="og:url" content="%VITE_SITE_URL%" />
|
||||
<meta property="og:image" content="%VITE_SITE_URL%/og-image.png" />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="1920" />
|
||||
<meta property="og:image:height" content="1080" />
|
||||
<meta property="og:image:alt" content="Mail Summary" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Large mailbox zip backups (multi-GB).
|
||||
client_max_body_size 20g;
|
||||
client_body_timeout 3600s;
|
||||
|
||||
location /api/ {
|
||||
proxy_pass http://backend:8000/api/;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
# Stream upload body to backend instead of buffering in nginx.
|
||||
proxy_request_buffering off;
|
||||
proxy_read_timeout 3600s;
|
||||
proxy_send_timeout 3600s;
|
||||
proxy_connect_timeout 60s;
|
||||
}
|
||||
|
||||
location = /index.html {
|
||||
add_header Cache-Control "no-cache";
|
||||
}
|
||||
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "mail-summary-frontend",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"vite": "^6.0.3"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 910 KiB |
@@ -0,0 +1,636 @@
|
||||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import { createJob, deleteUpload, getHealth, getJob, getReport, stageMailboxZip } from "./api.js";
|
||||
|
||||
const APP_NAME = import.meta.env.VITE_APP_NAME || "Mail Summary";
|
||||
const APP_VERSION = import.meta.env.VITE_APP_VERSION || "1.0.0";
|
||||
|
||||
const STATUS_LABEL = {
|
||||
pending: "대기 중",
|
||||
extracting: "준비 중",
|
||||
filtering: "메일 스캔 / 기간 필터",
|
||||
analyzing: "LLM 분석",
|
||||
completed: "완료",
|
||||
failed: "실패",
|
||||
};
|
||||
|
||||
const ANALYSIS_STEPS = [
|
||||
{ key: "extracting", label: "1. 준비" },
|
||||
{ key: "filtering", label: "2. 메일 스캔·기간 필터" },
|
||||
{ key: "analyzing", label: "3. LLM 요약·보고 작성" },
|
||||
{ key: "completed", label: "4. 완료" },
|
||||
];
|
||||
|
||||
function stepState(currentStatus, key) {
|
||||
const order = ["pending", "extracting", "filtering", "analyzing", "completed"];
|
||||
if (currentStatus === "failed") {
|
||||
return key === "extracting" || key === "filtering" || key === "analyzing" ? "done" : "wait";
|
||||
}
|
||||
const cur = order.indexOf(currentStatus);
|
||||
const idx = order.indexOf(key);
|
||||
if (cur < 0) return "wait";
|
||||
if (idx < cur) return "done";
|
||||
if (idx === cur) return "active";
|
||||
return "wait";
|
||||
}
|
||||
|
||||
function todayIso() {
|
||||
return new Date().toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
function weekAgoIso() {
|
||||
const d = new Date();
|
||||
d.setDate(d.getDate() - 6);
|
||||
return d.toISOString().slice(0, 10);
|
||||
}
|
||||
|
||||
function scopeLabel(scope) {
|
||||
if (scope === "inbox") return "받은 메일함만";
|
||||
if (scope === "sent") return "보낸 메일함만";
|
||||
return "받은 + 보낸 메일함";
|
||||
}
|
||||
|
||||
function emptySlot() {
|
||||
return { file: null, uploadId: "", progress: 0, status: "idle", error: "" };
|
||||
// status: idle | uploading | done | error
|
||||
}
|
||||
|
||||
function StreamingText({ text, active }) {
|
||||
const [shown, setShown] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!active || !text) {
|
||||
setShown(text || "");
|
||||
return undefined;
|
||||
}
|
||||
setShown("");
|
||||
let i = 0;
|
||||
const step = Math.max(1, Math.ceil(text.length / 80));
|
||||
const timer = setInterval(() => {
|
||||
i = Math.min(text.length, i + step);
|
||||
setShown(text.slice(0, i));
|
||||
if (i >= text.length) clearInterval(timer);
|
||||
}, 28);
|
||||
return () => clearInterval(timer);
|
||||
}, [text, active]);
|
||||
|
||||
return (
|
||||
<p className="stream-text">
|
||||
{shown}
|
||||
{active && shown.length < (text || "").length ? <span className="caret" /> : null}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function formatSideText(groups) {
|
||||
if (!groups?.length) return "(해당 항목 없음)";
|
||||
return groups
|
||||
.map((group) => {
|
||||
const customer = group?.customer || "기타";
|
||||
const items = Array.isArray(group?.items) ? group.items.filter(Boolean) : [];
|
||||
const bullets = items.length ? items.map((item) => `- ${item}`).join("\n") : "- (세부 항목 없음)";
|
||||
return `${customer}\n${bullets}`;
|
||||
})
|
||||
.join("\n\n");
|
||||
}
|
||||
|
||||
function WeeklySide({ title, groups, stream }) {
|
||||
const text = formatSideText(groups);
|
||||
return (
|
||||
<div className="weekly-col">
|
||||
<h3>{title}</h3>
|
||||
<div className="weekly-body">
|
||||
<StreamingText text={text} active={stream} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CopyIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
|
||||
<rect x="9" y="9" width="11" height="11" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.8" />
|
||||
<path
|
||||
d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.8"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function CheckIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
|
||||
<path
|
||||
d="M5 12.5 10 17.5 19 7"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function UploadSlot({ title, slot, onPick, onClear }) {
|
||||
const showBar = slot.status === "uploading" || slot.status === "error";
|
||||
const statusText =
|
||||
slot.status === "uploading"
|
||||
? `업로드 중… ${slot.progress}%`
|
||||
: slot.status === "error"
|
||||
? slot.error || "업로드 실패"
|
||||
: "";
|
||||
|
||||
return (
|
||||
<div className="drop-block">
|
||||
<div className={`drop-row ${slot.file ? "has-file" : ""}`}>
|
||||
<label className={`drop ${slot.file ? "has-file" : ""}`}>
|
||||
<span>{title}</span>
|
||||
<p className="file-name">{slot.file ? slot.file.name : "클릭해서 zip 선택"}</p>
|
||||
<input
|
||||
type="file"
|
||||
accept=".zip,application/zip"
|
||||
disabled={slot.status === "uploading"}
|
||||
onChange={(e) => onPick(e.target.files?.[0] || null)}
|
||||
/>
|
||||
</label>
|
||||
{slot.file && slot.status !== "uploading" ? (
|
||||
<button
|
||||
type="button"
|
||||
className="clear-upload"
|
||||
aria-label={`${title} 업로드 삭제`}
|
||||
onClick={onClear}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
) : null}
|
||||
{showBar ? (
|
||||
<div className="upload-bar" aria-hidden="true">
|
||||
<i style={{ width: `${slot.progress}%` }} />
|
||||
</div>
|
||||
) : null}
|
||||
{showBar && statusText ? (
|
||||
<p className={`upload-status ${slot.status === "error" ? "bad" : ""}`}>{statusText}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [step, setStep] = useState(1);
|
||||
const [unlockedStep, setUnlockedStep] = useState(1);
|
||||
const [health, setHealth] = useState(null);
|
||||
const [inbox, setInbox] = useState(emptySlot);
|
||||
const [sent, setSent] = useState(emptySlot);
|
||||
const [dateFrom, setDateFrom] = useState(weekAgoIso);
|
||||
const [dateTo, setDateTo] = useState(todayIso);
|
||||
const [mailboxScope, setMailboxScope] = useState("both");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [job, setJob] = useState(null);
|
||||
const [report, setReport] = useState(null);
|
||||
const [streamSummary, setStreamSummary] = useState(false);
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
function goToStep(next) {
|
||||
if (next > unlockedStep) return;
|
||||
if (next === 2) setMailboxScope(inferMailboxScope());
|
||||
setStep(next);
|
||||
}
|
||||
|
||||
async function goHome() {
|
||||
// Soft state reset felt different from a real refresh — hard-navigate home instead.
|
||||
const ids = [inbox.uploadId, sent.uploadId].filter(Boolean);
|
||||
if (ids.length) {
|
||||
await Promise.allSettled(ids.map((id) => deleteUpload(id)));
|
||||
}
|
||||
window.location.assign("/");
|
||||
}
|
||||
|
||||
function goBackToConditions() {
|
||||
setJob(null);
|
||||
setReport(null);
|
||||
setError("");
|
||||
setBusy(false);
|
||||
setStreamSummary(false);
|
||||
setCopied(false);
|
||||
setUnlockedStep(2);
|
||||
setMailboxScope(inferMailboxScope());
|
||||
setStep(2);
|
||||
}
|
||||
|
||||
const inboxReady = inbox.status === "done" && Boolean(inbox.uploadId);
|
||||
const sentReady = sent.status === "done" && Boolean(sent.uploadId);
|
||||
const uploading = inbox.status === "uploading" || sent.status === "uploading";
|
||||
const canGoNextFromUpload = (inboxReady || sentReady) && !uploading;
|
||||
|
||||
function inferMailboxScope() {
|
||||
if (inboxReady && sentReady) return "both";
|
||||
if (inboxReady) return "inbox";
|
||||
if (sentReady) return "sent";
|
||||
return "both";
|
||||
}
|
||||
|
||||
function goNextFromUpload() {
|
||||
if (!canGoNextFromUpload) return;
|
||||
setUnlockedStep((prev) => Math.max(prev, 2));
|
||||
setMailboxScope(inferMailboxScope());
|
||||
setStep(2);
|
||||
}
|
||||
|
||||
async function clearSlot(mailbox) {
|
||||
const slot = mailbox === "inbox" ? inbox : sent;
|
||||
const setSlot = mailbox === "inbox" ? setInbox : setSent;
|
||||
if (slot.uploadId) {
|
||||
try {
|
||||
await deleteUpload(slot.uploadId);
|
||||
} catch {
|
||||
// Local reset still proceeds even if server cleanup fails.
|
||||
}
|
||||
}
|
||||
setSlot(emptySlot());
|
||||
setUnlockedStep(1);
|
||||
if (step !== 1) setStep(1);
|
||||
}
|
||||
|
||||
async function handlePick(mailbox, file) {
|
||||
const setSlot = mailbox === "inbox" ? setInbox : setSent;
|
||||
if (!file) {
|
||||
setSlot(emptySlot());
|
||||
return;
|
||||
}
|
||||
if (!file.name.toLowerCase().endsWith(".zip")) {
|
||||
setSlot({
|
||||
file,
|
||||
uploadId: "",
|
||||
progress: 0,
|
||||
status: "error",
|
||||
error: "zip 파일만 업로드할 수 있습니다.",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
setError("");
|
||||
setSlot({ file, uploadId: "", progress: 0, status: "uploading", error: "" });
|
||||
setUnlockedStep(1);
|
||||
if (step !== 1) setStep(1);
|
||||
|
||||
try {
|
||||
const result = await stageMailboxZip(file, mailbox, (pct) => {
|
||||
setSlot((prev) => ({ ...prev, progress: pct, status: "uploading" }));
|
||||
});
|
||||
setSlot({
|
||||
file,
|
||||
uploadId: result.upload_id,
|
||||
progress: 100,
|
||||
status: "done",
|
||||
error: "",
|
||||
});
|
||||
} catch (err) {
|
||||
setSlot({
|
||||
file,
|
||||
uploadId: "",
|
||||
progress: 0,
|
||||
status: "error",
|
||||
error: err.message || "업로드 실패",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getHealth()
|
||||
.then(setHealth)
|
||||
.catch(() => setHealth({ status: "error", database: "down", llm: { ok: false } }));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!job?.id) return undefined;
|
||||
if (job.status === "completed" || job.status === "failed") return undefined;
|
||||
|
||||
let cancelled = false;
|
||||
const tick = async () => {
|
||||
try {
|
||||
const payload = await getJob(job.id);
|
||||
if (cancelled) return;
|
||||
setJob(payload.job);
|
||||
if (payload.job.status === "failed") {
|
||||
setError(payload.job.error_message || "분석에 실패했습니다.");
|
||||
}
|
||||
} catch (err) {
|
||||
if (!cancelled) setError(err.message || "상태 조회 실패");
|
||||
}
|
||||
};
|
||||
|
||||
tick();
|
||||
const timer = setInterval(tick, 1500);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, [job?.id, job?.status]);
|
||||
|
||||
// Fetch report in a separate effect so polling cleanup can't drop the result
|
||||
// when status flips to completed mid-request.
|
||||
useEffect(() => {
|
||||
if (!job?.id || job.status !== "completed" || report) return undefined;
|
||||
|
||||
let cancelled = false;
|
||||
getReport(job.id)
|
||||
.then((payload) => {
|
||||
if (cancelled) return;
|
||||
setReport(payload.report);
|
||||
setStreamSummary(true);
|
||||
})
|
||||
.catch((err) => {
|
||||
if (!cancelled) setError(err.message || "결과 조회 실패");
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [job?.id, job?.status, report]);
|
||||
|
||||
const canAnalyze = useMemo(() => {
|
||||
if (!dateFrom || !dateTo || dateFrom > dateTo) return false;
|
||||
if (mailboxScope === "inbox") return inboxReady;
|
||||
if (mailboxScope === "sent") return sentReady;
|
||||
return inboxReady && sentReady;
|
||||
}, [dateFrom, dateTo, mailboxScope, inboxReady, sentReady]);
|
||||
|
||||
async function handleStart() {
|
||||
setError("");
|
||||
setBusy(true);
|
||||
setReport(null);
|
||||
setStreamSummary(false);
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append("date_from", dateFrom);
|
||||
form.append("date_to", dateTo);
|
||||
form.append("mailbox_scope", mailboxScope);
|
||||
if (inbox.uploadId) form.append("inbox_upload_id", inbox.uploadId);
|
||||
if (sent.uploadId) form.append("sent_upload_id", sent.uploadId);
|
||||
|
||||
const created = await createJob(form);
|
||||
setJob(created.job);
|
||||
setUnlockedStep(3);
|
||||
setStep(3);
|
||||
} catch (err) {
|
||||
setError(err.message || "분석 요청에 실패했습니다.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function copyReport() {
|
||||
const text = report?.report_markdown?.trim();
|
||||
if (!text) return;
|
||||
try {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopied(true);
|
||||
window.setTimeout(() => setCopied(false), 2000);
|
||||
} catch {
|
||||
setError("클립보드 복사에 실패했습니다.");
|
||||
}
|
||||
}
|
||||
|
||||
const data = report?.report || {};
|
||||
const running = job && !["completed", "failed"].includes(job.status);
|
||||
|
||||
return (
|
||||
<div className="shell">
|
||||
<header className="topbar">
|
||||
<button type="button" className="brand-mark brand-link" onClick={goHome}>
|
||||
<strong>{APP_NAME}</strong>
|
||||
</button>
|
||||
<div className="live">
|
||||
<span className={`live-item ${health?.database === "up" ? "ok" : "bad"}`}>
|
||||
<i />
|
||||
DB
|
||||
</span>
|
||||
<span className={`live-item ${health?.llm?.ok ? "ok" : "bad"}`}>
|
||||
<i />
|
||||
LLM(on-prem · 30B)
|
||||
</span>
|
||||
<span className="live-item">v{APP_VERSION}</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="hero">
|
||||
<h1>
|
||||
한 주의 메일을 <em>업무보고로</em>
|
||||
</h1>
|
||||
<p className="hero-lead">
|
||||
메일을 외부로 전송하지 않고, 로컬에서 분석해 주간 업무를 자동으로 정리합니다.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div className="layout">
|
||||
<nav className="steps" aria-label="진행 단계">
|
||||
<button type="button" className={step === 1 ? "active" : ""} onClick={() => goToStep(1)}>
|
||||
01 업로드
|
||||
<small>mailbox zip</small>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={step === 2 ? "active" : ""}
|
||||
onClick={() => goToStep(2)}
|
||||
disabled={unlockedStep < 2}
|
||||
>
|
||||
02 조건
|
||||
<small>range & scope</small>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={step === 3 ? "active" : ""}
|
||||
onClick={() => goToStep(3)}
|
||||
disabled={unlockedStep < 3 || !job}
|
||||
>
|
||||
03 결과
|
||||
<small>weekly report</small>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div className="main">
|
||||
{error ? <div className="error">{error}</div> : null}
|
||||
|
||||
{step === 1 && (
|
||||
<section className="stage" key="step-1">
|
||||
<div className="stage-head">
|
||||
<h2>메일 백업 업로드</h2>
|
||||
<p>받은함 / 보낸함 각각 .zip 파일을 올려주세요. 업로드가 끝난 뒤에 다음 단계로 갈 수 있습니다.</p>
|
||||
</div>
|
||||
<div className="drop-grid">
|
||||
<UploadSlot
|
||||
title="받은 메일함"
|
||||
slot={inbox}
|
||||
onPick={(file) => handlePick("inbox", file)}
|
||||
onClear={() => clearSlot("inbox")}
|
||||
/>
|
||||
<UploadSlot
|
||||
title="보낸 메일함"
|
||||
slot={sent}
|
||||
onPick={(file) => handlePick("sent", file)}
|
||||
onClear={() => clearSlot("sent")}
|
||||
/>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<button
|
||||
type="button"
|
||||
className="accent"
|
||||
onClick={goNextFromUpload}
|
||||
disabled={!canGoNextFromUpload}
|
||||
>
|
||||
다음 단계
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{step === 2 && (
|
||||
<section className="stage" key="step-2">
|
||||
<div className="stage-head">
|
||||
<h2>분석 조건</h2>
|
||||
<p>기간과 메일함 범위를 정한 뒤 분석을 시작합니다.</p>
|
||||
</div>
|
||||
<div className="row">
|
||||
<label className="field">
|
||||
<span>시작일</span>
|
||||
<input type="date" value={dateFrom} onChange={(e) => setDateFrom(e.target.value)} />
|
||||
</label>
|
||||
<label className="field">
|
||||
<span>종료일</span>
|
||||
<input type="date" value={dateTo} onChange={(e) => setDateTo(e.target.value)} />
|
||||
</label>
|
||||
</div>
|
||||
<label className="field">
|
||||
<span>분석 범위</span>
|
||||
<select value={mailboxScope} onChange={(e) => setMailboxScope(e.target.value)}>
|
||||
<option value="both" disabled={!inboxReady || !sentReady}>
|
||||
받은 + 보낸 (권장)
|
||||
</option>
|
||||
<option value="inbox" disabled={!inboxReady}>
|
||||
받은 메일함만
|
||||
</option>
|
||||
<option value="sent" disabled={!sentReady}>
|
||||
보낸 메일함만
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<div className="actions">
|
||||
<button type="button" onClick={() => setStep(1)}>
|
||||
이전
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="accent"
|
||||
disabled={!canAnalyze || busy}
|
||||
onClick={handleStart}
|
||||
>
|
||||
{busy ? "작업 생성 중…" : "분석 시작"}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{step === 3 && job && (
|
||||
<section className="stage" key="step-3">
|
||||
<div className="stage-head">
|
||||
<h2>분석 결과</h2>
|
||||
<div className="meta-row">
|
||||
<span>{scopeLabel(job.mailbox_scope)}</span>
|
||||
<span>
|
||||
{job.date_from} ~ {job.date_to}
|
||||
</span>
|
||||
<span>
|
||||
받은 {job.filtered_inbox_count ?? 0} / 보낸 {job.filtered_sent_count ?? 0}
|
||||
</span>
|
||||
<span>{STATUS_LABEL[job.status] || job.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{running ? (
|
||||
<div className="progress analysis-progress">
|
||||
<div className="analysis-progress-head">
|
||||
<strong>
|
||||
<span className="dot" />
|
||||
job #{job.id} 분석 진행 중
|
||||
</strong>
|
||||
<span>{Math.max(0, Math.min(100, job.progress_pct || 0))}%</span>
|
||||
</div>
|
||||
<div className="upload-bar analysis-bar" aria-hidden="true">
|
||||
<i style={{ width: `${Math.max(2, Math.min(100, job.progress_pct || 0))}%` }} />
|
||||
</div>
|
||||
<p className="progress-label">{job.progress_label || STATUS_LABEL[job.status] || job.status}</p>
|
||||
<p className="progress-detail">
|
||||
{job.progress_detail ||
|
||||
"대용량 메일 zip을 검사하는 중입니다. 완료될 때까지 이 화면에 머물러 주세요."}
|
||||
</p>
|
||||
<ul className="phase-list">
|
||||
{ANALYSIS_STEPS.map((item) => {
|
||||
const state = stepState(job.status, item.key);
|
||||
return (
|
||||
<li key={item.key} className={state}>
|
||||
{item.label}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
<p className="progress-counts">
|
||||
검사 기준 메일 수 · 받은 {job.inbox_count ?? 0} / 보낸 {job.sent_count ?? 0}
|
||||
{" · "}
|
||||
기간 매칭 · 받은 {job.filtered_inbox_count ?? 0} / 보낸 {job.filtered_sent_count ?? 0}
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{report ? (
|
||||
<>
|
||||
<div className="weekly-panel">
|
||||
<div className="weekly-panel-head">
|
||||
<h3>주간 업무보고</h3>
|
||||
<button
|
||||
type="button"
|
||||
className={`icon-copy ${copied ? "copied" : ""}`}
|
||||
onClick={copyReport}
|
||||
disabled={!report.report_markdown}
|
||||
aria-label={copied ? "복사됨" : "보고서 복사"}
|
||||
title={copied ? "복사됨" : "복사"}
|
||||
>
|
||||
{copied ? <CheckIcon /> : <CopyIcon />}
|
||||
</button>
|
||||
</div>
|
||||
<div className="weekly-table">
|
||||
<WeeklySide title="금주" groups={data.this_week} stream={streamSummary} />
|
||||
<WeeklySide title="차주" groups={data.next_week} stream={streamSummary} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<button type="button" className="accent" onClick={goBackToConditions}>
|
||||
조건으로 돌아가기
|
||||
</button>
|
||||
<button type="button" className="primary" onClick={goHome}>
|
||||
새 분석
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
!running && (
|
||||
<div className="actions">
|
||||
<button type="button" className="accent" onClick={goBackToConditions}>
|
||||
조건으로 돌아가기
|
||||
</button>
|
||||
<button type="button" className="primary" onClick={goHome}>
|
||||
새 분석
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
const API_BASE = import.meta.env.VITE_API_BASE ?? "";
|
||||
|
||||
async function request(path, options = {}) {
|
||||
let response;
|
||||
try {
|
||||
response = await fetch(`${API_BASE}${path}`, options);
|
||||
} catch {
|
||||
throw new Error("서버에 연결하지 못했습니다. 잠시 후 다시 시도해 주세요.");
|
||||
}
|
||||
|
||||
const text = await response.text();
|
||||
let data = {};
|
||||
if (text) {
|
||||
try {
|
||||
data = JSON.parse(text);
|
||||
} catch {
|
||||
data = { detail: text.slice(0, 200) };
|
||||
}
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 413) {
|
||||
throw new Error("파일이 너무 큽니다. 업로드 제한을 확인해 주세요.");
|
||||
}
|
||||
const detail = data.detail || response.statusText || "request_failed";
|
||||
throw new Error(typeof detail === "string" ? detail : JSON.stringify(detail));
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
function sleep(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
export function getHealth() {
|
||||
return request("/api/health");
|
||||
}
|
||||
|
||||
export function getJob(jobId) {
|
||||
return request(`/api/jobs/${jobId}`);
|
||||
}
|
||||
|
||||
export function getReport(jobId) {
|
||||
return request(`/api/jobs/${jobId}/report`);
|
||||
}
|
||||
|
||||
export function createJob(formData) {
|
||||
return request("/api/jobs", {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
});
|
||||
}
|
||||
|
||||
/** Try to stage a file that already exists on the server incoming mount. */
|
||||
export async function resolveUpload(mailbox, filename, sizeBytes) {
|
||||
const form = new FormData();
|
||||
form.append("mailbox", mailbox);
|
||||
form.append("filename", filename);
|
||||
form.append("size_bytes", String(sizeBytes));
|
||||
const response = await fetch(`${API_BASE}/api/uploads/resolve`, {
|
||||
method: "POST",
|
||||
body: form,
|
||||
});
|
||||
if (response.status === 404) return null;
|
||||
const text = await response.text();
|
||||
const data = text ? JSON.parse(text) : {};
|
||||
if (!response.ok) {
|
||||
throw new Error(data.detail || "resolve_failed");
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
/** Upload zip with progress via XHR. */
|
||||
export function uploadZip(file, mailbox, onProgress) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
const form = new FormData();
|
||||
form.append("mailbox", mailbox);
|
||||
form.append("file", file);
|
||||
|
||||
xhr.upload.onprogress = (event) => {
|
||||
if (!event.lengthComputable) return;
|
||||
const pct = Math.max(1, Math.min(99, Math.round((event.loaded / event.total) * 100)));
|
||||
onProgress?.(pct);
|
||||
};
|
||||
|
||||
xhr.onload = () => {
|
||||
let data = {};
|
||||
try {
|
||||
data = JSON.parse(xhr.responseText || "{}");
|
||||
} catch {
|
||||
data = {};
|
||||
}
|
||||
if (xhr.status >= 200 && xhr.status < 300) {
|
||||
onProgress?.(100);
|
||||
resolve(data);
|
||||
return;
|
||||
}
|
||||
if (xhr.status === 413) {
|
||||
reject(new Error("파일이 너무 큽니다. 업로드 제한을 확인해 주세요."));
|
||||
return;
|
||||
}
|
||||
reject(new Error(data.detail || `upload_failed (${xhr.status})`));
|
||||
};
|
||||
|
||||
xhr.onerror = () => reject(new Error("업로드 중 네트워크 오류가 발생했습니다."));
|
||||
xhr.open("POST", `${API_BASE}/api/uploads`);
|
||||
xhr.send(form);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Stage a mailbox zip:
|
||||
* 1) resolve against server incoming mount (no re-upload)
|
||||
* 2) otherwise upload with real progress
|
||||
*/
|
||||
export async function stageMailboxZip(file, mailbox, onProgress) {
|
||||
onProgress?.(2);
|
||||
const resolved = await resolveUpload(mailbox, file.name, file.size);
|
||||
if (resolved) {
|
||||
for (const pct of [25, 55, 80, 100]) {
|
||||
onProgress?.(pct);
|
||||
await sleep(70);
|
||||
}
|
||||
return resolved;
|
||||
}
|
||||
return uploadZip(file, mailbox, onProgress);
|
||||
}
|
||||
|
||||
export async function deleteUpload(uploadId) {
|
||||
if (!uploadId) return { ok: true };
|
||||
return request(`/api/uploads/${uploadId}`, { method: "DELETE" });
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App.jsx";
|
||||
import "./styles.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,797 @@
|
||||
:root {
|
||||
--ink: #121417;
|
||||
--muted: #5c6570;
|
||||
--line: #cfd6de;
|
||||
--line-strong: #121417;
|
||||
--surface: rgba(255, 255, 255, 0.58);
|
||||
--accent: #d60051;
|
||||
--accent-ink: #ffffff;
|
||||
--highlight: #d6ff3f;
|
||||
--signal: #d60051;
|
||||
--ok: #1f8a4c;
|
||||
--danger: #c0392b;
|
||||
--radius: 2px;
|
||||
--font-display: "Syne", "IBM Plex Sans KR", sans-serif;
|
||||
--font-body: "IBM Plex Sans KR", "Apple SD Gothic Neo", sans-serif;
|
||||
color: var(--ink);
|
||||
font-family: var(--font-body);
|
||||
background-color: #e7ebf0;
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 50% at 8% -12%, rgba(214, 0, 81, 0.16), transparent 55%),
|
||||
radial-gradient(ellipse 55% 40% at 100% 0%, rgba(214, 0, 81, 0.08), transparent 50%),
|
||||
linear-gradient(165deg, #f7f5f6 0%, #ebe7ea 48%, #e4e0e4 100%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.035;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.shell {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(1080px, calc(100% - 2rem));
|
||||
margin: 0 auto;
|
||||
padding: 1.75rem 0 4.5rem;
|
||||
animation: rise 0.55s ease both;
|
||||
}
|
||||
|
||||
@keyframes rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(14px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes stepIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseDot {
|
||||
0%,
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.35);
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes barFlow {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 200% 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2.25rem;
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.55rem;
|
||||
}
|
||||
|
||||
button.brand-link {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
button.brand-link:hover {
|
||||
transform: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.brand-mark strong {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.55rem, 3.4vw, 2.15rem);
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.04em;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.live {
|
||||
display: flex;
|
||||
gap: 0.85rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.live-item {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 500;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.live-item i {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--line);
|
||||
}
|
||||
|
||||
.live-item.ok i {
|
||||
background: var(--ok);
|
||||
}
|
||||
|
||||
.live-item.bad i {
|
||||
background: var(--danger);
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.75rem;
|
||||
border-bottom: 2px solid var(--muted);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-weight: 800;
|
||||
font-size: clamp(2.4rem, 6vw, 4.1rem);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.045em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.hero h1 em {
|
||||
font-style: normal;
|
||||
background: linear-gradient(120deg, transparent 0%, var(--highlight) 0%);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 0.35em;
|
||||
background-position: 0 88%;
|
||||
}
|
||||
|
||||
.hero-lead {
|
||||
margin: 0.75rem 0 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.layout {
|
||||
display: grid;
|
||||
grid-template-columns: 200px 1fr;
|
||||
gap: 2rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.steps {
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
position: sticky;
|
||||
top: 1.25rem;
|
||||
}
|
||||
|
||||
.steps button {
|
||||
appearance: none;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
text-align: left;
|
||||
padding: 0.7rem 0.2rem;
|
||||
cursor: pointer;
|
||||
color: var(--muted);
|
||||
border-left: 2px solid transparent;
|
||||
padding-left: 0.85rem;
|
||||
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.steps button:hover:not(:disabled) {
|
||||
color: var(--ink);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.steps button.active {
|
||||
color: var(--ink);
|
||||
border-left-color: var(--signal);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.steps button:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.steps button small {
|
||||
display: block;
|
||||
margin-top: 0.15rem;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.stage {
|
||||
animation: stepIn 0.35s ease both;
|
||||
}
|
||||
|
||||
.stage-head {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.stage-head h2 {
|
||||
margin: 0 0 0.35rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.55rem;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.stage-head p,
|
||||
.hint,
|
||||
.meta,
|
||||
.file-name {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.drop-grid {
|
||||
display: grid;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.drop {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 1.15rem 1.2rem;
|
||||
border: 1.5px dashed var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(8px);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.drop:hover,
|
||||
.drop:focus-within {
|
||||
border-color: rgba(214, 0, 81, 0.55);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.drop.has-file {
|
||||
border-style: solid;
|
||||
border-color: rgba(214, 0, 81, 0.45);
|
||||
background: rgba(214, 0, 81, 0.08);
|
||||
}
|
||||
|
||||
.drop.has-file:hover,
|
||||
.drop.has-file:focus-within {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.drop-block {
|
||||
display: grid;
|
||||
gap: 0.55rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drop-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 2.6rem;
|
||||
grid-template-rows: auto auto auto;
|
||||
column-gap: 0.55rem;
|
||||
row-gap: 0.55rem;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drop-row .drop {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* X 없을 때 메일함이 전체 너비(메일함+X와 동일)를 쓰도록 */
|
||||
.drop-row:not(:has(.clear-upload)) .drop {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.drop-row .clear-upload {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.drop-row .upload-bar {
|
||||
grid-column: 1;
|
||||
grid-row: 2;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.drop-row .upload-status {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
margin: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.drop-row:not(:has(.clear-upload)) .upload-bar,
|
||||
.drop-row:not(:has(.clear-upload)) .upload-status {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.drop .file-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.clear-upload {
|
||||
align-self: stretch;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1.5px solid var(--ink);
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
color: var(--ink);
|
||||
font-size: 1.35rem;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.clear-upload:hover:not(:disabled) {
|
||||
border-color: var(--ink);
|
||||
color: var(--ink);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.stream-text {
|
||||
margin: 0;
|
||||
min-height: 1.5em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.stream-text .caret {
|
||||
display: inline-block;
|
||||
width: 0.55ch;
|
||||
height: 1em;
|
||||
margin-left: 0.1ch;
|
||||
background: var(--accent);
|
||||
vertical-align: text-bottom;
|
||||
animation: pulseDot 0.9s steps(1) infinite;
|
||||
}
|
||||
|
||||
.upload-bar {
|
||||
height: 0.45rem;
|
||||
border: 1px solid rgba(214, 0, 81, 0.22);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-bar > i {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
background-color: var(--accent);
|
||||
transition: width 0.18s ease;
|
||||
}
|
||||
|
||||
.upload-bar > i::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(255, 255, 255, 0.45) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: barFlow 1.4s linear infinite;
|
||||
}
|
||||
|
||||
.upload-status {
|
||||
font-size: 0.82rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.upload-status.ok {
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.upload-status.bad {
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.drop span {
|
||||
display: block;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.drop input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 0.4rem;
|
||||
margin: 0 0 0.85rem;
|
||||
}
|
||||
|
||||
.field > span {
|
||||
font-size: 0.86rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.field input[type="date"],
|
||||
.field select {
|
||||
width: 100%;
|
||||
padding: 0.8rem 0.85rem;
|
||||
border: 1.5px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
color: var(--ink);
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.field input[type="date"]:focus,
|
||||
.field select:focus {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 1px;
|
||||
border-color: var(--ink);
|
||||
}
|
||||
|
||||
.row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0.85rem;
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.row .field {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.65rem;
|
||||
margin-top: 1.4rem;
|
||||
}
|
||||
|
||||
button {
|
||||
border: 1.5px solid var(--ink);
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
padding: 0.78rem 1.05rem;
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--ink);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
button.primary:hover:not(:disabled) {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
button.accent {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent-ink);
|
||||
}
|
||||
|
||||
button.accent:hover:not(:disabled) {
|
||||
background: #b80046;
|
||||
border-color: #b80046;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0 0 1rem;
|
||||
padding: 0.85rem 1rem;
|
||||
border-left: 3px solid var(--danger);
|
||||
background: rgba(192, 57, 43, 0.08);
|
||||
color: var(--danger);
|
||||
animation: stepIn 0.25s ease both;
|
||||
}
|
||||
|
||||
.progress {
|
||||
display: grid;
|
||||
gap: 0.45rem;
|
||||
margin: 1rem 0 1.4rem;
|
||||
padding: 1.1rem 1.15rem;
|
||||
border: 1.5px solid var(--line);
|
||||
border-radius: var(--radius);
|
||||
background: rgba(231, 235, 240, 0.72);
|
||||
backdrop-filter: blur(8px);
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.progress strong {
|
||||
font-family: var(--font-display);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.progress .dot {
|
||||
display: inline-block;
|
||||
width: 0.55rem;
|
||||
height: 0.55rem;
|
||||
margin-right: 0.45rem;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
animation: pulseDot 1.2s ease infinite;
|
||||
}
|
||||
|
||||
.analysis-progress {
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.analysis-progress-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.analysis-bar {
|
||||
border-color: var(--line);
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.progress-label {
|
||||
margin: 0;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.progress-detail,
|
||||
.progress-counts {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.phase-list {
|
||||
list-style: none;
|
||||
margin: 0.2rem 0 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.phase-list li {
|
||||
position: relative;
|
||||
padding-left: 1.1rem;
|
||||
color: rgba(92, 101, 112, 0.55);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.phase-list li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.45rem;
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: 50%;
|
||||
background: rgba(92, 101, 112, 0.28);
|
||||
}
|
||||
|
||||
.phase-list li.active {
|
||||
color: var(--ink);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phase-list li.active::before {
|
||||
background: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(214, 0, 81, 0.18);
|
||||
}
|
||||
|
||||
.phase-list li.done {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.phase-list li.done::before {
|
||||
background: var(--ok);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem 1rem;
|
||||
margin: 0.35rem 0 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.scope-note {
|
||||
margin: 0 0 1.25rem;
|
||||
padding: 0.9rem 0;
|
||||
border-top: 1px solid var(--line);
|
||||
border-bottom: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.weekly-panel {
|
||||
margin: 0 0 1.5rem;
|
||||
}
|
||||
|
||||
.weekly-panel-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.65rem;
|
||||
}
|
||||
|
||||
.weekly-panel-head h3 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.icon-copy {
|
||||
width: 2.2rem;
|
||||
height: 2.2rem;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.icon-copy:hover:not(:disabled) {
|
||||
transform: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.icon-copy.copied {
|
||||
color: var(--ok);
|
||||
}
|
||||
|
||||
.weekly-table {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
border-top: 1.5px solid var(--ink);
|
||||
border-bottom: 1.5px solid var(--ink);
|
||||
}
|
||||
|
||||
.weekly-col {
|
||||
min-width: 0;
|
||||
padding: 1rem 1.1rem 1.25rem;
|
||||
}
|
||||
|
||||
.weekly-col + .weekly-col {
|
||||
border-left: 1.5px solid var(--line);
|
||||
}
|
||||
|
||||
.weekly-col h3 {
|
||||
margin: 0 0 0.85rem;
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.05rem;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.weekly-body {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.weekly-body .stream-text {
|
||||
font-weight: 500;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 860px) {
|
||||
.hero,
|
||||
.layout,
|
||||
.row,
|
||||
.weekly-table {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.weekly-col + .weekly-col {
|
||||
border-left: 0;
|
||||
border-top: 1.5px solid var(--line);
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.steps {
|
||||
position: static;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 1fr;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 0;
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.steps button {
|
||||
border-left: 0;
|
||||
border-bottom: 2px solid transparent;
|
||||
padding: 0.65rem 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.steps button.active {
|
||||
border-bottom-color: var(--signal);
|
||||
}
|
||||
|
||||
.steps button small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { defineConfig } from "vite";
|
||||
import react from "@vitejs/plugin-react";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
host: true,
|
||||
port: 5173,
|
||||
strictPort: true,
|
||||
proxy: {
|
||||
"/api": {
|
||||
target: "http://127.0.0.1:8000",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user