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:
1
src/widgets/quick-sheet/index.ts
Normal file
1
src/widgets/quick-sheet/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export * from './ui/QuickSheetWidget';
|
||||
57
src/widgets/quick-sheet/ui/QuickSheetWidget.tsx
Normal file
57
src/widgets/quick-sheet/ui/QuickSheetWidget.tsx
Normal file
@@ -0,0 +1,57 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
interface QuickSheetWidgetProps {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const QuickSheetWidget = ({ onClose }: QuickSheetWidgetProps) => {
|
||||
const [immersionMode, setImmersionMode] = useState(false);
|
||||
const [minimalNotice, setMinimalNotice] = useState(false);
|
||||
|
||||
return (
|
||||
<aside className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,320px)] animate-[sheet-in_220ms_ease-out] motion-reduce:animate-none">
|
||||
<div className="flex h-full flex-col overflow-hidden rounded-2xl border border-white/20 bg-slate-950/72 shadow-[0_18px_60px_rgba(2,6,23,0.52)] backdrop-blur-xl">
|
||||
<header className="flex items-center justify-between border-b border-white/12 px-4 py-4">
|
||||
<h2 className="text-base font-semibold text-white">Quick</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded-lg border border-white/20 px-2 py-1 text-xs text-white/75 transition hover:bg-white/12 hover:text-white"
|
||||
>
|
||||
X
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="space-y-3 px-4 py-4">
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={immersionMode}
|
||||
onClick={() => setImmersionMode((current) => !current)}
|
||||
className="flex w-full items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2 text-sm text-white/86"
|
||||
>
|
||||
<span>몰입 모드</span>
|
||||
<span>{immersionMode ? 'ON' : 'OFF'}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={minimalNotice}
|
||||
onClick={() => setMinimalNotice((current) => !current)}
|
||||
className="flex w-full items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2 text-sm text-white/86"
|
||||
>
|
||||
<span>알림 최소화</span>
|
||||
<span>{minimalNotice ? 'ON' : 'OFF'}</span>
|
||||
</button>
|
||||
|
||||
<p className="text-xs text-white/58">
|
||||
빠른 옵션 UI 목업입니다. 실제 동작은 연결하지 않았습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user