feat(fsd): 허브·스페이스 중심 UI 목업 구조로 재편

맥락:

- 기존 라우트/컴포넌트 구조를 FSD 기준으로 정리하고, /app 허브와 /space 집중 화면 중심의 목업 흐름을 구성하기 위해

변경사항:

- App Router 구조를 /landing, /app, /space, /stats, /settings 중심으로 재배치

- entities/session/room/user 더미 데이터와 타입 정의 추가

- features(커스텀 입장, 룸 선택, 체크인, 리액션, 30초 리스타트 등) 단위로 로직 분리

- widgets(허브, 룸 갤러리, 타이머 HUD, 툴 도크 등) 조합형 UI 추가

- shared 공용 UI(Button/Chip/Modal/Toast 등) 및 유틸(cn/useReducedMotion) 정비

- 로그인 후 이동 경로를 /dashboard 에서 /app 으로 변경

- README를 현재 프로젝트 구조/라우트/구현 범위 기준으로 갱신

검증:

- npx tsc --noEmit

세션-상태: 허브·스페이스 목업이 FSD 레이어로 동작 가능하도록 정리됨

세션-다음: /space 상단 및 도크의 인원 수 카피를 분위기형 카피로 후속 정리

세션-리스크: build는 네트워크 환경에서 Google Fonts fetch 실패 가능

src/features/distraction-dump/index.ts

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

src/features/distraction-dump/model/useDistractionDump.ts

@@ -0,0 +1,38 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { DISTRACTION_DUMP_PLACEHOLDER } from '@/entities/session';
+
+export const useDistractionDump = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [draft, setDraft] = useState('');
+  const [items, setItems] = useState<string[]>(DISTRACTION_DUMP_PLACEHOLDER);
+
+  const hasDraft = useMemo(() => draft.trim().length > 0, [draft]);
+
+  const toggle = () => {
+    setIsOpen((current) => !current);
+  };
+
+  const saveDraft = () => {
+    if (!hasDraft) {
+      return null;
+    }
+
+    const value = draft.trim();
+    setItems((current) => [value, ...current]);
+    setDraft('');
+
+    return value;
+  };
+
+  return {
+    isOpen,
+    draft,
+    items,
+    hasDraft,
+    setDraft,
+    toggle,
+    saveDraft,
+  };
+};

src/features/distraction-dump/model/useDistractionNotes.ts

@@ -0,0 +1,68 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { DISTRACTION_DUMP_PLACEHOLDER } from '@/entities/session';
+
+interface DistractionNote {
+  id: string;
+  text: string;
+  done: boolean;
+}
+
+const createInitialNotes = (): DistractionNote[] => {
+  return DISTRACTION_DUMP_PLACEHOLDER.slice(0, 5).map((text, index) => ({
+    id: `note-${index + 1}`,
+    text,
+    done: false,
+  }));
+};
+
+export const useDistractionNotes = () => {
+  const [draft, setDraft] = useState('');
+  const [notes, setNotes] = useState<DistractionNote[]>(createInitialNotes);
+
+  const canAdd = useMemo(() => draft.trim().length > 0, [draft]);
+
+  const addNote = () => {
+    if (!canAdd) {
+      return null;
+    }
+
+    const value = draft.trim();
+
+    setNotes((current) => [
+      {
+        id: `note-${Date.now()}`,
+        text: value,
+        done: false,
+      },
+      ...current,
+    ]);
+
+    setDraft('');
+
+    return value;
+  };
+
+  const toggleDone = (noteId: string) => {
+    setNotes((current) =>
+      current.map((note) =>
+        note.id === noteId ? { ...note, done: !note.done } : note,
+      ),
+    );
+  };
+
+  const removeNote = (noteId: string) => {
+    setNotes((current) => current.filter((note) => note.id !== noteId));
+  };
+
+  return {
+    draft,
+    notes,
+    canAdd,
+    setDraft,
+    addNote,
+    toggleDone,
+    removeNote,
+  };
+};

