(null);
17 |
18 | // 클린업 함수 정의
19 | const cleanup = () => {
20 | if (pitchDetectorRef.current) {
21 | pitchDetectorRef.current.cleanup();
22 | pitchDetectorRef.current = null;
23 | }
24 | updatePitch(0, 0); // 피치와 볼륨을 모두 0으로 초기화
25 | setIsAnalyzing(false);
26 | };
27 |
28 | useEffect(() => {
29 | // 클레오파트라 모드가 아니거나, 턴 데이터가 없으면 pitch 분석 중지
30 | if (!isCleopatraMode || !turnData) {
31 | cleanup();
32 | return;
33 | }
34 |
35 | // 이미 분석 중이면 중복 실행 방지
36 | if (isAnalyzing) return;
37 |
38 | // 스트림이 없으면 대기 (스트림이 늦게 도착할 수 있음)
39 | if (!stream) {
40 | // 스트림이 도착할 때까지 대기
41 | const intervalId = setInterval(() => {
42 | const newStream = signalingSocket.getPeerStream(
43 | turnData.playerNickname
44 | );
45 | if (newStream) {
46 | clearInterval(intervalId);
47 | startPitchDetection(newStream);
48 | }
49 | }, 500);
50 |
51 | // 컴포넌트 언마운트 시 인터벌 클리어
52 | return () => clearInterval(intervalId);
53 | } else {
54 | // 스트림이 있으면 바로 pitch 분석 시작
55 | startPitchDetection(stream);
56 | }
57 |
58 | // 컴포넌트 언마운트 시 클린업
59 | return cleanup;
60 | }, [isCleopatraMode, stream, turnData, currentPlayer]);
61 |
62 | const startPitchDetection = (stream: MediaStream) => {
63 | // 기존 분석 중지 및 초기화
64 | cleanup();
65 | setIsAnalyzing(true);
66 |
67 | // 현재 플레이어가 턴을 진행 중인지 확인
68 | const isCurrentPlayerTurn = turnData.playerNickname === currentPlayer;
69 |
70 | // 피치 검출기 생성 및 설정
71 | const pitchDetector = new PitchDetector();
72 | pitchDetector.setup(
73 | stream,
74 | (pitch, volume) => {
75 | updatePitch(pitch, volume);
76 | },
77 | {
78 | currentPlayer: turnData.playerNickname,
79 | isCurrent: isCurrentPlayerTurn,
80 | },
81 | true // 게임이 활성화된 상태로 설정
82 | );
83 |
84 | pitchDetectorRef.current = pitchDetector;
85 | };
86 |
87 | return null; // 이 훅은 컴포넌트에 UI를 렌더링하지 않으므로 null 반환
88 | }
89 |
--------------------------------------------------------------------------------
/fe/src/hooks/usePreventRefresh.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { toast } from 'react-toastify';
3 |
4 | export const usePreventRefresh = (isPlaying: boolean) => {
5 | useEffect(() => {
6 | if (!isPlaying) return;
7 |
8 | const preventKeyboardRefresh = (e: KeyboardEvent) => {
9 | if (
10 | e.key === 'F5' ||
11 | (e.ctrlKey && e.key === 'r') ||
12 | (e.metaKey && e.key === 'r')
13 | ) {
14 | e.preventDefault();
15 |
16 | toast.error('게임 중에는 새로고침 할 수 없습니다!', {
17 | position: 'top-left',
18 | autoClose: 1000,
19 | style: {
20 | fontFamily: 'Galmuri11, monospace',
21 | width: '25rem',
22 | minWidth: '25rem',
23 | },
24 | });
25 | }
26 | };
27 |
28 | document.addEventListener('keydown', preventKeyboardRefresh);
29 |
30 | return () => {
31 | document.removeEventListener('keydown', preventKeyboardRefresh);
32 | };
33 | }, [isPlaying]);
34 | };
35 |
--------------------------------------------------------------------------------
/fe/src/hooks/useReconnect.ts:
--------------------------------------------------------------------------------
1 | import { gameSocket } from '@/services/gameSocket';
2 | import { signalingSocket } from '@/services/signalingSocket';
3 | import { getCurrentRoomQuery } from '@/stores/queries/getCurrentRoomQuery';
4 | import useRoomStore from '@/stores/zustand/useRoomStore';
5 | import { useEffect } from 'react';
6 | import { useParams } from 'react-router-dom';
7 | import { useAudioPermission } from './useAudioPermission';
8 | import { useAudioManager } from './useAudioManager';
9 |
10 | export const useReconnect = ({ currentRoom }) => {
11 | const { roomId } = useParams();
12 | const { setCurrentRoom } = useRoomStore();
13 | const nickname = sessionStorage.getItem('user_nickname');
14 | const { data: room } = getCurrentRoomQuery(roomId);
15 | const { requestPermission } = useAudioPermission();
16 | const audioManager = useAudioManager();
17 |
18 | useEffect(() => {
19 | const handleReconnect = async () => {
20 | try {
21 | if (room && !currentRoom) {
22 | // 현재 방 설정
23 | setCurrentRoom(room);
24 |
25 | // 게임 소켓 연결
26 | if (!gameSocket.socket?.connected) {
27 | gameSocket.connect();
28 | await gameSocket.joinRoom(roomId, nickname);
29 | }
30 |
31 | // 마이크 권한 요청 및 스트림 설정
32 | const stream = await requestPermission();
33 |
34 | if (!signalingSocket.socket?.connected) {
35 | console.log('Connecting signalingSocket...');
36 | signalingSocket.connect();
37 | await signalingSocket.setupLocalStream(stream);
38 | }
39 |
40 | // audioManager 설정 (소켓 연결 후)
41 | if (!signalingSocket.hasAudioManager()) {
42 | signalingSocket.setAudioManager(audioManager);
43 | }
44 |
45 | // 시그널링 방 참가
46 | await signalingSocket.joinRoom(room, nickname);
47 | }
48 | } catch (error) {
49 | console.error('Reconnection failed:', error);
50 | // 실패 시 audioManager 제거
51 | signalingSocket.setAudioManager(null);
52 |
53 | if (error === 'GameAlreadyInProgress') {
54 | sessionStorage.setItem('gameInProgressError', 'true');
55 | window.location.href = '/rooms';
56 | }
57 | }
58 | };
59 |
60 | handleReconnect();
61 |
62 | return () => {
63 | signalingSocket.setAudioManager(null);
64 | };
65 | }, [room, currentRoom, audioManager, requestPermission, roomId, nickname]);
66 | };
67 |
--------------------------------------------------------------------------------
/fe/src/hooks/useRoomsSSE.ts:
--------------------------------------------------------------------------------
1 | import useRoomStore from '@/stores/zustand/useRoomStore';
2 | import { useEffect } from 'react';
3 | import { ENV } from '@/config/env';
4 | import { getRoomsQuery } from '@/stores/queries/getRoomsQuery';
5 |
6 | let eventSource: EventSource | null = null;
7 |
8 | export const useRoomsSSE = () => {
9 | const { setRooms, setPagination, setUserPage } = useRoomStore();
10 | const userPage = useRoomStore((state) => state.userPage);
11 | const { data } = getRoomsQuery(userPage);
12 |
13 | const connectSSE = (userPage: number) => {
14 | eventSource = new EventSource(`${ENV.SSE_URL}?page=${userPage}`);
15 |
16 | eventSource.onmessage = (event) => {
17 | try {
18 | const sseData = JSON.parse(event.data);
19 | setRooms(sseData.rooms);
20 | setPagination(sseData.pagination);
21 |
22 | if (!sseData.rooms.length && userPage > 0) {
23 | setUserPage(sseData.pagination.currentPage - 1);
24 | return;
25 | }
26 |
27 | setUserPage(sseData.pagination.currentPage);
28 | } catch (error) {
29 | console.error('Failed to parse rooms data:', error);
30 | }
31 | };
32 |
33 | eventSource.onerror = (error) => {
34 | console.error('SSE Error:', error);
35 | eventSource.close();
36 | };
37 | };
38 |
39 | useEffect(() => {
40 | if (data) {
41 | setRooms(data.rooms);
42 | setPagination(data.pagination);
43 | connectSSE(userPage);
44 | }
45 |
46 | return () => {
47 | if (eventSource) {
48 | eventSource.close();
49 | eventSource = null;
50 | }
51 | };
52 | }, [data?.pagination, data?.rooms, userPage]);
53 | };
54 |
--------------------------------------------------------------------------------
/fe/src/index.css:
--------------------------------------------------------------------------------
1 | @import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | @layer base {
8 | @font-face {
9 | font-family: 'DOSGothic';
10 | src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/DOSGothic.woff')
11 | format('woff');
12 | font-weight: normal;
13 | font-style: normal;
14 | }
15 |
16 | :root {
17 | --background: 0 0% 100%;
18 | --foreground: 222.2 84% 4.9%;
19 | --card: 0 0% 100%;
20 | --card-foreground: 222.2 84% 4.9%;
21 | --popover: 0 0% 100%;
22 | --popover-foreground: 222.2 84% 4.9%;
23 | --primary: 222.2 47.4% 11.2%;
24 | --primary-foreground: 210 40% 98%;
25 | --secondary: 210 40% 96.1%;
26 | --secondary-foreground: 222.2 47.4% 11.2%;
27 | --muted: 210 40% 96.1%;
28 | --muted-foreground: 215.4 16.3% 46.9%;
29 | --accent: 210 40% 96.1%;
30 | --accent-foreground: 222.2 47.4% 11.2%;
31 | --destructive: 0 84.2% 60.2%;
32 | --destructive-foreground: 210 40% 98%;
33 | --border: 214.3 31.8% 91.4%;
34 | --input: 214.3 31.8% 91.4%;
35 | --ring: 222.2 84% 4.9%;
36 | --chart-1: 12 76% 61%;
37 | --chart-2: 173 58% 39%;
38 | --chart-3: 197 37% 24%;
39 | --chart-4: 43 74% 66%;
40 | --chart-5: 27 87% 67%;
41 | --radius: 0.5rem;
42 | }
43 | .dark {
44 | --background: 222.2 84% 4.9%;
45 | --foreground: 210 40% 98%;
46 | --card: 222.2 84% 4.9%;
47 | --card-foreground: 210 40% 98%;
48 | --popover: 222.2 84% 4.9%;
49 | --popover-foreground: 210 40% 98%;
50 | --primary: 210 40% 98%;
51 | --primary-foreground: 222.2 47.4% 11.2%;
52 | --secondary: 217.2 32.6% 17.5%;
53 | --secondary-foreground: 210 40% 98%;
54 | --muted: 217.2 32.6% 17.5%;
55 | --muted-foreground: 215 20.2% 65.1%;
56 | --accent: 217.2 32.6% 17.5%;
57 | --accent-foreground: 210 40% 98%;
58 | --destructive: 0 62.8% 30.6%;
59 | --destructive-foreground: 210 40% 98%;
60 | --border: 217.2 32.6% 17.5%;
61 | --input: 217.2 32.6% 17.5%;
62 | --ring: 212.7 26.8% 83.9%;
63 | --chart-1: 220 70% 50%;
64 | --chart-2: 160 60% 45%;
65 | --chart-3: 30 80% 55%;
66 | --chart-4: 280 65% 60%;
67 | --chart-5: 340 75% 55%;
68 | }
69 | }
70 | @layer base {
71 | * {
72 | @apply border-border;
73 | }
74 | body {
75 | @apply bg-background text-foreground relative;
76 | }
77 | }
78 |
79 | :root {
80 | margin: 0;
81 | padding: 0;
82 |
83 | color-scheme: light dark;
84 |
85 | font-synthesis: none;
86 | text-rendering: optimizeLegibility;
87 | }
88 |
89 | * {
90 | box-sizing: border-box;
91 | }
92 |
93 | html,
94 | body,
95 | #root {
96 | height: 100%;
97 | }
98 |
99 | body {
100 | margin: 0;
101 | }
102 |
103 | .app {
104 | @apply flex flex-col mx-auto justify-center max-w-[1074px] lg:px-0 p-8;
105 | }
106 |
107 | .game-wrapper {
108 | @apply relative w-full min-h-screen;
109 | }
110 |
111 | .game-wrapper::before {
112 | @apply content-[''] fixed inset-0 w-full h-full bg-main-desert bg-cover bg-center opacity-75 -z-10;
113 | }
114 |
--------------------------------------------------------------------------------
/fe/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export function cn(...inputs: ClassValue[]) {
5 | return twMerge(clsx(inputs))
6 | }
7 |
--------------------------------------------------------------------------------
/fe/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client';
2 | import './index.css';
3 | import App from './App.tsx';
4 |
5 | createRoot(document.getElementById('root')!).render();
6 |
--------------------------------------------------------------------------------
/fe/src/pages/GamePage/GameDialog/ExitDialog.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AlertDialog,
3 | AlertDialogAction,
4 | AlertDialogCancel,
5 | AlertDialogContent,
6 | AlertDialogDescription,
7 | AlertDialogFooter,
8 | AlertDialogHeader,
9 | AlertDialogTitle,
10 | } from '@/components/ui/alert-dialog';
11 | import { gameSocket } from '@/services/gameSocket';
12 | import { signalingSocket } from '@/services/signalingSocket';
13 | import useGameStore from '@/stores/zustand/useGameStore';
14 | import useRoomStore from '@/stores/zustand/useRoomStore';
15 | import { RoomDialogProps } from '@/types/roomTypes';
16 | import { useNavigate } from 'react-router-dom';
17 |
18 | const ExitDialog = ({ open, onOpenChange }: RoomDialogProps) => {
19 | const { setCurrentRoom } = useRoomStore();
20 | const resetGame = useGameStore((state) => state.resetGame);
21 | const navigate = useNavigate();
22 |
23 | const handleExit = () => {
24 | gameSocket.disconnect();
25 | signalingSocket.disconnect();
26 |
27 | setCurrentRoom(null);
28 | resetGame();
29 | navigate('/rooms');
30 | };
31 |
32 | return (
33 |
34 |
35 |
36 | 방 나가기
37 |
38 | 정말로 방을 나가시겠습니까?
39 |
40 |
41 |
42 | 취소
43 | 확인
44 |
45 |
46 |
47 | );
48 | };
49 |
50 | export default ExitDialog;
51 |
--------------------------------------------------------------------------------
/fe/src/pages/GamePage/GameDialog/KickDialog.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AlertDialog,
3 | AlertDialogAction,
4 | AlertDialogCancel,
5 | AlertDialogContent,
6 | AlertDialogDescription,
7 | AlertDialogFooter,
8 | AlertDialogHeader,
9 | AlertDialogTitle,
10 | } from '@/components/ui/alert-dialog';
11 | import { RoomDialogProps } from '@/types/roomTypes';
12 | import { gameSocket } from '@/services/gameSocket';
13 | import { cn } from '@/lib/utils';
14 |
15 | interface KickDialogProps extends RoomDialogProps {
16 | playerNickname: string;
17 | }
18 |
19 | const KickDialog = ({
20 | open,
21 | onOpenChange,
22 | playerNickname,
23 | }: KickDialogProps) => {
24 | const handleKick = () => {
25 | gameSocket.kickPlayer(playerNickname);
26 | onOpenChange(false);
27 | };
28 |
29 | return (
30 |
31 |
32 |
33 | 강제 퇴장 확인
34 |
35 | {playerNickname}님을 정말로 강제 퇴장 하시겠습니까?
36 |
37 |
38 |
39 | 취소
40 |
44 | 확인
45 |
46 |
47 |
48 |
49 | );
50 | };
51 |
52 | export default KickDialog;
53 |
--------------------------------------------------------------------------------
/fe/src/pages/GamePage/GameScreen/EndScreen.tsx:
--------------------------------------------------------------------------------
1 | import Lottie from 'lottie-react';
2 | import podiumAnimation from '@/assets/lottie/podium.json';
3 | import useGameStore from '@/stores/zustand/useGameStore';
4 | import { motion } from 'framer-motion';
5 | import { Button } from '@/components/ui/button';
6 | import { useParams } from 'react-router-dom';
7 | import { getCurrentRoomQuery } from '@/stores/queries/getCurrentRoomQuery';
8 | import useRoomStore from '@/stores/zustand/useRoomStore';
9 |
10 | const EndScreen = () => {
11 | const rank = useGameStore((state) => state.rank);
12 | const resetGame = useGameStore((state) => state.resetGame);
13 | const { roomId } = useParams();
14 | const { refetch } = getCurrentRoomQuery(roomId);
15 | const { setCurrentRoom } = useRoomStore();
16 |
17 | const handleGameEnd = async () => {
18 | try {
19 | resetGame();
20 | // room 정보 다시 가져오기
21 | const { data } = await refetch();
22 | // 새로운 room 정보로 상태 업데이트
23 | if (data) {
24 | setCurrentRoom(data);
25 | }
26 | } catch (error) {
27 | console.error('Failed to refresh room data:', error);
28 | }
29 | };
30 |
31 | const positions = {
32 | 0: { top: '18%', left: '49.7%' },
33 | 1: { top: '54%', left: '34.5%' },
34 | 2: { top: '68%', left: '60.5%' },
35 | };
36 |
37 | const getDelay = (index: number) => {
38 | switch (index) {
39 | case 2:
40 | return 0.7;
41 | case 1:
42 | return 1.4;
43 | case 0:
44 | return 2.1;
45 | default:
46 | return 0;
47 | }
48 | };
49 |
50 | return (
51 |
52 |
53 |
58 |
59 |
60 | {rank.slice(0, 3).map((playerName, index) => (
61 |
77 |
87 |
88 | {playerName}
89 |
90 |
91 |
92 | ))}
93 |
94 |
95 |
101 | 최종 순위
102 |
103 | {rank.map((playerName, index) => (
104 |
108 | {index + 1}위
109 | {playerName}
110 |
111 | ))}
112 |
114 |
115 |
121 |
133 |
134 |
135 |
27 |
28 | {resultData.playerNickname}
29 |
30 |
46 | {getResultText()}
47 |
48 |
15 |
28 | {text}
29 |
30 |
31 | )}
32 |
33 | );
34 | };
35 |
36 | export default Lyric;
37 |
--------------------------------------------------------------------------------
/fe/src/pages/GamePage/GameScreen/ReadyScreen.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useMemo } from 'react';
2 | import { Button } from '@/components/ui/button';
3 | import { Gamepad2, CheckCircle2 } from 'lucide-react';
4 | import useRoomStore from '@/stores/zustand/useRoomStore';
5 | import { gameSocket } from '@/services/gameSocket';
6 |
7 | const ReadyScreen = () => {
8 | const [isReady, setIsReady] = useState(false);
9 | const [isGameStarted, setIsGameStarted] = useState(false);
10 | const { currentRoom, currentPlayer } = useRoomStore();
11 |
12 | if (!currentRoom) return null;
13 |
14 | const isHost = currentPlayer === currentRoom.hostNickname;
15 |
16 | const canStartGame = useMemo(() => {
17 | if (!currentRoom) return false;
18 | if (currentRoom.players.length <= 1) return false;
19 |
20 | return currentRoom.players.every((player) => {
21 | const isPlayerHost = player.playerNickname === currentRoom.hostNickname;
22 | return isPlayerHost || player.isReady;
23 | });
24 | }, [currentRoom]);
25 |
26 | const toggleReady = () => {
27 | const newReadyState = !isReady;
28 | setIsReady(newReadyState);
29 |
30 | if (!isHost) {
31 | gameSocket.setReady();
32 | }
33 | };
34 |
35 | const handleGameStart = () => {
36 | if (!isHost || isGameStarted) return;
37 |
38 | try {
39 | console.log('Starting game...');
40 | gameSocket.startGame();
41 | setIsGameStarted((prev) => !prev);
42 | console.log('Game socket event emitted');
43 | } catch (error) {
44 | console.error('Game start error:', error);
45 | }
46 | };
47 |
48 | return (
49 |
50 | {isHost ? (
51 |
60 | ) : (
61 |
69 | )}
70 |
71 | {!canStartGame ? (
72 |
73 | 모든 플레이어가 준비를 완료해야 게임을 시작할 수 있습니다.
74 |
75 | ) : (
76 |
77 | 모든 플레이어가 준비 완료되었습니다. 게임을 시작해 주세요!
78 |
79 | )}
80 |
59 | {isPlayerHost ? (
60 |
61 | ) : (
62 |
63 | )}
64 | {playerNickname}
65 |
66 |
67 |
68 | {isLeft ? (
69 |
74 | ) : isDead ? (
75 |
80 | ) : (
81 | ''
82 | )}
83 |
86 | {isCurrentPlayer ? (
87 |
88 | ) : isMuted ? (
89 |
90 | ) : (
91 |
92 | )}
93 | {isCurrentPlayerHost && !isPlayerHost && (
94 |
102 | )}
103 |
104 |
105 |
106 |
111 |
112 | );
113 | };
114 |
115 | export default Player;
116 |
--------------------------------------------------------------------------------
/fe/src/pages/GamePage/PlayerList/PlayerList.tsx:
--------------------------------------------------------------------------------
1 | import { RULES } from '@/constants/rules';
2 | import Player from './Player';
3 | import { PlayerProps } from '@/types/roomTypes';
4 |
5 | interface PlayerListProps {
6 | players: PlayerProps[];
7 | }
8 |
9 | const PlayerList = ({ players }: PlayerListProps) => {
10 | const emptySlots = RULES.maxPlayer - players.length;
11 |
12 | return (
13 |
14 | {players.map((player) => (
15 |
16 | ))}
17 | {Array.from({ length: emptySlots }).map((_, index) => (
18 |
22 | ))}
23 |
44 |
54 |
61 |
62 | );
63 | };
64 |
65 | export default VolumeBar;
66 |
--------------------------------------------------------------------------------
/fe/src/pages/GamePage/index.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 | import useRoomStore from '@/stores/zustand/useRoomStore';
3 | import PlayerList from './PlayerList/PlayerList';
4 | import { Button } from '@/components/ui/button';
5 | import ExitDialog from './GameDialog/ExitDialog';
6 | import { useReconnect } from '@/hooks/useReconnect';
7 | import { useBackExit } from '@/hooks/useBackExit';
8 | import { NotFound } from '@/pages/NotFoundPage';
9 | import GameScreen from './GameScreen/GameScreen';
10 | import { useAudioManager } from '@/hooks/useAudioManager';
11 | import { signalingSocket } from '@/services/signalingSocket';
12 | import { toast } from 'react-toastify';
13 | import { useParams } from 'react-router-dom';
14 | import { getCurrentRoomQuery } from '@/stores/queries/getCurrentRoomQuery';
15 | import JoinDialog from '../RoomListPage/RoomDialog/JoinDialog';
16 |
17 | const GamePage = () => {
18 | const [showJoinDialog, setShowJoinDialog] = useState(false);
19 | const [showExitDialog, setShowExitDialog] = useState(false);
20 | const { kickedPlayer, setKickedPlayer } = useRoomStore();
21 | const currentRoom = useRoomStore((state) => state.currentRoom);
22 | const audioManager = useAudioManager();
23 | const { roomId } = useParams();
24 | const { data: room } = getCurrentRoomQuery(roomId);
25 | const nickname = sessionStorage.getItem('user_nickname');
26 |
27 | useReconnect({ currentRoom });
28 | useBackExit({ setShowExitDialog });
29 |
30 | useEffect(() => {
31 | if (room && !currentRoom) {
32 | if (!nickname) {
33 | setShowJoinDialog(true);
34 | }
35 | }
36 | }, [room, currentRoom, nickname]);
37 |
38 | // 오디오 매니저 설정
39 | useEffect(() => {
40 | signalingSocket.setAudioManager(audioManager);
41 |
42 | return () => {
43 | signalingSocket.setAudioManager(null);
44 | };
45 | }, [audioManager]);
46 |
47 | // 강퇴 알림 처리 추가
48 | useEffect(() => {
49 | if (kickedPlayer) {
50 | toast.error(`${kickedPlayer}님이 강퇴되었습니다.`, {
51 | position: 'top-right',
52 | autoClose: 1000,
53 | style: {
54 | fontFamily: 'Galmuri11, monospace',
55 | },
56 | });
57 |
58 | setKickedPlayer(null);
59 | }
60 | }, [kickedPlayer, setKickedPlayer, toast]);
61 |
62 | const handleClickExit = () => {
63 | setShowExitDialog(true);
64 | };
65 |
66 | const handleCopyLink = () => {
67 | // 현재 URL을 구성
68 | const currentURL = `${window.location.origin}/game/${roomId}`;
69 |
70 | // 클립보드에 복사
71 | navigator.clipboard
72 | .writeText(currentURL)
73 | .then(() => {
74 | toast.success('링크가 클립보드에 복사되었습니다!', {
75 | position: 'top-right',
76 | autoClose: 1000,
77 | style: {
78 | width: '25rem',
79 | fontFamily: 'Galmuri11, monospace',
80 | },
81 | });
82 | })
83 | .catch((err) => {
84 | console.error('링크 복사 실패:', err);
85 | toast.error('링크 복사에 실패했습니다.', {
86 | position: 'top-right',
87 | autoClose: 1000,
88 | style: {
89 | fontFamily: 'Galmuri11, monospace',
90 | },
91 | });
92 | });
93 | };
94 |
95 | if (!currentRoom) {
96 | return ;
97 | }
98 |
99 | if (showJoinDialog) {
100 | return (
101 |
106 | );
107 | }
108 |
109 | return (
110 |
111 |
112 |
113 |
114 |
({
116 | playerNickname: player.playerNickname,
117 | isReady: player.isReady,
118 | isDead: player.isDead,
119 | isLeft: player.isLeft,
120 | }))}
121 | />
122 |
123 |
124 |
125 |
131 |
134 |
135 |
136 |
137 |
138 |
20 |
21 |
22 |
32 |
33 | 4 0 4
34 |
35 | PAGE NOT FOUND
36 | {' '}
37 | {/* 간격 증가 */}
38 |
39 |
40 |
41 |
42 | 앗! 방을 찾을 수 없습니다.
43 |
44 |
45 | 방이 삭제되었거나 존재하지 않는 방입니다.
46 |
47 |
54 |
55 |
15 | 방 목록
16 |
19 |
20 |
21 |
22 |
23 | );
24 | };
25 |
26 | export default RoomHeader;
27 |
--------------------------------------------------------------------------------
/fe/src/pages/RoomListPage/RoomList/GameRoom.tsx:
--------------------------------------------------------------------------------
1 | import { Card, CardHeader, CardTitle } from '@/components/ui/card';
2 | import { Room } from '@/types/roomTypes';
3 | import { FaCircle, FaCrown, FaUsers } from 'react-icons/fa6';
4 |
5 | interface GameRoomProps {
6 | room: Room;
7 | onJoinRoom: (roomId: string) => void;
8 | }
9 |
10 | const GameRoom = ({ room, onJoinRoom }: GameRoomProps) => {
11 | const isGameStarted = (status: string) => {
12 | return status === 'progress';
13 | };
14 | const isRoomFull = room.players.length >= 4;
15 |
16 | const handleRoomClick = () => {
17 | if (!isGameStarted(room.status) && !isRoomFull) {
18 | onJoinRoom(room.roomId);
19 | }
20 | };
21 |
22 | return (
23 |
31 |
32 |
33 | {room.roomName}
34 |
35 |
36 |
37 |
38 | 방장: {room.hostNickname}
39 |
40 |
41 |
44 |
45 | 상태:{' '}
46 |
51 | {isGameStarted(room.status) ? '게임 중' : '대기 중'}
52 |
53 |
54 |
55 |
56 |
57 | 인원 수: {room.players.length} / 4
58 |
59 |
23 |
31 |
32 | {Array.from({ length: totalPages }, (_, i) => (
33 |
42 | ))}
43 |
44 |
52 |
32 |
33 | {rooms.map((room) => (
34 |
35 | ))}
36 | {rooms.length > 0 &&
37 | rooms.length < RULES.maxPage &&
38 | Array.from({ length: RULES.maxPage - rooms.length }).map((_, i) => (
39 |
40 | ))}
41 |
42 |
43 | {showPagination &&
}
44 |
45 | {selectedRoomId && (
46 |
51 | )}
52 |
39 |
40 |
41 |
42 | {isEmpty ? (
43 |
44 |
49 |
50 | ) : (
51 |
52 | )}
53 |
54 |
55 |
61 |
118 |