corpi/viberoom-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(cleanup): 미사용 코드 정리 및 레거시 파일 삭제

Browse Source
This commit is contained in:
corpi
2026-03-03 19:41:31 +09:00
parent be16153bef
commit 60cd093308
80 changed files with 0 additions and 3270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/features/check-in/index.ts
View File

@@ -1,3 +0,0 @@
export * from './model/useCheckIn';
export * from './ui/CompactCheckInChips';
export * from './ui/CheckInChips';

16
src/features/check-in/model/useCheckIn.ts
View File

@@ -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,
};
};

32
src/features/check-in/ui/CheckInChips.tsx
View File

@@ -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>
);
};

53
src/features/check-in/ui/CompactCheckInChips.tsx
View File

@@ -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>
);
};

2
src/features/custom-entry-modal/index.ts
View File

@@ -1,2 +0,0 @@
export * from './model/useCustomEntryForm';
export * from './ui/CustomEntryModal';

70
src/features/custom-entry-modal/model/useCustomEntryForm.ts
View File

@@ -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,
};
};

183
src/features/custom-entry-modal/ui/CustomEntryModal.tsx
View File

@@ -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>
);
};

4
src/features/distraction-dump/index.ts
View File

@@ -1,4 +0,0 @@
export * from './model/useDistractionDump';
export * from './model/useDistractionNotes';
export * from './ui/DistractionDumpNotesContent';
export * from './ui/DistractionDumpPanel';

38
src/features/distraction-dump/model/useDistractionDump.ts
View File

@@ -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,
};
};

68
src/features/distraction-dump/model/useDistractionNotes.ts
View File

@@ -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,
};
};

90
src/features/distraction-dump/ui/DistractionDumpNotesContent.tsx
View File

@@ -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>
);
};

67
src/features/distraction-dump/ui/DistractionDumpPanel.tsx
View File

@@ -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>
);
};

2
src/features/immersion-mode/index.ts
View File

@@ -1,2 +0,0 @@
export * from './model/useImmersionMode';
export * from './ui/ImmersionModeToggle';

24
src/features/immersion-mode/model/useImmersionMode.ts
View File

@@ -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,
};
};

25
src/features/immersion-mode/ui/ImmersionModeToggle.tsx
View File

@@ -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
src/features/profile-menu/index.ts
View File

@@ -1 +0,0 @@
export * from './ui/ProfileMenu';

53
src/features/profile-menu/ui/ProfileMenu.tsx
View File

@@ -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>
);
};

2
src/features/reactions/index.ts
View File

@@ -1,2 +0,0 @@
export * from './ui/ReactionIconRow';
export * from './ui/ReactionButtons';

23
src/features/reactions/ui/ReactionButtons.tsx
View File

@@ -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>
);
};

31
src/features/reactions/ui/ReactionIconRow.tsx
View File

@@ -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>
);
};

2
src/features/room-select/index.ts
View File

@@ -1,2 +0,0 @@
export * from './model/useRoomSelection';
export * from './ui/RoomPreviewCard';

20
src/features/room-select/model/useRoomSelection.ts
View File

@@ -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,
};
};

124
src/features/room-select/ui/RoomPreviewCard.tsx
View File

@@ -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>
);
};

84
src/features/space/components/FocusRoomScreen.tsx
View File

@@ -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>
);
};

39
src/features/space/components/RoomEntryForm.tsx
View File

@@ -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>
);
};

30
src/features/space/hooks/useDashboardViewModel.ts
View File

@@ -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,
};
};

31
src/features/space/hooks/useFocusRoomViewModel.ts
View File

@@ -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,
};
};

33
src/features/space/hooks/useRoomEntry.ts
View File

@@ -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,
};
};

4
src/features/space/index.ts
View File

@@ -1,4 +0,0 @@
export * from "./components/FocusRoomScreen";
export * from "./components/RoomEntryForm";
export * from "./hooks/useDashboardViewModel";

11
src/features/user/api/userApi.ts
View File

@@ -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");
},
};

60
src/features/user/components/UserProfileCard.tsx
View File

@@ -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>
);
};

30
src/features/user/components/UserProfileSimple.tsx
View File

@@ -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>
);
};

32
src/features/user/hooks/useUserProfile.ts
View File

@@ -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 };
};

5
src/features/user/index.ts
View File

@@ -1,5 +0,0 @@
export * from "./types";
export * from "./hooks/useUserProfile";
export * from "./components/UserProfileCard";
export * from "./components/UserProfileSimple";
export * from "./api/userApi";

6
src/features/user/types/index.ts
View File

@@ -1,6 +0,0 @@
export interface UserProfile {
id: number;
name: string;
email: string;
grade: string;
}