[FE] 강퇴당한 사용자에게 Dialog를 띄운다. (#178)

* feat: 재사용 가능한 AlertDialog 컴포넌트 생성

* feat: 현재 게임방 이름 세션 스토리지 저장 후 강퇴 시 CustomAlertDialog 띄우기

fe/src/components/common/CustomAlertDialog.tsx

@@ -0,0 +1,45 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog';
+
+interface CustomAlertDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: string;
+  description?: string;
+  actionText?: string;
+}
+
+const CustomAlertDialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  actionText = '확인',
+}: CustomAlertDialogProps) => {
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent className="font-galmuri sm:max-w-[22rem]">
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description && (
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          )}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogAction className="bg-primary hover:bg-primary/90">
+            {actionText}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default CustomAlertDialog;

fe/src/pages/RoomListPage/index.tsx

@@ -2,15 +2,36 @@ import SearchBar from '@/components/common/SearchBar';
 import RoomHeader from './RoomHeader/RoomHeader';
 import RoomList from './RoomList/RoomList';
 import { useRoomsSSE } from '@/hooks/useRoomsSSE';
+import { useEffect, useState } from 'react';
+import CustomAlertDialog from '@/components/common/CustomAlertDialog';
 
 const RoomListPage = () => {
+  const [showAlert, setShowAlert] = useState(false);
+  const [kickedRoomName, setKickedRoomName] = useState('');
+
   useRoomsSSE();
 
+  useEffect(() => {
+    const kickedRoomName = sessionStorage.getItem('kickedRoomName');
+
+    if (kickedRoomName) {
+      setKickedRoomName(kickedRoomName);
+      setShowAlert(true);
+      sessionStorage.removeItem('kickedRoomName');
+    }
+  }, []);
+
   return (
     <div>
       <RoomHeader />
       <SearchBar />
       <RoomList />
+      <CustomAlertDialog
+        open={showAlert}
+        onOpenChange={setShowAlert}
+        title="알림"
+        description={`${kickedRoomName}방에서 강퇴되었습니다.`}
+      />
     </div>
   );
 };

fe/src/services/gameSocket.ts

@@ -75,6 +75,8 @@ class GameSocket extends SocketService {
       if (!currentRoom) return;
 
       if (currentPlayer === playerNickname) {
+        sessionStorage.setItem('kickedRoomName', currentRoom.roomName);
+
         setCurrentRoom(null);
         setCurrentPlayer(null);
         window.location.href = '/';