Merge pull request #197 from boostcampwm-2024/feature/#194

[Feat] 게스트 로그인에서의 닉네임 설정 구현

packages/frontend/src/apis/login.ts

@@ -1,6 +1,8 @@
 import instance from '@/apis/instance';
 
-export async function postGuestLogin() {
-  const { data } = await instance.get('/auth/guest-login');
+export async function getGuestLogin(userId: string) {
+  const { data } = await instance.get(`/auth/guest-login`, {
+    params: { userId },
+  });
   return data;
 }

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)}
+        />
+      )}
+    </>
   );
 }

packages/frontend/src/components/landingPage/NicknameModal.tsx

@@ -0,0 +1,72 @@
+import ReactDOM from 'react-dom';
+import { useState, useEffect, useRef } from 'react';
+
+interface INicknameModalProps {
+  onConfirm: (nickname: string) => void;
+  onClose: () => void;
+}
+
+export default function NicknameModal({ onConfirm, onClose }: INicknameModalProps) {
+  const [nickname, setNickname] = useState('');
+  const [errorMessage, setErrorMessage] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, []);
+
+  const handleConfirm = async () => {
+    if (nickname.trim().length < 2 || nickname.trim().length > 10) {
+      setErrorMessage('닉네임은 2자 이상 10자 이하로 입력해주세요.');
+      return;
+    }
+
+    setErrorMessage('');
+    try {
+      await onConfirm(nickname.trim());
+    } catch (error) {
+      setErrorMessage('닉네임 설정 중 오류가 발생했습니다. 다시 시도해주세요.');
+    }
+  };
+
+  const handleClose = () => {
+    setNickname('');
+    onClose();
+  };
+
+  return ReactDOM.createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="max-w-lg p-8 bg-white shadow-lg rounded-2xl w-96">
+        <h2 className="mb-4 text-xl font-semibold text-center text-gray-900">닉네임 설정</h2>
+        <input
+          ref={inputRef}
+          type="text"
+          aria-label="닉네임 입력"
+          placeholder="닉네임을 입력하세요"
+          value={nickname}
+          onChange={(e) => setNickname(e.target.value)}
+          className="w-full py-2 mb-2 text-left text-gray-700 placeholder-gray-500 border-b-2 focus:outline-none"
+        />
+        {errorMessage && <p className="mb-4 text-sm text-red-500">{errorMessage}</p>}
+        <div className="flex justify-center gap-4 mt-4">
+          <button
+            onClick={handleClose}
+            className="w-32 py-2 text-black border border-black rounded-lg hover:bg-gray-100"
+            aria-label="닉네임 설정 취소"
+          >
+            취소
+          </button>
+          <button
+            onClick={handleConfirm}
+            className="w-32 py-2 bg-black rounded-lg text-white-default hover:bg-gray-800"
+          >
+            확인
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.getElementById('portal-root') as HTMLElement,
+  );
+}