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:
53
README.md
53
README.md
@@ -1,36 +1,49 @@
|
|||||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
# VibeRoom Web
|
||||||
|
|
||||||
## Getting Started
|
Next.js(App Router) + TypeScript + TailwindCSS 기반 VibeRoom 프론트엔드입니다.
|
||||||
|
|
||||||
First, run the development server:
|
## 실행 방법
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
npm install
|
||||||
npm run dev
|
npm run dev
|
||||||
# or
|
|
||||||
yarn dev
|
|
||||||
# or
|
|
||||||
pnpm dev
|
|
||||||
# or
|
|
||||||
bun dev
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
브라우저에서 `http://localhost:3000` 접속
|
||||||
|
|
||||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
## 주요 라우트
|
||||||
|
|
||||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
- `/` : Landing 페이지 (`src/app/(landing)/page.tsx`)
|
||||||
|
- `/app` : 가상공간 입장 허브
|
||||||
|
- `/space` : 집중공간 스켈레톤
|
||||||
|
- `/stats` : 집중 통계 목업
|
||||||
|
- `/settings` : 설정 목업
|
||||||
|
- `/login` : 로그인
|
||||||
|
|
||||||
## Learn More
|
## 구조
|
||||||
|
|
||||||
To learn more about Next.js, take a look at the following resources:
|
FSD 스타일로 `src/` 하위 레이어를 사용합니다.
|
||||||
|
|
||||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
- `src/entities` : room/user/session 타입 + 더미 데이터
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
- `src/features` : room-select/check-in/reactions/custom-entry-modal/profile-menu/distraction-dump
|
||||||
|
- `src/widgets` : 페이지 섹션 단위 UI (TopBar, StartRitual, RoomsGallery, SpaceShell 등)
|
||||||
|
- `src/shared` : 공용 UI, 유틸, 설정
|
||||||
|
- `src/app` : App Router 페이지 조합
|
||||||
|
|
||||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
## 구현 범위
|
||||||
|
|
||||||
## Deploy on Vercel
|
이번 변경은 **UI 목업** 중심입니다.
|
||||||
|
|
||||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
- 타이머 카운트다운/오디오 재생/실시간/DB 저장/API 호출 미구현
|
||||||
|
- 선택 하이라이트, 패널 토글, 모달 탭, 드롭다운, 라우팅, 토스트만 구현
|
||||||
|
|
||||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
## 문서(작업 재개용)
|
||||||
|
|
||||||
|
세션이 끊겨도 같은 품질로 이어서 작업하려면 아래 문서를 먼저 확인합니다.
|
||||||
|
|
||||||
|
- `docs/README.md`
|
||||||
|
- `docs/00_project_brief.md`
|
||||||
|
- `docs/01_ui_guidelines.md`
|
||||||
|
- `docs/02_arch_fsd_rules.md`
|
||||||
|
- `docs/03_routes_map.md`
|
||||||
|
- `docs/90_current_state.md`
|
||||||
|
|||||||
5
src/app/(app)/app/page.tsx
Normal file
5
src/app/(app)/app/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { AppHubWidget } from '@/widgets/app-hub';
|
||||||
|
|
||||||
|
export default function AppPage() {
|
||||||
|
return <AppHubWidget />;
|
||||||
|
}
|
||||||
@@ -1,106 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { UserProfileSimple, useUserProfile } from "@/features/user";
|
|
||||||
import { useAuthStore } from "@/store/useAuthStore";
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
export default function DashboardPage() {
|
|
||||||
const router = useRouter();
|
|
||||||
const { logout, isAuthenticated } = useAuthStore();
|
|
||||||
const { user, isLoading } = useUserProfile();
|
|
||||||
const [focusGoal, setFocusGoal] = useState("");
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!isAuthenticated) {
|
|
||||||
router.push("/login");
|
|
||||||
}
|
|
||||||
}, [isAuthenticated, router]);
|
|
||||||
|
|
||||||
const handleLogout = () => {
|
|
||||||
logout();
|
|
||||||
router.push("/login");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-slate-100 text-brand-dark">
|
|
||||||
<div className="flex min-h-screen w-full flex-col px-5 pb-8 pt-5 sm:px-8 md:px-12">
|
|
||||||
<header className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-slate-300 bg-white text-xs font-bold text-brand-dark">
|
|
||||||
V
|
|
||||||
</span>
|
|
||||||
<p className="text-sm font-semibold tracking-tight">VibeRoom</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<UserProfileSimple user={user} isLoading={isLoading} />
|
|
||||||
<button
|
|
||||||
onClick={handleLogout}
|
|
||||||
className="px-1 py-1 text-xs font-semibold text-brand-dark/70 transition hover:text-brand-primary"
|
|
||||||
>
|
|
||||||
로그아웃
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<main className="relative flex flex-1 flex-col items-center justify-center py-10">
|
|
||||||
<div
|
|
||||||
aria-hidden
|
|
||||||
className="pointer-events-none absolute left-1/2 top-[-2rem] hidden -translate-x-1/2 select-none text-[14rem] font-semibold leading-none tracking-[-0.08em] text-brand-dark/[0.05] md:block"
|
|
||||||
>
|
|
||||||
V
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section className="relative z-10 w-full text-center">
|
|
||||||
<h1 className="text-4xl font-semibold tracking-tight text-brand-dark sm:text-5xl">
|
|
||||||
지금, 몰입을 시작해보세요
|
|
||||||
</h1>
|
|
||||||
<p className="mt-4 w-full text-sm leading-relaxed text-brand-dark/70 sm:text-base">
|
|
||||||
VibeRoom은 집중 루틴을 빠르게 시작하는 앱 홈입니다. 가상공간을
|
|
||||||
선택하고 바로 세션에 들어가세요.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div className="mx-auto mt-9 w-[80%] overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_6px_24px_rgba(48,77,109,0.08)]">
|
|
||||||
<div className="border-b border-slate-200 px-4 py-3 text-left text-sm font-medium text-brand-dark/70 sm:px-5">
|
|
||||||
여기서 집중해보세요! 세션 시작과 동시에 공간 톤과 사운드가
|
|
||||||
맞춰집니다.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mx-auto w-full max-w-2xl px-4 py-5 sm:px-5">
|
|
||||||
<div className="flex w-full flex-col gap-3 sm:flex-row sm:items-center">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={focusGoal}
|
|
||||||
onChange={(event) => setFocusGoal(event.target.value)}
|
|
||||||
placeholder="오늘 무엇에 집중할까요?"
|
|
||||||
className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-brand-dark placeholder:text-brand-dark/45 focus:border-brand-primary/45 focus:bg-white focus:outline-none sm:flex-1"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
aria-label="가상공간 입장"
|
|
||||||
className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-brand-primary text-white transition hover:bg-brand-primary/90 sm:shrink-0"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
aria-hidden
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="none"
|
|
||||||
className="h-5 w-5"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M5 10h10M11 6l4 4-4 4"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="1.8"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
5
src/app/(app)/settings/page.tsx
Normal file
5
src/app/(app)/settings/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { SettingsPanelWidget } from '@/widgets/settings-panel';
|
||||||
|
|
||||||
|
export default function SettingsPage() {
|
||||||
|
return <SettingsPanelWidget />;
|
||||||
|
}
|
||||||
10
src/app/(app)/space/page.tsx
Normal file
10
src/app/(app)/space/page.tsx
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { Suspense } from 'react';
|
||||||
|
import { SpaceSkeletonWidget } from '@/widgets/space-shell';
|
||||||
|
|
||||||
|
export default function SpacePage() {
|
||||||
|
return (
|
||||||
|
<Suspense fallback={<div className="min-h-screen bg-slate-950" />}>
|
||||||
|
<SpaceSkeletonWidget />
|
||||||
|
</Suspense>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
src/app/(app)/stats/page.tsx
Normal file
5
src/app/(app)/stats/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { StatsOverviewWidget } from '@/widgets/stats-overview';
|
||||||
|
|
||||||
|
export default function StatsPage() {
|
||||||
|
return <StatsOverviewWidget />;
|
||||||
|
}
|
||||||
@@ -15,3 +15,25 @@ body {
|
|||||||
background-color: theme('colors.slate.50'); /* #f8fafc */
|
background-color: theme('colors.slate.50'); /* #f8fafc */
|
||||||
color: var(--color-brand-dark);
|
color: var(--color-brand-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes toast-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(8px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes sheet-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateX(28px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
import { Noto_Sans_KR } from 'next/font/google';
|
import { Noto_Sans_KR } from 'next/font/google';
|
||||||
import './globals.css';
|
import './globals.css';
|
||||||
|
import { Providers } from './providers';
|
||||||
|
|
||||||
// 1. Noto Sans KR 폰트 설정 (라틴어, 프랑스어, 한국어 등 다국어 지원 베이스)
|
// 1. Noto Sans KR 폰트 설정 (라틴어, 프랑스어, 한국어 등 다국어 지원 베이스)
|
||||||
const notoSans = Noto_Sans_KR({
|
const notoSans = Noto_Sans_KR({
|
||||||
@@ -23,7 +24,7 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="ko" className={notoSans.variable}>
|
<html lang="ko" className={notoSans.variable}>
|
||||||
<body className="antialiased font-sans">
|
<body className="antialiased font-sans">
|
||||||
{children}
|
<Providers>{children}</Providers>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
8
src/app/providers.tsx
Normal file
8
src/app/providers.tsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import { ToastProvider } from '@/shared/ui';
|
||||||
|
|
||||||
|
export const Providers = ({ children }: { children: ReactNode }) => {
|
||||||
|
return <ToastProvider>{children}</ToastProvider>;
|
||||||
|
};
|
||||||
2
src/entities/room/index.ts
Normal file
2
src/entities/room/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './model/rooms';
|
||||||
|
export * from './model/types';
|
||||||
157
src/entities/room/model/rooms.ts
Normal file
157
src/entities/room/model/rooms.ts
Normal file
@@ -0,0 +1,157 @@
|
|||||||
|
import type { CSSProperties } from 'react';
|
||||||
|
import type { RoomTheme } from './types';
|
||||||
|
|
||||||
|
export const ROOM_THEMES: RoomTheme[] = [
|
||||||
|
{
|
||||||
|
id: 'rain-window',
|
||||||
|
name: '비 오는 창가',
|
||||||
|
description: '빗소리 위로 스탠드 조명이 부드럽게 번집니다.',
|
||||||
|
tags: ['저자극', '감성'],
|
||||||
|
recommendedSound: 'Rain Focus',
|
||||||
|
recommendedTime: '밤',
|
||||||
|
vibeLabel: '잔잔함',
|
||||||
|
activeMembers: 32,
|
||||||
|
presence: { focus: 23, break: 6, away: 3 },
|
||||||
|
previewImage: '/spaces/rain-window.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(120% 130% at 12% 8%, rgba(59,130,246,0.35) 0%, rgba(2,6,23,0) 48%), linear-gradient(160deg, rgba(15,23,42,0.96) 0%, rgba(2,6,23,0.92) 52%, rgba(10,10,20,0.96) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'dawn-cafe',
|
||||||
|
name: '새벽 카페',
|
||||||
|
description: '첫 커피 향처럼 잔잔하고 따뜻한 좌석.',
|
||||||
|
tags: ['감성', '딥워크'],
|
||||||
|
recommendedSound: 'Cafe Murmur',
|
||||||
|
recommendedTime: '새벽',
|
||||||
|
vibeLabel: '포근함',
|
||||||
|
activeMembers: 28,
|
||||||
|
presence: { focus: 18, break: 7, away: 3 },
|
||||||
|
previewImage: '/spaces/dawn-cafe.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(130% 120% at 18% 0%, rgba(251,191,36,0.38) 0%, rgba(15,23,42,0) 52%), linear-gradient(150deg, rgba(67,20,7,0.85) 0%, rgba(30,41,59,0.86) 58%, rgba(2,6,23,0.95) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'quiet-library',
|
||||||
|
name: '도서관',
|
||||||
|
description: '넘기는 종이 소리만 들리는 정돈된 책상.',
|
||||||
|
tags: ['저자극', '딥워크'],
|
||||||
|
recommendedSound: 'Deep White',
|
||||||
|
recommendedTime: '오후',
|
||||||
|
vibeLabel: '몰입',
|
||||||
|
activeMembers: 41,
|
||||||
|
presence: { focus: 31, break: 7, away: 3 },
|
||||||
|
previewImage: '/spaces/library.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(110% 100% at 20% 10%, rgba(14,116,144,0.36) 0%, rgba(30,41,59,0) 55%), linear-gradient(160deg, rgba(12,32,52,0.95) 0%, rgba(30,41,59,0.9) 52%, rgba(2,6,23,0.97) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'wave-sound',
|
||||||
|
name: '파도 소리',
|
||||||
|
description: '잔잔한 해변 위로 호흡을 고르는 공간.',
|
||||||
|
tags: ['움직임 적음', '감성'],
|
||||||
|
recommendedSound: 'Ocean Breath',
|
||||||
|
recommendedTime: '밤',
|
||||||
|
vibeLabel: '차분함',
|
||||||
|
activeMembers: 19,
|
||||||
|
presence: { focus: 13, break: 4, away: 2 },
|
||||||
|
previewImage: '/spaces/ocean.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(125% 125% at 75% 8%, rgba(56,189,248,0.4) 0%, rgba(15,23,42,0) 50%), linear-gradient(145deg, rgba(8,47,73,0.93) 0%, rgba(15,23,42,0.9) 55%, rgba(3,7,18,0.96) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'green-forest',
|
||||||
|
name: '숲',
|
||||||
|
description: '바람이 나뭇잎을 스치는 소리로 마음을 낮춥니다.',
|
||||||
|
tags: ['저자극', '움직임 적음'],
|
||||||
|
recommendedSound: 'Forest Hush',
|
||||||
|
recommendedTime: '오전',
|
||||||
|
vibeLabel: '맑음',
|
||||||
|
activeMembers: 26,
|
||||||
|
presence: { focus: 17, break: 6, away: 3 },
|
||||||
|
previewImage: '/spaces/forest.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(130% 110% at 15% 0%, rgba(74,222,128,0.3) 0%, rgba(2,6,23,0) 52%), linear-gradient(155deg, rgba(22,78,99,0.88) 0%, rgba(20,83,45,0.87) 48%, rgba(2,6,23,0.95) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'fireplace',
|
||||||
|
name: '벽난로',
|
||||||
|
description: '작은 불꽃이 주는 리듬으로 집중을 붙잡습니다.',
|
||||||
|
tags: ['감성', '저자극'],
|
||||||
|
recommendedSound: 'Fireplace',
|
||||||
|
recommendedTime: '밤',
|
||||||
|
vibeLabel: '온기',
|
||||||
|
activeMembers: 21,
|
||||||
|
presence: { focus: 15, break: 4, away: 2 },
|
||||||
|
previewImage: '/spaces/fireplace.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(125% 130% at 70% 0%, rgba(251,146,60,0.42) 0%, rgba(15,23,42,0) 55%), linear-gradient(150deg, rgba(69,26,3,0.9) 0%, rgba(31,41,55,0.86) 58%, rgba(2,6,23,0.95) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'city-night',
|
||||||
|
name: '도시 야경',
|
||||||
|
description: '유리창 너머 야경이 멀리 흐르는 고요한 밤.',
|
||||||
|
tags: ['딥워크', '감성'],
|
||||||
|
recommendedSound: 'Night Lo-fi',
|
||||||
|
recommendedTime: '심야',
|
||||||
|
vibeLabel: '고요함',
|
||||||
|
activeMembers: 34,
|
||||||
|
presence: { focus: 24, break: 7, away: 3 },
|
||||||
|
previewImage: '/spaces/city-night.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(120% 120% at 82% 12%, rgba(192,132,252,0.34) 0%, rgba(15,23,42,0) 50%), linear-gradient(160deg, rgba(12,18,48,0.96) 0%, rgba(30,41,59,0.9) 52%, rgba(2,6,23,0.98) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'snow-mountain',
|
||||||
|
name: '설산',
|
||||||
|
description: '차분한 공기와 선명한 수평선이 머리를 맑게 합니다.',
|
||||||
|
tags: ['움직임 적음', '딥워크'],
|
||||||
|
recommendedSound: 'Cold Wind',
|
||||||
|
recommendedTime: '새벽',
|
||||||
|
vibeLabel: '선명함',
|
||||||
|
activeMembers: 15,
|
||||||
|
presence: { focus: 11, break: 3, away: 1 },
|
||||||
|
previewImage: '/spaces/snow-mountain.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(120% 110% at 18% 0%, rgba(125,211,252,0.38) 0%, rgba(15,23,42,0) 52%), linear-gradient(165deg, rgba(15,23,42,0.9) 0%, rgba(30,41,59,0.9) 60%, rgba(2,6,23,0.97) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'sun-window',
|
||||||
|
name: '창가',
|
||||||
|
description: '햇살이 들어오는 간결한 책상, 부담 없는 시작.',
|
||||||
|
tags: ['저자극', '딥워크'],
|
||||||
|
recommendedSound: 'Soft Daylight',
|
||||||
|
recommendedTime: '오후',
|
||||||
|
vibeLabel: '가벼움',
|
||||||
|
activeMembers: 27,
|
||||||
|
presence: { focus: 18, break: 6, away: 3 },
|
||||||
|
previewImage: '/spaces/sun-window.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(115% 95% at 10% 0%, rgba(253,224,71,0.34) 0%, rgba(15,23,42,0) 52%), linear-gradient(150deg, rgba(30,58,138,0.86) 0%, rgba(30,41,59,0.86) 48%, rgba(2,6,23,0.96) 100%)',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'outer-space',
|
||||||
|
name: '우주',
|
||||||
|
description: '별빛만 남긴 어둠 속에서 깊게 잠수합니다.',
|
||||||
|
tags: ['딥워크', '감성'],
|
||||||
|
recommendedSound: 'Deep Drone',
|
||||||
|
recommendedTime: '심야',
|
||||||
|
vibeLabel: '깊음',
|
||||||
|
activeMembers: 23,
|
||||||
|
presence: { focus: 17, break: 4, away: 2 },
|
||||||
|
previewImage: '/spaces/outer-space.jpg',
|
||||||
|
previewGradient:
|
||||||
|
'radial-gradient(120% 120% at 75% 15%, rgba(59,130,246,0.33) 0%, rgba(15,23,42,0) 56%), linear-gradient(155deg, rgba(15,23,42,0.98) 0%, rgba(49,46,129,0.85) 55%, rgba(2,6,23,0.98) 100%)',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const getRoomById = (roomId: string) => {
|
||||||
|
return ROOM_THEMES.find((room) => room.id === roomId);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getRoomBackgroundStyle = (room: RoomTheme): CSSProperties => {
|
||||||
|
return {
|
||||||
|
backgroundImage: `${room.previewGradient}, url('${room.previewImage}')`,
|
||||||
|
backgroundSize: 'cover, cover',
|
||||||
|
backgroundPosition: 'center, center',
|
||||||
|
};
|
||||||
|
};
|
||||||
21
src/entities/room/model/types.ts
Normal file
21
src/entities/room/model/types.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
export type RoomTag = '저자극' | '움직임 적음' | '딥워크' | '감성';
|
||||||
|
|
||||||
|
export interface RoomPresence {
|
||||||
|
focus: number;
|
||||||
|
break: number;
|
||||||
|
away: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RoomTheme {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
description: string;
|
||||||
|
tags: RoomTag[];
|
||||||
|
recommendedSound: string;
|
||||||
|
recommendedTime: string;
|
||||||
|
vibeLabel: string;
|
||||||
|
activeMembers: number;
|
||||||
|
presence: RoomPresence;
|
||||||
|
previewImage: string;
|
||||||
|
previewGradient: string;
|
||||||
|
}
|
||||||
2
src/entities/session/index.ts
Normal file
2
src/entities/session/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './model/mockSession';
|
||||||
|
export * from './model/types';
|
||||||
68
src/entities/session/model/mockSession.ts
Normal file
68
src/entities/session/model/mockSession.ts
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
import type {
|
||||||
|
CheckInPhrase,
|
||||||
|
FocusStatCard,
|
||||||
|
GoalChip,
|
||||||
|
ReactionOption,
|
||||||
|
SoundPreset,
|
||||||
|
TimerPreset,
|
||||||
|
} from './types';
|
||||||
|
|
||||||
|
export const TODAY_ONE_LINER = '오늘의 한 줄: 완벽보다 시작, 한 조각이면 충분해요.';
|
||||||
|
|
||||||
|
export const GOAL_CHIPS: GoalChip[] = [
|
||||||
|
{ id: 'mail-3', label: '메일 3개' },
|
||||||
|
{ id: 'doc-1p', label: '문서 1p' },
|
||||||
|
{ id: 'code-1-function', label: '코딩 1함수' },
|
||||||
|
{ id: 'tidy-10m', label: '정리 10분' },
|
||||||
|
{ id: 'reading-15m', label: '독서 15분' },
|
||||||
|
{ id: 'resume-1paragraph', label: '이력서 1문단' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const CHECK_IN_PHRASES: CheckInPhrase[] = [
|
||||||
|
{ id: 'arrived', text: '지금 들어왔어요' },
|
||||||
|
{ id: 'sprint-25', text: '25분만 달릴게요' },
|
||||||
|
{ id: 'on-break', text: '휴식 중' },
|
||||||
|
{ id: 'back-focus', text: '다시 집중!' },
|
||||||
|
{ id: 'slow-day', text: '오늘은 천천히' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const REACTION_OPTIONS: ReactionOption[] = [
|
||||||
|
{ id: 'thumbs-up', emoji: '👍', label: '응원해요' },
|
||||||
|
{ id: 'fire', emoji: '🔥', label: '집중 모드' },
|
||||||
|
{ id: 'clap', emoji: '👏', label: '잘하고 있어요' },
|
||||||
|
{ id: 'heart-hands', emoji: '🫶', label: '연결되어 있어요' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const SOUND_PRESETS: SoundPreset[] = [
|
||||||
|
{ id: 'deep-white', label: 'Deep White' },
|
||||||
|
{ id: 'rain-focus', label: 'Rain Focus' },
|
||||||
|
{ id: 'cafe-work', label: 'Cafe Work' },
|
||||||
|
{ id: 'ocean-calm', label: 'Ocean Calm' },
|
||||||
|
{ id: 'fireplace', label: 'Fireplace' },
|
||||||
|
{ id: 'silent', label: 'Silent' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const TIMER_PRESETS: TimerPreset[] = [
|
||||||
|
{ id: '25-5', label: '25/5', focusMinutes: 25, breakMinutes: 5 },
|
||||||
|
{ id: '50-10', label: '50/10', focusMinutes: 50, breakMinutes: 10 },
|
||||||
|
{ id: '90-20', label: '90/20', focusMinutes: 90, breakMinutes: 20 },
|
||||||
|
{ id: 'custom', label: '커스텀' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const DISTRACTION_DUMP_PLACEHOLDER = [
|
||||||
|
'디자인 QA 요청 확인',
|
||||||
|
'세금계산서 발행 메모',
|
||||||
|
'오후 미팅 질문 1개 정리',
|
||||||
|
];
|
||||||
|
|
||||||
|
export const TODAY_STATS: FocusStatCard[] = [
|
||||||
|
{ id: 'today-focus', label: '오늘 집중 시간', value: '2h 40m', delta: '+35m' },
|
||||||
|
{ id: 'today-cycles', label: '완료한 사이클', value: '5회', delta: '+1' },
|
||||||
|
{ id: 'today-entry', label: '입장 횟수', value: '3회', delta: '유지' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const WEEKLY_STATS: FocusStatCard[] = [
|
||||||
|
{ id: 'week-focus', label: '최근 7일 집중 시간', value: '14h 20m', delta: '+2h 10m' },
|
||||||
|
{ id: 'week-best-day', label: '최고 몰입일', value: '수요일', delta: '3h 30m' },
|
||||||
|
{ id: 'week-consistency', label: '연속 달성', value: '4일', delta: '+1일' },
|
||||||
|
];
|
||||||
34
src/entities/session/model/types.ts
Normal file
34
src/entities/session/model/types.ts
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
export interface GoalChip {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CheckInPhrase {
|
||||||
|
id: string;
|
||||||
|
text: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ReactionOption {
|
||||||
|
id: string;
|
||||||
|
emoji: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface SoundPreset {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TimerPreset {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
focusMinutes?: number;
|
||||||
|
breakMinutes?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface FocusStatCard {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
delta: string;
|
||||||
|
}
|
||||||
2
src/entities/user/index.ts
Normal file
2
src/entities/user/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './model/mockUser';
|
||||||
|
export * from './model/types';
|
||||||
7
src/entities/user/model/mockUser.ts
Normal file
7
src/entities/user/model/mockUser.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import type { ViewerProfile } from './types';
|
||||||
|
|
||||||
|
export const MOCK_VIEWER: ViewerProfile = {
|
||||||
|
id: 'viewer-1',
|
||||||
|
name: '민서',
|
||||||
|
avatarLabel: 'MS',
|
||||||
|
};
|
||||||
5
src/entities/user/model/types.ts
Normal file
5
src/entities/user/model/types.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export interface ViewerProfile {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
avatarLabel: string;
|
||||||
|
}
|
||||||
@@ -34,8 +34,8 @@ export const useSocialLogin = () => {
|
|||||||
// 2. 응답받은 VibeRoom 전용 토큰과 유저 정보를 전역 상태 및 쿠키에 저장
|
// 2. 응답받은 VibeRoom 전용 토큰과 유저 정보를 전역 상태 및 쿠키에 저장
|
||||||
useAuthStore.getState().setAuth(response);
|
useAuthStore.getState().setAuth(response);
|
||||||
|
|
||||||
// 3. 메인 대시보드 화면으로 이동
|
// 3. 메인 허브 화면으로 이동
|
||||||
router.push("/dashboard");
|
router.push("/app");
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error(`[${provider}] 로그인 실패:`, err);
|
console.error(`[${provider}] 로그인 실패:`, err);
|
||||||
setError("로그인에 실패했습니다. 다시 시도해 주세요.");
|
setError("로그인에 실패했습니다. 다시 시도해 주세요.");
|
||||||
@@ -64,7 +64,20 @@ export const useSocialLogin = () => {
|
|||||||
*/
|
*/
|
||||||
const loginWithApple = () => {
|
const loginWithApple = () => {
|
||||||
try {
|
try {
|
||||||
appleAuthHelpers.signIn({
|
const appleHelperBridge = appleAuthHelpers as unknown as {
|
||||||
|
signIn: (options: {
|
||||||
|
authOptions: {
|
||||||
|
clientId: string;
|
||||||
|
scope: string;
|
||||||
|
redirectURI: string;
|
||||||
|
usePopup: boolean;
|
||||||
|
};
|
||||||
|
onSuccess: (response: any) => void;
|
||||||
|
onError: (err: any) => void;
|
||||||
|
}) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
appleHelperBridge.signIn({
|
||||||
authOptions: {
|
authOptions: {
|
||||||
clientId: process.env.NEXT_PUBLIC_APPLE_CLIENT_ID || "",
|
clientId: process.env.NEXT_PUBLIC_APPLE_CLIENT_ID || "",
|
||||||
scope: "email name",
|
scope: "email name",
|
||||||
|
|||||||
3
src/features/check-in/index.ts
Normal file
3
src/features/check-in/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export * from './model/useCheckIn';
|
||||||
|
export * from './ui/CompactCheckInChips';
|
||||||
|
export * from './ui/CheckInChips';
|
||||||
16
src/features/check-in/model/useCheckIn.ts
Normal file
16
src/features/check-in/model/useCheckIn.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export const useCheckIn = () => {
|
||||||
|
const [lastCheckIn, setLastCheckIn] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const recordCheckIn = (message: string) => {
|
||||||
|
setLastCheckIn(message);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
lastCheckIn,
|
||||||
|
recordCheckIn,
|
||||||
|
};
|
||||||
|
};
|
||||||
32
src/features/check-in/ui/CheckInChips.tsx
Normal file
32
src/features/check-in/ui/CheckInChips.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import type { CheckInPhrase } from '@/entities/session';
|
||||||
|
import { Chip } from '@/shared/ui';
|
||||||
|
|
||||||
|
interface CheckInChipsProps {
|
||||||
|
phrases: CheckInPhrase[];
|
||||||
|
lastCheckIn: string | null;
|
||||||
|
onCheckIn: (message: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CheckInChips = ({
|
||||||
|
phrases,
|
||||||
|
lastCheckIn,
|
||||||
|
onCheckIn,
|
||||||
|
}: CheckInChipsProps) => {
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{phrases.map((phrase) => (
|
||||||
|
<Chip key={phrase.id} onClick={() => onCheckIn(phrase.text)}>
|
||||||
|
{phrase.text}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-white/72">
|
||||||
|
마지막 체크인:{' '}
|
||||||
|
<span className="font-medium text-white">
|
||||||
|
{lastCheckIn ?? '아직 남기지 않았어요'}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
53
src/features/check-in/ui/CompactCheckInChips.tsx
Normal file
53
src/features/check-in/ui/CompactCheckInChips.tsx
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import type { CheckInPhrase } from '@/entities/session';
|
||||||
|
import { Chip } from '@/shared/ui';
|
||||||
|
|
||||||
|
interface CompactCheckInChipsProps {
|
||||||
|
phrases: CheckInPhrase[];
|
||||||
|
onCheckIn: (message: string) => void;
|
||||||
|
collapsedCount?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CompactCheckInChips = ({
|
||||||
|
phrases,
|
||||||
|
onCheckIn,
|
||||||
|
collapsedCount = 3,
|
||||||
|
}: CompactCheckInChipsProps) => {
|
||||||
|
const [showAll, setShowAll] = useState(false);
|
||||||
|
|
||||||
|
const visiblePhrases = useMemo(() => {
|
||||||
|
if (showAll) {
|
||||||
|
return phrases;
|
||||||
|
}
|
||||||
|
|
||||||
|
return phrases.slice(0, collapsedCount);
|
||||||
|
}, [collapsedCount, phrases, showAll]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
{visiblePhrases.map((phrase) => (
|
||||||
|
<Chip
|
||||||
|
key={phrase.id}
|
||||||
|
onClick={() => onCheckIn(phrase.text)}
|
||||||
|
className="!px-2.5 !py-1 text-[11px]"
|
||||||
|
>
|
||||||
|
{phrase.text}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{phrases.length > collapsedCount ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setShowAll((current) => !current)}
|
||||||
|
className="text-[11px] text-white/65 transition hover:text-white"
|
||||||
|
>
|
||||||
|
{showAll ? '접기' : '더보기'}
|
||||||
|
</button>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
2
src/features/custom-entry-modal/index.ts
Normal file
2
src/features/custom-entry-modal/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './model/useCustomEntryForm';
|
||||||
|
export * from './ui/CustomEntryModal';
|
||||||
70
src/features/custom-entry-modal/model/useCustomEntryForm.ts
Normal file
70
src/features/custom-entry-modal/model/useCustomEntryForm.ts
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { SOUND_PRESETS, TIMER_PRESETS } from '@/entities/session';
|
||||||
|
|
||||||
|
export type CustomEntryTab = 'theme' | 'sound' | 'timer';
|
||||||
|
|
||||||
|
export interface CustomEntrySelection {
|
||||||
|
soundId: string;
|
||||||
|
timerId: string;
|
||||||
|
timerLabel: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const getSafeNumber = (value: string, fallback: number) => {
|
||||||
|
const parsed = Number(value);
|
||||||
|
|
||||||
|
if (!Number.isFinite(parsed) || parsed <= 0) {
|
||||||
|
return fallback;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Math.round(parsed);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useCustomEntryForm = () => {
|
||||||
|
const [activeTab, setActiveTab] = useState<CustomEntryTab>('theme');
|
||||||
|
const [selectedSoundId, setSelectedSoundId] = useState(SOUND_PRESETS[0].id);
|
||||||
|
const [selectedTimerId, setSelectedTimerId] = useState(TIMER_PRESETS[0].id);
|
||||||
|
const [customFocusMinutes, setCustomFocusMinutes] = useState('40');
|
||||||
|
const [customBreakMinutes, setCustomBreakMinutes] = useState('10');
|
||||||
|
|
||||||
|
const timerLabel = useMemo(() => {
|
||||||
|
if (selectedTimerId !== 'custom') {
|
||||||
|
return TIMER_PRESETS.find((preset) => preset.id === selectedTimerId)?.label ??
|
||||||
|
TIMER_PRESETS[0].label;
|
||||||
|
}
|
||||||
|
|
||||||
|
const focus = getSafeNumber(customFocusMinutes, 25);
|
||||||
|
const breakMinutes = getSafeNumber(customBreakMinutes, 5);
|
||||||
|
|
||||||
|
return `${focus}/${breakMinutes}`;
|
||||||
|
}, [customBreakMinutes, customFocusMinutes, selectedTimerId]);
|
||||||
|
|
||||||
|
const buildSelection = (): CustomEntrySelection => {
|
||||||
|
return {
|
||||||
|
soundId: selectedSoundId,
|
||||||
|
timerId: selectedTimerId,
|
||||||
|
timerLabel,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetTab = () => {
|
||||||
|
setActiveTab('theme');
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
activeTab,
|
||||||
|
selectedSoundId,
|
||||||
|
selectedTimerId,
|
||||||
|
customFocusMinutes,
|
||||||
|
customBreakMinutes,
|
||||||
|
timerLabel,
|
||||||
|
setActiveTab,
|
||||||
|
setSelectedSoundId,
|
||||||
|
setSelectedTimerId,
|
||||||
|
setCustomFocusMinutes,
|
||||||
|
setCustomBreakMinutes,
|
||||||
|
buildSelection,
|
||||||
|
resetTab,
|
||||||
|
};
|
||||||
|
};
|
||||||
159
src/features/custom-entry-modal/ui/CustomEntryModal.tsx
Normal file
159
src/features/custom-entry-modal/ui/CustomEntryModal.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { ROOM_THEMES } from '@/entities/room';
|
||||||
|
import { SOUND_PRESETS, TIMER_PRESETS } from '@/entities/session';
|
||||||
|
import { Button, Chip, Modal, Tabs } from '@/shared/ui';
|
||||||
|
import {
|
||||||
|
type CustomEntrySelection,
|
||||||
|
useCustomEntryForm,
|
||||||
|
} from '../model/useCustomEntryForm';
|
||||||
|
|
||||||
|
interface CustomEntryModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
selectedRoomId: string;
|
||||||
|
onSelectRoom: (roomId: string) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
onEnter: (selection: CustomEntrySelection) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CustomEntryModal = ({
|
||||||
|
isOpen,
|
||||||
|
selectedRoomId,
|
||||||
|
onSelectRoom,
|
||||||
|
onClose,
|
||||||
|
onEnter,
|
||||||
|
}: CustomEntryModalProps) => {
|
||||||
|
const {
|
||||||
|
activeTab,
|
||||||
|
selectedSoundId,
|
||||||
|
selectedTimerId,
|
||||||
|
customFocusMinutes,
|
||||||
|
customBreakMinutes,
|
||||||
|
setActiveTab,
|
||||||
|
setSelectedSoundId,
|
||||||
|
setSelectedTimerId,
|
||||||
|
setCustomFocusMinutes,
|
||||||
|
setCustomBreakMinutes,
|
||||||
|
buildSelection,
|
||||||
|
resetTab,
|
||||||
|
} = useCustomEntryForm();
|
||||||
|
|
||||||
|
const tabOptions = [
|
||||||
|
{ value: 'theme', label: '공간' },
|
||||||
|
{ value: 'sound', label: '사운드 프리셋' },
|
||||||
|
{ value: 'timer', label: '타이머 프리셋' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
resetTab();
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEnter = () => {
|
||||||
|
onEnter(buildSelection());
|
||||||
|
resetTab();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Modal
|
||||||
|
isOpen={isOpen}
|
||||||
|
title="커스텀해서 입장"
|
||||||
|
description="선택은 가볍게, 입장 후에도 언제든 다시 바꿀 수 있어요."
|
||||||
|
onClose={handleClose}
|
||||||
|
footer={
|
||||||
|
<div className="flex flex-col gap-2 sm:flex-row sm:justify-end">
|
||||||
|
<Button
|
||||||
|
variant="secondary"
|
||||||
|
className="!bg-white/10 !text-white hover:!bg-white/15"
|
||||||
|
onClick={handleClose}
|
||||||
|
>
|
||||||
|
닫기
|
||||||
|
</Button>
|
||||||
|
<Button onClick={handleEnter}>이 설정으로 입장</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="space-y-5">
|
||||||
|
<Tabs value={activeTab} options={tabOptions} onChange={(value) => setActiveTab(value as 'theme' | 'sound' | 'timer')} />
|
||||||
|
|
||||||
|
{activeTab === 'theme' ? (
|
||||||
|
<div className="grid gap-2 sm:grid-cols-2">
|
||||||
|
{ROOM_THEMES.map((room) => (
|
||||||
|
<button
|
||||||
|
key={room.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => onSelectRoom(room.id)}
|
||||||
|
className={`rounded-xl border px-3 py-3 text-left transition-colors ${
|
||||||
|
selectedRoomId === room.id
|
||||||
|
? 'border-sky-200 bg-sky-300/22 text-sky-50'
|
||||||
|
: 'border-white/16 bg-white/5 text-white/85 hover:bg-white/10'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="text-sm font-medium">{room.name}</p>
|
||||||
|
<p className="mt-1 text-xs text-white/70">{room.description}</p>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{activeTab === 'sound' ? (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{SOUND_PRESETS.map((preset) => (
|
||||||
|
<Chip
|
||||||
|
key={preset.id}
|
||||||
|
active={selectedSoundId === preset.id}
|
||||||
|
onClick={() => setSelectedSoundId(preset.id)}
|
||||||
|
>
|
||||||
|
{preset.label}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{activeTab === 'timer' ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{TIMER_PRESETS.map((preset) => (
|
||||||
|
<Chip
|
||||||
|
key={preset.id}
|
||||||
|
active={selectedTimerId === preset.id}
|
||||||
|
onClick={() => setSelectedTimerId(preset.id)}
|
||||||
|
>
|
||||||
|
{preset.label}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedTimerId === 'custom' ? (
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2">
|
||||||
|
<label className="space-y-1 text-sm text-white/75">
|
||||||
|
<span>집중(분)</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
value={customFocusMinutes}
|
||||||
|
onChange={(event) => setCustomFocusMinutes(event.target.value)}
|
||||||
|
className="w-full rounded-xl border border-white/20 bg-slate-900/70 px-3 py-2 text-white placeholder:text-white/45"
|
||||||
|
placeholder="25"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label className="space-y-1 text-sm text-white/75">
|
||||||
|
<span>휴식(분)</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
value={customBreakMinutes}
|
||||||
|
onChange={(event) => setCustomBreakMinutes(event.target.value)}
|
||||||
|
className="w-full rounded-xl border border-white/20 bg-slate-900/70 px-3 py-2 text-white placeholder:text-white/45"
|
||||||
|
placeholder="5"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
};
|
||||||
4
src/features/distraction-dump/index.ts
Normal file
4
src/features/distraction-dump/index.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export * from './model/useDistractionDump';
|
||||||
|
export * from './model/useDistractionNotes';
|
||||||
|
export * from './ui/DistractionDumpNotesContent';
|
||||||
|
export * from './ui/DistractionDumpPanel';
|
||||||
38
src/features/distraction-dump/model/useDistractionDump.ts
Normal file
38
src/features/distraction-dump/model/useDistractionDump.ts
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { DISTRACTION_DUMP_PLACEHOLDER } from '@/entities/session';
|
||||||
|
|
||||||
|
export const useDistractionDump = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [draft, setDraft] = useState('');
|
||||||
|
const [items, setItems] = useState<string[]>(DISTRACTION_DUMP_PLACEHOLDER);
|
||||||
|
|
||||||
|
const hasDraft = useMemo(() => draft.trim().length > 0, [draft]);
|
||||||
|
|
||||||
|
const toggle = () => {
|
||||||
|
setIsOpen((current) => !current);
|
||||||
|
};
|
||||||
|
|
||||||
|
const saveDraft = () => {
|
||||||
|
if (!hasDraft) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = draft.trim();
|
||||||
|
setItems((current) => [value, ...current]);
|
||||||
|
setDraft('');
|
||||||
|
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isOpen,
|
||||||
|
draft,
|
||||||
|
items,
|
||||||
|
hasDraft,
|
||||||
|
setDraft,
|
||||||
|
toggle,
|
||||||
|
saveDraft,
|
||||||
|
};
|
||||||
|
};
|
||||||
68
src/features/distraction-dump/model/useDistractionNotes.ts
Normal file
68
src/features/distraction-dump/model/useDistractionNotes.ts
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { DISTRACTION_DUMP_PLACEHOLDER } from '@/entities/session';
|
||||||
|
|
||||||
|
interface DistractionNote {
|
||||||
|
id: string;
|
||||||
|
text: string;
|
||||||
|
done: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const createInitialNotes = (): DistractionNote[] => {
|
||||||
|
return DISTRACTION_DUMP_PLACEHOLDER.slice(0, 5).map((text, index) => ({
|
||||||
|
id: `note-${index + 1}`,
|
||||||
|
text,
|
||||||
|
done: false,
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useDistractionNotes = () => {
|
||||||
|
const [draft, setDraft] = useState('');
|
||||||
|
const [notes, setNotes] = useState<DistractionNote[]>(createInitialNotes);
|
||||||
|
|
||||||
|
const canAdd = useMemo(() => draft.trim().length > 0, [draft]);
|
||||||
|
|
||||||
|
const addNote = () => {
|
||||||
|
if (!canAdd) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = draft.trim();
|
||||||
|
|
||||||
|
setNotes((current) => [
|
||||||
|
{
|
||||||
|
id: `note-${Date.now()}`,
|
||||||
|
text: value,
|
||||||
|
done: false,
|
||||||
|
},
|
||||||
|
...current,
|
||||||
|
]);
|
||||||
|
|
||||||
|
setDraft('');
|
||||||
|
|
||||||
|
return value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleDone = (noteId: string) => {
|
||||||
|
setNotes((current) =>
|
||||||
|
current.map((note) =>
|
||||||
|
note.id === noteId ? { ...note, done: !note.done } : note,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeNote = (noteId: string) => {
|
||||||
|
setNotes((current) => current.filter((note) => note.id !== noteId));
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
draft,
|
||||||
|
notes,
|
||||||
|
canAdd,
|
||||||
|
setDraft,
|
||||||
|
addNote,
|
||||||
|
toggleDone,
|
||||||
|
removeNote,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,90 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/shared/ui';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
import { useDistractionNotes } from '../model/useDistractionNotes';
|
||||||
|
|
||||||
|
interface DistractionDumpNotesContentProps {
|
||||||
|
onNoteAdded?: (note: string) => void;
|
||||||
|
onNoteRemoved?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DistractionDumpNotesContent = ({
|
||||||
|
onNoteAdded,
|
||||||
|
onNoteRemoved,
|
||||||
|
}: DistractionDumpNotesContentProps) => {
|
||||||
|
const { draft, notes, canAdd, setDraft, addNote, toggleDone, removeNote } =
|
||||||
|
useDistractionNotes();
|
||||||
|
|
||||||
|
const handleAdd = () => {
|
||||||
|
const note = addNote();
|
||||||
|
|
||||||
|
if (note && onNoteAdded) {
|
||||||
|
onNoteAdded(note);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemove = (noteId: string) => {
|
||||||
|
removeNote(noteId);
|
||||||
|
|
||||||
|
if (onNoteRemoved) {
|
||||||
|
onNoteRemoved();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<textarea
|
||||||
|
value={draft}
|
||||||
|
onChange={(event) => setDraft(event.target.value)}
|
||||||
|
placeholder="지금 떠오른 생각을 잠깐 적어두기"
|
||||||
|
className="h-20 w-full resize-none rounded-xl border border-white/20 bg-slate-950/55 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-200/60 focus:outline-none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<p className="text-[11px] text-white/58">Enter 안내: 버튼으로만 동작하는 목업</p>
|
||||||
|
<Button size="sm" className="!h-8" onClick={handleAdd} disabled={!canAdd}>
|
||||||
|
추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{notes.slice(0, 5).map((note) => (
|
||||||
|
<li
|
||||||
|
key={note.id}
|
||||||
|
className="rounded-lg border border-white/12 bg-white/5 px-3 py-2"
|
||||||
|
>
|
||||||
|
<div className="flex items-start justify-between gap-2">
|
||||||
|
<p
|
||||||
|
className={cn(
|
||||||
|
'text-sm text-white/88',
|
||||||
|
note.done && 'text-white/45 line-through',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{note.text}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => toggleDone(note.id)}
|
||||||
|
className="rounded border border-white/20 px-2 py-0.5 text-[11px] text-white/75 transition hover:bg-white/12"
|
||||||
|
>
|
||||||
|
{note.done ? '해제' : '완료'}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => handleRemove(note.id)}
|
||||||
|
className="rounded border border-white/20 px-2 py-0.5 text-[11px] text-white/75 transition hover:bg-white/12"
|
||||||
|
>
|
||||||
|
삭제
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
67
src/features/distraction-dump/ui/DistractionDumpPanel.tsx
Normal file
67
src/features/distraction-dump/ui/DistractionDumpPanel.tsx
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { Button } from '@/shared/ui';
|
||||||
|
import { useDistractionDump } from '../model/useDistractionDump';
|
||||||
|
|
||||||
|
interface DistractionDumpPanelProps {
|
||||||
|
onSaved?: (note: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DistractionDumpPanel = ({
|
||||||
|
onSaved,
|
||||||
|
}: DistractionDumpPanelProps) => {
|
||||||
|
const { isOpen, draft, items, hasDraft, setDraft, toggle, saveDraft } =
|
||||||
|
useDistractionDump();
|
||||||
|
|
||||||
|
const handleSave = () => {
|
||||||
|
const value = saveDraft();
|
||||||
|
|
||||||
|
if (value && onSaved) {
|
||||||
|
onSaved(value);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="!border-white/30 !bg-white/5 !text-white hover:!bg-white/14"
|
||||||
|
onClick={toggle}
|
||||||
|
>
|
||||||
|
떠오른 생각 임시 저장
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{isOpen ? (
|
||||||
|
<div className="space-y-3 rounded-xl border border-white/20 bg-slate-900/45 p-3">
|
||||||
|
<textarea
|
||||||
|
value={draft}
|
||||||
|
onChange={(event) => setDraft(event.target.value)}
|
||||||
|
placeholder="방금 떠오른 할 일을 여기에 잠깐 보관하세요"
|
||||||
|
className="h-24 w-full resize-none rounded-lg border border-white/18 bg-slate-950/55 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-200/60 focus:outline-none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<p className="text-xs text-white/62">다시 보기 전까지 임시 보관됩니다.</p>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="!h-8"
|
||||||
|
onClick={handleSave}
|
||||||
|
disabled={!hasDraft}
|
||||||
|
>
|
||||||
|
메모 추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="space-y-1.5 text-xs text-white/74">
|
||||||
|
{items.slice(0, 4).map((item) => (
|
||||||
|
<li key={item} className="rounded-md bg-white/6 px-2.5 py-1.5">
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/features/profile-menu/index.ts
Normal file
1
src/features/profile-menu/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/ProfileMenu';
|
||||||
29
src/features/profile-menu/ui/ProfileMenu.tsx
Normal file
29
src/features/profile-menu/ui/ProfileMenu.tsx
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import type { ViewerProfile } from '@/entities/user';
|
||||||
|
import { Dropdown, DropdownItem } from '@/shared/ui';
|
||||||
|
|
||||||
|
interface ProfileMenuProps {
|
||||||
|
user: ViewerProfile;
|
||||||
|
onLogout: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ProfileMenu = ({ user, onLogout }: ProfileMenuProps) => {
|
||||||
|
return (
|
||||||
|
<Dropdown
|
||||||
|
align="right"
|
||||||
|
trigger={
|
||||||
|
<span className="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 px-2.5 py-1.5 text-sm text-white/90">
|
||||||
|
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-sky-300/30 text-xs font-semibold text-sky-100">
|
||||||
|
{user.avatarLabel}
|
||||||
|
</span>
|
||||||
|
<span className="hidden sm:inline">{user.name}</span>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<DropdownItem href="/stats">Stats</DropdownItem>
|
||||||
|
<DropdownItem href="/settings">Settings</DropdownItem>
|
||||||
|
<DropdownItem danger onClick={onLogout}>
|
||||||
|
Logout
|
||||||
|
</DropdownItem>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
};
|
||||||
2
src/features/reactions/index.ts
Normal file
2
src/features/reactions/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './ui/ReactionIconRow';
|
||||||
|
export * from './ui/ReactionButtons';
|
||||||
23
src/features/reactions/ui/ReactionButtons.tsx
Normal file
23
src/features/reactions/ui/ReactionButtons.tsx
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import type { ReactionOption } from '@/entities/session';
|
||||||
|
import { Chip } from '@/shared/ui';
|
||||||
|
|
||||||
|
interface ReactionButtonsProps {
|
||||||
|
reactions: ReactionOption[];
|
||||||
|
onReact: (reaction: ReactionOption) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ReactionButtons = ({
|
||||||
|
reactions,
|
||||||
|
onReact,
|
||||||
|
}: ReactionButtonsProps) => {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{reactions.map((reaction) => (
|
||||||
|
<Chip key={reaction.id} onClick={() => onReact(reaction)}>
|
||||||
|
<span className="text-sm">{reaction.emoji}</span>
|
||||||
|
<span>{reaction.label}</span>
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
31
src/features/reactions/ui/ReactionIconRow.tsx
Normal file
31
src/features/reactions/ui/ReactionIconRow.tsx
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import type { ReactionOption } from '@/entities/session';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
|
interface ReactionIconRowProps {
|
||||||
|
reactions: ReactionOption[];
|
||||||
|
onReact: (reaction: ReactionOption) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ReactionIconRow = ({
|
||||||
|
reactions,
|
||||||
|
onReact,
|
||||||
|
}: ReactionIconRowProps) => {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-wrap items-center gap-1.5">
|
||||||
|
{reactions.map((reaction) => (
|
||||||
|
<button
|
||||||
|
key={reaction.id}
|
||||||
|
type="button"
|
||||||
|
title={reaction.label}
|
||||||
|
onClick={() => onReact(reaction)}
|
||||||
|
className={cn(
|
||||||
|
'inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/20 bg-white/10 text-base transition-colors',
|
||||||
|
'hover:bg-white/18 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{reaction.emoji}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/features/restart-30s/index.ts
Normal file
1
src/features/restart-30s/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/Restart30sAction';
|
||||||
18
src/features/restart-30s/model/useRestart30s.ts
Normal file
18
src/features/restart-30s/model/useRestart30s.ts
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useToast } from '@/shared/ui';
|
||||||
|
|
||||||
|
export const useRestart30s = () => {
|
||||||
|
const { pushToast } = useToast();
|
||||||
|
|
||||||
|
const triggerRestart = () => {
|
||||||
|
pushToast({
|
||||||
|
title: '30초 리스타트(더미)',
|
||||||
|
description: '실제 리스타트 동작은 아직 연결되지 않았어요.',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
triggerRestart,
|
||||||
|
};
|
||||||
|
};
|
||||||
31
src/features/restart-30s/ui/Restart30sAction.tsx
Normal file
31
src/features/restart-30s/ui/Restart30sAction.tsx
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
import { useRestart30s } from '../model/useRestart30s';
|
||||||
|
|
||||||
|
interface Restart30sActionProps {
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Restart30sAction = ({ className }: Restart30sActionProps) => {
|
||||||
|
const { triggerRestart } = useRestart30s();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={triggerRestart}
|
||||||
|
className={cn(
|
||||||
|
'inline-flex items-center gap-2 text-xs text-white/66 transition hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span aria-hidden className="text-[13px]">
|
||||||
|
↻
|
||||||
|
</span>
|
||||||
|
<span>다시 시작</span>
|
||||||
|
<span className="rounded-full border border-white/25 bg-white/8 px-2 py-0.5 text-[10px] text-white/72">
|
||||||
|
30초
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
2
src/features/room-select/index.ts
Normal file
2
src/features/room-select/index.ts
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
export * from './model/useRoomSelection';
|
||||||
|
export * from './ui/RoomPreviewCard';
|
||||||
20
src/features/room-select/model/useRoomSelection.ts
Normal file
20
src/features/room-select/model/useRoomSelection.ts
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useMemo, useState } from 'react';
|
||||||
|
import { getRoomById, ROOM_THEMES } from '@/entities/room';
|
||||||
|
|
||||||
|
export const useRoomSelection = (initialRoomId?: string) => {
|
||||||
|
const [selectedRoomId, setSelectedRoomId] = useState(
|
||||||
|
initialRoomId ?? ROOM_THEMES[0].id,
|
||||||
|
);
|
||||||
|
|
||||||
|
const selectedRoom = useMemo(() => {
|
||||||
|
return getRoomById(selectedRoomId) ?? ROOM_THEMES[0];
|
||||||
|
}, [selectedRoomId]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
selectedRoomId,
|
||||||
|
selectedRoom,
|
||||||
|
selectRoom: setSelectedRoomId,
|
||||||
|
};
|
||||||
|
};
|
||||||
62
src/features/room-select/ui/RoomPreviewCard.tsx
Normal file
62
src/features/room-select/ui/RoomPreviewCard.tsx
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
import type { RoomTheme } from '@/entities/room';
|
||||||
|
import { getRoomBackgroundStyle } from '@/entities/room';
|
||||||
|
import { Chip } from '@/shared/ui';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
|
interface RoomPreviewCardProps {
|
||||||
|
room: RoomTheme;
|
||||||
|
selected: boolean;
|
||||||
|
onSelect: (roomId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RoomPreviewCard = ({
|
||||||
|
room,
|
||||||
|
selected,
|
||||||
|
onSelect,
|
||||||
|
}: RoomPreviewCardProps) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => onSelect(room.id)}
|
||||||
|
className={cn(
|
||||||
|
'group relative overflow-hidden rounded-2xl border p-4 text-left transition-all duration-250 motion-reduce:transition-none',
|
||||||
|
selected
|
||||||
|
? 'border-sky-200/85 shadow-[0_0_0_1px_rgba(186,230,253,0.9)]'
|
||||||
|
: 'border-white/18 hover:border-white/35',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div aria-hidden className="absolute inset-0" style={getRoomBackgroundStyle(room)} />
|
||||||
|
<div aria-hidden className="absolute inset-0 bg-slate-950/54" />
|
||||||
|
<div aria-hidden className="absolute inset-0 bg-[linear-gradient(to_top,rgba(2,6,23,0.86),rgba(2,6,23,0.25))]" />
|
||||||
|
|
||||||
|
<div className="relative space-y-3">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-base font-semibold text-white">{room.name}</h3>
|
||||||
|
<p className="mt-1 text-xs text-white/72">{room.description}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{room.tags.map((tag) => (
|
||||||
|
<Chip key={tag} tone="muted" className="!cursor-default">
|
||||||
|
{tag}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-xs text-white/76">
|
||||||
|
추천 사운드: <span className="font-medium text-white">{room.recommendedSound}</span>
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
<Chip tone="accent" className="!cursor-default">
|
||||||
|
추천 시간 · {room.recommendedTime}
|
||||||
|
</Chip>
|
||||||
|
<Chip tone="neutral" className="!cursor-default">
|
||||||
|
지금 분위기 · {room.vibeLabel}
|
||||||
|
</Chip>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
39
src/features/space/components/RoomEntryForm.tsx
Normal file
39
src/features/space/components/RoomEntryForm.tsx
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRoomEntry } from "../hooks/useRoomEntry";
|
||||||
|
|
||||||
|
export const RoomEntryForm = () => {
|
||||||
|
const { focusGoal, setFocusGoal, canEnterRoom, handleSubmit } = useRoomEntry();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form
|
||||||
|
onSubmit={handleSubmit}
|
||||||
|
className="flex w-full flex-col gap-3 sm:flex-row sm:items-center"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={focusGoal}
|
||||||
|
onChange={(event) => setFocusGoal(event.target.value)}
|
||||||
|
placeholder="오늘 무엇에 집중할까요?"
|
||||||
|
className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-brand-dark placeholder:text-brand-dark/45 focus:border-brand-primary/45 focus:bg-white focus:outline-none sm:flex-1"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
aria-label="가상공간 입장"
|
||||||
|
disabled={!canEnterRoom}
|
||||||
|
className="inline-flex h-11 w-11 items-center justify-center rounded-full bg-brand-primary text-white transition hover:bg-brand-primary/90 disabled:cursor-not-allowed disabled:bg-slate-300 sm:shrink-0"
|
||||||
|
>
|
||||||
|
<svg aria-hidden viewBox="0 0 20 20" fill="none" className="h-5 w-5">
|
||||||
|
<path
|
||||||
|
d="M5 10h10M11 6l4 4-4 4"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1.8"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
30
src/features/space/hooks/useDashboardViewModel.ts
Normal file
30
src/features/space/hooks/useDashboardViewModel.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useUserProfile } from "@/features/user";
|
||||||
|
import { useAuthStore } from "@/store/useAuthStore";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
import { useEffect } from "react";
|
||||||
|
|
||||||
|
export const useDashboardViewModel = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { logout, isAuthenticated } = useAuthStore();
|
||||||
|
const { user, isLoading } = useUserProfile();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
router.push("/login");
|
||||||
|
}
|
||||||
|
}, [isAuthenticated, router]);
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
logout();
|
||||||
|
router.push("/login");
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
user,
|
||||||
|
isLoading,
|
||||||
|
handleLogout,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
31
src/features/space/hooks/useFocusRoomViewModel.ts
Normal file
31
src/features/space/hooks/useFocusRoomViewModel.ts
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useAuthStore } from "@/store/useAuthStore";
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { useEffect, useMemo } from "react";
|
||||||
|
|
||||||
|
export const useFocusRoomViewModel = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
router.push("/login");
|
||||||
|
}
|
||||||
|
}, [isAuthenticated, router]);
|
||||||
|
|
||||||
|
const goal = useMemo(() => {
|
||||||
|
const fromQuery = searchParams.get("goal")?.trim();
|
||||||
|
return fromQuery?.length ? fromQuery : "오늘의 목표를 설정해 주세요";
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
const leaveRoom = () => {
|
||||||
|
router.push("/app");
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
goal,
|
||||||
|
leaveRoom,
|
||||||
|
};
|
||||||
|
};
|
||||||
33
src/features/space/hooks/useRoomEntry.ts
Normal file
33
src/features/space/hooks/useRoomEntry.ts
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { FormEvent, useMemo, useState } from "react";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
export const useRoomEntry = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const [focusGoal, setFocusGoal] = useState("");
|
||||||
|
|
||||||
|
const normalizedGoal = useMemo(() => focusGoal.trim(), [focusGoal]);
|
||||||
|
const canEnterRoom = normalizedGoal.length > 0;
|
||||||
|
|
||||||
|
const enterRoom = () => {
|
||||||
|
if (!canEnterRoom) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const query = new URLSearchParams({ goal: normalizedGoal }).toString();
|
||||||
|
router.push(`/space?${query}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
|
||||||
|
event.preventDefault();
|
||||||
|
enterRoom();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
focusGoal,
|
||||||
|
setFocusGoal,
|
||||||
|
canEnterRoom,
|
||||||
|
handleSubmit,
|
||||||
|
};
|
||||||
|
};
|
||||||
4
src/features/space/index.ts
Normal file
4
src/features/space/index.ts
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
export * from "./components/FocusRoomScreen";
|
||||||
|
export * from "./components/RoomEntryForm";
|
||||||
|
export * from "./hooks/useDashboardViewModel";
|
||||||
|
|
||||||
7
src/shared/config/settingsOptions.ts
Normal file
7
src/shared/config/settingsOptions.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export const NOTIFICATION_INTENSITY_OPTIONS = ['조용함', '기본', '강함'] as const;
|
||||||
|
|
||||||
|
export const DEFAULT_PRESET_OPTIONS = [
|
||||||
|
{ id: 'balanced', label: 'Balanced 25/5 + Rain Focus' },
|
||||||
|
{ id: 'deep-work', label: 'Deep Work 50/10 + Deep White' },
|
||||||
|
{ id: 'gentle', label: 'Gentle 25/5 + Silent' },
|
||||||
|
] as const;
|
||||||
3
src/shared/lib/cn.ts
Normal file
3
src/shared/lib/cn.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export const cn = (...classes: Array<string | false | null | undefined>) => {
|
||||||
|
return classes.filter(Boolean).join(' ');
|
||||||
|
};
|
||||||
23
src/shared/lib/useReducedMotion.ts
Normal file
23
src/shared/lib/useReducedMotion.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
|
||||||
|
const QUERY = '(prefers-reduced-motion: reduce)';
|
||||||
|
|
||||||
|
export const useReducedMotion = () => {
|
||||||
|
const [reduced, setReduced] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const media = window.matchMedia(QUERY);
|
||||||
|
const update = () => setReduced(media.matches);
|
||||||
|
|
||||||
|
update();
|
||||||
|
media.addEventListener('change', update);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
media.removeEventListener('change', update);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return reduced;
|
||||||
|
};
|
||||||
@@ -1,65 +1,65 @@
|
|||||||
import React, { ButtonHTMLAttributes } from 'react';
|
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
||||||
import Link, { LinkProps } from 'next/link';
|
import Link from 'next/link';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
// 1. 버튼 Variant(스타일) 및 Size 타입 정의
|
|
||||||
export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
|
export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
|
||||||
export type ButtonSize = 'sm' | 'md' | 'lg' | 'full';
|
export type ButtonSize = 'sm' | 'md' | 'lg' | 'full';
|
||||||
|
|
||||||
// 2. 공통 Props 인터페이스 정의 (HTML 버튼 속성 + Link 속성 혼합)
|
interface CommonButtonProps {
|
||||||
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
||||||
variant?: ButtonVariant;
|
variant?: ButtonVariant;
|
||||||
size?: ButtonSize;
|
size?: ButtonSize;
|
||||||
href?: string; // href가 주어지면 Next.js Link 컴포넌트로 렌더링
|
|
||||||
className?: string;
|
className?: string;
|
||||||
children: React.ReactNode;
|
children: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
type LinkButtonProps = CommonButtonProps & {
|
||||||
* VibeRoom 공통 버튼 컴포넌트
|
href: string;
|
||||||
* (3-Color System 엄격 적용: #304d6d, #63adf2, #a7cced)
|
};
|
||||||
*/
|
|
||||||
export const Button = React.forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(
|
type NativeButtonProps = CommonButtonProps &
|
||||||
(
|
ButtonHTMLAttributes<HTMLButtonElement> & {
|
||||||
{ variant = 'primary', size = 'md', href, className = '', children, ...props },
|
href?: undefined;
|
||||||
ref
|
};
|
||||||
) => {
|
|
||||||
// 공통 베이스 스타일
|
export type ButtonProps = LinkButtonProps | NativeButtonProps;
|
||||||
const baseStyle = "inline-flex items-center justify-center font-bold rounded-xl transition-all duration-200";
|
|
||||||
|
const baseStyle =
|
||||||
|
'inline-flex items-center justify-center rounded-xl font-semibold transition-all duration-200 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 disabled:cursor-not-allowed disabled:opacity-55';
|
||||||
|
|
||||||
// Variant별 테마 (VibeRoom 3-Color System)
|
|
||||||
const variants: Record<ButtonVariant, string> = {
|
const variants: Record<ButtonVariant, string> = {
|
||||||
primary: "bg-brand-primary text-white hover:bg-brand-primary/90 shadow-sm",
|
primary: 'bg-brand-primary text-white shadow-sm hover:bg-brand-primary/90',
|
||||||
secondary: "bg-slate-50 text-brand-dark hover:bg-slate-100",
|
secondary: 'bg-slate-100 text-brand-dark hover:bg-slate-200',
|
||||||
outline: "bg-white/50 text-brand-dark border border-brand-dark/20 hover:bg-white shadow-sm",
|
outline: 'bg-white/80 text-brand-dark ring-1 ring-slate-300 hover:bg-white',
|
||||||
ghost: "bg-transparent text-brand-dark/80 hover:text-brand-primary",
|
ghost: 'bg-transparent text-brand-dark/80 hover:bg-brand-dark/8 hover:text-brand-dark',
|
||||||
};
|
};
|
||||||
|
|
||||||
// 크기별 테마
|
|
||||||
const sizes: Record<ButtonSize, string> = {
|
const sizes: Record<ButtonSize, string> = {
|
||||||
sm: "px-4 py-2 text-sm",
|
sm: 'h-9 px-3 text-sm',
|
||||||
md: "px-5 py-2.5 text-base",
|
md: 'h-10 px-4 text-sm',
|
||||||
lg: "px-8 py-4 text-lg",
|
lg: 'h-12 px-5 text-base',
|
||||||
full: "w-full py-3 px-4 text-base",
|
full: 'h-11 w-full px-4 text-sm',
|
||||||
};
|
};
|
||||||
|
|
||||||
const combinedClassName = `${baseStyle} ${variants[variant]} ${sizes[size]} ${className}`;
|
export const Button = ({
|
||||||
|
variant = 'primary',
|
||||||
|
size = 'md',
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: ButtonProps) => {
|
||||||
|
const style = cn(baseStyle, variants[variant], sizes[size], className);
|
||||||
|
|
||||||
// href 속성이 있으면 Next.js Link로 렌더링
|
if ('href' in props && props.href) {
|
||||||
if (href) {
|
|
||||||
return (
|
return (
|
||||||
<Link href={href} className={combinedClassName} ref={ref as React.Ref<HTMLAnchorElement>}>
|
<Link href={props.href} className={style}>
|
||||||
{children}
|
{children}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 기본은 HTML Button
|
|
||||||
return (
|
return (
|
||||||
<button className={combinedClassName} ref={ref as React.Ref<HTMLButtonElement>} {...props}>
|
<button {...props} className={style}>
|
||||||
{children}
|
{children}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
);
|
|
||||||
|
|
||||||
Button.displayName = 'Button';
|
|
||||||
|
|||||||
42
src/shared/ui/Chip.tsx
Normal file
42
src/shared/ui/Chip.tsx
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import type { ButtonHTMLAttributes, ReactNode } from 'react';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
|
type ChipTone = 'neutral' | 'accent' | 'muted';
|
||||||
|
|
||||||
|
interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||||
|
active?: boolean;
|
||||||
|
tone?: ChipTone;
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
const toneStyles: Record<ChipTone, string> = {
|
||||||
|
neutral:
|
||||||
|
'bg-white/10 text-white/90 ring-1 ring-white/20 hover:bg-white/16',
|
||||||
|
accent:
|
||||||
|
'bg-sky-300/25 text-sky-100 ring-1 ring-sky-200/55 hover:bg-sky-300/35',
|
||||||
|
muted:
|
||||||
|
'bg-slate-300/25 text-slate-100 ring-1 ring-slate-200/40 hover:bg-slate-300/32',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Chip = ({
|
||||||
|
active = false,
|
||||||
|
tone = 'neutral',
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: ChipProps) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
{...props}
|
||||||
|
className={cn(
|
||||||
|
'inline-flex items-center gap-1 rounded-full px-3 py-1.5 text-xs font-medium transition-colors duration-200 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80',
|
||||||
|
toneStyles[tone],
|
||||||
|
active && 'bg-sky-300/34 text-sky-50 ring-sky-100/85',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
102
src/shared/ui/Dropdown.tsx
Normal file
102
src/shared/ui/Dropdown.tsx
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import { useEffect, useRef, useState } from 'react';
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
|
interface DropdownProps {
|
||||||
|
trigger: ReactNode;
|
||||||
|
children: ReactNode;
|
||||||
|
align?: 'left' | 'right';
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DropdownItemProps {
|
||||||
|
children: ReactNode;
|
||||||
|
href?: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
danger?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Dropdown = ({ trigger, children, align = 'right' }: DropdownProps) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const rootRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onPointerDown = (event: MouseEvent) => {
|
||||||
|
if (!rootRef.current?.contains(event.target as Node)) {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onEscape = (event: KeyboardEvent) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', onPointerDown);
|
||||||
|
document.addEventListener('keydown', onEscape);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', onPointerDown);
|
||||||
|
document.removeEventListener('keydown', onEscape);
|
||||||
|
};
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={rootRef} className="relative">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setOpen((current) => !current)}
|
||||||
|
className="rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/70"
|
||||||
|
>
|
||||||
|
{trigger}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{open ? (
|
||||||
|
<div
|
||||||
|
onClick={() => setOpen(false)}
|
||||||
|
className={cn(
|
||||||
|
'absolute top-[calc(100%+0.5rem)] z-30 min-w-44 rounded-xl border border-white/15 bg-slate-950/95 p-1 shadow-2xl shadow-slate-950/70',
|
||||||
|
align === 'right' ? 'right-0' : 'left-0',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DropdownItem = ({
|
||||||
|
children,
|
||||||
|
href,
|
||||||
|
onClick,
|
||||||
|
danger = false,
|
||||||
|
}: DropdownItemProps) => {
|
||||||
|
const className = cn(
|
||||||
|
'flex w-full items-center rounded-lg px-3 py-2 text-left text-sm transition-colors',
|
||||||
|
danger
|
||||||
|
? 'text-rose-200 hover:bg-rose-300/20'
|
||||||
|
: 'text-white/90 hover:bg-white/10 hover:text-white',
|
||||||
|
);
|
||||||
|
|
||||||
|
if (href) {
|
||||||
|
return (
|
||||||
|
<Link href={href} className={className}>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button type="button" onClick={onClick} className={className}>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
26
src/shared/ui/GlassCard.tsx
Normal file
26
src/shared/ui/GlassCard.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import type { HTMLAttributes } from 'react';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
|
interface GlassCardProps extends HTMLAttributes<HTMLDivElement> {
|
||||||
|
elevated?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const GlassCard = ({
|
||||||
|
elevated = false,
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
...props
|
||||||
|
}: GlassCardProps) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
{...props}
|
||||||
|
className={cn(
|
||||||
|
'rounded-2xl border border-white/20 bg-slate-950/35 backdrop-blur-xl',
|
||||||
|
elevated && 'shadow-[0_24px_60px_rgba(15,23,42,0.42)]',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
97
src/shared/ui/Modal.tsx
Normal file
97
src/shared/ui/Modal.tsx
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
import { useReducedMotion } from '@/shared/lib/useReducedMotion';
|
||||||
|
|
||||||
|
interface ModalProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
onClose: () => void;
|
||||||
|
children: ReactNode;
|
||||||
|
footer?: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Modal = ({
|
||||||
|
isOpen,
|
||||||
|
title,
|
||||||
|
description,
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
footer,
|
||||||
|
}: ModalProps) => {
|
||||||
|
const reducedMotion = useReducedMotion();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const onKeyDown = (event: KeyboardEvent) => {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('keydown', onKeyDown);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('keydown', onKeyDown);
|
||||||
|
};
|
||||||
|
}, [isOpen, onClose]);
|
||||||
|
|
||||||
|
if (!isOpen) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-end justify-center p-4 sm:items-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="모달 닫기"
|
||||||
|
onClick={onClose}
|
||||||
|
className="absolute inset-0 bg-slate-950/78 backdrop-blur-sm"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div
|
||||||
|
role="dialog"
|
||||||
|
aria-modal="true"
|
||||||
|
aria-labelledby="custom-entry-modal-title"
|
||||||
|
className={cn(
|
||||||
|
'relative z-10 w-full max-w-3xl overflow-hidden rounded-3xl border border-white/20 bg-slate-950/92 shadow-[0_30px_100px_rgba(2,6,23,0.65)]',
|
||||||
|
reducedMotion
|
||||||
|
? 'transition-none'
|
||||||
|
: 'transition-transform duration-300 ease-out motion-reduce:transition-none',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<header className="border-b border-white/12 px-6 py-5 sm:px-7">
|
||||||
|
<div className="flex items-start justify-between gap-4">
|
||||||
|
<div>
|
||||||
|
<h2 id="custom-entry-modal-title" className="text-lg font-semibold text-white">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
{description ? (
|
||||||
|
<p className="mt-1 text-sm text-white/65">{description}</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="rounded-lg border border-white/20 px-2.5 py-1.5 text-xs text-white/80 transition hover:bg-white/10 hover:text-white"
|
||||||
|
>
|
||||||
|
닫기
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="max-h-[68vh] overflow-y-auto px-6 py-5 sm:px-7">{children}</div>
|
||||||
|
|
||||||
|
{footer ? (
|
||||||
|
<footer className="border-t border-white/12 bg-slate-900/80 px-6 py-4 sm:px-7">{footer}</footer>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
36
src/shared/ui/Tabs.tsx
Normal file
36
src/shared/ui/Tabs.tsx
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
|
export interface TabOption {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TabsProps {
|
||||||
|
value: string;
|
||||||
|
options: TabOption[];
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Tabs = ({ value, options, onChange }: TabsProps) => {
|
||||||
|
return (
|
||||||
|
<div className="inline-flex w-full rounded-xl bg-white/6 p-1 ring-1 ring-white/15">
|
||||||
|
{options.map((option) => (
|
||||||
|
<button
|
||||||
|
key={option.value}
|
||||||
|
type="button"
|
||||||
|
onClick={() => onChange(option.value)}
|
||||||
|
className={cn(
|
||||||
|
'flex-1 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 motion-reduce:transition-none',
|
||||||
|
option.value === value
|
||||||
|
? 'bg-sky-300/22 text-sky-100'
|
||||||
|
: 'text-white/65 hover:bg-white/8 hover:text-white/90',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{option.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
68
src/shared/ui/Toast.tsx
Normal file
68
src/shared/ui/Toast.tsx
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { ReactNode } from 'react';
|
||||||
|
import { createContext, useCallback, useContext, useMemo, useState } from 'react';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
|
interface ToastPayload {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ToastItem extends ToastPayload {
|
||||||
|
id: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ToastContextValue {
|
||||||
|
pushToast: (payload: ToastPayload) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ToastContext = createContext<ToastContextValue | null>(null);
|
||||||
|
|
||||||
|
export const ToastProvider = ({ children }: { children: ReactNode }) => {
|
||||||
|
const [toasts, setToasts] = useState<ToastItem[]>([]);
|
||||||
|
|
||||||
|
const pushToast = useCallback((payload: ToastPayload) => {
|
||||||
|
const id = Date.now() + Math.floor(Math.random() * 10000);
|
||||||
|
|
||||||
|
setToasts((current) => [...current, { id, ...payload }]);
|
||||||
|
|
||||||
|
window.setTimeout(() => {
|
||||||
|
setToasts((current) => current.filter((toast) => toast.id !== id));
|
||||||
|
}, 2400);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const value = useMemo(() => ({ pushToast }), [pushToast]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ToastContext.Provider value={value}>
|
||||||
|
{children}
|
||||||
|
<div className="pointer-events-none fixed bottom-4 right-4 z-[70] flex w-[min(92vw,340px)] flex-col gap-2">
|
||||||
|
{toasts.map((toast) => (
|
||||||
|
<div
|
||||||
|
key={toast.id}
|
||||||
|
className={cn(
|
||||||
|
'rounded-xl border border-white/15 bg-slate-950/92 px-4 py-3 text-sm text-white shadow-lg shadow-slate-950/60',
|
||||||
|
'animate-[toast-in_180ms_ease-out] motion-reduce:animate-none',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<p className="font-medium">{toast.title}</p>
|
||||||
|
{toast.description ? (
|
||||||
|
<p className="mt-1 text-xs text-white/70">{toast.description}</p>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ToastContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useToast = () => {
|
||||||
|
const context = useContext(ToastContext);
|
||||||
|
|
||||||
|
if (!context) {
|
||||||
|
throw new Error('useToast must be used within ToastProvider');
|
||||||
|
}
|
||||||
|
|
||||||
|
return context;
|
||||||
|
};
|
||||||
7
src/shared/ui/index.ts
Normal file
7
src/shared/ui/index.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
export * from './Button';
|
||||||
|
export * from './Chip';
|
||||||
|
export * from './Dropdown';
|
||||||
|
export * from './GlassCard';
|
||||||
|
export * from './Modal';
|
||||||
|
export * from './Tabs';
|
||||||
|
export * from './Toast';
|
||||||
1
src/widgets/app-hub/index.ts
Normal file
1
src/widgets/app-hub/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/AppHubWidget';
|
||||||
147
src/widgets/app-hub/ui/AppHubWidget.tsx
Normal file
147
src/widgets/app-hub/ui/AppHubWidget.tsx
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
import { useRouter } from 'next/navigation';
|
||||||
|
import { getRoomBackgroundStyle, ROOM_THEMES } from '@/entities/room';
|
||||||
|
import {
|
||||||
|
GOAL_CHIPS,
|
||||||
|
SOUND_PRESETS,
|
||||||
|
TIMER_PRESETS,
|
||||||
|
TODAY_ONE_LINER,
|
||||||
|
type GoalChip,
|
||||||
|
} from '@/entities/session';
|
||||||
|
import { MOCK_VIEWER } from '@/entities/user';
|
||||||
|
import { type CustomEntrySelection } from '@/features/custom-entry-modal';
|
||||||
|
import { useRoomSelection } from '@/features/room-select';
|
||||||
|
import { useToast } from '@/shared/ui';
|
||||||
|
import { AppTopBar } from '@/widgets/app-top-bar/ui/AppTopBar';
|
||||||
|
import { CustomEntryWidget } from '@/widgets/custom-entry-widget/ui/CustomEntryWidget';
|
||||||
|
import { RoomsGalleryWidget } from '@/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget';
|
||||||
|
import { StartRitualWidget } from '@/widgets/start-ritual-widget/ui/StartRitualWidget';
|
||||||
|
|
||||||
|
const buildSpaceQuery = (
|
||||||
|
roomId: string,
|
||||||
|
goalInput: string,
|
||||||
|
soundPresetId: string,
|
||||||
|
timerLabel: string,
|
||||||
|
) => {
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
room: roomId,
|
||||||
|
sound: soundPresetId,
|
||||||
|
timer: timerLabel,
|
||||||
|
});
|
||||||
|
|
||||||
|
const normalizedGoal = goalInput.trim();
|
||||||
|
|
||||||
|
if (normalizedGoal) {
|
||||||
|
params.set('goal', normalizedGoal);
|
||||||
|
}
|
||||||
|
|
||||||
|
return params.toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AppHubWidget = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { pushToast } = useToast();
|
||||||
|
const { selectedRoom, selectedRoomId, selectRoom } = useRoomSelection();
|
||||||
|
|
||||||
|
const [goalInput, setGoalInput] = useState('');
|
||||||
|
const [selectedGoalId, setSelectedGoalId] = useState<string | null>(null);
|
||||||
|
const [isCustomEntryOpen, setCustomEntryOpen] = useState(false);
|
||||||
|
|
||||||
|
const enterSpace = (soundPresetId: string, timerLabel: string) => {
|
||||||
|
const query = buildSpaceQuery(
|
||||||
|
selectedRoomId,
|
||||||
|
goalInput,
|
||||||
|
soundPresetId,
|
||||||
|
timerLabel,
|
||||||
|
);
|
||||||
|
|
||||||
|
router.push(`/space?${query}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGoalChipSelect = (chip: GoalChip) => {
|
||||||
|
setSelectedGoalId(chip.id);
|
||||||
|
setGoalInput(chip.label);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGoalInputChange = (value: string) => {
|
||||||
|
setGoalInput(value);
|
||||||
|
|
||||||
|
if (selectedGoalId && value.trim() === '') {
|
||||||
|
setSelectedGoalId(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleQuickEnter = () => {
|
||||||
|
enterSpace(SOUND_PRESETS[0].id, TIMER_PRESETS[0].label);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCustomEnter = (selection: CustomEntrySelection) => {
|
||||||
|
setCustomEntryOpen(false);
|
||||||
|
enterSpace(selection.soundId, selection.timerLabel);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
pushToast({
|
||||||
|
title: '로그아웃은 목업에서만 동작해요',
|
||||||
|
description: '실제 인증 로직은 연결하지 않았습니다.',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative min-h-screen overflow-hidden text-white">
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="absolute inset-0"
|
||||||
|
style={getRoomBackgroundStyle(selectedRoom)}
|
||||||
|
/>
|
||||||
|
<div aria-hidden className="absolute inset-0 bg-slate-950/60" />
|
||||||
|
<div
|
||||||
|
aria-hidden
|
||||||
|
className="absolute inset-0 opacity-40"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 2px)",
|
||||||
|
mixBlendMode: 'soft-light',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative z-10 flex min-h-screen flex-col">
|
||||||
|
<AppTopBar
|
||||||
|
user={MOCK_VIEWER}
|
||||||
|
oneLiner={TODAY_ONE_LINER}
|
||||||
|
onLogout={handleLogout}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<main className="mx-auto w-full max-w-7xl flex-1 px-4 pb-8 pt-6 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid gap-6 xl:grid-cols-[minmax(320px,420px),1fr]">
|
||||||
|
<StartRitualWidget
|
||||||
|
goalInput={goalInput}
|
||||||
|
selectedGoalId={selectedGoalId}
|
||||||
|
goalChips={GOAL_CHIPS}
|
||||||
|
onGoalInputChange={handleGoalInputChange}
|
||||||
|
onGoalChipSelect={handleGoalChipSelect}
|
||||||
|
onQuickEnter={handleQuickEnter}
|
||||||
|
onOpenCustomEntry={() => setCustomEntryOpen(true)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<RoomsGalleryWidget
|
||||||
|
rooms={ROOM_THEMES}
|
||||||
|
selectedRoomId={selectedRoomId}
|
||||||
|
onRoomSelect={selectRoom}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CustomEntryWidget
|
||||||
|
isOpen={isCustomEntryOpen}
|
||||||
|
selectedRoomId={selectedRoomId}
|
||||||
|
onSelectRoom={selectRoom}
|
||||||
|
onClose={() => setCustomEntryOpen(false)}
|
||||||
|
onEnter={handleCustomEnter}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/app-top-bar/index.ts
Normal file
1
src/widgets/app-top-bar/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/AppTopBar';
|
||||||
27
src/widgets/app-top-bar/ui/AppTopBar.tsx
Normal file
27
src/widgets/app-top-bar/ui/AppTopBar.tsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import type { ViewerProfile } from '@/entities/user';
|
||||||
|
import { ProfileMenu } from '@/features/profile-menu';
|
||||||
|
|
||||||
|
interface AppTopBarProps {
|
||||||
|
user: ViewerProfile;
|
||||||
|
oneLiner: string;
|
||||||
|
onLogout: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AppTopBar = ({ user, oneLiner, onLogout }: AppTopBarProps) => {
|
||||||
|
return (
|
||||||
|
<header className="sticky top-0 z-20 border-b border-white/10 bg-slate-950/35 px-4 py-3 backdrop-blur-lg sm:px-6">
|
||||||
|
<div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4">
|
||||||
|
<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 text-white">
|
||||||
|
V
|
||||||
|
</span>
|
||||||
|
<p className="text-sm font-semibold tracking-tight text-white">VibeRoom</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="hidden text-center text-sm text-white/75 md:block">{oneLiner}</p>
|
||||||
|
|
||||||
|
<ProfileMenu user={user} onLogout={onLogout} />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/custom-entry-widget/index.ts
Normal file
1
src/widgets/custom-entry-widget/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/CustomEntryWidget';
|
||||||
30
src/widgets/custom-entry-widget/ui/CustomEntryWidget.tsx
Normal file
30
src/widgets/custom-entry-widget/ui/CustomEntryWidget.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import {
|
||||||
|
type CustomEntrySelection,
|
||||||
|
CustomEntryModal,
|
||||||
|
} from '@/features/custom-entry-modal';
|
||||||
|
|
||||||
|
interface CustomEntryWidgetProps {
|
||||||
|
isOpen: boolean;
|
||||||
|
selectedRoomId: string;
|
||||||
|
onSelectRoom: (roomId: string) => void;
|
||||||
|
onClose: () => void;
|
||||||
|
onEnter: (selection: CustomEntrySelection) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CustomEntryWidget = ({
|
||||||
|
isOpen,
|
||||||
|
selectedRoomId,
|
||||||
|
onSelectRoom,
|
||||||
|
onClose,
|
||||||
|
onEnter,
|
||||||
|
}: CustomEntryWidgetProps) => {
|
||||||
|
return (
|
||||||
|
<CustomEntryModal
|
||||||
|
isOpen={isOpen}
|
||||||
|
selectedRoomId={selectedRoomId}
|
||||||
|
onSelectRoom={onSelectRoom}
|
||||||
|
onClose={onClose}
|
||||||
|
onEnter={onEnter}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/notes-sheet/index.ts
Normal file
1
src/widgets/notes-sheet/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/NotesSheetWidget';
|
||||||
37
src/widgets/notes-sheet/ui/NotesSheetWidget.tsx
Normal file
37
src/widgets/notes-sheet/ui/NotesSheetWidget.tsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { DistractionDumpNotesContent } from '@/features/distraction-dump';
|
||||||
|
|
||||||
|
interface NotesSheetWidgetProps {
|
||||||
|
onClose: () => void;
|
||||||
|
onNoteAdded?: (note: string) => void;
|
||||||
|
onNoteRemoved?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const NotesSheetWidget = ({
|
||||||
|
onClose,
|
||||||
|
onNoteAdded,
|
||||||
|
onNoteRemoved,
|
||||||
|
}: NotesSheetWidgetProps) => {
|
||||||
|
return (
|
||||||
|
<aside className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,340px)] 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">떠오른 생각</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="flex-1 overflow-y-auto px-4 py-4">
|
||||||
|
<DistractionDumpNotesContent
|
||||||
|
onNoteAdded={onNoteAdded}
|
||||||
|
onNoteRemoved={onNoteRemoved}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
};
|
||||||
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/room-sheet/index.ts
Normal file
1
src/widgets/room-sheet/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/RoomSheetWidget';
|
||||||
98
src/widgets/room-sheet/ui/RoomSheetWidget.tsx
Normal file
98
src/widgets/room-sheet/ui/RoomSheetWidget.tsx
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
import type { RoomPresence } from '@/entities/room';
|
||||||
|
import type { CheckInPhrase, ReactionOption } from '@/entities/session';
|
||||||
|
import { CompactCheckInChips } from '@/features/check-in';
|
||||||
|
import { ReactionIconRow } from '@/features/reactions';
|
||||||
|
import { Chip } from '@/shared/ui';
|
||||||
|
|
||||||
|
interface RoomSheetWidgetProps {
|
||||||
|
roomName: string;
|
||||||
|
activeMembers: number;
|
||||||
|
presence: RoomPresence;
|
||||||
|
checkInPhrases: CheckInPhrase[];
|
||||||
|
reactions: ReactionOption[];
|
||||||
|
lastCheckIn: string | null;
|
||||||
|
onClose: () => void;
|
||||||
|
onCheckIn: (message: string) => void;
|
||||||
|
onReaction: (reaction: ReactionOption) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RoomSheetWidget = ({
|
||||||
|
roomName,
|
||||||
|
activeMembers,
|
||||||
|
presence,
|
||||||
|
checkInPhrases,
|
||||||
|
reactions,
|
||||||
|
lastCheckIn,
|
||||||
|
onClose,
|
||||||
|
onCheckIn,
|
||||||
|
onReaction,
|
||||||
|
}: RoomSheetWidgetProps) => {
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
className="fixed bottom-4 right-16 top-4 z-40 w-[min(92vw,340px)] 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="space-y-3 border-b border-white/12 px-4 py-4">
|
||||||
|
<div className="flex items-start justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-base font-semibold text-white">{roomName}</h2>
|
||||||
|
<p className="text-xs text-white/70">현재 {activeMembers}명 집중 중</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-1.5">
|
||||||
|
<Chip tone="accent" className="!cursor-default !px-2 !py-1 text-[11px]">
|
||||||
|
Focus {presence.focus}
|
||||||
|
</Chip>
|
||||||
|
<Chip className="!cursor-default !px-2 !py-1 text-[11px]">
|
||||||
|
Break {presence.break}
|
||||||
|
</Chip>
|
||||||
|
<Chip className="!cursor-default !px-2 !py-1 text-[11px]">
|
||||||
|
Away {presence.away}
|
||||||
|
</Chip>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3 rounded-xl border border-white/12 bg-slate-900/45 p-3">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-[11px] font-medium uppercase tracking-[0.1em] text-white/58">
|
||||||
|
Check-in
|
||||||
|
</p>
|
||||||
|
<CompactCheckInChips
|
||||||
|
phrases={checkInPhrases}
|
||||||
|
onCheckIn={onCheckIn}
|
||||||
|
collapsedCount={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-[11px] font-medium uppercase tracking-[0.1em] text-white/58">
|
||||||
|
Reactions
|
||||||
|
</p>
|
||||||
|
<ReactionIconRow reactions={reactions} onReact={onReaction} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="flex-1 px-4 py-4">
|
||||||
|
<p className="text-xs text-white/70">
|
||||||
|
마지막 체크인:{' '}
|
||||||
|
<span className="font-medium text-white">
|
||||||
|
{lastCheckIn ?? '아직 체크인이 없습니다'}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
<p className="mt-2 text-xs text-white/55">
|
||||||
|
채팅/사용자 리스트는 표시하지 않는 집중형 존재감 시트입니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/rooms-gallery-widget/index.ts
Normal file
1
src/widgets/rooms-gallery-widget/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/RoomsGalleryWidget';
|
||||||
35
src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx
Normal file
35
src/widgets/rooms-gallery-widget/ui/RoomsGalleryWidget.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import type { RoomTheme } from '@/entities/room';
|
||||||
|
import { RoomPreviewCard } from '@/features/room-select';
|
||||||
|
import { GlassCard } from '@/shared/ui';
|
||||||
|
|
||||||
|
interface RoomsGalleryWidgetProps {
|
||||||
|
rooms: RoomTheme[];
|
||||||
|
selectedRoomId: string;
|
||||||
|
onRoomSelect: (roomId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RoomsGalleryWidget = ({
|
||||||
|
rooms,
|
||||||
|
selectedRoomId,
|
||||||
|
onRoomSelect,
|
||||||
|
}: RoomsGalleryWidgetProps) => {
|
||||||
|
return (
|
||||||
|
<GlassCard elevated className="space-y-5 p-5 sm:p-6">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<h2 className="text-xl font-semibold text-white">오늘의 공간</h2>
|
||||||
|
<p className="text-sm text-white/70">감정에 맞는 분위기 하나만 고르면 충분해요.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
||||||
|
{rooms.map((room) => (
|
||||||
|
<RoomPreviewCard
|
||||||
|
key={room.id}
|
||||||
|
room={room}
|
||||||
|
selected={room.id === selectedRoomId}
|
||||||
|
onSelect={onRoomSelect}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/settings-panel/index.ts
Normal file
1
src/widgets/settings-panel/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/SettingsPanelWidget';
|
||||||
110
src/widgets/settings-panel/ui/SettingsPanelWidget.tsx
Normal file
110
src/widgets/settings-panel/ui/SettingsPanelWidget.tsx
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import Link from 'next/link';
|
||||||
|
import { useState } from 'react';
|
||||||
|
import {
|
||||||
|
DEFAULT_PRESET_OPTIONS,
|
||||||
|
NOTIFICATION_INTENSITY_OPTIONS,
|
||||||
|
} from '@/shared/config/settingsOptions';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
|
||||||
|
export const SettingsPanelWidget = () => {
|
||||||
|
const [reduceMotion, setReduceMotion] = useState(false);
|
||||||
|
const [notificationIntensity, setNotificationIntensity] =
|
||||||
|
useState<(typeof NOTIFICATION_INTENSITY_OPTIONS)[number]>('기본');
|
||||||
|
const [defaultPresetId, setDefaultPresetId] = useState<
|
||||||
|
(typeof DEFAULT_PRESET_OPTIONS)[number]['id']
|
||||||
|
>(DEFAULT_PRESET_OPTIONS[0].id);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-[radial-gradient(circle_at_80%_0%,rgba(34,211,238,0.16),transparent_48%),linear-gradient(170deg,#020617_0%,#111827_54%,#0f172a_100%)] text-white">
|
||||||
|
<div className="mx-auto w-full max-w-4xl 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">Settings</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-4">
|
||||||
|
<section className="rounded-xl border border-white/15 bg-white/8 p-4">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-base font-semibold text-white">Reduce Motion</h2>
|
||||||
|
<p className="mt-1 text-sm text-white/70">
|
||||||
|
전환 애니메이션을 최소화합니다. (UI 토글 목업)
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
role="switch"
|
||||||
|
aria-checked={reduceMotion}
|
||||||
|
onClick={() => setReduceMotion((current) => !current)}
|
||||||
|
className={cn(
|
||||||
|
'inline-flex w-16 items-center rounded-full border px-1 py-1 transition-colors',
|
||||||
|
reduceMotion
|
||||||
|
? 'border-sky-200/70 bg-sky-300/28'
|
||||||
|
: 'border-white/30 bg-white/10',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'h-5 w-5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
|
||||||
|
reduceMotion ? 'translate-x-9' : 'translate-x-0',
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="rounded-xl border border-white/15 bg-white/8 p-4">
|
||||||
|
<h2 className="text-base font-semibold text-white">알림 강도</h2>
|
||||||
|
<p className="mt-1 text-sm text-white/70">집중 시작/종료 신호의 존재감을 선택합니다.</p>
|
||||||
|
<div className="mt-3 flex flex-wrap gap-2">
|
||||||
|
{NOTIFICATION_INTENSITY_OPTIONS.map((option) => (
|
||||||
|
<button
|
||||||
|
key={option}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setNotificationIntensity(option)}
|
||||||
|
className={cn(
|
||||||
|
'rounded-full border px-3 py-1.5 text-xs transition-colors',
|
||||||
|
notificationIntensity === option
|
||||||
|
? 'border-sky-200/80 bg-sky-300/25 text-sky-50'
|
||||||
|
: 'border-white/24 bg-white/8 text-white/82 hover:bg-white/14',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{option}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="rounded-xl border border-white/15 bg-white/8 p-4">
|
||||||
|
<h2 className="text-base font-semibold text-white">기본 프리셋</h2>
|
||||||
|
<p className="mt-1 text-sm text-white/70">입장 시 자동 선택될 추천 세트를 고릅니다.</p>
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
{DEFAULT_PRESET_OPTIONS.map((preset) => (
|
||||||
|
<button
|
||||||
|
key={preset.id}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setDefaultPresetId(preset.id)}
|
||||||
|
className={cn(
|
||||||
|
'w-full rounded-lg border px-3 py-2 text-left text-sm transition-colors',
|
||||||
|
defaultPresetId === preset.id
|
||||||
|
? 'border-sky-200/75 bg-sky-300/20 text-sky-50'
|
||||||
|
: 'border-white/18 bg-white/5 text-white/85 hover:bg-white/10',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{preset.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/space-shell/index.ts
Normal file
1
src/widgets/space-shell/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/SpaceSkeletonWidget';
|
||||||
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>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/space-timer-hud/index.ts
Normal file
1
src/widgets/space-timer-hud/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/SpaceTimerHudWidget';
|
||||||
56
src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
Normal file
56
src/widgets/space-timer-hud/ui/SpaceTimerHudWidget.tsx
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
import { Restart30sAction } from '@/features/restart-30s';
|
||||||
|
|
||||||
|
interface SpaceTimerHudWidgetProps {
|
||||||
|
timerLabel: string;
|
||||||
|
goal: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const HUD_ACTIONS = [
|
||||||
|
{ id: 'start', label: '시작', icon: '▶' },
|
||||||
|
{ id: 'pause', label: '일시정지', icon: '⏸' },
|
||||||
|
{ id: 'reset', label: '리셋', icon: '↺' },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
export const SpaceTimerHudWidget = ({
|
||||||
|
timerLabel,
|
||||||
|
goal,
|
||||||
|
className,
|
||||||
|
}: SpaceTimerHudWidgetProps) => {
|
||||||
|
return (
|
||||||
|
<div className={cn('pointer-events-none fixed inset-x-0 bottom-[4.7rem] z-20 px-4 pr-16 sm:px-6', className)}>
|
||||||
|
<div className="mx-auto w-full max-w-xl pointer-events-auto">
|
||||||
|
<section className="flex h-16 items-center justify-between gap-3 rounded-2xl border border-white/10 bg-black/25 px-3.5 backdrop-blur-sm">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="flex items-baseline gap-2">
|
||||||
|
<span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-white/62">
|
||||||
|
Focus
|
||||||
|
</span>
|
||||||
|
<span className="text-2xl font-semibold tracking-tight text-white">25:00</span>
|
||||||
|
<span className="text-[11px] text-white/62">{timerLabel}</span>
|
||||||
|
</div>
|
||||||
|
<p className="truncate text-[11px] text-white/58">목표: {goal}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2.5">
|
||||||
|
<div className="flex items-center gap-1.5">
|
||||||
|
{HUD_ACTIONS.map((action) => (
|
||||||
|
<button
|
||||||
|
key={action.id}
|
||||||
|
type="button"
|
||||||
|
title={action.label}
|
||||||
|
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-white/15 bg-white/8 text-sm text-white/82 transition-colors hover:bg-white/14 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-200/80"
|
||||||
|
>
|
||||||
|
<span aria-hidden>{action.icon}</span>
|
||||||
|
<span className="sr-only">{action.label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Restart30sAction />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/space-tools-dock/index.ts
Normal file
1
src/widgets/space-tools-dock/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/SpaceToolsDockWidget';
|
||||||
23
src/widgets/space-tools-dock/model/useSpaceToolsDock.ts
Normal file
23
src/widgets/space-tools-dock/model/useSpaceToolsDock.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
export type SpaceToolPanel = 'room' | 'notes' | 'quick' | null;
|
||||||
|
|
||||||
|
export const useSpaceToolsDock = () => {
|
||||||
|
const [activePanel, setActivePanel] = useState<SpaceToolPanel>(null);
|
||||||
|
|
||||||
|
const togglePanel = (panel: Exclude<SpaceToolPanel, null>) => {
|
||||||
|
setActivePanel((current) => (current === panel ? null : panel));
|
||||||
|
};
|
||||||
|
|
||||||
|
const closePanel = () => {
|
||||||
|
setActivePanel(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
activePanel,
|
||||||
|
togglePanel,
|
||||||
|
closePanel,
|
||||||
|
};
|
||||||
|
};
|
||||||
105
src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
Normal file
105
src/widgets/space-tools-dock/ui/SpaceToolsDockWidget.tsx
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import type { RoomPresence } from '@/entities/room';
|
||||||
|
import { CHECK_IN_PHRASES, REACTION_OPTIONS } from '@/entities/session';
|
||||||
|
import { useCheckIn } from '@/features/check-in';
|
||||||
|
import { useToast } from '@/shared/ui';
|
||||||
|
import { cn } from '@/shared/lib/cn';
|
||||||
|
import { NotesSheetWidget } from '@/widgets/notes-sheet';
|
||||||
|
import { QuickSheetWidget } from '@/widgets/quick-sheet';
|
||||||
|
import { RoomSheetWidget } from '@/widgets/room-sheet';
|
||||||
|
import { useSpaceToolsDock } from '../model/useSpaceToolsDock';
|
||||||
|
|
||||||
|
interface SpaceToolsDockWidgetProps {
|
||||||
|
roomName: string;
|
||||||
|
activeMembers: number;
|
||||||
|
presence: RoomPresence;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TOOL_BUTTONS: Array<{
|
||||||
|
id: 'room' | 'notes' | 'quick';
|
||||||
|
icon: string;
|
||||||
|
label: string;
|
||||||
|
}> = [
|
||||||
|
{ id: 'room', icon: '👥', label: 'Room' },
|
||||||
|
{ id: 'notes', icon: '📝', label: 'Notes' },
|
||||||
|
{ id: 'quick', icon: '⚙️', label: 'Quick' },
|
||||||
|
];
|
||||||
|
|
||||||
|
export const SpaceToolsDockWidget = ({
|
||||||
|
roomName,
|
||||||
|
activeMembers,
|
||||||
|
presence,
|
||||||
|
}: SpaceToolsDockWidgetProps) => {
|
||||||
|
const { pushToast } = useToast();
|
||||||
|
const { lastCheckIn, recordCheckIn } = useCheckIn();
|
||||||
|
const { activePanel, closePanel, togglePanel } = useSpaceToolsDock();
|
||||||
|
|
||||||
|
const handleCheckIn = (message: string) => {
|
||||||
|
recordCheckIn(message);
|
||||||
|
pushToast({ title: `체크인: ${message}` });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleReaction = (emoji: string) => {
|
||||||
|
pushToast({ title: `리액션: ${emoji}` });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{activePanel ? (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="시트 닫기"
|
||||||
|
onClick={closePanel}
|
||||||
|
className="fixed inset-0 z-30 bg-slate-950/10"
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="fixed right-2 top-1/2 z-50 -translate-y-1/2">
|
||||||
|
<div className="flex w-12 flex-col items-center gap-2 rounded-2xl border border-white/20 bg-slate-950/66 py-2 shadow-lg shadow-slate-950/60 backdrop-blur-xl">
|
||||||
|
{TOOL_BUTTONS.map((tool) => (
|
||||||
|
<button
|
||||||
|
key={tool.id}
|
||||||
|
type="button"
|
||||||
|
title={tool.label}
|
||||||
|
onClick={() => togglePanel(tool.id)}
|
||||||
|
className={cn(
|
||||||
|
'inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors',
|
||||||
|
activePanel === tool.id
|
||||||
|
? 'border-sky-200/75 bg-sky-300/28'
|
||||||
|
: 'border-white/20 bg-white/8 hover:bg-white/15',
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span aria-hidden>{tool.icon}</span>
|
||||||
|
<span className="sr-only">{tool.label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{activePanel === 'room' ? (
|
||||||
|
<RoomSheetWidget
|
||||||
|
roomName={roomName}
|
||||||
|
activeMembers={activeMembers}
|
||||||
|
presence={presence}
|
||||||
|
checkInPhrases={CHECK_IN_PHRASES}
|
||||||
|
reactions={REACTION_OPTIONS}
|
||||||
|
lastCheckIn={lastCheckIn}
|
||||||
|
onClose={closePanel}
|
||||||
|
onCheckIn={handleCheckIn}
|
||||||
|
onReaction={(reaction) => handleReaction(reaction.emoji)}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{activePanel === 'notes' ? (
|
||||||
|
<NotesSheetWidget
|
||||||
|
onClose={closePanel}
|
||||||
|
onNoteAdded={(note) => pushToast({ title: `노트 추가: ${note}` })}
|
||||||
|
onNoteRemoved={() => pushToast({ title: '노트를 정리했어요' })}
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{activePanel === 'quick' ? <QuickSheetWidget onClose={closePanel} /> : null}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/start-ritual-widget/index.ts
Normal file
1
src/widgets/start-ritual-widget/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/StartRitualWidget';
|
||||||
93
src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
Normal file
93
src/widgets/start-ritual-widget/ui/StartRitualWidget.tsx
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import type { GoalChip } from '@/entities/session';
|
||||||
|
import { Button, Chip, GlassCard } from '@/shared/ui';
|
||||||
|
|
||||||
|
interface StartRitualWidgetProps {
|
||||||
|
goalInput: string;
|
||||||
|
selectedGoalId: string | null;
|
||||||
|
goalChips: GoalChip[];
|
||||||
|
onGoalInputChange: (value: string) => void;
|
||||||
|
onGoalChipSelect: (chip: GoalChip) => void;
|
||||||
|
onQuickEnter: () => void;
|
||||||
|
onOpenCustomEntry: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StartRitualWidget = ({
|
||||||
|
goalInput,
|
||||||
|
selectedGoalId,
|
||||||
|
goalChips,
|
||||||
|
onGoalInputChange,
|
||||||
|
onGoalChipSelect,
|
||||||
|
onQuickEnter,
|
||||||
|
onOpenCustomEntry,
|
||||||
|
}: StartRitualWidgetProps) => {
|
||||||
|
const [isGoalOpen, setGoalOpen] = useState(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GlassCard elevated className="space-y-5 p-5 sm:p-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-semibold text-white">지금, 몰입을 시작해요</h1>
|
||||||
|
<p className="mt-2 text-sm leading-relaxed text-white/72">
|
||||||
|
공간은 들어가서 바꿔도 괜찮아요. 오늘은 한 조각만.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<label className="block text-xs font-medium uppercase tracking-[0.13em] text-white/65">
|
||||||
|
한 줄 메모(선택)
|
||||||
|
</label>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setGoalOpen((current) => !current)}
|
||||||
|
className="text-xs text-white/62 transition hover:text-white"
|
||||||
|
>
|
||||||
|
{isGoalOpen ? '접기' : '펼치기'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isGoalOpen ? (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
value={goalInput}
|
||||||
|
onChange={(event) => onGoalInputChange(event.target.value)}
|
||||||
|
placeholder="이번 세션 딱 1가지만 (예: 견적서 1페이지)"
|
||||||
|
className="w-full rounded-xl border border-white/20 bg-slate-950/55 px-3.5 py-3 text-sm text-white placeholder:text-white/45 focus:border-sky-200/60 focus:outline-none"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{goalChips.map((chip) => (
|
||||||
|
<Chip
|
||||||
|
key={chip.id}
|
||||||
|
active={selectedGoalId === chip.id}
|
||||||
|
onClick={() => onGoalChipSelect(chip)}
|
||||||
|
>
|
||||||
|
{chip.label}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="space-y-3">
|
||||||
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-end">
|
||||||
|
<Button
|
||||||
|
className="w-full px-6 sm:w-auto sm:min-w-[180px]"
|
||||||
|
onClick={onQuickEnter}
|
||||||
|
>
|
||||||
|
바로 입장
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="w-full sm:w-auto sm:min-w-[152px] !bg-white/6 !text-white/84 !ring-white/24 hover:!bg-white/12"
|
||||||
|
onClick={onOpenCustomEntry}
|
||||||
|
>
|
||||||
|
<span aria-hidden>⚙</span>
|
||||||
|
설정하고 입장
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</GlassCard>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
src/widgets/stats-overview/index.ts
Normal file
1
src/widgets/stats-overview/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export * from './ui/StatsOverviewWidget';
|
||||||
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