diff --git a/packages/frontend/src/components/landingPage/GuestLoginButton.tsx b/packages/frontend/src/components/landingPage/GuestLoginButton.tsx index f913b12..9ef7c0b 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 ( -