src/features/distraction-dump/ui/DistractionDumpNotesContent.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { Button } from '@/shared/ui';
+import { cn } from '@/shared/lib/cn';
+import { useDistractionNotes } from '../model/useDistractionNotes';
+
+interface DistractionDumpNotesContentProps {
+  onNoteAdded?: (note: string) => void;
+  onNoteRemoved?: () => void;
+}
+
+export const DistractionDumpNotesContent = ({
+  onNoteAdded,
+  onNoteRemoved,
+}: DistractionDumpNotesContentProps) => {
+  const { draft, notes, canAdd, setDraft, addNote, toggleDone, removeNote } =
+    useDistractionNotes();
+
+  const handleAdd = () => {
+    const note = addNote();
+
+    if (note && onNoteAdded) {
+      onNoteAdded(note);
+    }
+  };
+
+  const handleRemove = (noteId: string) => {
+    removeNote(noteId);
+
+    if (onNoteRemoved) {
+      onNoteRemoved();
+    }
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <textarea
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          placeholder="지금 떠오른 생각을 잠깐 적어두기"
+          className="h-20 w-full resize-none rounded-xl border border-white/20 bg-slate-950/55 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-200/60 focus:outline-none"
+        />
+
+        <div className="flex items-center justify-between gap-2">
+          <p className="text-[11px] text-white/58">Enter 안내: 버튼으로만 동작하는 목업</p>
+          <Button size="sm" className="!h-8" onClick={handleAdd} disabled={!canAdd}>
+            추가
+          </Button>
+        </div>
+      </div>
+
+      <ul className="space-y-2">
+        {notes.slice(0, 5).map((note) => (
+          <li
+            key={note.id}
+            className="rounded-lg border border-white/12 bg-white/5 px-3 py-2"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <p
+                className={cn(
+                  'text-sm text-white/88',
+                  note.done && 'text-white/45 line-through',
+                )}
+              >
+                {note.text}
+              </p>
+              <div className="flex items-center gap-1">
+                <button
+                  type="button"
+                  onClick={() => toggleDone(note.id)}
+                  className="rounded border border-white/20 px-2 py-0.5 text-[11px] text-white/75 transition hover:bg-white/12"
+                >
+                  {note.done ? '해제' : '완료'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handleRemove(note.id)}
+                  className="rounded border border-white/20 px-2 py-0.5 text-[11px] text-white/75 transition hover:bg-white/12"
+                >
+                  삭제
+                </button>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};

src/features/distraction-dump/ui/DistractionDumpPanel.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import { Button } from '@/shared/ui';
+import { useDistractionDump } from '../model/useDistractionDump';
+
+interface DistractionDumpPanelProps {
+  onSaved?: (note: string) => void;
+}
+
+export const DistractionDumpPanel = ({
+  onSaved,
+}: DistractionDumpPanelProps) => {
+  const { isOpen, draft, items, hasDraft, setDraft, toggle, saveDraft } =
+    useDistractionDump();
+
+  const handleSave = () => {
+    const value = saveDraft();
+
+    if (value && onSaved) {
+      onSaved(value);
+    }
+  };
+
+  return (
+    <div className="space-y-3">
+      <Button
+        variant="outline"
+        size="sm"
+        className="!border-white/30 !bg-white/5 !text-white hover:!bg-white/14"
+        onClick={toggle}
+      >
+        떠오른 생각 임시 저장
+      </Button>
+
+      {isOpen ? (
+        <div className="space-y-3 rounded-xl border border-white/20 bg-slate-900/45 p-3">
+          <textarea
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+            placeholder="방금 떠오른 할 일을 여기에 잠깐 보관하세요"
+            className="h-24 w-full resize-none rounded-lg border border-white/18 bg-slate-950/55 px-3 py-2 text-sm text-white placeholder:text-white/45 focus:border-sky-200/60 focus:outline-none"
+          />
+
+          <div className="flex items-center justify-between gap-2">
+            <p className="text-xs text-white/62">다시 보기 전까지 임시 보관됩니다.</p>
+            <Button
+              size="sm"
+              className="!h-8"
+              onClick={handleSave}
+              disabled={!hasDraft}
+            >
+              메모 추가
+            </Button>
+          </div>
+
+          <ul className="space-y-1.5 text-xs text-white/74">
+            {items.slice(0, 4).map((item) => (
+              <li key={item} className="rounded-md bg-white/6 px-2.5 py-1.5">
+                {item}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+};