feat(fsd): 허브·스페이스 중심 UI 목업 구조로 재편
맥락: - 기존 라우트/컴포넌트 구조를 FSD 기준으로 정리하고, /app 허브와 /space 집중 화면 중심의 목업 흐름을 구성하기 위해 변경사항: - App Router 구조를 /landing, /app, /space, /stats, /settings 중심으로 재배치 - entities/session/room/user 더미 데이터와 타입 정의 추가 - features(커스텀 입장, 룸 선택, 체크인, 리액션, 30초 리스타트 등) 단위로 로직 분리 - widgets(허브, 룸 갤러리, 타이머 HUD, 툴 도크 등) 조합형 UI 추가 - shared 공용 UI(Button/Chip/Modal/Toast 등) 및 유틸(cn/useReducedMotion) 정비 - 로그인 후 이동 경로를 /dashboard 에서 /app 으로 변경 - README를 현재 프로젝트 구조/라우트/구현 범위 기준으로 갱신 검증: - npx tsc --noEmit 세션-상태: 허브·스페이스 목업이 FSD 레이어로 동작 가능하도록 정리됨 세션-다음: /space 상단 및 도크의 인원 수 카피를 분위기형 카피로 후속 정리 세션-리스크: build는 네트워크 환경에서 Google Fonts fetch 실패 가능
This commit is contained in:
59
src/widgets/stats-overview/ui/StatsOverviewWidget.tsx
Normal file
59
src/widgets/stats-overview/ui/StatsOverviewWidget.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import Link from 'next/link';
|
||||
import { TODAY_STATS, WEEKLY_STATS } from '@/entities/session';
|
||||
|
||||
const StatSection = ({
|
||||
title,
|
||||
items,
|
||||
}: {
|
||||
title: string;
|
||||
items: Array<{ id: string; label: string; value: string; delta: string }>;
|
||||
}) => {
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-lg font-semibold text-white">{title}</h2>
|
||||
<div className="grid gap-3 sm:grid-cols-3">
|
||||
{items.map((item) => (
|
||||
<article
|
||||
key={item.id}
|
||||
className="rounded-xl border border-white/16 bg-white/8 p-4"
|
||||
>
|
||||
<p className="text-xs text-white/62">{item.label}</p>
|
||||
<p className="mt-2 text-xl font-semibold text-white">{item.value}</p>
|
||||
<p className="mt-1 text-xs text-sky-200">{item.delta}</p>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export const StatsOverviewWidget = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[radial-gradient(circle_at_20%_0%,rgba(56,189,248,0.18),transparent_45%),linear-gradient(170deg,#020617_0%,#0f172a_52%,#111827_100%)] text-white">
|
||||
<div className="mx-auto w-full max-w-6xl px-4 pb-10 pt-6 sm:px-6">
|
||||
<header className="mb-6 flex items-center justify-between rounded-xl border border-white/12 bg-white/6 px-4 py-3">
|
||||
<h1 className="text-xl font-semibold">Stats</h1>
|
||||
<Link
|
||||
href="/app"
|
||||
className="rounded-lg border border-white/24 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
|
||||
>
|
||||
허브로
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<div className="space-y-6">
|
||||
<StatSection title="오늘" items={TODAY_STATS} />
|
||||
<StatSection title="최근 7일" items={WEEKLY_STATS} />
|
||||
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-lg font-semibold text-white">집중 흐름 그래프</h2>
|
||||
<div className="rounded-xl border border-dashed border-white/25 bg-white/5 p-5">
|
||||
<div className="h-52 rounded-lg border border-white/10 bg-[linear-gradient(180deg,rgba(148,163,184,0.08),rgba(148,163,184,0.02))]" />
|
||||
<p className="mt-3 text-xs text-white/60">더미 그래프 플레이스홀더</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user