feature: 쿠키 방식 로그인 기능 구현 및 조건부 페이지 라우팅 구현

app/join/[id]/page.tsx

@@ -1,23 +1,45 @@
 'use client';
 
 import { useRouter, useParams } from 'next/navigation';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useEnterParticipant } from '@/hooks/api/mutation/useEnterParticipant';
 import { useToast } from '@/hooks/useToast';
 import Toast from '@/components/ui/toast';
+import { useIsLoggedIn } from '@/hooks/useIsLoggedIn';
+import { setMeetingUserId } from '@/lib/storage';
 
 export default function Page() {
   const params = useParams();
   const meetingId = params?.id as string;
+  const router = useRouter();
+
+  const { isLogin, isChecking } = useIsLoggedIn(meetingId); // ⭐ meetingId 전달
+
   const [name, setName] = useState('');
   const [password, setPassword] = useState('');
   const [isRemembered, setIsRemembered] = useState(true);
   const [errorMessage, setErrorMessage] = useState('');
-  const router = useRouter();
+
   const participantEnter = useEnterParticipant();
   const { isVisible, show } = useToast();
 
-  // 이름/비번 유효성 검사 (입력값이 있을 때만 버튼 활성화)
+  useEffect(() => {
+    if (isChecking) return;
+
+    if (isLogin && meetingId) {
+      router.replace(`/meeting/${meetingId}`);
+    }
+  }, [isChecking, isLogin, meetingId, router]);
+
+  if (isChecking || isLogin) {
+    return (
+      <div className="flex h-screen flex-col items-center justify-center gap-4 bg-white">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500" />
+        <p className="text-sm font-medium text-gray-500">로그인 정보를 확인 중...</p>
+      </div>
+    );
+  }
+
   const isFormValid = name.length > 0 && password.length === 4;
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -34,11 +56,8 @@ export default function Page() {
       });
 
       if (result.success) {
-        if (isRemembered) {
-          localStorage.setItem('userId', name);
-        } else {
-          sessionStorage.setItem('userId', name);
-        }
+        // ⭐ 모임별로 분리된 스토리지에 저장
+        setMeetingUserId(meetingId, name, isRemembered);
 
         router.push(`/meeting/${meetingId}`);
       } else {
@@ -53,13 +72,11 @@ export default function Page() {
 
   return (
     <div className="flex flex-col items-center justify-center gap-11 bg-white px-5 py-10 md:min-h-[calc(100vh-200px)] md:justify-center">
-      {/* 타이틀 */}
       <h1 className="w-full text-[22px] font-semibold text-black md:max-w-sm">
         모임에 참여해 주세요.
       </h1>
 
       <form onSubmit={handleSubmit} className="flex w-full flex-col gap-5 md:max-w-sm">
-        {/* 이름 입력 */}
         <div className="flex flex-col gap-2">
           <label htmlFor="name" className="text-gray-9 text-sm font-semibold">
             이름을 입력해주세요.
@@ -75,7 +92,6 @@ export default function Page() {
           />
         </div>
 
-        {/* 비밀번호 입력 */}
         <div className="flex flex-col gap-2">
           <label htmlFor="password" className="text-gray-9 text-sm font-semibold">
             비밀번호를 입력해주세요
@@ -86,26 +102,24 @@ export default function Page() {
             inputMode="numeric"
             value={password}
             onChange={(e) => {
-              // 4자리 숫자만 입력받도록 처리하기
               const val = e.target.value.replace(/[^0-9]/g, '');
               if (val.length <= 4) setPassword(val);
             }}
             placeholder="숫자 4자리를 입력해주세요"
             className={`border-gray-2 placeholder:text-gray-3 text-gray-10 focus:border-blue-5 w-full rounded-sm border py-2 pl-3 text-center text-[15px] focus:bg-white focus:outline-none ${password ? 'pl-0 text-center' : 'pl-3 text-left'}`}
           />
-          {/* 체크박스 */}
+
           <div
             onClick={() => setIsRemembered(!isRemembered)}
             className="flex cursor-pointer items-center gap-2"
           >
-            {/* 체크 아이콘 박스 */}
             <div
               className={`flex h-5 w-5 items-center justify-center rounded border transition-colors ${
                 !isRemembered
-                  ? 'border-gray-300 bg-white' // 1. 체크가 안 된 경우
+                  ? 'border-gray-300 bg-white'
                   : isFormValid
-                    ? 'border-blue-500 bg-blue-500' // 2. 체크가 됐고, 이름/비번을 제대로 입력한 경우
-                    : 'border-gray-300 bg-gray-300' // 3. 체크가 됐으나, 입력이 제대로 안 된 경우
+                    ? 'border-blue-500 bg-blue-500'
+                    : 'border-gray-300 bg-gray-300'
               }`}
             >
               {isRemembered && (
@@ -131,15 +145,15 @@ export default function Page() {
             </span>
           </div>
         </div>
-        {/* 하단 버튼 */}
+
         <div className="relative w-full md:max-w-sm">
           <button
             type="submit"
             disabled={!isFormValid || participantEnter.isPending}
             className={`text-gray-2 mt-6 h-12 w-full rounded-sm py-4 pt-3 pb-2.5 text-lg font-semibold transition-colors ${
               isFormValid && !participantEnter.isPending
-                ? 'hover:bg-blue-8 bg-blue-5' // 활성화 상태
-                : 'bg-gray-4 cursor-not-allowed' // 비활성화 상태
+                ? 'hover:bg-blue-8 bg-blue-5'
+                : 'bg-gray-4 cursor-not-allowed'
             }`}
           >
             모임 참여하기