[FE/CLI] 파일 관리 인라인 UX 고도화 및 시스템 전반 인터페이스 현대화

apps/client/package.json

@@ -31,6 +31,7 @@
     "@vercel/speed-insights": "^1.3.1",
     "codemirror": "^6.0.2",
     "highlight.js": "^11.11.1",
+    "js-cookie": "^3.0.5",
     "lib0": "^0.2.115",
     "lucide-react": "^0.561.0",
     "qrcode.react": "^4.2.0",
@@ -56,6 +57,7 @@
   "devDependencies": {
     "@eslint/js": "^9.39.1",
     "@testing-library/react": "^16.3.1",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",

apps/client/src/pages/home/components/CustomRoomForm.tsx

@@ -17,7 +17,13 @@ import {
   InputGroupButton,
 } from '@codejam/ui';
 import { ArrowLeft, Eye, EyeOff, Loader2, Minus, Plus } from 'lucide-react';
-import { type ReactNode, useState } from 'react';
+import {
+  type ReactNode,
+  useState,
+  useRef,
+  useCallback,
+  useEffect,
+} from 'react';
 import { ErrorMessage } from './ErrorMessage';
 
 interface FormFieldProps {
@@ -68,6 +74,103 @@ function StepperField({
   isInvalid,
   errorMessage,
 }: StepperFieldProps) {
+  const intervalRef = useRef<number | null>(null);
+  const timeoutRef = useRef<number | null>(null);
+  const decreaseButtonRef = useRef<HTMLButtonElement>(null);
+  const increaseButtonRef = useRef<HTMLButtonElement>(null);
+  const valueRef = useRef(value);
+  const minRef = useRef(min);
+  const maxRef = useRef(max);
+  const onDecreaseRef = useRef(onDecrease);
+  const onIncreaseRef = useRef(onIncrease);
+
+  // Keep refs in sync
+  useEffect(() => {
+    valueRef.current = value;
+    minRef.current = min;
+    maxRef.current = max;
+    onDecreaseRef.current = onDecrease;
+    onIncreaseRef.current = onIncrease;
+  }, [value, min, max, onDecrease, onIncrease]);
+
+  const startRepeating = useCallback((action: () => void) => {
+    action();
+    timeoutRef.current = window.setTimeout(() => {
+      intervalRef.current = window.setInterval(action, 100);
+    }, 500);
+  }, []);
+
+  const stopRepeating = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    const decreaseBtn = decreaseButtonRef.current;
+
+    if (decreaseBtn) {
+      const handleDecreaseStart = (e: PointerEvent) => {
+        e.preventDefault();
+        startRepeating(() => {
+          if (valueRef.current !== '' && valueRef.current > minRef.current) {
+            onDecreaseRef.current();
+          } else {
+            stopRepeating();
+          }
+        });
+      };
+      const handleDecreaseEnd = () => {
+        stopRepeating();
+      };
+
+      decreaseBtn.addEventListener('pointerdown', handleDecreaseStart);
+      decreaseBtn.addEventListener('pointerup', handleDecreaseEnd);
+      decreaseBtn.addEventListener('pointercancel', handleDecreaseEnd);
+
+      return () => {
+        decreaseBtn.removeEventListener('pointerdown', handleDecreaseStart);
+        decreaseBtn.removeEventListener('pointerup', handleDecreaseEnd);
+        decreaseBtn.removeEventListener('pointercancel', handleDecreaseEnd);
+      };
+    }
+  }, [startRepeating, stopRepeating]);
+
+  useEffect(() => {
+    const increaseBtn = increaseButtonRef.current;
+
+    if (increaseBtn) {
+      const handleIncreaseStart = (e: PointerEvent) => {
+        e.preventDefault();
+        startRepeating(() => {
+          if (valueRef.current === '' || valueRef.current < maxRef.current) {
+            onIncreaseRef.current();
+          } else {
+            stopRepeating();
+          }
+        });
+      };
+      const handleIncreaseEnd = () => {
+        stopRepeating();
+      };
+
+      increaseBtn.addEventListener('pointerdown', handleIncreaseStart);
+      increaseBtn.addEventListener('pointerup', handleIncreaseEnd);
+      increaseBtn.addEventListener('pointercancel', handleIncreaseEnd);
+
+      return () => {
+        increaseBtn.removeEventListener('pointerdown', handleIncreaseStart);
+        increaseBtn.removeEventListener('pointerup', handleIncreaseEnd);
+        increaseBtn.removeEventListener('pointercancel', handleIncreaseEnd);
+      };
+    }
+  }, [startRepeating, stopRepeating]);
+
   return (
     <div className={className}>
       <FormField title={title} description={description}>
@@ -81,20 +184,22 @@ function StepperField({
               className="w-14 [appearance:textfield] text-center [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
             />
             <Button
+              ref={decreaseButtonRef}
               variant="outline"
               size="icon"
-              onClick={onDecrease}
               disabled={value === '' || value <= min}
               type="button"
+              style={{ touchAction: 'none' }}
             >
               <Minus className="size-4" />
             </Button>
             <Button
+              ref={increaseButtonRef}
               variant="outline"
               size="icon"
-              onClick={onIncrease}
               disabled={value !== '' && value >= max}
               type="button"
+              style={{ touchAction: 'none' }}
             >
               <Plus className="size-4" />
             </Button>
@@ -263,19 +368,33 @@ export function CustomRoomForm({
     }
   };
 
-  const decreaseMaxPts = () => {
-    const current = maxPtsInput === '' ? LIMITS.MIN_PTS : maxPtsInput;
-    const newVal = Math.max(current - 1, LIMITS.MIN_PTS);
-    setMaxPtsInput(newVal);
-    handleChange('maxPts', newVal);
-  };
+  const decreaseMaxPts = useCallback(() => {
+    setMaxPtsInput((prev) => {
+      const current = prev === '' ? LIMITS.MIN_PTS : prev;
+      if (current <= LIMITS.MIN_PTS) {
+        return current;
+      }
+      const newVal = Math.max(current - 1, LIMITS.MIN_PTS);
+      queueMicrotask(() => {
+        setCustomRoomConfig((c) => ({ ...c, maxPts: newVal }));
+      });
+      return newVal;
+    });
+  }, []);
 
-  const increaseMaxPts = () => {
-    const current = maxPtsInput === '' ? LIMITS.MIN_PTS : maxPtsInput;
-    const newVal = Math.min(current + 1, LIMITS.MAX_PTS);
-    setMaxPtsInput(newVal);
-    handleChange('maxPts', newVal);
-  };
+  const increaseMaxPts = useCallback(() => {
+    setMaxPtsInput((prev) => {
+      const current = prev === '' ? LIMITS.MIN_PTS : prev;
+      if (current >= LIMITS.MAX_PTS) {
+        return current;
+      }
+      const newVal = Math.min(current + 1, LIMITS.MAX_PTS);
+      queueMicrotask(() => {
+        setCustomRoomConfig((c) => ({ ...c, maxPts: newVal }));
+      });
+      return newVal;
+    });
+  }, []);
 
   const handleRoomPasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     handleChange('roomPassword', e.target.value);

apps/client/src/pages/join/JoinPage.tsx

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import { useLoaderData, useNavigate } from 'react-router-dom';
-import { ROUTES } from '@codejam/common';
+import { ROUTES, ROOM_CONFIG } from '@codejam/common';
 import { Loader2 } from 'lucide-react';
+import Cookies from 'js-cookie';
 
 export default function JoinPage() {
   const { roomCode, token } = useLoaderData() as {
@@ -11,19 +12,32 @@ export default function JoinPage() {
   const navigate = useNavigate();
 
   useEffect(() => {
-    // Navigate to room immediately
+    // Save token to cookie
+    const cookieName = `auth_${roomCode.toUpperCase()}`;
+    const isProduction = import.meta.env.PROD;
+
+    Cookies.set(cookieName, token, {
+      expires: ROOM_CONFIG.COOKIE_MAX_AGE / (1000 * 60 * 60 * 24), // Convert ms to days
+      path: '/',
+      secure: isProduction,
+      sameSite: isProduction ? 'none' : 'lax',
+    });
+
+    // Navigate to room
     const url = ROUTES.ROOM(roomCode);
     navigate(url, { replace: true });
   }, [roomCode, token, navigate]);
 
   return (
-    <main className="flex h-screen flex-col items-center justify-center bg-gray-100">
+    <main className="flex h-screen flex-col items-center justify-center bg-gray-100 dark:bg-gray-900">
       <section className="flex flex-col items-center text-center">
         <Loader2 className="text-primary mb-4 h-16 w-16 animate-spin" />
-        <h1 className="mb-4 text-2xl font-semibold text-gray-800">
+        <h1 className="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-100">
           방 참가 중
         </h1>
-        <p className="mb-8 text-gray-500">잠시만 기다려 주세요...</p>
+        <p className="mb-8 text-gray-500 dark:text-gray-400">
+          잠시만 기다려 주세요...
+        </p>
       </section>
     </main>
   );

apps/client/src/pages/not-found/NotFoundPage.tsx

@@ -26,13 +26,15 @@ function NotFoundPage() {
   }
 
   return (
-    <main className="flex h-screen flex-col items-center justify-center bg-gray-100">
+    <main className="flex h-screen flex-col items-center justify-center bg-gray-100 dark:bg-gray-900">
       <section className="flex flex-col items-center text-center">
         <span className="mb-4 text-6xl" role="img" aria-label="에러 아이콘">
           {icon}
         </span>
-        <h1 className="mb-4 text-2xl font-semibold text-gray-800">{title}</h1>
-        <p className="mb-8 text-gray-500">{message}</p>
+        <h1 className="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-100">
+          {title}
+        </h1>
+        <p className="mb-8 text-gray-500 dark:text-gray-400">{message}</p>
         <nav>
           <Button size="lg" render={<Link to="/" />}>
             메인 페이지로 이동

apps/client/src/pages/room/RoomPage.tsx

@@ -5,15 +5,14 @@ import { useRoomJoin } from '@/shared/lib/hooks/useRoomJoin';
 import { RadixToaster as Toaster } from '@codejam/ui';
 import { useFileStore } from '@/stores/file';
 import { useLoaderData } from 'react-router-dom';
-import { ErrorDialog } from '@/widgets/error-dialog/ErrorDialog';
+import { ErrorDialog } from '@/widgets/dialog/ErrorDialog';
 import { HostClaimRequestDialog } from '@/widgets/dialog/HostClaimRequestDialog';
 import { PERMISSION, type RoomJoinStatus } from '@codejam/common';
 import { usePermission } from '@/shared/lib/hooks/usePermission';
 import { PrepareStage } from './PrepareStage';
 import { useAwarenessSync } from '@/shared/lib/hooks/useAwarenessSync';
 import { useInitialFileSelection } from '@/shared/lib/hooks/useInitialFileSelection';
 import { useFileRename } from '@/shared/lib/hooks/useFileRename';
-import { DuplicateDialog } from '@/widgets/dialog/DuplicateDialog';
 import { ConsolePanel as Output } from '@/widgets/console';
 import { useDarkMode } from '@/shared/lib/hooks/useDarkMode';
 import { Chat } from '@/widgets/chat';
@@ -37,9 +36,7 @@ function RoomPage() {
     handlePasswordConfirm,
   } = useRoomJoin();
 
-  const { setIsDuplicated, isDuplicated, handleFileChange } = useFileRename(
-    paramCode!,
-  );
+  const { handleFileChange } = useFileRename(paramCode!);
 
   useAwarenessSync();
   useInitialFileSelection();
@@ -122,9 +119,9 @@ function RoomPage() {
             </div>
             {loader === 'FULL' ? (
               <ErrorDialog
-                title="사람이 가득 찼습니다!"
-                description="현재 방에 인원이 많습니다."
-                buttonLabel="뒤로가기"
+                title="방이 가득 찼어요"
+                description="현재 방에 참여할 수 있는 최대 인원에 도달했어요."
+                buttonLabel="홈으로 돌아가기"
                 onSubmit={() => {
                   window.location.href = '/';
                 }}
@@ -141,10 +138,6 @@ function RoomPage() {
               />
             )}
             <Toaster richColors position="top-center" />
-            <DuplicateDialog
-              open={isDuplicated}
-              onOpenChange={setIsDuplicated}
-            />
             <HostClaimRequestDialog />
             <ShortcutHUD />
           </div>