chore(cleanup): 미사용 코드 정리 및 레거시 파일 삭제
This commit is contained in:
@@ -1,3 +0,0 @@
|
||||
export * from './model/mockUser';
|
||||
export * from './model/types';
|
||||
export * from './ui/MembershipTierBadge';
|
||||
@@ -1,8 +0,0 @@
|
||||
import type { ViewerProfile } from './types';
|
||||
|
||||
export const MOCK_VIEWER: ViewerProfile = {
|
||||
id: 'viewer-1',
|
||||
name: '민서',
|
||||
avatarLabel: 'MS',
|
||||
membershipTier: 'pro',
|
||||
};
|
||||
@@ -1,8 +0,0 @@
|
||||
export type MembershipTier = 'pro' | 'normal' | 'team';
|
||||
|
||||
export interface ViewerProfile {
|
||||
id: string;
|
||||
name: string;
|
||||
avatarLabel: string;
|
||||
membershipTier: MembershipTier;
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import type { MembershipTier } from '@/entities/user/model/types';
|
||||
|
||||
interface MembershipTierBadgeProps {
|
||||
tier: MembershipTier;
|
||||
}
|
||||
|
||||
const TIER_META: Record<
|
||||
MembershipTier,
|
||||
{
|
||||
label: string;
|
||||
mobileLabel: string;
|
||||
surfaceClass: string;
|
||||
dotClass: string;
|
||||
}
|
||||
> = {
|
||||
pro: {
|
||||
label: 'PRO MEMBER',
|
||||
mobileLabel: 'PRO',
|
||||
surfaceClass:
|
||||
'border-[#af8b4c]/44 bg-[linear-gradient(138deg,rgba(255,251,240,0.98)_0%,rgba(248,235,206,0.92)_58%,rgba(236,214,166,0.9)_100%)] text-[#6e5326] ring-1 ring-white/56 shadow-[inset_0_1px_0_rgba(255,255,255,0.66),0_10px_22px_rgba(120,82,20,0.14)]',
|
||||
dotClass: 'bg-[#8f6a2c]/72',
|
||||
},
|
||||
normal: {
|
||||
label: 'NORMAL',
|
||||
mobileLabel: 'NORMAL',
|
||||
surfaceClass:
|
||||
'border-slate-600/22 bg-[linear-gradient(135deg,rgba(255,255,255,0.94)_0%,rgba(241,245,249,0.86)_100%)] text-slate-700/84 ring-1 ring-white/50 shadow-[inset_0_1px_0_rgba(255,255,255,0.58),0_8px_18px_rgba(15,23,42,0.09)]',
|
||||
dotClass: 'bg-slate-600/46',
|
||||
},
|
||||
team: {
|
||||
label: 'TEAM',
|
||||
mobileLabel: 'TEAM',
|
||||
surfaceClass:
|
||||
'border-teal-900/28 bg-[linear-gradient(140deg,rgba(236,253,250,0.95)_0%,rgba(204,251,241,0.82)_58%,rgba(186,230,253,0.76)_100%)] text-teal-900/84 ring-1 ring-white/52 shadow-[inset_0_1px_0_rgba(255,255,255,0.6),0_9px_18px_rgba(8,78,99,0.12)]',
|
||||
dotClass: 'bg-teal-900/54',
|
||||
},
|
||||
};
|
||||
|
||||
export const MembershipTierBadge = ({ tier }: MembershipTierBadgeProps) => {
|
||||
const tierMeta = TIER_META[tier];
|
||||
|
||||
return (
|
||||
<span
|
||||
className={`inline-flex h-9 min-w-[102px] items-center justify-center gap-1.5 whitespace-nowrap rounded-full border px-3.5 text-[11px] font-semibold tracking-[0.12em] backdrop-blur-sm sm:min-w-[128px] ${tierMeta.surfaceClass}`}
|
||||
>
|
||||
<span aria-hidden className={`h-1.5 w-1.5 rounded-full ${tierMeta.dotClass}`} />
|
||||
<span className="sm:hidden">{tierMeta.mobileLabel}</span>
|
||||
<span className="hidden sm:inline">{tierMeta.label}</span>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './model/useCheckIn';
|
||||
export * from './ui/CompactCheckInChips';
|
||||
export * from './ui/CheckInChips';
|
||||
@@ -1,16 +0,0 @@
|
||||
'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,
|
||||
};
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -1,53 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
};
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from './model/useCustomEntryForm';
|
||||
export * from './ui/CustomEntryModal';
|
||||
@@ -1,70 +0,0 @@
|
||||
'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,
|
||||
};
|
||||
};
|
||||
@@ -1,183 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { ROOM_THEMES } from '@/entities/room';
|
||||
import { SOUND_PRESETS, TIMER_PRESETS } from '@/entities/session';
|
||||
import { Button, Modal, Tabs } from '@/shared/ui';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
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="!border !border-brand-dark/16 !bg-white/72 !text-brand-dark hover:!bg-white"
|
||||
onClick={handleClose}
|
||||
>
|
||||
닫기
|
||||
</Button>
|
||||
<Button className="!shadow-none" onClick={handleEnter}>
|
||||
이 설정으로 입장
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<Tabs value={activeTab} options={tabOptions} onChange={(value) => setActiveTab(value as 'theme' | 'sound' | 'timer')} />
|
||||
|
||||
<div className="h-[350px] overflow-hidden rounded-2xl border border-brand-dark/12 bg-white/50 p-3 sm:h-[390px]">
|
||||
{activeTab === 'theme' ? (
|
||||
<div className="h-full overflow-y-auto pr-1">
|
||||
<div className="grid gap-2 sm:grid-cols-2">
|
||||
{ROOM_THEMES.map((room) => (
|
||||
<button
|
||||
key={room.id}
|
||||
type="button"
|
||||
onClick={() => onSelectRoom(room.id)}
|
||||
className={cn(
|
||||
'rounded-xl border px-3 py-3 text-left transition-colors',
|
||||
selectedRoomId === room.id
|
||||
? 'border-brand-primary/45 bg-brand-soft/58 text-brand-dark'
|
||||
: 'border-brand-dark/14 bg-white/72 text-brand-dark/84 hover:bg-white',
|
||||
)}
|
||||
>
|
||||
<p className="text-sm font-medium">{room.name}</p>
|
||||
<p className="mt-1 text-xs text-brand-dark/62">{room.description}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{activeTab === 'sound' ? (
|
||||
<div className="h-full overflow-y-auto pr-1">
|
||||
<div className="flex 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 font-medium transition-colors',
|
||||
selectedSoundId === preset.id
|
||||
? 'border-brand-primary/45 bg-brand-soft/58 text-brand-dark'
|
||||
: 'border-brand-dark/14 bg-white/75 text-brand-dark/82 hover:bg-white',
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{activeTab === 'timer' ? (
|
||||
<div className="h-full overflow-y-auto pr-1">
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{TIMER_PRESETS.map((preset) => (
|
||||
<button
|
||||
key={preset.id}
|
||||
type="button"
|
||||
onClick={() => setSelectedTimerId(preset.id)}
|
||||
className={cn(
|
||||
'rounded-full border px-3 py-1.5 text-xs font-medium transition-colors',
|
||||
selectedTimerId === preset.id
|
||||
? 'border-brand-primary/45 bg-brand-soft/58 text-brand-dark'
|
||||
: 'border-brand-dark/14 bg-white/75 text-brand-dark/82 hover:bg-white',
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{selectedTimerId === 'custom' ? (
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<label className="space-y-1 text-sm text-brand-dark/76">
|
||||
<span>집중(분)</span>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={customFocusMinutes}
|
||||
onChange={(event) => setCustomFocusMinutes(event.target.value)}
|
||||
className="w-full rounded-xl border border-brand-dark/18 bg-white/86 px-3 py-2 text-brand-dark placeholder:text-brand-dark/45"
|
||||
placeholder="25"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm text-brand-dark/76">
|
||||
<span>휴식(분)</span>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
value={customBreakMinutes}
|
||||
onChange={(event) => setCustomBreakMinutes(event.target.value)}
|
||||
className="w-full rounded-xl border border-brand-dark/18 bg-white/86 px-3 py-2 text-brand-dark placeholder:text-brand-dark/45"
|
||||
placeholder="5"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
export * from './model/useDistractionDump';
|
||||
export * from './model/useDistractionNotes';
|
||||
export * from './ui/DistractionDumpNotesContent';
|
||||
export * from './ui/DistractionDumpPanel';
|
||||
@@ -1,38 +0,0 @@
|
||||
'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,
|
||||
};
|
||||
};
|
||||
@@ -1,68 +0,0 @@
|
||||
'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,
|
||||
};
|
||||
};
|
||||
@@ -1,90 +0,0 @@
|
||||
'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>
|
||||
);
|
||||
};
|
||||
@@ -1,67 +0,0 @@
|
||||
'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,2 +0,0 @@
|
||||
export * from './model/useImmersionMode';
|
||||
export * from './ui/ImmersionModeToggle';
|
||||
@@ -1,24 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useToast } from '@/shared/ui';
|
||||
|
||||
export const useImmersionMode = () => {
|
||||
const { pushToast } = useToast();
|
||||
const [isImmersionMode, setImmersionMode] = useState(false);
|
||||
|
||||
const toggleImmersionMode = () => {
|
||||
setImmersionMode((current) => !current);
|
||||
};
|
||||
|
||||
const exitImmersionMode = () => {
|
||||
setImmersionMode(false);
|
||||
pushToast({ title: '나가기(더미)' });
|
||||
};
|
||||
|
||||
return {
|
||||
isImmersionMode,
|
||||
toggleImmersionMode,
|
||||
exitImmersionMode,
|
||||
};
|
||||
};
|
||||
@@ -1,25 +0,0 @@
|
||||
import { Toggle } from '@/shared/ui';
|
||||
|
||||
interface ImmersionModeToggleProps {
|
||||
enabled: boolean;
|
||||
onToggle: () => void;
|
||||
}
|
||||
|
||||
export const ImmersionModeToggle = ({
|
||||
enabled,
|
||||
onToggle,
|
||||
}: ImmersionModeToggleProps) => {
|
||||
return (
|
||||
<div className="flex items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2">
|
||||
<div>
|
||||
<p className="text-sm text-white/90">몰입 모드</p>
|
||||
<p className="text-[11px] text-white/56">배경 우선으로 화면 요소를 최소화합니다.</p>
|
||||
</div>
|
||||
<Toggle
|
||||
checked={enabled}
|
||||
onChange={onToggle}
|
||||
ariaLabel="몰입 모드 토글"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/ProfileMenu';
|
||||
@@ -1,53 +0,0 @@
|
||||
import type { ViewerProfile } from '@/entities/user';
|
||||
import { Dropdown, DropdownItem } from '@/shared/ui';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface ProfileMenuProps {
|
||||
user: ViewerProfile;
|
||||
onLogout: () => void;
|
||||
onOpenBilling?: () => void;
|
||||
}
|
||||
|
||||
const MEMBERSHIP_LABEL_MAP: Record<ViewerProfile['membershipTier'], string> = {
|
||||
pro: 'PRO MEMBER',
|
||||
normal: 'NORMAL',
|
||||
team: 'TEAM',
|
||||
};
|
||||
|
||||
export const ProfileMenu = ({ user, onLogout, onOpenBilling }: ProfileMenuProps) => {
|
||||
return (
|
||||
<Dropdown
|
||||
align="right"
|
||||
trigger={
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-brand-dark/14 bg-white/72 px-2.5 py-1.5 text-sm text-brand-dark/92 shadow-[0_12px_24px_rgba(15,23,42,0.08)] backdrop-blur-sm">
|
||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-brand-primary/14 text-xs font-semibold text-brand-primary/82">
|
||||
{user.avatarLabel}
|
||||
</span>
|
||||
<span className="hidden items-center sm:inline-flex">
|
||||
<span className="text-brand-dark/78">{user.name}</span>
|
||||
</span>
|
||||
</span>
|
||||
}
|
||||
>
|
||||
<div className="rounded-lg px-3 py-2">
|
||||
<p className="text-[11px] uppercase tracking-[0.14em] text-white/48">Membership</p>
|
||||
<p
|
||||
className={cn(
|
||||
'mt-1 text-xs font-medium',
|
||||
user.membershipTier === 'pro' ? 'text-amber-200/88' : 'text-white/80',
|
||||
)}
|
||||
>
|
||||
{MEMBERSHIP_LABEL_MAP[user.membershipTier]}
|
||||
</p>
|
||||
</div>
|
||||
{onOpenBilling ? (
|
||||
<DropdownItem onClick={onOpenBilling}>PRO 기능 보기</DropdownItem>
|
||||
) : null}
|
||||
<DropdownItem href="/stats">Stats</DropdownItem>
|
||||
<DropdownItem href="/settings">Settings</DropdownItem>
|
||||
<DropdownItem danger onClick={onLogout}>
|
||||
Logout
|
||||
</DropdownItem>
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
@@ -1,2 +0,0 @@
|
||||
export * from './ui/ReactionIconRow';
|
||||
export * from './ui/ReactionButtons';
|
||||
@@ -1,23 +0,0 @@
|
||||
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>
|
||||
);
|
||||
};
|
||||
@@ -1,31 +0,0 @@
|
||||
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,2 +0,0 @@
|
||||
export * from './model/useRoomSelection';
|
||||
export * from './ui/RoomPreviewCard';
|
||||
@@ -1,20 +0,0 @@
|
||||
'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,
|
||||
};
|
||||
};
|
||||
@@ -1,124 +0,0 @@
|
||||
import { getRoomCardBackgroundStyle, type RoomTheme } from '@/entities/room';
|
||||
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface RoomPreviewCardProps {
|
||||
room: RoomTheme;
|
||||
visualMode: AppHubVisualMode;
|
||||
variant?: 'hero' | 'compact';
|
||||
className?: string;
|
||||
selected: boolean;
|
||||
onSelect: (roomId: string) => void;
|
||||
}
|
||||
|
||||
export const RoomPreviewCard = ({
|
||||
room,
|
||||
visualMode,
|
||||
variant = 'hero',
|
||||
className,
|
||||
selected,
|
||||
onSelect,
|
||||
}: RoomPreviewCardProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
const compact = variant === 'compact';
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onSelect(room.id)}
|
||||
className={cn(
|
||||
'group relative overflow-hidden rounded-3xl border text-left transition-all duration-250 motion-reduce:transition-none',
|
||||
compact
|
||||
? 'h-[98px] min-w-[152px] snap-start p-2 sm:min-w-0 sm:aspect-[5/4]'
|
||||
: 'h-[292px] p-3 sm:h-[334px] sm:p-4 lg:h-[356px]',
|
||||
compact &&
|
||||
'after:pointer-events-none after:absolute after:inset-x-0 after:bottom-0 after:h-[62%] after:bg-[linear-gradient(to_top,rgba(2,6,23,0.88),rgba(2,6,23,0.34),rgba(2,6,23,0))]',
|
||||
selected
|
||||
? compact
|
||||
? cinematic
|
||||
? 'border-sky-200/54 shadow-[0_0_0_1px_rgba(186,230,253,0.36),0_0_20px_rgba(125,211,252,0.22)]'
|
||||
: 'border-brand-dark/32 shadow-[0_0_0_1px_rgba(48,77,109,0.22),0_0_16px_rgba(99,173,242,0.18)]'
|
||||
: cinematic
|
||||
? 'border-sky-200/44 shadow-[0_0_0_1px_rgba(186,230,253,0.34),0_20px_50px_rgba(2,6,23,0.32)]'
|
||||
: 'border-brand-dark/28 shadow-[0_0_0_1px_rgba(48,77,109,0.18),0_16px_40px_rgba(15,23,42,0.16)]'
|
||||
: cinematic
|
||||
? 'border-white/16 hover:border-white/28'
|
||||
: 'border-brand-dark/16 hover:border-brand-dark/26',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0"
|
||||
style={getRoomCardBackgroundStyle(room)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0',
|
||||
cinematic ? 'bg-slate-950/32' : 'bg-slate-900/20',
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0',
|
||||
cinematic
|
||||
? 'bg-[linear-gradient(to_top,rgba(2,6,23,0.86),rgba(2,6,23,0.42),rgba(2,6,23,0.06))]'
|
||||
: 'bg-[linear-gradient(to_top,rgba(2,6,23,0.58),rgba(2,6,23,0.12))]',
|
||||
)}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'relative flex h-full rounded-2xl',
|
||||
cinematic
|
||||
? 'border border-white/14 bg-slate-950/16'
|
||||
: 'border border-white/16 bg-slate-950/10',
|
||||
compact ? 'items-end p-2.5' : 'items-end p-3 sm:p-4',
|
||||
)}
|
||||
>
|
||||
{selected ? (
|
||||
compact ? (
|
||||
<span
|
||||
className={cn(
|
||||
'absolute right-2.5 top-2.5 inline-flex h-5 w-5 items-center justify-center rounded-full border text-[11px] font-semibold',
|
||||
cinematic
|
||||
? 'border-sky-200/64 bg-sky-200/26 text-sky-50'
|
||||
: 'border-brand-primary/52 bg-brand-primary/18 text-brand-primary',
|
||||
)}
|
||||
>
|
||||
✓
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={cn(
|
||||
'absolute left-3 top-3 inline-flex items-center rounded-full border px-2 py-1 text-[10px] font-medium',
|
||||
cinematic
|
||||
? 'border-white/26 bg-slate-950/42 text-white/78'
|
||||
: 'border-white/52 bg-white/70 text-brand-dark/74',
|
||||
)}
|
||||
>
|
||||
선택됨
|
||||
</span>
|
||||
)
|
||||
) : null}
|
||||
|
||||
{compact ? (
|
||||
<div className="w-full rounded-lg bg-[linear-gradient(180deg,rgba(2,6,23,0.28)_0%,rgba(2,6,23,0.58)_100%)] px-2 py-1.5">
|
||||
<p className="truncate text-sm font-semibold text-white">{room.name}</p>
|
||||
<p className="mt-0.5 truncate text-[11px] text-white/70">{room.vibeLabel}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full max-w-[420px] rounded-2xl border border-white/14 bg-slate-950/46 px-4 py-3 backdrop-blur-md">
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-white/56">Selected Space</p>
|
||||
<h3 className="mt-1 text-2xl font-semibold tracking-tight text-white sm:text-[1.85rem]">
|
||||
{room.name}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-white/74">{room.description}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
@@ -1,84 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,39 +0,0 @@
|
||||
"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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
"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,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
"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,
|
||||
};
|
||||
};
|
||||
@@ -1,33 +0,0 @@
|
||||
"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,
|
||||
};
|
||||
};
|
||||
@@ -1,4 +0,0 @@
|
||||
export * from "./components/FocusRoomScreen";
|
||||
export * from "./components/RoomEntryForm";
|
||||
export * from "./hooks/useDashboardViewModel";
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import { apiClient } from "@/shared/lib/apiClient";
|
||||
import { UserProfile } from "../types";
|
||||
|
||||
export const userApi = {
|
||||
/**
|
||||
* 내 정보 조회
|
||||
*/
|
||||
getMe: async (): Promise<UserProfile> => {
|
||||
return apiClient<UserProfile>("api/v1/user/me");
|
||||
},
|
||||
};
|
||||
@@ -1,60 +0,0 @@
|
||||
import { UserProfile } from "../types";
|
||||
|
||||
interface UserProfileCardProps {
|
||||
user: UserProfile | null;
|
||||
isLoading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
export const UserProfileCard = ({
|
||||
user,
|
||||
isLoading,
|
||||
error,
|
||||
}: UserProfileCardProps) => {
|
||||
if (isLoading) {
|
||||
return <div className="animate-pulse h-48 bg-slate-100 rounded-2xl" />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="p-8 text-center text-red-500 bg-red-50 rounded-2xl border border-red-100">
|
||||
{error}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<section className="bg-white p-8 rounded-2xl shadow-sm border border-slate-100">
|
||||
<div className="flex items-center gap-6 mb-8">
|
||||
<div className="w-20 h-20 bg-brand-dark/10 rounded-full flex items-center justify-center text-3xl font-bold text-brand-dark">
|
||||
{user.name[0]}
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-slate-900">{user.name}</h2>
|
||||
<p className="text-slate-500">{user.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 border-t border-slate-50 pt-8">
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
User ID
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-slate-700">{user.id}</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<p className="text-xs font-medium text-slate-400 uppercase tracking-wider">
|
||||
Grade
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-brand-dark">
|
||||
<span className="bg-brand-dark/5 px-3 py-1 rounded-full text-sm">
|
||||
{user.grade}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -1,30 +0,0 @@
|
||||
import { UserProfile } from "../types";
|
||||
|
||||
interface UserProfileSimpleProps {
|
||||
user: UserProfile | null;
|
||||
isLoading: boolean;
|
||||
}
|
||||
|
||||
export const UserProfileSimple = ({ user, isLoading }: UserProfileSimpleProps) => {
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 animate-pulse">
|
||||
<div className="h-10 w-10 rounded-full bg-slate-200" />
|
||||
<div className="h-4 w-24 rounded bg-slate-200" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<div className="group flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full border border-brand-primary/10 bg-brand-primary/20 font-bold text-brand-dark transition-colors group-hover:bg-brand-primary/30">
|
||||
{user.name[0]}
|
||||
</div>
|
||||
<span className="truncate text-sm font-bold leading-tight text-brand-dark">
|
||||
{user.name}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,32 +0,0 @@
|
||||
import { useAuthStore } from "@/store/useAuthStore";
|
||||
import { useEffect, useState } from "react";
|
||||
import { userApi } from "../api/userApi";
|
||||
import { UserProfile } from "../types";
|
||||
|
||||
export const useUserProfile = () => {
|
||||
const [user, setUser] = useState<UserProfile | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const { isAuthenticated } = useAuthStore();
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated) return;
|
||||
|
||||
const loadProfile = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await userApi.getMe();
|
||||
console.log("data: " + data);
|
||||
setUser(data);
|
||||
} catch (err) {
|
||||
setError("프로필을 불러오는 데 실패했습니다.");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadProfile();
|
||||
}, [isAuthenticated]);
|
||||
|
||||
return { user, isLoading, error };
|
||||
};
|
||||
@@ -1,5 +0,0 @@
|
||||
export * from "./types";
|
||||
export * from "./hooks/useUserProfile";
|
||||
export * from "./components/UserProfileCard";
|
||||
export * from "./components/UserProfileSimple";
|
||||
export * from "./api/userApi";
|
||||
@@ -1,6 +0,0 @@
|
||||
export interface UserProfile {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
grade: string;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
export type AppHubVisualMode = 'light' | 'cinematic';
|
||||
|
||||
export const DEFAULT_APP_HUB_VISUAL_MODE: AppHubVisualMode = 'cinematic';
|
||||
|
||||
export const APP_HUB_VISUAL_OPTIONS = [
|
||||
{
|
||||
id: 'light',
|
||||
label: 'A안 · 라이트 감성',
|
||||
description: '밝고 정돈된 무드',
|
||||
},
|
||||
{
|
||||
id: 'cinematic',
|
||||
label: 'B안 · 무드 시네마틱',
|
||||
description: '깊고 몰입적인 무드',
|
||||
},
|
||||
] as const satisfies ReadonlyArray<{
|
||||
id: AppHubVisualMode;
|
||||
label: string;
|
||||
description: string;
|
||||
}>;
|
||||
@@ -1,20 +0,0 @@
|
||||
/**
|
||||
* VibeRoom 공통 색상 팔레트 (JS/TS 환경용)
|
||||
*
|
||||
* Tailwind CSS(globals.css)에 정의된 색상과 동일한 값을 가집니다.
|
||||
* 이 파일은 Tailwind 클래스를 사용할 수 없는 곳(Canvas, Three.js 3D 객체, 차트 라이브러리 등)이나
|
||||
* JS 로직 내에서 색상 코드가 직접 필요할 때 사용합니다.
|
||||
*/
|
||||
export const colors = {
|
||||
brand: {
|
||||
primary: '#63adf2', // 소프트 코발트 (핵심 액션, 포인트)
|
||||
dark: '#304d6d', // 딥 네이비 (메인 텍스트, 무게감 있는 배경)
|
||||
soft: '#a7cced', // 파스텔 스카이 (은은한 배경, 호버/체크마크)
|
||||
},
|
||||
base: {
|
||||
background: '#f8fafc', // slate-50 (서비스 기본 배경)
|
||||
white: '#ffffff',
|
||||
}
|
||||
} as const;
|
||||
|
||||
export type BrandColor = keyof typeof colors.brand;
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/AppHubWidget';
|
||||
@@ -1,202 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ROOM_THEMES } from '@/entities/room';
|
||||
import {
|
||||
GOAL_CHIPS,
|
||||
SOUND_PRESETS,
|
||||
TIMER_PRESETS,
|
||||
TODAY_ONE_LINER,
|
||||
useThoughtInbox,
|
||||
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 {
|
||||
DEFAULT_APP_HUB_VISUAL_MODE,
|
||||
type AppHubVisualMode,
|
||||
} from '@/shared/config/appHubVisualMode';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { useToast } from '@/shared/ui';
|
||||
import {
|
||||
AppUtilityRailWidget,
|
||||
type AppUtilityPanelId,
|
||||
} from '@/widgets/app-utility-rail';
|
||||
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 { thoughts, thoughtCount, clearThoughts } = useThoughtInbox();
|
||||
const { selectedRoomId, selectRoom } = useRoomSelection(
|
||||
ROOM_THEMES[0].id,
|
||||
);
|
||||
|
||||
const [goalInput, setGoalInput] = useState('');
|
||||
const [selectedGoalId, setSelectedGoalId] = useState<string | null>(null);
|
||||
const [isCustomEntryOpen, setCustomEntryOpen] = useState(false);
|
||||
const [activeUtilityPanel, setActiveUtilityPanel] = useState<AppUtilityPanelId | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const visualMode: AppHubVisualMode = DEFAULT_APP_HUB_VISUAL_MODE;
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
|
||||
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={cn('absolute inset-0')}
|
||||
style={{
|
||||
backgroundImage: cinematic
|
||||
? 'radial-gradient(132% 94% at 8% 0%, rgba(148,163,184,0.34) 0%, rgba(15,23,42,0) 46%), radial-gradient(116% 88% at 94% 6%, rgba(125,211,252,0.18) 0%, rgba(15,23,42,0) 52%), linear-gradient(162deg, #0f172a 0%, #111827 42%, #0b1220 100%)'
|
||||
: 'radial-gradient(130% 92% at 8% 0%, rgba(148,163,184,0.22) 0%, rgba(248,250,252,0) 48%), radial-gradient(104% 86% at 90% 8%, rgba(125,211,252,0.2) 0%, rgba(248,250,252,0) 54%), linear-gradient(164deg, #f8fafc 0%, #e2e8f0 48%, #dbe7f5 100%)',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0',
|
||||
cinematic
|
||||
? 'bg-[radial-gradient(circle_at_24%_16%,rgba(148,163,184,0.14),transparent_36%),radial-gradient(circle_at_78%_14%,rgba(125,211,252,0.1),transparent_34%),linear-gradient(180deg,rgba(2,6,23,0.16)_0%,rgba(2,6,23,0.32)_52%,rgba(2,6,23,0.5)_100%)]'
|
||||
: 'bg-[radial-gradient(circle_at_20%_14%,rgba(148,163,184,0.16),transparent_38%),radial-gradient(circle_at_82%_16%,rgba(125,211,252,0.12),transparent_38%),linear-gradient(180deg,rgba(248,250,252,0.32)_0%,rgba(241,245,249,0.12)_40%,rgba(15,23,42,0.26)_100%)]',
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0',
|
||||
cinematic ? 'opacity-[0.12]' : 'opacity-[0.06]',
|
||||
)}
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.016) 0 1px, transparent 1px 2px)",
|
||||
mixBlendMode: 'soft-light',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 bg-[radial-gradient(circle_at_50%_74%,transparent_12%,rgba(2,6,23,0.32)_100%)]"
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex min-h-screen flex-col">
|
||||
<AppTopBar
|
||||
user={MOCK_VIEWER}
|
||||
oneLiner={TODAY_ONE_LINER}
|
||||
onLogout={handleLogout}
|
||||
visualMode={visualMode}
|
||||
onOpenBilling={() => router.push('/settings')}
|
||||
/>
|
||||
|
||||
<main className="mx-auto w-full max-w-6xl flex-1 px-4 pb-8 pt-5 sm:px-6 sm:pt-6 lg:px-8 lg:pb-10">
|
||||
<RoomsGalleryWidget
|
||||
visualMode={visualMode}
|
||||
rooms={ROOM_THEMES}
|
||||
selectedRoomId={selectedRoomId}
|
||||
onRoomSelect={selectRoom}
|
||||
startPanel={(
|
||||
<StartRitualWidget
|
||||
visualMode={visualMode}
|
||||
goalInput={goalInput}
|
||||
selectedGoalId={selectedGoalId}
|
||||
goalChips={GOAL_CHIPS}
|
||||
onGoalInputChange={handleGoalInputChange}
|
||||
onGoalChipSelect={handleGoalChipSelect}
|
||||
onQuickEnter={handleQuickEnter}
|
||||
onOpenCustomEntry={() => setCustomEntryOpen(true)}
|
||||
inStage
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<CustomEntryWidget
|
||||
isOpen={isCustomEntryOpen}
|
||||
selectedRoomId={selectedRoomId}
|
||||
onSelectRoom={selectRoom}
|
||||
onClose={() => setCustomEntryOpen(false)}
|
||||
onEnter={handleCustomEnter}
|
||||
/>
|
||||
|
||||
<AppUtilityRailWidget
|
||||
visualMode={visualMode}
|
||||
activePanel={activeUtilityPanel}
|
||||
thoughts={thoughts}
|
||||
thoughtCount={thoughtCount}
|
||||
onOpenPanel={setActiveUtilityPanel}
|
||||
onClosePanel={() => setActiveUtilityPanel(null)}
|
||||
onClearInbox={() => {
|
||||
clearThoughts();
|
||||
pushToast({ title: '메모 인박스를 비웠어요' });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/AppTopBar';
|
||||
@@ -1,50 +0,0 @@
|
||||
import type { ViewerProfile } from '@/entities/user';
|
||||
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { ProfileMenu } from '@/features/profile-menu';
|
||||
|
||||
interface AppTopBarProps {
|
||||
user: ViewerProfile;
|
||||
oneLiner: string;
|
||||
onLogout: () => void;
|
||||
visualMode?: AppHubVisualMode;
|
||||
onOpenBilling?: () => void;
|
||||
}
|
||||
|
||||
export const AppTopBar = ({
|
||||
user,
|
||||
oneLiner,
|
||||
onLogout,
|
||||
visualMode = 'light',
|
||||
onOpenBilling,
|
||||
}: AppTopBarProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
|
||||
return (
|
||||
<header className="relative z-20 px-4 pt-4 sm:px-6 lg:px-8">
|
||||
<div
|
||||
className={cn(
|
||||
'mx-auto flex w-full max-w-6xl items-center justify-between gap-3 rounded-2xl border px-3.5 py-2.5 backdrop-blur-xl sm:px-4',
|
||||
cinematic
|
||||
? 'border-white/18 bg-slate-950/44 text-white shadow-[0_16px_44px_rgba(2,6,23,0.36)]'
|
||||
: 'border-brand-dark/12 bg-white/80 text-brand-dark shadow-[0_14px_40px_rgba(15,23,42,0.12)]',
|
||||
)}
|
||||
>
|
||||
<div className="min-w-0">
|
||||
<p
|
||||
className={cn(
|
||||
'text-base font-semibold tracking-tight',
|
||||
cinematic ? 'text-white/94' : 'text-brand-dark',
|
||||
)}
|
||||
>
|
||||
<span title={oneLiner}>VibeRoom</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2.5 sm:gap-3">
|
||||
<ProfileMenu user={user} onLogout={onLogout} onOpenBilling={onOpenBilling} />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
@@ -1,3 +0,0 @@
|
||||
export * from './model/types';
|
||||
export * from './ui/AppUtilityRailWidget';
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
export type AppUtilityPanelId = 'inbox' | 'stats' | 'settings';
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, type ReactNode } from 'react';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface AppUtilityDrawerProps {
|
||||
open: boolean;
|
||||
title: string;
|
||||
visualMode: 'light' | 'cinematic';
|
||||
onClose: () => void;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export const AppUtilityDrawer = ({
|
||||
open,
|
||||
title,
|
||||
visualMode,
|
||||
onClose,
|
||||
children,
|
||||
}: AppUtilityDrawerProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
};
|
||||
}, [open, onClose]);
|
||||
|
||||
if (!open) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="도구 드로어 닫기"
|
||||
onClick={onClose}
|
||||
className="fixed inset-0 z-40 bg-slate-950/22 backdrop-blur-[1px]"
|
||||
/>
|
||||
<aside className="fixed inset-y-0 right-0 z-50 w-[min(360px,92vw)] animate-[sheet-in_220ms_ease-out] p-2 sm:p-3">
|
||||
<div
|
||||
className={cn(
|
||||
'flex h-full flex-col overflow-hidden rounded-3xl border backdrop-blur-2xl',
|
||||
cinematic
|
||||
? 'border-white/16 bg-slate-950/64 text-white shadow-[0_24px_70px_rgba(2,6,23,0.55)]'
|
||||
: 'border-brand-dark/14 bg-white/84 text-brand-dark shadow-[0_24px_70px_rgba(15,23,42,0.2)]',
|
||||
)}
|
||||
>
|
||||
<header
|
||||
className={cn(
|
||||
'flex items-center justify-between border-b px-4 py-3 sm:px-5',
|
||||
cinematic ? 'border-white/10' : 'border-brand-dark/12',
|
||||
)}
|
||||
>
|
||||
<h2 className={cn('text-base font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
|
||||
{title}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
'inline-flex h-8 w-8 items-center justify-center rounded-full border text-sm transition-colors',
|
||||
cinematic
|
||||
? 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14 hover:text-white'
|
||||
: 'border-brand-dark/14 bg-white/66 text-brand-dark/72 hover:bg-white hover:text-brand-dark',
|
||||
)}
|
||||
aria-label="닫기"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</header>
|
||||
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">{children}</div>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,121 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import type { RecentThought } from '@/entities/session';
|
||||
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { AppUtilityDrawer } from './AppUtilityDrawer';
|
||||
import { type AppUtilityPanelId } from '../model/types';
|
||||
import { InboxDrawerPanel } from './panels/InboxDrawerPanel';
|
||||
import { SettingsDrawerPanel } from './panels/SettingsDrawerPanel';
|
||||
import { StatsDrawerPanel } from './panels/StatsDrawerPanel';
|
||||
|
||||
interface AppUtilityRailWidgetProps {
|
||||
visualMode: AppHubVisualMode;
|
||||
activePanel: AppUtilityPanelId | null;
|
||||
thoughts: RecentThought[];
|
||||
thoughtCount: number;
|
||||
onOpenPanel: (panel: AppUtilityPanelId) => void;
|
||||
onClosePanel: () => void;
|
||||
onClearInbox: () => void;
|
||||
}
|
||||
|
||||
const RAIL_ITEMS: Array<{
|
||||
id: AppUtilityPanelId;
|
||||
icon: string;
|
||||
label: string;
|
||||
}> = [
|
||||
{ id: 'inbox', icon: '📨', label: 'Inbox' },
|
||||
{ id: 'stats', icon: '📊', label: 'Stats' },
|
||||
{ id: 'settings', icon: '⚙', label: 'Settings' },
|
||||
];
|
||||
|
||||
const PANEL_TITLE_MAP: Record<AppUtilityPanelId, string> = {
|
||||
inbox: '임시 보관함',
|
||||
stats: '집중 요약',
|
||||
settings: '설정',
|
||||
};
|
||||
|
||||
export const AppUtilityRailWidget = ({
|
||||
visualMode,
|
||||
activePanel,
|
||||
thoughts,
|
||||
thoughtCount,
|
||||
onOpenPanel,
|
||||
onClosePanel,
|
||||
onClearInbox,
|
||||
}: AppUtilityRailWidgetProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="fixed right-3 top-1/2 z-30 -translate-y-1/2">
|
||||
<div
|
||||
className={cn(
|
||||
'flex w-12 flex-col items-center gap-2 rounded-2xl border py-2 backdrop-blur-xl',
|
||||
cinematic
|
||||
? 'border-white/18 bg-slate-950/34 shadow-[0_18px_32px_rgba(2,6,23,0.42)]'
|
||||
: 'border-brand-dark/12 bg-white/54 shadow-[0_18px_32px_rgba(15,23,42,0.14)]',
|
||||
)}
|
||||
>
|
||||
{RAIL_ITEMS.map((item) => {
|
||||
const selected = activePanel === item.id;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
title={item.label}
|
||||
aria-label={item.label}
|
||||
onClick={() => onOpenPanel(item.id)}
|
||||
className={cn(
|
||||
'relative inline-flex h-9 w-9 items-center justify-center rounded-xl border text-base transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
|
||||
selected
|
||||
? cinematic
|
||||
? 'border-sky-200/64 bg-sky-200/22'
|
||||
: 'border-brand-primary/44 bg-brand-primary/14'
|
||||
: cinematic
|
||||
? 'border-white/18 bg-white/8 hover:bg-white/14'
|
||||
: 'border-brand-dark/14 bg-white/72 hover:bg-white',
|
||||
)}
|
||||
>
|
||||
<span aria-hidden>{item.icon}</span>
|
||||
{item.id === 'inbox' && thoughtCount > 0 ? (
|
||||
<span
|
||||
className={cn(
|
||||
'absolute -right-1 -top-1 inline-flex min-w-[1rem] items-center justify-center rounded-full px-1 py-0.5 text-[9px] font-semibold',
|
||||
cinematic
|
||||
? 'bg-sky-200/28 text-sky-50'
|
||||
: 'bg-brand-primary/18 text-brand-primary',
|
||||
)}
|
||||
>
|
||||
{thoughtCount > 99 ? '99+' : `${thoughtCount}`}
|
||||
</span>
|
||||
) : null}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppUtilityDrawer
|
||||
open={activePanel !== null}
|
||||
title={activePanel ? PANEL_TITLE_MAP[activePanel] : ''}
|
||||
visualMode={visualMode}
|
||||
onClose={onClosePanel}
|
||||
>
|
||||
{activePanel === 'inbox' ? (
|
||||
<InboxDrawerPanel
|
||||
visualMode={visualMode}
|
||||
thoughts={thoughts}
|
||||
onClear={onClearInbox}
|
||||
/>
|
||||
) : null}
|
||||
{activePanel === 'stats' ? <StatsDrawerPanel visualMode={visualMode} /> : null}
|
||||
{activePanel === 'settings' ? (
|
||||
<SettingsDrawerPanel visualMode={visualMode} />
|
||||
) : null}
|
||||
</AppUtilityDrawer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,78 +0,0 @@
|
||||
import type { RecentThought } from '@/entities/session';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface InboxDrawerPanelProps {
|
||||
visualMode: 'light' | 'cinematic';
|
||||
thoughts: RecentThought[];
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export const InboxDrawerPanel = ({
|
||||
visualMode,
|
||||
thoughts,
|
||||
onClear,
|
||||
}: InboxDrawerPanelProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className={cn('text-xs', cinematic ? 'text-white/56' : 'text-brand-dark/54')}>
|
||||
집중 중 떠오른 생각을 잠시 모아두는 공간
|
||||
</p>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClear}
|
||||
className={cn(
|
||||
'rounded-full border px-2.5 py-1 text-[11px] transition-colors',
|
||||
cinematic
|
||||
? 'border-white/20 bg-white/8 text-white/72 hover:bg-white/14 hover:text-white'
|
||||
: 'border-brand-dark/14 bg-white/66 text-brand-dark/70 hover:bg-white hover:text-brand-dark',
|
||||
)}
|
||||
>
|
||||
모두 비우기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{thoughts.length === 0 ? (
|
||||
<p
|
||||
className={cn(
|
||||
'rounded-2xl border px-3.5 py-3 text-sm leading-relaxed',
|
||||
cinematic
|
||||
? 'border-white/14 bg-white/6 text-white/74'
|
||||
: 'border-brand-dark/12 bg-white/70 text-brand-dark/72',
|
||||
)}
|
||||
>
|
||||
지금은 비어 있어요. 집중 중 떠오른 생각을 여기로 주차할 수 있어요.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2.5">
|
||||
{thoughts.slice(0, 10).map((thought) => (
|
||||
<li
|
||||
key={thought.id}
|
||||
className={cn(
|
||||
'rounded-2xl border px-3.5 py-3',
|
||||
cinematic
|
||||
? 'border-white/14 bg-white/7'
|
||||
: 'border-brand-dark/12 bg-white/72',
|
||||
)}
|
||||
>
|
||||
<p className={cn('text-sm leading-relaxed', cinematic ? 'text-white/88' : 'text-brand-dark/84')}>
|
||||
{thought.text}
|
||||
</p>
|
||||
<div
|
||||
className={cn(
|
||||
'mt-2 flex items-center justify-end text-[11px]',
|
||||
cinematic ? 'text-white/54' : 'text-brand-dark/52',
|
||||
)}
|
||||
>
|
||||
{thought.capturedAt}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { DEFAULT_PRESET_OPTIONS } from '@/shared/config/settingsOptions';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface SettingsDrawerPanelProps {
|
||||
visualMode: 'light' | 'cinematic';
|
||||
}
|
||||
|
||||
export const SettingsDrawerPanel = ({ visualMode }: SettingsDrawerPanelProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
const [reduceMotion, setReduceMotion] = useState(false);
|
||||
const [defaultPresetId, setDefaultPresetId] = useState<
|
||||
(typeof DEFAULT_PRESET_OPTIONS)[number]['id']
|
||||
>(DEFAULT_PRESET_OPTIONS[0].id);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<section
|
||||
className={cn(
|
||||
'rounded-2xl border px-3.5 py-3',
|
||||
cinematic
|
||||
? 'border-white/14 bg-white/7'
|
||||
: 'border-brand-dark/12 bg-white/72',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<p className={cn('text-sm font-medium', cinematic ? 'text-white' : 'text-brand-dark')}>
|
||||
Reduce Motion
|
||||
</p>
|
||||
<p className={cn('mt-1 text-xs', cinematic ? 'text-white/58' : 'text-brand-dark/54')}>
|
||||
화면 전환을 조금 더 차분하게 표시합니다.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
aria-checked={reduceMotion}
|
||||
onClick={() => setReduceMotion((current) => !current)}
|
||||
className={cn(
|
||||
'inline-flex w-14 items-center rounded-full border px-1 py-1 transition-colors',
|
||||
reduceMotion
|
||||
? cinematic
|
||||
? 'border-sky-200/42 bg-sky-200/24'
|
||||
: 'border-brand-primary/45 bg-brand-soft/60'
|
||||
: cinematic
|
||||
? 'border-white/24 bg-white/9'
|
||||
: 'border-brand-dark/20 bg-white/86',
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
'h-4.5 w-4.5 rounded-full bg-white transition-transform duration-200 motion-reduce:transition-none',
|
||||
reduceMotion ? 'translate-x-7' : 'translate-x-0',
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={cn(
|
||||
'rounded-2xl border px-3.5 py-3',
|
||||
cinematic
|
||||
? 'border-white/14 bg-white/7'
|
||||
: 'border-brand-dark/12 bg-white/72',
|
||||
)}
|
||||
>
|
||||
<p className={cn('text-sm font-medium', cinematic ? 'text-white' : 'text-brand-dark')}>
|
||||
기본 프리셋
|
||||
</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{DEFAULT_PRESET_OPTIONS.map((preset) => (
|
||||
<button
|
||||
key={preset.id}
|
||||
type="button"
|
||||
onClick={() => setDefaultPresetId(preset.id)}
|
||||
className={cn(
|
||||
'rounded-full border px-3 py-1.5 text-xs transition-colors',
|
||||
defaultPresetId === preset.id
|
||||
? cinematic
|
||||
? 'border-sky-200/44 bg-sky-200/20 text-sky-100'
|
||||
: 'border-brand-primary/45 bg-brand-soft/58 text-brand-dark'
|
||||
: cinematic
|
||||
? 'border-white/18 bg-white/8 text-white/80 hover:bg-white/14'
|
||||
: 'border-brand-dark/16 bg-white/74 text-brand-dark/78 hover:bg-white',
|
||||
)}
|
||||
>
|
||||
{preset.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,64 +0,0 @@
|
||||
import { TODAY_STATS, WEEKLY_STATS } from '@/entities/session';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface StatsDrawerPanelProps {
|
||||
visualMode: 'light' | 'cinematic';
|
||||
}
|
||||
|
||||
export const StatsDrawerPanel = ({ visualMode }: StatsDrawerPanelProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<p className={cn('text-xs', cinematic ? 'text-white/56' : 'text-brand-dark/54')}>
|
||||
오늘 흐름과 최근 7일의 리듬을 가볍게 확인하세요.
|
||||
</p>
|
||||
|
||||
<section className="grid gap-2.5 sm:grid-cols-2">
|
||||
{[TODAY_STATS[0], TODAY_STATS[1], WEEKLY_STATS[0], WEEKLY_STATS[2]].map((stat) => (
|
||||
<article
|
||||
key={stat.id}
|
||||
className={cn(
|
||||
'rounded-2xl border px-3.5 py-3',
|
||||
cinematic
|
||||
? 'border-white/14 bg-white/7'
|
||||
: 'border-brand-dark/12 bg-white/72',
|
||||
)}
|
||||
>
|
||||
<p className={cn('text-[11px]', cinematic ? 'text-white/58' : 'text-brand-dark/54')}>
|
||||
{stat.label}
|
||||
</p>
|
||||
<p className={cn('mt-1 text-lg font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
|
||||
{stat.value}
|
||||
</p>
|
||||
<p className={cn('mt-0.5 text-xs', cinematic ? 'text-sky-100/78' : 'text-brand-primary/86')}>
|
||||
{stat.delta}
|
||||
</p>
|
||||
</article>
|
||||
))}
|
||||
</section>
|
||||
|
||||
<section
|
||||
className={cn(
|
||||
'rounded-2xl border p-3.5',
|
||||
cinematic
|
||||
? 'border-white/14 bg-white/6'
|
||||
: 'border-brand-dark/12 bg-white/72',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
'h-32 rounded-xl border border-dashed',
|
||||
cinematic
|
||||
? 'border-white/18 bg-[linear-gradient(180deg,rgba(148,163,184,0.14),rgba(148,163,184,0.02))]'
|
||||
: 'border-brand-dark/16 bg-[linear-gradient(180deg,rgba(148,163,184,0.15),rgba(148,163,184,0.04))]',
|
||||
)}
|
||||
/>
|
||||
<p className={cn('mt-2 text-[11px]', cinematic ? 'text-white/54' : 'text-brand-dark/52')}>
|
||||
그래프 플레이스홀더
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/CustomEntryWidget';
|
||||
@@ -1,30 +0,0 @@
|
||||
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 +0,0 @@
|
||||
export * from './ui/NotesSheetWidget';
|
||||
@@ -1,37 +0,0 @@
|
||||
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 +0,0 @@
|
||||
export * from './ui/QuickSheetWidget';
|
||||
@@ -1,56 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ImmersionModeToggle } from '@/features/immersion-mode';
|
||||
import { Toggle } from '@/shared/ui';
|
||||
|
||||
interface QuickSheetWidgetProps {
|
||||
onClose: () => void;
|
||||
isImmersionMode: boolean;
|
||||
onToggleImmersionMode: () => void;
|
||||
}
|
||||
|
||||
export const QuickSheetWidget = ({
|
||||
onClose,
|
||||
isImmersionMode,
|
||||
onToggleImmersionMode,
|
||||
}: QuickSheetWidgetProps) => {
|
||||
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">
|
||||
<ImmersionModeToggle
|
||||
enabled={isImmersionMode}
|
||||
onToggle={onToggleImmersionMode}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between rounded-xl border border-white/16 bg-white/6 px-3 py-2">
|
||||
<span className="text-sm text-white/90">알림 최소화</span>
|
||||
<Toggle
|
||||
checked={minimalNotice}
|
||||
onChange={setMinimalNotice}
|
||||
ariaLabel="알림 최소화 토글"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-white/58">
|
||||
빠른 옵션 UI 목업입니다. 실제 동작은 연결하지 않았습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/RoomSheetWidget';
|
||||
@@ -1,98 +0,0 @@
|
||||
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 +0,0 @@
|
||||
export * from './ui/RoomsGalleryWidget';
|
||||
@@ -1,132 +0,0 @@
|
||||
import type { RoomTheme } from '@/entities/room';
|
||||
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { Button } from '@/shared/ui';
|
||||
|
||||
interface RoomCatalogSheetProps {
|
||||
isOpen: boolean;
|
||||
visualMode: AppHubVisualMode;
|
||||
rooms: RoomTheme[];
|
||||
selectedRoomId: string;
|
||||
onClose: () => void;
|
||||
onSelectRoom: (roomId: string) => void;
|
||||
}
|
||||
|
||||
export const RoomCatalogSheet = ({
|
||||
isOpen,
|
||||
visualMode,
|
||||
rooms,
|
||||
selectedRoomId,
|
||||
onClose,
|
||||
onSelectRoom,
|
||||
}: RoomCatalogSheetProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="공간 목록 닫기"
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
'fixed inset-0 z-40 backdrop-blur-[1px]',
|
||||
cinematic ? 'bg-slate-950/40' : 'bg-slate-950/24',
|
||||
)}
|
||||
/>
|
||||
|
||||
<aside className="fixed inset-x-0 bottom-0 z-50 mx-auto w-full max-w-4xl px-4 pb-4 sm:px-6 sm:pb-6">
|
||||
<div
|
||||
className={cn(
|
||||
'overflow-hidden rounded-3xl border shadow-[0_28px_90px_rgba(15,23,42,0.3)] backdrop-blur-xl',
|
||||
cinematic
|
||||
? 'border-white/14 bg-slate-950/82'
|
||||
: 'border-brand-dark/12 bg-[linear-gradient(160deg,rgba(248,250,252,0.95)_0%,rgba(226,232,240,0.9)_52%,rgba(203,213,225,0.92)_100%)]',
|
||||
)}
|
||||
>
|
||||
<header
|
||||
className={cn(
|
||||
'flex items-center justify-between px-5 py-4 sm:px-6',
|
||||
cinematic ? 'border-b border-white/12' : 'border-b border-brand-dark/12',
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
<h2 className={cn('text-base font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
|
||||
전체 공간
|
||||
</h2>
|
||||
<p className={cn('mt-0.5 text-xs', cinematic ? 'text-white/56' : 'text-brand-dark/56')}>
|
||||
공간 이름과 분위기를 보고 선택해보세요.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
'rounded-lg border px-2.5 py-1.5 text-xs transition',
|
||||
cinematic
|
||||
? 'border-white/18 bg-white/8 text-white/76 hover:bg-white/14 hover:text-white'
|
||||
: 'border-brand-dark/16 bg-white/66 text-brand-dark/72 hover:bg-white hover:text-brand-dark',
|
||||
)}
|
||||
>
|
||||
닫기
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div className="max-h-[62vh] overflow-y-auto px-5 py-4 sm:px-6">
|
||||
<ul className="space-y-2.5">
|
||||
{rooms.map((room) => {
|
||||
const selected = room.id === selectedRoomId;
|
||||
|
||||
return (
|
||||
<li
|
||||
key={room.id}
|
||||
className={cn(
|
||||
'rounded-2xl border px-4 py-3',
|
||||
cinematic
|
||||
? 'border-white/12 bg-white/6'
|
||||
: 'border-brand-dark/12 bg-white/66',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div>
|
||||
<p className={cn('text-sm font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
|
||||
{room.name}
|
||||
</p>
|
||||
<p className={cn('mt-1 text-xs', cinematic ? 'text-white/72' : 'text-brand-dark/64')}>
|
||||
{room.description}
|
||||
</p>
|
||||
<p className={cn('mt-1 text-[11px]', cinematic ? 'text-white/56' : 'text-brand-dark/56')}>
|
||||
{room.vibeLabel} · {room.recommendedSound} · {room.recommendedTime}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={selected ? 'secondary' : 'outline'}
|
||||
className={cn(
|
||||
'!h-8 whitespace-nowrap',
|
||||
cinematic &&
|
||||
(selected
|
||||
? '!bg-sky-100 !text-slate-900'
|
||||
: '!bg-white/8 !text-white/84 !ring-white/20 hover:!bg-white/14'),
|
||||
)}
|
||||
onClick={() => {
|
||||
onSelectRoom(room.id);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
{selected ? '선택됨' : '선택'}
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1,181 +0,0 @@
|
||||
import { useMemo, useState, type ReactNode } from 'react';
|
||||
import {
|
||||
getHubRoomSections,
|
||||
getRoomCardBackgroundStyle,
|
||||
type RoomTheme,
|
||||
} from '@/entities/room';
|
||||
import { RoomPreviewCard } from '@/features/room-select';
|
||||
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { RoomCatalogSheet } from './RoomCatalogSheet';
|
||||
|
||||
interface RoomsGalleryWidgetProps {
|
||||
visualMode: AppHubVisualMode;
|
||||
rooms: RoomTheme[];
|
||||
selectedRoomId: string;
|
||||
onRoomSelect: (roomId: string) => void;
|
||||
startPanel: ReactNode;
|
||||
}
|
||||
|
||||
export const RoomsGalleryWidget = ({
|
||||
visualMode,
|
||||
rooms,
|
||||
selectedRoomId,
|
||||
onRoomSelect,
|
||||
startPanel,
|
||||
}: RoomsGalleryWidgetProps) => {
|
||||
const [isCatalogOpen, setCatalogOpen] = useState(false);
|
||||
const [carouselOffset, setCarouselOffset] = useState(0);
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
const selectedRoom = rooms.find((room) => room.id === selectedRoomId) ?? rooms[0];
|
||||
const stableRecommendedBaseId = rooms[0]?.id ?? selectedRoom.id;
|
||||
const { recommendedRooms, allRooms } = getHubRoomSections(
|
||||
rooms,
|
||||
stableRecommendedBaseId,
|
||||
6,
|
||||
);
|
||||
const canRotate = recommendedRooms.length > 1;
|
||||
const rotatedRecommendedRooms = useMemo(() => {
|
||||
if (recommendedRooms.length === 0) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const normalizedOffset =
|
||||
((carouselOffset % recommendedRooms.length) + recommendedRooms.length) %
|
||||
recommendedRooms.length;
|
||||
|
||||
return [
|
||||
...recommendedRooms.slice(normalizedOffset),
|
||||
...recommendedRooms.slice(0, normalizedOffset),
|
||||
];
|
||||
}, [carouselOffset, recommendedRooms]);
|
||||
|
||||
return (
|
||||
<section className="space-y-3">
|
||||
<div
|
||||
className={cn(
|
||||
'relative overflow-hidden rounded-[2rem] border',
|
||||
cinematic
|
||||
? 'border-white/16 bg-slate-950/34 shadow-[0_24px_70px_rgba(2,6,23,0.5)]'
|
||||
: 'border-brand-dark/12 bg-white/78 shadow-[0_20px_64px_rgba(15,23,42,0.2)]',
|
||||
)}
|
||||
>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0"
|
||||
style={getRoomCardBackgroundStyle(selectedRoom)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0',
|
||||
cinematic
|
||||
? 'bg-[linear-gradient(180deg,rgba(2,6,23,0.22)_0%,rgba(2,6,23,0.44)_58%,rgba(2,6,23,0.84)_100%)]'
|
||||
: 'bg-[linear-gradient(180deg,rgba(15,23,42,0.16)_0%,rgba(15,23,42,0.4)_56%,rgba(15,23,42,0.74)_100%)]',
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'absolute inset-0',
|
||||
cinematic
|
||||
? 'bg-[radial-gradient(circle_at_20%_12%,rgba(125,211,252,0.14),transparent_35%),radial-gradient(circle_at_78%_10%,rgba(196,181,253,0.13),transparent_36%)]'
|
||||
: 'bg-[radial-gradient(circle_at_20%_12%,rgba(148,163,184,0.14),transparent_35%),radial-gradient(circle_at_78%_10%,rgba(125,211,252,0.1),transparent_36%)]',
|
||||
)}
|
||||
/>
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-0 opacity-[0.16]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"url('/textures/grain.png'), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 2px)",
|
||||
mixBlendMode: 'soft-light',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="relative z-10 flex min-h-[640px] flex-col px-4 py-4 sm:px-6 sm:py-6 lg:px-7 lg:py-7">
|
||||
<header className="flex items-start gap-3">
|
||||
<div>
|
||||
<p className="text-[11px] uppercase tracking-[0.16em] text-white/58">Hub Stage</p>
|
||||
<h2 className="mt-1 text-2xl font-semibold tracking-tight text-white">오늘의 공간</h2>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-auto space-y-4">
|
||||
<div className="max-w-[460px] rounded-xl border border-white/12 bg-slate-950/34 px-3.5 py-2 backdrop-blur-sm sm:px-4 sm:py-2.5">
|
||||
<p className="text-[11px] uppercase tracking-[0.18em] text-white/56">Selected Space</p>
|
||||
<h3 className="mt-0.5 text-[1.65rem] font-semibold tracking-tight text-white sm:text-[1.75rem]">
|
||||
{selectedRoom.name}
|
||||
</h3>
|
||||
<p className="mt-0.5 text-sm text-white/74 truncate" title={selectedRoom.description}>
|
||||
{selectedRoom.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-3 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)] lg:items-end">
|
||||
<div className="lg:max-w-[360px]">{startPanel}</div>
|
||||
|
||||
<section className="rounded-2xl border border-white/14 bg-slate-950/44 p-3 backdrop-blur-md sm:p-3.5">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<h3 className="text-[11px] font-medium tracking-[0.12em] text-white/66">추천 공간</h3>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCatalogOpen(true)}
|
||||
className="text-[11px] text-white/60 transition-colors hover:text-white/86"
|
||||
>
|
||||
공간 전체 보기
|
||||
</button>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canRotate}
|
||||
onClick={() => setCarouselOffset((current) => current - 1)}
|
||||
className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/20 bg-white/8 text-sm text-white/82 transition hover:bg-white/14 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
aria-label="추천 공간 이전"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
disabled={!canRotate}
|
||||
onClick={() => setCarouselOffset((current) => current + 1)}
|
||||
className="inline-flex h-7 w-7 items-center justify-center rounded-full border border-white/20 bg-white/8 text-sm text-white/82 transition hover:bg-white/14 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
aria-label="추천 공간 다음"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="-mx-1 snap-x overflow-x-auto px-1 pb-1">
|
||||
<div className="flex gap-2.5">
|
||||
{rotatedRecommendedRooms.map((room) => (
|
||||
<RoomPreviewCard
|
||||
key={`recommended-${room.id}`}
|
||||
room={room}
|
||||
visualMode={visualMode}
|
||||
variant="compact"
|
||||
selected={room.id === selectedRoomId}
|
||||
onSelect={onRoomSelect}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RoomCatalogSheet
|
||||
isOpen={isCatalogOpen}
|
||||
visualMode={visualMode}
|
||||
rooms={allRooms}
|
||||
selectedRoomId={selectedRoomId}
|
||||
onClose={() => setCatalogOpen(false)}
|
||||
onSelectRoom={onRoomSelect}
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/SoundSheetWidget';
|
||||
@@ -1,70 +0,0 @@
|
||||
import {
|
||||
SoundPresetControls,
|
||||
type SoundTrackKey,
|
||||
} from '@/features/sound-preset';
|
||||
|
||||
interface SoundSheetWidgetProps {
|
||||
onClose: () => void;
|
||||
selectedPresetId: string;
|
||||
onSelectPreset: (presetId: string) => void;
|
||||
isMixerOpen: boolean;
|
||||
onToggleMixer: () => void;
|
||||
isMuted: boolean;
|
||||
onMuteChange: (next: boolean) => void;
|
||||
masterVolume: number;
|
||||
onMasterVolumeChange: (next: number) => void;
|
||||
trackKeys: readonly SoundTrackKey[];
|
||||
trackLevels: Record<SoundTrackKey, number>;
|
||||
onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
|
||||
}
|
||||
|
||||
export const SoundSheetWidget = ({
|
||||
onClose,
|
||||
selectedPresetId,
|
||||
onSelectPreset,
|
||||
isMixerOpen,
|
||||
onToggleMixer,
|
||||
isMuted,
|
||||
onMuteChange,
|
||||
masterVolume,
|
||||
onMasterVolumeChange,
|
||||
trackKeys,
|
||||
trackLevels,
|
||||
onTrackLevelChange,
|
||||
}: SoundSheetWidgetProps) => {
|
||||
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">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-white">Sound</h2>
|
||||
<p className="text-[11px] text-white/56">오디오 재생은 연결하지 않은 UI 목업입니다.</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>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-4 py-4">
|
||||
<SoundPresetControls
|
||||
selectedPresetId={selectedPresetId}
|
||||
onSelectPreset={onSelectPreset}
|
||||
isMixerOpen={isMixerOpen}
|
||||
onToggleMixer={onToggleMixer}
|
||||
isMuted={isMuted}
|
||||
onMuteChange={onMuteChange}
|
||||
masterVolume={masterVolume}
|
||||
onMasterVolumeChange={onMasterVolumeChange}
|
||||
trackKeys={trackKeys}
|
||||
trackLevels={trackLevels}
|
||||
onTrackLevelChange={onTrackLevelChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/SpaceChromeWidget';
|
||||
@@ -1,43 +0,0 @@
|
||||
import { ExitHoldButton } from '@/features/exit-hold';
|
||||
|
||||
interface SpaceChromeWidgetProps {
|
||||
roomName: string;
|
||||
vibeLabel: string;
|
||||
isImmersionMode: boolean;
|
||||
onExitRequested: () => void;
|
||||
}
|
||||
|
||||
export const SpaceChromeWidget = ({
|
||||
roomName,
|
||||
vibeLabel,
|
||||
isImmersionMode,
|
||||
onExitRequested,
|
||||
}: SpaceChromeWidgetProps) => {
|
||||
return (
|
||||
<div className="px-4 pt-2 sm:px-6">
|
||||
<header className="flex items-center justify-between px-1 py-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-white/12 text-[11px] font-semibold text-white/90">
|
||||
V
|
||||
</span>
|
||||
<p className="text-sm font-medium tracking-tight text-white/90">VibeRoom</p>
|
||||
</div>
|
||||
|
||||
<ExitHoldButton
|
||||
variant={isImmersionMode ? 'ring' : 'bar'}
|
||||
onConfirm={onExitRequested}
|
||||
/>
|
||||
</header>
|
||||
|
||||
{!isImmersionMode ? (
|
||||
<div className="mx-auto mt-4 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">{roomName}</p>
|
||||
<p className="text-xs text-white/70">지금 분위기 · {vibeLabel}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/SpaceExitSummarySheet';
|
||||
@@ -1,86 +0,0 @@
|
||||
import type { RecentThought } from '@/entities/session';
|
||||
import { Button } from '@/shared/ui';
|
||||
|
||||
interface SpaceExitSummarySheetProps {
|
||||
isOpen: boolean;
|
||||
roomName: string;
|
||||
goal: string;
|
||||
timerLabel: string;
|
||||
recentThoughts: RecentThought[];
|
||||
onContinue: () => void;
|
||||
onMoveToHub: () => void;
|
||||
}
|
||||
|
||||
export const SpaceExitSummarySheet = ({
|
||||
isOpen,
|
||||
roomName,
|
||||
goal,
|
||||
timerLabel,
|
||||
recentThoughts,
|
||||
onContinue,
|
||||
onMoveToHub,
|
||||
}: SpaceExitSummarySheetProps) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="세션 요약 닫기"
|
||||
onClick={onContinue}
|
||||
className="fixed inset-0 z-40 bg-slate-950/38 backdrop-blur-[2px]"
|
||||
/>
|
||||
|
||||
<aside className="fixed inset-x-0 bottom-0 z-50 mx-auto w-full max-w-2xl px-4 pb-4 sm:px-6 sm:pb-6">
|
||||
<div className="overflow-hidden rounded-3xl border border-white/16 bg-slate-950/78 shadow-[0_28px_90px_rgba(2,6,23,0.58)] backdrop-blur-xl">
|
||||
<header className="border-b border-white/12 px-5 py-4 sm:px-6">
|
||||
<p className="text-xs uppercase tracking-[0.12em] text-white/52">Session Summary</p>
|
||||
<h2 className="mt-1 text-lg font-semibold text-white">오늘의 집중을 정리해볼까요?</h2>
|
||||
<p className="mt-1 text-sm text-white/66">
|
||||
{roomName} · {timerLabel}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<div className="space-y-4 px-5 py-4 sm:px-6">
|
||||
<section>
|
||||
<p className="text-xs uppercase tracking-[0.08em] text-white/52">세션 목표</p>
|
||||
<p className="mt-1 text-sm text-white/86">{goal}</p>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<p className="text-xs uppercase tracking-[0.08em] text-white/52">떠오른 생각 3개</p>
|
||||
{recentThoughts.length === 0 ? (
|
||||
<p className="mt-2 rounded-2xl border border-white/12 bg-white/5 px-3 py-2 text-sm text-white/66">
|
||||
이번 세션에 저장된 메모가 아직 없어요.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="mt-2 space-y-2">
|
||||
{recentThoughts.map((thought) => (
|
||||
<li
|
||||
key={thought.id}
|
||||
className="rounded-2xl border border-white/12 bg-white/6 px-3 py-2.5"
|
||||
>
|
||||
<p className="text-sm text-white/88">{thought.text}</p>
|
||||
<p className="mt-1 text-[11px] text-white/56">
|
||||
{thought.roomName} · {thought.capturedAt}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer className="flex items-center justify-end gap-2 border-t border-white/12 bg-white/5 px-5 py-3.5 sm:px-6">
|
||||
<Button variant="ghost" className="!text-white/78 hover:!text-white" onClick={onContinue}>
|
||||
계속 집중
|
||||
</Button>
|
||||
<Button onClick={onMoveToHub}>허브로 이동</Button>
|
||||
</footer>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/SpaceSkeletonWidget';
|
||||
@@ -1,5 +0,0 @@
|
||||
import { SpaceWorkspaceWidget } from '@/widgets/space-workspace';
|
||||
|
||||
export const SpaceSkeletonWidget = () => {
|
||||
return <SpaceWorkspaceWidget />;
|
||||
};
|
||||
@@ -1,23 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export type SpaceToolPanel = 'sound' | '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,
|
||||
};
|
||||
};
|
||||
@@ -1,16 +0,0 @@
|
||||
import { DistractionDumpNotesContent } from '@/features/distraction-dump';
|
||||
|
||||
interface NotesToolPanelProps {
|
||||
onCaptureThought: (note: string) => void;
|
||||
}
|
||||
|
||||
export const NotesToolPanel = ({ onCaptureThought }: NotesToolPanelProps) => {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-white/58">
|
||||
집중 중 떠오른 생각을 잠깐 주차하세요. 저장 동작은 더미 토스트로만 처리됩니다.
|
||||
</p>
|
||||
<DistractionDumpNotesContent onNoteAdded={onCaptureThought} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,48 +0,0 @@
|
||||
import { SoundPresetControls, type SoundTrackKey } from '@/features/sound-preset';
|
||||
|
||||
interface SoundToolPanelProps {
|
||||
selectedPresetId: string;
|
||||
onSelectPreset: (presetId: string) => void;
|
||||
isMixerOpen: boolean;
|
||||
onToggleMixer: () => void;
|
||||
isMuted: boolean;
|
||||
onMuteChange: (next: boolean) => void;
|
||||
masterVolume: number;
|
||||
onMasterVolumeChange: (next: number) => void;
|
||||
trackKeys: readonly SoundTrackKey[];
|
||||
trackLevels: Record<SoundTrackKey, number>;
|
||||
onTrackLevelChange: (track: SoundTrackKey, level: number) => void;
|
||||
}
|
||||
|
||||
export const SoundToolPanel = ({
|
||||
selectedPresetId,
|
||||
onSelectPreset,
|
||||
isMixerOpen,
|
||||
onToggleMixer,
|
||||
isMuted,
|
||||
onMuteChange,
|
||||
masterVolume,
|
||||
onMasterVolumeChange,
|
||||
trackKeys,
|
||||
trackLevels,
|
||||
onTrackLevelChange,
|
||||
}: SoundToolPanelProps) => {
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs text-white/58">오디오 재생은 연결하지 않은 UI 목업입니다.</p>
|
||||
<SoundPresetControls
|
||||
selectedPresetId={selectedPresetId}
|
||||
onSelectPreset={onSelectPreset}
|
||||
isMixerOpen={isMixerOpen}
|
||||
onToggleMixer={onToggleMixer}
|
||||
isMuted={isMuted}
|
||||
onMuteChange={onMuteChange}
|
||||
masterVolume={masterVolume}
|
||||
onMasterVolumeChange={onMasterVolumeChange}
|
||||
trackKeys={trackKeys}
|
||||
trackLevels={trackLevels}
|
||||
onTrackLevelChange={onTrackLevelChange}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/StartRitualWidget';
|
||||
@@ -1,136 +0,0 @@
|
||||
import type { GoalChip } from '@/entities/session';
|
||||
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
import { Button, Chip, GlassCard } from '@/shared/ui';
|
||||
|
||||
interface StartRitualWidgetProps {
|
||||
visualMode: AppHubVisualMode;
|
||||
goalInput: string;
|
||||
selectedGoalId: string | null;
|
||||
goalChips: GoalChip[];
|
||||
onGoalInputChange: (value: string) => void;
|
||||
onGoalChipSelect: (chip: GoalChip) => void;
|
||||
onQuickEnter: () => void;
|
||||
onOpenCustomEntry: () => void;
|
||||
inStage?: boolean;
|
||||
}
|
||||
|
||||
export const StartRitualWidget = ({
|
||||
visualMode,
|
||||
goalInput,
|
||||
selectedGoalId,
|
||||
goalChips,
|
||||
onGoalInputChange,
|
||||
onGoalChipSelect,
|
||||
onQuickEnter,
|
||||
onOpenCustomEntry,
|
||||
inStage = false,
|
||||
}: StartRitualWidgetProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
const visibleGoalChips = inStage ? goalChips.slice(0, 2) : goalChips.slice(0, 3);
|
||||
|
||||
return (
|
||||
<GlassCard
|
||||
elevated
|
||||
className={cn(
|
||||
inStage ? 'space-y-3 p-3.5 sm:p-4' : 'space-y-3.5 p-4 sm:p-5',
|
||||
cinematic
|
||||
? inStage
|
||||
? 'border-white/24 bg-slate-950/72 text-white shadow-[0_20px_44px_rgba(2,6,23,0.44),inset_0_1px_0_rgba(255,255,255,0.04)] backdrop-blur-xl'
|
||||
: 'border-white/16 bg-slate-950/48 text-white shadow-[0_20px_44px_rgba(2,6,23,0.36)] backdrop-blur-xl'
|
||||
: 'border-brand-dark/10 bg-white/80 text-brand-dark shadow-[0_16px_40px_rgba(15,23,42,0.12)] backdrop-blur-md',
|
||||
)}
|
||||
>
|
||||
<div className="space-y-1.5">
|
||||
<p
|
||||
className={cn(
|
||||
'text-[11px] uppercase tracking-[0.14em]',
|
||||
cinematic ? 'text-white/48' : 'text-brand-dark/46',
|
||||
)}
|
||||
>
|
||||
{inStage ? 'Quick Entry' : 'Start Ritual'}
|
||||
</p>
|
||||
<h1
|
||||
className={cn(
|
||||
inStage ? 'text-xl font-semibold tracking-tight' : 'text-2xl font-semibold tracking-tight',
|
||||
cinematic ? 'text-white' : 'text-brand-dark',
|
||||
)}
|
||||
>
|
||||
한 줄 목표로 바로 시작
|
||||
</h1>
|
||||
<p
|
||||
className={cn(
|
||||
'text-sm',
|
||||
cinematic ? 'text-white/72' : 'text-brand-dark/68',
|
||||
)}
|
||||
>
|
||||
비어 있어도 바로 입장할 수 있어요.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<input
|
||||
value={goalInput}
|
||||
onChange={(event) => onGoalInputChange(event.target.value)}
|
||||
placeholder="예: 계약서 1페이지 정리"
|
||||
className={cn(
|
||||
'w-full rounded-xl px-3.5 py-3 text-sm focus:outline-none',
|
||||
cinematic
|
||||
? 'border border-white/18 bg-slate-900/56 text-white placeholder:text-white/40 focus:border-sky-200/42'
|
||||
: 'border border-brand-dark/14 bg-white/90 text-brand-dark placeholder:text-brand-dark/40 focus:border-brand-primary/42',
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{visibleGoalChips.map((chip) => (
|
||||
<Chip
|
||||
key={chip.id}
|
||||
active={selectedGoalId === chip.id}
|
||||
onClick={() => onGoalChipSelect(chip)}
|
||||
className={cn(
|
||||
cinematic
|
||||
? '!bg-white/10 !text-white/74 !ring-white/20 hover:!bg-white/14'
|
||||
: '!bg-white/72 !text-brand-dark/74 !ring-brand-dark/12 hover:!bg-white',
|
||||
)}
|
||||
>
|
||||
{chip.label}
|
||||
</Chip>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={cn(
|
||||
'flex flex-col items-stretch gap-2.5',
|
||||
inStage ? 'sm:items-stretch' : 'sm:items-end',
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
className={cn(
|
||||
inStage
|
||||
? 'w-full px-5 sm:min-w-[148px] sm:flex-1'
|
||||
: 'w-full px-6 sm:w-auto sm:min-w-[168px]',
|
||||
cinematic &&
|
||||
'!bg-sky-200 !text-slate-900 shadow-[0_12px_24px_rgba(125,211,252,0.22)] hover:!bg-sky-100',
|
||||
)}
|
||||
onClick={onQuickEnter}
|
||||
>
|
||||
바로 입장
|
||||
</Button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpenCustomEntry}
|
||||
className={cn(
|
||||
inStage
|
||||
? 'inline-flex h-9 items-center justify-center gap-1 rounded-lg px-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75 self-end'
|
||||
: 'inline-flex h-9 items-center justify-center gap-1 rounded-lg px-1.5 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75 self-end',
|
||||
cinematic
|
||||
? 'text-white/66 hover:text-white'
|
||||
: 'text-brand-dark/62 hover:text-brand-dark',
|
||||
)}
|
||||
>
|
||||
<span aria-hidden>⚙</span>
|
||||
<span className="whitespace-nowrap">설정하고 입장</span>
|
||||
</button>
|
||||
</div>
|
||||
</GlassCard>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/ThoughtInboxSheet';
|
||||
@@ -1,83 +0,0 @@
|
||||
import type { RecentThought } from '@/entities/session';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface ThoughtInboxSheetProps {
|
||||
isOpen: boolean;
|
||||
thoughts: RecentThought[];
|
||||
onClose: () => void;
|
||||
onClear: () => void;
|
||||
}
|
||||
|
||||
export const ThoughtInboxSheet = ({
|
||||
isOpen,
|
||||
thoughts,
|
||||
onClose,
|
||||
onClear,
|
||||
}: ThoughtInboxSheetProps) => {
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="메모 인박스 닫기"
|
||||
onClick={onClose}
|
||||
className="fixed inset-0 z-40 bg-slate-950/24 backdrop-blur-[1px]"
|
||||
/>
|
||||
|
||||
<aside className="fixed inset-x-0 bottom-0 z-50 mx-auto w-full max-w-4xl px-4 pb-4 sm:px-6 sm:pb-6">
|
||||
<div className="overflow-hidden rounded-3xl border border-brand-dark/12 bg-[linear-gradient(160deg,rgba(248,250,252,0.95)_0%,rgba(226,232,240,0.9)_52%,rgba(203,213,225,0.92)_100%)] shadow-[0_28px_90px_rgba(15,23,42,0.3)] backdrop-blur-xl">
|
||||
<header className="flex items-center justify-between border-b border-brand-dark/12 px-5 py-4 sm:px-6">
|
||||
<div>
|
||||
<h2 className="text-base font-semibold text-brand-dark">메모 인박스</h2>
|
||||
<p className="mt-0.5 text-xs text-brand-dark/56">가상공간에서 남긴 최근 메모</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClear}
|
||||
className="rounded-lg border border-brand-dark/16 bg-white/66 px-2.5 py-1.5 text-xs text-brand-dark/72 transition hover:bg-white hover:text-brand-dark"
|
||||
>
|
||||
비우기
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="rounded-lg border border-brand-dark/16 bg-white/66 px-2.5 py-1.5 text-xs text-brand-dark/72 transition hover:bg-white hover:text-brand-dark"
|
||||
>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="max-h-[58vh] overflow-y-auto px-5 py-4 sm:px-6">
|
||||
{thoughts.length === 0 ? (
|
||||
<p className="rounded-2xl border border-brand-dark/10 bg-white/56 px-4 py-3 text-sm text-brand-dark/62">
|
||||
아직 저장된 메모가 없어요. 공간에서 떠오른 생각을 남겨보세요.
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-2.5">
|
||||
{thoughts.map((thought) => (
|
||||
<li
|
||||
key={thought.id}
|
||||
className={cn(
|
||||
'rounded-2xl border border-brand-dark/12 bg-white/66 px-4 py-3',
|
||||
)}
|
||||
>
|
||||
<p className="text-sm leading-relaxed text-brand-dark/86">{thought.text}</p>
|
||||
<div className="mt-2 flex items-center justify-between text-[11px] text-brand-dark/54">
|
||||
<span>{thought.roomName}</span>
|
||||
<span>{thought.capturedAt}</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -1 +0,0 @@
|
||||
export * from './ui/ThoughtSummaryEntryWidget';
|
||||
@@ -1,95 +0,0 @@
|
||||
import type { AppHubVisualMode } from '@/shared/config/appHubVisualMode';
|
||||
import { cn } from '@/shared/lib/cn';
|
||||
|
||||
interface ThoughtSummaryEntryWidgetProps {
|
||||
visualMode: AppHubVisualMode;
|
||||
thoughtCount: number;
|
||||
onOpen: () => void;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
export const ThoughtSummaryEntryWidget = ({
|
||||
visualMode,
|
||||
thoughtCount,
|
||||
onOpen,
|
||||
compact = false,
|
||||
}: ThoughtSummaryEntryWidgetProps) => {
|
||||
const cinematic = visualMode === 'cinematic';
|
||||
const countLabel = thoughtCount > 99 ? '99+' : `${thoughtCount}`;
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpen}
|
||||
className={cn(
|
||||
'group inline-flex h-10 items-center gap-1.5 rounded-full border px-2.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
|
||||
cinematic
|
||||
? 'border-white/18 bg-white/8 text-white/74 hover:bg-white/14'
|
||||
: 'border-brand-dark/12 bg-white/66 text-brand-dark/68 hover:bg-white/82',
|
||||
)}
|
||||
>
|
||||
<span aria-hidden className="text-sm">✍</span>
|
||||
<span className="sr-only sm:not-sr-only sm:inline">메모</span>
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex min-w-[1rem] items-center justify-center rounded-full px-1 py-0.5 text-[9px] font-semibold',
|
||||
cinematic
|
||||
? 'bg-sky-200/20 text-sky-100'
|
||||
: 'bg-brand-primary/14 text-brand-primary/86',
|
||||
)}
|
||||
>
|
||||
{countLabel}
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onOpen}
|
||||
className={cn(
|
||||
'group flex w-full items-center justify-between rounded-2xl border px-4 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-300/75',
|
||||
cinematic
|
||||
? 'border-white/14 bg-slate-900/42 text-white hover:bg-slate-900/54'
|
||||
: 'border-brand-dark/12 bg-white/76 text-brand-dark hover:bg-white/88',
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span
|
||||
aria-hidden
|
||||
className={cn(
|
||||
'inline-flex h-8 w-8 items-center justify-center rounded-full text-sm',
|
||||
cinematic ? 'bg-white/10 text-white/80' : 'bg-brand-dark/6 text-brand-dark/72',
|
||||
)}
|
||||
>
|
||||
✍
|
||||
</span>
|
||||
<div>
|
||||
<p className={cn('text-sm font-semibold', cinematic ? 'text-white' : 'text-brand-dark')}>
|
||||
최근 떠오른 생각
|
||||
</p>
|
||||
<p className={cn('text-xs', cinematic ? 'text-white/56' : 'text-brand-dark/52')}>
|
||||
임시 보관함
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span
|
||||
className={cn(
|
||||
'inline-flex min-w-[1.4rem] items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-semibold',
|
||||
cinematic
|
||||
? 'bg-sky-200/20 text-sky-100'
|
||||
: 'bg-brand-primary/14 text-brand-primary/86',
|
||||
)}
|
||||
>
|
||||
{countLabel}
|
||||
</span>
|
||||
<span className={cn('text-xs', cinematic ? 'text-white/58' : 'text-brand-dark/52')}>
|
||||
열기
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user