From 4a46ebb2278c95ec8dfd6372514e0af3782423c2 Mon Sep 17 00:00:00 2001
From: zizonyoungjun <naya700@naver.com>
Date: Thu, 28 Nov 2024 16:10:35 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8B=89=EB=84=A4=EC=9E=84=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95=20=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80=20=EB=B0=8F?=
 =?UTF-8?q?=20=EA=B2=8C=EC=8A=A4=ED=8A=B8=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../landingPage/GuestLoginButton.tsx          | 53 +++++++++++++------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/packages/frontend/src/components/landingPage/GuestLoginButton.tsx b/packages/frontend/src/components/landingPage/GuestLoginButton.tsx
index f913b126..9ef7c0b4 100644
--- 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)}
+        />
+      )}
+    </>
   );
 }