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:
84
src/features/space/components/FocusRoomScreen.tsx
Normal file
84
src/features/space/components/FocusRoomScreen.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { useFocusRoomViewModel } from "../hooks/useFocusRoomViewModel";
|
||||
|
||||
export const FocusRoomScreen = () => {
|
||||
const { goal, leaveRoom } = useFocusRoomViewModel();
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden bg-slate-900 text-white">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(90,149,201,0.35),transparent_45%),radial-gradient(circle_at_80%_30%,rgba(150,185,150,0.3),transparent_45%),linear-gradient(160deg,#223040,#17212e_50%,#121a24)]"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex min-h-screen flex-col">
|
||||
<header className="flex items-center justify-between px-5 py-4 sm:px-8 md:px-12">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-bold">
|
||||
V
|
||||
</span>
|
||||
<p className="text-sm font-semibold tracking-tight">VibeRoom</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={leaveRoom}
|
||||
className="rounded-lg border border-white/25 px-3 py-1.5 text-xs font-semibold text-white/85 transition hover:border-white/40 hover:text-white"
|
||||
>
|
||||
나가기
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<main className="relative flex flex-1">
|
||||
<section className="flex flex-1 flex-col px-5 pb-24 pt-6 sm:px-8 md:px-12">
|
||||
<div className="mx-auto mt-6 w-full max-w-2xl rounded-2xl border border-white/20 bg-black/25 px-5 py-4 text-center backdrop-blur-sm">
|
||||
<p className="text-xs uppercase tracking-[0.14em] text-white/60">현재 목표</p>
|
||||
<p className="mt-2 text-lg font-semibold text-white">{goal}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-auto w-full max-w-sm rounded-2xl border border-white/20 bg-black/30 p-4 backdrop-blur-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/60">
|
||||
Distraction Dump
|
||||
</p>
|
||||
<textarea
|
||||
placeholder="떠오른 생각을 잠깐 기록..."
|
||||
className="mt-3 h-24 w-full resize-none rounded-xl border border-white/20 bg-white/10 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-white/40 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<aside className="mr-5 hidden w-80 self-center rounded-2xl border border-white/20 bg-black/30 p-5 backdrop-blur-sm lg:mr-8 lg:block">
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.14em] text-white/60">
|
||||
설정 패널
|
||||
</p>
|
||||
<ul className="mt-4 space-y-3 text-sm text-white/85">
|
||||
<li>배경 선택</li>
|
||||
<li>사운드 선택</li>
|
||||
<li>볼륨 슬라이더</li>
|
||||
<li>타이머(옵션)</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer className="border-t border-white/15 bg-black/30 px-5 py-3 backdrop-blur-sm sm:px-8 md:px-12">
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs sm:text-sm">
|
||||
<button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
|
||||
시작/일시정지
|
||||
</button>
|
||||
<button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
|
||||
타이머 ON/OFF
|
||||
</button>
|
||||
<button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
|
||||
목표 수정
|
||||
</button>
|
||||
<button className="rounded-lg border border-white/25 px-3 py-2 text-white/90 transition hover:border-white/40">
|
||||
전체화면
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user