Skip to content

Commit 925029c

Browse files
today-is-firsttoday-is-first
authored
Merge pull request #213 from boostcampwm-2024/feature/#207
[Feat] κ²Œμž„νŽ˜μ΄μ§€μ—μ„œ λ‚˜κ°€κΈ° λ²„νŠΌ 클릭 μ‹œ κ²½κ³  νŒμ—… λ„μš°λ„λ‘ μˆ˜μ •
2 parents 261717f + 57e1bdc commit 925029c

30 files changed

+100
-57
lines changed

β€Žpackages/frontend/src/components/gamePage/leftSection/MainDisplay.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState, useEffect } from 'react';
2-
import { useRoomStore } from '@/states/store/roomStore';
2+
import { useRoomStore } from '@/store/roomStore';
33
import StartButton from './GameButtons/StartButton';
44
import ReadyButton from './GameButtons/ReadyButton';
55
import { GAME_PHASE, GamePhase } from '@/constants';
@@ -9,15 +9,15 @@ import { useGameSocket } from '@/hooks/useGameSocket';
99
import useGuessing from '@/hooks/useGuessing';
1010
import useEnding from '@/hooks/useEnding';
1111
import useVoteResult from '@/hooks/useVoteResult';
12-
import { useAuthStore } from '@/states/store/authStore';
12+
import { useAuthStore } from '@/store/authStore';
1313
import Countdown from './Countdown';
1414
import WordDisplay from './WordDisplay';
1515
import Voting from './GamePhases/Voting';
1616
import VoteResult from './GamePhases/VoteResult';
1717
import EndingResult from './GamePhases/EndingResult';
18-
import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
18+
import { usePeerConnectionStore } from '@/store/peerConnectionStore';
1919
import VideoStream from '@/components/gamePage/stream/VideoStream';
20-
import { useLocalStreamStore } from '@/states/store/localStreamStore';
20+
import { useLocalStreamStore } from '@/store/localStreamStore';
2121
import { useSpeakingControl } from '@/hooks/useSpeakingControl';
2222

2323
export default function MainDisplay() {

β€Žpackages/frontend/src/components/gamePage/leftSection/VideoFeed.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useRef, useEffect } from 'react';
22
import VideoStream from '@/components/gamePage/stream/VideoStream';
3-
import { useAuthStore } from '@/states/store/authStore';
4-
import { useLocalStreamStore } from '@/states/store/localStreamStore';
5-
import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
3+
import { useAuthStore } from '@/store/authStore';
4+
import { useLocalStreamStore } from '@/store/localStreamStore';
5+
import { usePeerConnectionStore } from '@/store/peerConnectionStore';
66
import { useReadyStatus } from '@/hooks/useReadyStatus';
77

