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:
106
src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
Normal file
106
src/widgets/space-shell/ui/SpaceSkeletonWidget.tsx
Normal file
@@ -0,0 +1,106 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { getRoomBackgroundStyle, getRoomById, ROOM_THEMES } from '@/entities/room';
|
||||
import { SOUND_PRESETS } from '@/entities/session';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { SpaceTimerHudWidget } from '@/widgets/space-timer-hud';
|
||||
import { SpaceToolsDockWidget } from '@/widgets/space-tools-dock';
|
||||
|
||||
export const SpaceSkeletonWidget = () => {
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const roomId = searchParams.get('room') ?? ROOM_THEMES[0].id;
|
||||
const goal = searchParams.get('goal') ?? '오늘은 한 조각만 집중해요';
|
||||
const timerLabel = searchParams.get('timer') ?? '25/5';
|
||||
const soundFromQuery = searchParams.get('sound');
|
||||
|
||||
const room = useMemo(() => getRoomById(roomId) ?? ROOM_THEMES[0], [roomId]);
|
||||
|
||||
const defaultSoundId =
|
||||
SOUND_PRESETS.find((preset) => preset.id === soundFromQuery)?.id ??
|
||||
SOUND_PRESETS[0].id;
|
||||
|
||||
const [selectedSoundId, setSelectedSoundId] = useState(defaultSoundId);
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedSoundId(defaultSoundId);
|
||||
}, [defaultSoundId]);
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-x-hidden overflow-y-hidden text-white">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 w-full"
|
||||
style={getRoomBackgroundStyle(room)}
|
||||
/>
|
||||
<div aria-hidden className="absolute inset-0 w-full bg-slate-950/62" />
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 w-full opacity-35"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.045) 0 1px, transparent 1px 2px)",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex min-h-screen flex-col pr-14">
|
||||
<header className="flex items-center justify-between border-b border-white/12 bg-slate-950/35 px-4 py-3 backdrop-blur-lg sm:px-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/30 bg-white/10 text-xs font-semibold">
|
||||
V
|
||||
</span>
|
||||
<p className="text-sm font-semibold tracking-tight">VibeRoom</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/app"
|
||||
className="rounded-lg border border-white/30 px-3 py-1.5 text-xs text-white/85 transition hover:bg-white/10"
|
||||
>
|
||||
허브로 돌아가기
|
||||
</Link>
|
||||
</header>
|
||||
|
||||
<main className="flex-1 px-4 pt-6 sm:px-6">
|
||||
<div className="mx-auto w-full max-w-5xl">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs uppercase tracking-[0.14em] text-white/65">Current Room</p>
|
||||
<p className="text-lg font-semibold text-white">{room.name}</p>
|
||||
<p className="text-xs text-white/70">현재 {room.activeMembers}명 함께 집중 중</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="border-t border-white/12 bg-slate-950/42 px-4 py-3 backdrop-blur-md sm:px-6">
|
||||
<div className="mx-auto flex w-full max-w-5xl flex-wrap gap-2">
|
||||
{SOUND_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedSoundId(preset.id)}
|
||||
className={cn(
|
||||
'rounded-full border px-3 py-1.5 text-xs transition-colors',
|
||||
selectedSoundId === preset.id
|
||||
? 'border-sky-200/75 bg-sky-300/25 text-sky-50'
|
||||
: 'border-white/24 bg-white/8 text-white/82 hover:bg-white/14',
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<SpaceTimerHudWidget timerLabel={timerLabel} goal={goal} />
|
||||
|
||||
<SpaceToolsDockWidget
|
||||
roomName={room.name}
|
||||
activeMembers={room.activeMembers}
|
||||
presence={room.presence}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user