feat: 닉네임 설정 모달 추가 및 게스트 로그인 로직 개선

boostcampwm-2024 · Nov 28, 2024 · 4a46ebb · 4a46ebb
1 parent 06bf71b
commit 4a46ebb
Showing 1 changed file with 36 additions and 17 deletions.
diff --git a/packages/frontend/src/components/landingPage/GuestLoginButton.tsx b/packages/frontend/src/components/landingPage/GuestLoginButton.tsx
@@ -1,6 +1,8 @@
+import { useState } from 'react';
 import Button from '@/components/common/Button';
+import NicknameModal from './NicknameModal';
 import { useNavigate } from 'react-router-dom';
-import { postGuestLogin } from '@/apis/login';
+import { getGuestLogin } from '@/apis/login';
 import { useAuthStore } from '@/states/store/authStore';
 import { useSocketStore } from '@/states/store/socketStore';
 import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
@@ -10,31 +12,48 @@ export default function GuestLoginButton() {
   const { setUserData } = useAuthStore();
   const { connectSocket } = useSocketStore();
   const { connectSignalingSocket } = useSignalingSocketStore();
+  const [showModal, setShowModal] = useState(false);
 
-  async function handleClick() {
-    try {
-      localStorage.removeItem('auth-storage');
-      localStorage.removeItem('room-storage');
-      localStorage.removeItem('lobbyPageVisited');
-      localStorage.removeItem('roomCreateTooltipShown');
-      localStorage.removeItem('modalTooltipShown');
-      localStorage.removeItem('gamePageVisited');
+  const clearLocalStorage = () => {
+    [
+      'auth-storage',
+      'room-storage',
+      'lobbyPageVisited',
+      'roomCreateTooltipShown',
+      'modalTooltipShown',
+      'gamePageVisited',
+    ].forEach((key) => localStorage.removeItem(key));
+  };
 
-      const { userId, password } = await postGuestLogin();
+  const handleLogin = async (nickname: string) => {
+    try {
+      clearLocalStorage();
+      const { userId, password } = await getGuestLogin(nickname);
       await connectSocket(userId, password);
       await connectSignalingSocket(userId);
       setUserData(userId, password);
       navigate('/lobby');
     } catch (error) {
-      console.error('Guest login failed:', error);
+      console.error('게스트 로그인에 실패하였습니다.', error);
     }
-  }
+  };
 
   return (
-    <Button
-      className="text-xl font-semibold text-black bg-white hover:bg-gray-300"
-      onClick={handleClick}
-      buttonText="비회원으로 시작하기"
-    />
+    <>
+      <Button
+        className="text-xl font-semibold text-black bg-white hover:bg-gray-300"
+        onClick={() => setShowModal(true)}
+        buttonText="비회원으로 시작하기"
+      />
+      {showModal && (
+        <NicknameModal
+          onConfirm={(nickname) => {
+            setShowModal(false);
+            handleLogin(nickname);
+          }}
+          onClose={() => setShowModal(false)}
+        />
+      )}
+    </>
   );
 }