88
export default function VideoFeed() {

β€Žpackages/frontend/src/components/gamePage/rightSection/ChatSection.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, { useState, useEffect, useRef } from 'react';
22
import { useParams } from 'react-router-dom';
33
import { useChatSocket } from '@/hooks/useChatSocket';
4-
import { useAuthStore } from '@/states/store/authStore';
5-
import { useChatStore } from '@/states/store/chatStore';
4+
import { useAuthStore } from '@/store/authStore';
5+
import { useChatStore } from '@/store/chatStore';
66
import { ChatType } from '@/constants/chatState';
77
import ArrowDownIcon from '@/assets/images/ArrowDownIcon.svg?react';
88

β€Žpackages/frontend/src/components/gamePage/rightSection/LeaveButton.tsx

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import Leave from '@/assets/images/Leave.svg?react';
22
import { useNavigate } from 'react-router-dom';
3-
import { useSocketStore } from '@/states/store/socketStore';
4-
import { useChatStore } from '@/states/store/chatStore';
5-
import { useRoomStore } from '@/states/store/roomStore';
6-
import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
3+
import { useSocketStore } from '@/store/socketStore';
4+
import { useChatStore } from '@/store/chatStore';
5+
import { useRoomStore } from '@/store/roomStore';
6+
import { useSignalingSocketStore } from '@/store/signalingSocketStore';
7+
import { useState } from 'react';
8+
import LeaveConfirmModal from './LeaveConfirmModal';
79

810
export default function LeaveButton() {
11+
const [showModal, setShowModal] = useState(false);
912
const navigate = useNavigate();
1013
const socket = useSocketStore((state) => state.socket);
1114
const setChatHistory = useChatStore((state) => state.setChatHistory);
1215
const setRoomData = useRoomStore((state) => state.setRoomData);
1316
const signalingSocket = useSignalingSocketStore((state) => state.signalingSocket);
17+
1418
function handleLeave() {
1519
if (!socket || !signalingSocket) return;
1620
socket.emit('leave_room');
@@ -19,13 +23,20 @@ export default function LeaveButton() {
1923
setRoomData(null, false, false);
2024
navigate('/lobby');
2125
}
26+
2227
return (
23-
<button
24-
className="w-[120px] px-4 py-4 bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"
25-
onClick={handleLeave}
26-
>
27-
<Leave className="text-white-default pr-2" />
28-
<p className="text-white-default text-lg">λ°© λ‚˜κ°€κΈ°</p>
29-
</button>
28+
<>
29+
<button
30+
className="w-[120px] px-4 py-4 bg-transparent rounded-lg flex flex-col items-center justify-center gap-2"
31+
onClick={() => setShowModal(true)}
32+
>
33+
<Leave className="pr-2 text-white-default" />
34+
<p className="text-lg text-white-default">λ°© λ‚˜κ°€κΈ°</p>
35+
</button>
36+
37+
{showModal && (
38+
<LeaveConfirmModal onConfirm={handleLeave} onClose={() => setShowModal(false)} />
39+
)}
40+
</>
3041
);
3142
}

β€Žpackages/frontend/src/components/gamePage/rightSection/LeaveConfirmModal.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import ReactDOM from 'react-dom';
2+
3+
interface ILeaveConfirmModalProps {
4+
onConfirm: () => void;
5+
onClose: () => void;
6+
}
7+
8+
export default function LeaveConfirmModal({ onConfirm, onClose }: ILeaveConfirmModalProps) {
9+
const modalContent = (
10+
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
11+
<div className="max-w-lg p-8 bg-white shadow-lg rounded-2xl w-96">
12+
<h2 className="mb-4 text-xl font-semibold text-center text-gray-900">
13+
κ²Œμž„μ„ λ‚˜κ°€μ‹œκ² μŠ΅λ‹ˆκΉŒ?
14+
</h2>
15+
<div className="flex justify-center gap-4 mt-4">
16+
<button
17+
onClick={onClose}
18+
className="w-32 py-2 text-black border border-black rounded-lg hover:bg-gray-100"
19+
>
20+
μ·¨μ†Œ
21+
</button>
22+
<button
23+
onClick={onConfirm}
24+
className="w-32 py-2 bg-black rounded-lg text-white-default hover:bg-gray-800"
25+
>
26+
확인
27+
</button>
28+
</div>
29+
</div>
30+
</div>
31+
);
32+
33+
return ReactDOM.createPortal(modalContent, document.getElementById('portal-root') as HTMLElement);
34+
}

β€Žpackages/frontend/src/components/gamePage/stream/CameraSettingButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, useEffect } from 'react';
22
import CameraOn from '@/assets/images/CameraOn.svg?react';
33
import CameraOff from '@/assets/images/CameraOff.svg?react';
4-
import { useLocalStreamStore } from '@/states/store/localStreamStore';
4+
import { useLocalStreamStore } from '@/store/localStreamStore';
55

66
export default function CameraSettingButton({ iconColor }: { iconColor: string }) {
77
const { localStream } = useLocalStreamStore();

β€Žpackages/frontend/src/components/gamePage/stream/MikeSettingButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, useEffect } from 'react';
22
import MikeOn from '@/assets/images/MikeOn.svg?react';
33
import MikeOff from '@/assets/images/MikeOff.svg?react';
4-
import { useLocalStreamStore } from '@/states/store/localStreamStore';
4+
import { useLocalStreamStore } from '@/store/localStreamStore';
55

66
export default function MikeSettingButton({ iconColor }: { iconColor: string }) {
77
const { localStream } = useLocalStreamStore();

β€Žpackages/frontend/src/components/landingPage/GuestLoginButton.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import Button from '@/components/common/Button';
33
import NicknameModal from './NicknameModal';
44
import { useNavigate } from 'react-router-dom';
55
import { getGuestLogin } from '@/apis/login';
6-
import { useAuthStore } from '@/states/store/authStore';
7-
import { useSocketStore } from '@/states/store/socketStore';
8-
import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
6+
import { useAuthStore } from '@/store/authStore';
7+
import { useSocketStore } from '@/store/socketStore';
8+
import { useSignalingSocketStore } from '@/store/signalingSocketStore';
99

1010
export default function GuestLoginButton() {
1111
const navigate = useNavigate();

β€Žpackages/frontend/src/components/lobbyPage/VideoAudioTestModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import VideoStream from '@/components/gamePage/stream/VideoStream';
2-
import { useLocalStreamStore } from '@/states/store/localStreamStore';
2+
import { useLocalStreamStore } from '@/store/localStreamStore';
33
import CameraSettingButton from '@/components/gamePage/stream/CameraSettingButton';
44
import MikeSettingButton from '@/components/gamePage/stream/MikeSettingButton';
55

β€Žpackages/frontend/src/hooks/useChatSocket.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { useEffect } from 'react';
2-
import { useChatStore } from '@/states/store/chatStore';
3-
import { useSocketStore } from '@/states/store/socketStore';
4-
import { useRoomStore } from '@/states/store/roomStore';
2+
import { useChatStore } from '@/store/chatStore';
3+
import { useSocketStore } from '@/store/socketStore';
4+
import { useRoomStore } from '@/store/roomStore';
55
import { ChatType } from '@/constants/chatState';
6-
import { useAuthStore } from '@/states/store/authStore';
6+
import { useAuthStore } from '@/store/authStore';
77

88
interface IChatEntry {
99
userId: string;

β€Žpackages/frontend/src/hooks/useCreateRoom.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useNavigate } from 'react-router-dom';
2-
import { useAuthStore } from '@/states/store/authStore';
3-
import { useRoomStore } from '@/states/store/roomStore';
4-
import { useSocketStore } from '@/states/store/socketStore';
5-
import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
2+
import { useAuthStore } from '@/store/authStore';
3+
import { useRoomStore } from '@/store/roomStore';
4+
import { useSocketStore } from '@/store/socketStore';
5+
import { useSignalingSocketStore } from '@/store/signalingSocketStore';
66

77
export default function useCreateRoom() {
88
const navigate = useNavigate();

β€Žpackages/frontend/src/hooks/useEnding.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect, useState } from 'react';
2-
import { useSocketStore } from '@/states/store/socketStore';
2+
import { useSocketStore } from '@/store/socketStore';
33
import { GAME_PHASE, GamePhase } from '@/constants';
44

55
interface IEndingResult {

β€Žpackages/frontend/src/hooks/useGameSocket.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, useState } from 'react';
2-
import { useSocketStore } from '@/states/store/socketStore';
3-
import { useRoomStore } from '@/states/store/roomStore';
2+
import { useSocketStore } from '@/store/socketStore';
3+
import { useRoomStore } from '@/store/roomStore';
44
import { GAME_PHASE, GamePhase } from '@/constants';
55

66
interface IReadyUsers {

β€Žpackages/frontend/src/hooks/useGuessing.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect } from 'react';
2-
import { useSocketStore } from '@/states/store/socketStore';
2+
import { useSocketStore } from '@/store/socketStore';
33
import { GAME_PHASE, GamePhase } from '@/constants';
44

55
export default function useGuessing(isPinoco: boolean, setGamePhase: (phase: GamePhase) => void) {

β€Žpackages/frontend/src/hooks/useJoinRoom.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { useNavigate } from 'react-router-dom';
2-
import { useAuthStore } from '@/states/store/authStore';
3-
import { useRoomStore } from '@/states/store/roomStore';
4-
import { useSocketStore } from '@/states/store/socketStore';
5-
import { useSignalingSocketStore } from '@/states/store/signalingSocketStore';
2+
import { useAuthStore } from '@/store/authStore';
3+
import { useRoomStore } from '@/store/roomStore';
4+
import { useSocketStore } from '@/store/socketStore';
5+
import { useSignalingSocketStore } from '@/store/signalingSocketStore';
66

77
export default function useJoinRoom() {
88
const navigate = useNavigate();

β€Žpackages/frontend/src/hooks/useSpeakingControl.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useEffect } from 'react';
2-
import { useSocketStore } from '@/states/store/socketStore';
2+
import { useSocketStore } from '@/store/socketStore';
33

44
export const useSpeakingControl = (currentSpeaker: string | null, userId: string | null) => {
55
const socket = useSocketStore((state) => state.socket);

β€Žpackages/frontend/src/hooks/useVoteResult.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from 'react';
2-
import { useSocketStore } from '@/states/store/socketStore';
2+
import { useSocketStore } from '@/store/socketStore';
33
import { GAME_PHASE, GamePhase } from '@/constants';
4-
import { useRoomStore } from '@/states/store/roomStore';
4+
import { useRoomStore } from '@/store/roomStore';
55

66
interface IVoteResult {
77
voteResult: Record<string, number>;

β€Žpackages/frontend/src/pages/gamePage/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import LeftGameSection from '@/components/gamePage/leftSection/LeftGameSection';
44
import RightGameSection from '@/components/gamePage/rightSection/RightGameSection';
55
import Header from '@/components/layout/Header';
66
import GameManual from '@/components/gamePage/GameManual';
7-
import { useSocketStore } from '@/states/store/socketStore';
8-
import { useRoomStore } from '@/states/store/roomStore';
7+
import { useSocketStore } from '@/store/socketStore';
8+
import { useRoomStore } from '@/store/roomStore';
99

1010
export default function GamePage() {
1111
const { socket } = useSocketStore();

β€Žpackages/frontend/src/pages/landingPage/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import GuestLoginButton from '@/components/landingPage/GuestLoginButton';
22
import BackgroundImage from '@/components/layout/BackgroundImage';
33
import MainLogo from '@/assets/images/MainLogo.svg?react';
4-
import { useSocketStore } from '@/states/store/socketStore';
4+
import { useSocketStore } from '@/store/socketStore';
55

66
export default function LandingPage() {
77
const { socket } = useSocketStore();

β€Žpackages/frontend/src/pages/lobbyPage/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { useEffect } from 'react';
2-
import { useSocketStore } from '@/states/store/socketStore';
2+
import { useSocketStore } from '@/store/socketStore';
33
import BackgroundImage from '@/components/layout/BackgroundImage';
44
import MainLogo from '@/assets/images/MainLogo.svg?react';
55
import RoomCreationButton from '@/components/lobbyPage/RoomCreationButton';
66
import RoomJoinButton from '@/components/lobbyPage/RoomJoinButton';
77
import VideoAudioTestButton from '@/components/lobbyPage/VideoAudioTestButton';
88
import Header from '@/components/layout/Header';
9-
import { useRoomStore } from '@/states/store/roomStore';
10-
import { useChatStore } from '@/states/store/chatStore';
11-
import { useLocalStreamStore } from '@/states/store/localStreamStore';
9+
import { useRoomStore } from '@/store/roomStore';
10+
import { useChatStore } from '@/store/chatStore';
11+
import { useLocalStreamStore } from '@/store/localStreamStore';
1212
import { getVideoStream } from '@/utils/videoStreamUtils';
1313

1414
export default function LobbyPage() {

β€Žpackages/frontend/src/states/mutations/index.tsx

Lines changed: 0 additions & 1 deletion
This file was deleted.

β€Žpackages/frontend/src/states/queries/index.tsx

Lines changed: 0 additions & 1 deletion
This file was deleted.

β€Žpackages/frontend/src/states/store/authStore.ts renamed to β€Žpackages/frontend/src/store/authStore.ts

File renamed without changes.

β€Žpackages/frontend/src/states/store/chatStore.ts renamed to β€Žpackages/frontend/src/store/chatStore.ts

File renamed without changes.

β€Žpackages/frontend/src/states/store/localStreamStore.ts renamed to β€Žpackages/frontend/src/store/localStreamStore.ts

File renamed without changes.

β€Žpackages/frontend/src/states/store/peerConnectionStore.ts renamed to β€Žpackages/frontend/src/store/peerConnectionStore.ts

File renamed without changes.

β€Žpackages/frontend/src/states/store/roomStore.ts renamed to β€Žpackages/frontend/src/store/roomStore.ts

File renamed without changes.

β€Žpackages/frontend/src/states/store/signalingSocketStore.ts renamed to β€Žpackages/frontend/src/store/signalingSocketStore.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { create } from 'zustand';
22
import { Socket, io } from 'socket.io-client';
3-
import { useLocalStreamStore } from '@/states/store/localStreamStore';
4-
import { usePeerConnectionStore } from '@/states/store/peerConnectionStore';
3+
import { useLocalStreamStore } from '@/store/localStreamStore';
4+
import { usePeerConnectionStore } from '@/store/peerConnectionStore';
55
import { getVideoStream } from '@/utils/videoStreamUtils';
66

77
interface ISignalingSocketStore {

β€Žpackages/frontend/src/states/store/socketStore.ts renamed to β€Žpackages/frontend/src/store/socketStore.ts

File renamed without changes.

β€Žpackages/frontend/src/utils/videoStreamUtils.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useLocalStreamStore } from '@/states/store/localStreamStore';
1+
import { useLocalStreamStore } from '@/store/localStreamStore';
22

33
export async function getVideoStream() {
44
const videoConfig = {

0 commit comments

Comments
Β (0)