41 |
43 |
44 |
51 |
12 |
15 | );
16 | });
17 |
--------------------------------------------------------------------------------
/core/playwright.config.ts:
--------------------------------------------------------------------------------
1 | import { PlaywrightTestConfig, devices } from '@playwright/test';
2 |
3 | const config: PlaywrightTestConfig = {
4 | testDir: './crdt/test',
5 | workers: 5,
6 | fullyParallel: true,
7 | timeout: 180000,
8 | reporter: 'html',
9 | use: {
10 | baseURL: 'http://localhost:5173/',
11 | trace: 'on-first-retry',
12 | },
13 | projects: [
14 | {
15 | name: 'chromium',
16 | use: { ...devices['Desktop Chrome'] },
17 | },
18 | ],
19 | };
20 |
21 | export default config;
22 |
--------------------------------------------------------------------------------
/core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "module": "ESNext",
5 | "moduleResolution": "node",
6 | "declaration": true,
7 | "outDir": "./dist",
8 | "strict": true,
9 | "esModuleInterop": true,
10 | "skipLibCheck": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "types": ["vitest/globals"],
13 | "paths": {
14 | "@/*": ["./*"]
15 | }
16 | },
17 | "include": ["index.ts", "crdt/**/*", "types/**/*"],
18 | "exclude": ["node_modules", "dist"]
19 | }
20 |
--------------------------------------------------------------------------------
/server/src/chat/chat.gateway.spec.ts:
--------------------------------------------------------------------------------
1 | import { Test, TestingModule } from '@nestjs/testing';
2 | import { ChatGateway } from './chat.gateway';
3 |
4 | describe('ChatGateway', () => {
5 | let gateway: ChatGateway;
6 |
7 | beforeEach(async () => {
8 | const module: TestingModule = await Test.createTestingModule({
9 | providers: [ChatGateway],
10 | }).compile();
11 |
12 | gateway = module.get
10 |
21 |
22 | );
23 | };
24 | export default LobbyPage;
25 |
--------------------------------------------------------------------------------
/client/src/constants/shortcutKeys.ts:
--------------------------------------------------------------------------------
1 | export const SHORTCUT_KEYS = {
2 | // 설정 관련
3 | DROPDOWN_TOTAL_ROUNDS: {
4 | key: '1',
5 | alternativeKeys: ['1', '!'],
6 | description: '라운드 수 설정',
7 | },
8 | DROPDOWN_MAX_PLAYERS: {
9 | key: '2',
10 | alternativeKeys: ['2', '@'],
11 | description: '플레이어 수 설정',
12 | },
13 | DROPDOWN_DRAW_TIME: {
14 | key: '3',
15 | alternativeKeys: ['3', '#'],
16 | description: '제한시간 설정',
17 | },
18 | // 게임 관련
19 | CHAT: {
20 | key: 'Enter',
21 | alternativeKeys: null,
22 | description: '채팅',
23 | },
24 | GAME_START: {
25 | key: 's',
26 | alternativeKeys: ['s', 'S', 'ㄴ'],
27 | description: '게임 시작',
28 | },
29 | GAME_INVITE: {
30 | key: 'i',
31 | alternativeKeys: ['i', 'I', 'ㅑ'],
32 | description: '초대하기',
33 | },
34 | } as const;
35 |
--------------------------------------------------------------------------------
/client/src/layouts/RootLayout.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { Outlet } from 'react-router-dom';
3 | import BackgroundMusicButton from '@/components/bgm-button/BackgroundMusicButton';
4 | import HelpContainer from '@/components/ui/HelpContainer';
5 | import { playerIdStorageUtils } from '@/utils/playerIdStorage';
6 |
7 | const RootLayout = () => {
8 | // 레이아웃 마운트 시 localStorage 초기화
9 | useEffect(() => {
10 | playerIdStorageUtils.removeAllPlayerIds();
11 | }, []);
12 |
13 | return (
14 | 11 | Get Ready for the next battle 12 |
13 | 14 |
16 |
20 |
15 |
23 | );
24 | };
25 |
26 | export default RootLayout;
27 |
--------------------------------------------------------------------------------
/server/src/filters/ws-exception.filter.ts:
--------------------------------------------------------------------------------
1 | import { Catch, ArgumentsHost } from '@nestjs/common';
2 | import { BaseWsExceptionFilter } from '@nestjs/websockets';
3 | import { Socket } from 'socket.io';
4 | import { GameException } from '../exceptions/game.exception';
5 |
6 | @Catch()
7 | export class WsExceptionFilter extends BaseWsExceptionFilter {
8 | catch(exception: any, host: ArgumentsHost) {
9 | const client = host.switchToWs().getClient
15 | {score !== undefined && isPlaying && (
16 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/client/src/routes.tsx:
--------------------------------------------------------------------------------
1 | import { createBrowserRouter } from 'react-router-dom';
2 | import GameLayout from '@/layouts/GameLayout';
3 | import RootLayout from '@/layouts/RootLayout';
4 | import GameRoomPage from '@/pages/GameRoomPage';
5 | import LobbyPage from '@/pages/LobbyPage';
6 | import MainPage from '@/pages/MainPage';
7 | import ResultPage from '@/pages/ResultPage';
8 |
9 | export const router = createBrowserRouter(
10 | [
11 | {
12 | element:
17 |
19 | )}
20 |
21 | {!isPlaying && isHost && (
22 | {score}
18 |
28 | 방장
29 |
30 | )}
31 |
14 |
31 | );
32 | });
33 |
--------------------------------------------------------------------------------
/client/src/components/setting/SettingContent.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { RoomSettings } from '@troublepainter/core';
3 | import { RoomSettingItem } from '@/components/setting/Setting';
4 | import { SettingItem } from '@/components/setting/SettingItem';
5 |
6 | interface SettingContentProps {
7 | settings: RoomSettingItem[];
8 | values: Partial
15 | 여기에다가 답하고
16 |
채팅할 수 있습니다.
17 |
15 |
30 | ));
31 |
--------------------------------------------------------------------------------
/client/src/utils/formatDate.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 날짜를 지정된 형식의 문자열로 포맷팅하는 유틸리티 함수입니다.
3 | *
4 | * - 날짜 객체를 받아 원하는 형식의 문자열로 변환합니다.
5 | * - 기본 형식은 'YYYY-MM-DD'입니다.
6 | * - 유효하지 않은 날짜가 입력되면 에러를 발생시킵니다.
7 | *
8 | * @param date - 포맷팅할 Date 객체
9 | * @param format - 날짜 포맷 문자열 (기본값: 'YYYY-MM-DD')
10 | * @returns 포맷팅된 날짜 문자열
11 | * @throws {Error} 유효하지 않은 날짜가 입력된 경우
12 | *
13 | * @example
14 | * ```typescript
15 | * // 기본 포맷 (YYYY-MM-DD)
16 | * formatDate(new Date()); // "2024-03-04"
17 | *
18 | * // 커스텀 포맷
19 | * formatDate(new Date(), 'YYYY년 MM월 DD일'); // "2024년 03월 04일"
20 | * formatDate(new Date(), 'MM/DD/YYYY'); // "03/04/2024"
21 | *
22 | * // 에러 케이스
23 | * formatDate(new Date('invalid')); // Error: Invalid date provided
24 | * ```
25 | *
26 | * @category Utils
27 | */
28 | export function formatDate(date: Date, format: string = 'YYYY-MM-DD'): string {
29 | if (!(date instanceof Date) || isNaN(date.getTime())) {
30 | throw new Error('Invalid date provided');
31 | }
32 |
33 | const year = date.getFullYear();
34 | const month = date.getMonth() + 1;
35 | const day = date.getDate();
36 |
37 | const replacements: Record
16 | {settings.map(({ label, key, options, shortcutKey }) => (
17 |
29 |
27 | {label}
28 | {!isHost ? (
29 | {value || ''}
30 | ) : (
31 |
40 | );
41 | },
42 | );
43 |
--------------------------------------------------------------------------------
/client/src/components/ui/Button.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import { cn } from '@/utils/cn';
4 |
5 | const buttonVariants = cva(
6 | 'inline-flex items-center justify-center gap-2 whitespace-nowrap transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
7 | {
8 | variants: {
9 | variant: {
10 | primary: 'border-2 border-violet-950 bg-violet-500 hover:bg-violet-600',
11 | secondary: 'border-2 border-violet-950 bg-eastbay-900 hover:bg-eastbay-950',
12 | transperent: 'hover:brightness-95',
13 | },
14 | size: {
15 | text: 'h-14 w-full rounded-2xl text-2xl font-medium text-stroke-md',
16 | icon: 'h-10 w-10',
17 | },
18 | },
19 | defaultVariants: {
20 | variant: 'primary',
21 | size: 'text',
22 | },
23 | },
24 | );
25 |
26 | export interface ButtonProps
27 | extends React.ButtonHTMLAttributes
15 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/client/src/hooks/usePlayerRanking.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react';
2 | import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
3 |
4 | /**
5 | * 플레이어 점수를 기준으로 상위 3위까지의 순위를 계산하고 반환하는 커스텀 훅입니다.
6 | *
7 | * 이 훅은 `useGameSocketStore`를 통해 플레이어 데이터를 가져온 뒤,
8 | * 점수가 0보다 큰 플레이어만 고려하여 1위, 2위, 3위 그룹으로 나눕니다.
9 | *
10 | * @returns {Object} 각 순위별 플레이어 그룹을 포함한 객체:
11 | * - `firstPlacePlayers`: 가장 높은 점수를 가진 플레이어 배열.
12 | * - `secondPlacePlayers`: 두 번째로 높은 점수를 가진 플레이어 배열.
13 | * - `thirdPlacePlayers`: 세 번째로 높은 점수를 가진 플레이어 배열.
14 | *
15 | * 각 배열은 해당 순위에 플레이어가 없을 경우 빈 배열로 반환됩니다.
16 | *
17 | * @example
18 | * // React 컴포넌트에서의 사용 예
19 | * const { firstPlacePlayers, secondPlacePlayers, thirdPlacePlayers } = usePlayerRankings();
20 | *
21 | * console.log('1위 플레이어:', firstPlacePlayers);
22 | * console.log('2위 플레이어:', secondPlacePlayers);
23 | * console.log('3위 플레이어:', thirdPlacePlayers);
24 | *
25 | * @category Hooks
26 | */
27 |
28 | export const usePlayerRankings = () => {
29 | const players = useGameSocketStore((state) => state.players ?? []);
30 |
31 | const rankedPlayers = useMemo(() => {
32 | const validPlayers = players.filter((player) => player.score > 0);
33 | const sortedScores = [...new Set(validPlayers.map((p) => p.score))].sort((a, b) => b - a);
34 | return sortedScores.slice(0, 3).map((score) => validPlayers.filter((player) => player.score === score));
35 | }, [players]);
36 |
37 | return {
38 | firstPlacePlayers: rankedPlayers[0] ?? [],
39 | secondPlacePlayers: rankedPlayers[1] ?? [],
40 | thirdPlacePlayers: rankedPlayers[2] ?? [],
41 | };
42 | };
43 |
--------------------------------------------------------------------------------
/server/src/exceptions/game.exception.ts:
--------------------------------------------------------------------------------
1 | import { SocketErrorCode } from '../common/enums/socket.error-code.enum';
2 |
3 | export class GameException extends Error {
4 | constructor(
5 | public readonly code: SocketErrorCode,
6 | message: string,
7 | ) {
8 | super(message);
9 | }
10 | }
11 |
12 | export class RoomFullException extends GameException {
13 | constructor(message: string = 'Room is full') {
14 | super(SocketErrorCode.ROOM_FULL, message);
15 | }
16 | }
17 |
18 | export class RoomNotFoundException extends GameException {
19 | constructor(message: string = 'Room not found') {
20 | super(SocketErrorCode.ROOM_NOT_FOUND, message);
21 | }
22 | }
23 |
24 | export class PlayerNotFoundException extends GameException {
25 | constructor(message: string = 'Player not found') {
26 | super(SocketErrorCode.PLAYER_NOT_FOUND, message);
27 | }
28 | }
29 |
30 | export class BadRequestException extends GameException {
31 | constructor(message: string = 'Bad request') {
32 | super(SocketErrorCode.BAD_REQUEST, message);
33 | }
34 | }
35 |
36 | export class InsufficientPlayersException extends GameException {
37 | constructor(message: string = 'Insufficient players') {
38 | super(SocketErrorCode.INSUFFICIENT_PLAYERS, message);
39 | }
40 | }
41 |
42 | export class ForbiddenException extends GameException {
43 | constructor(message: string = 'Forbidden') {
44 | super(SocketErrorCode.FORBIDDEN, message);
45 | }
46 | }
47 | export class GameAlreadyStartedException extends GameException {
48 | constructor(message: string = 'Game already started') {
49 | super(SocketErrorCode.GAME_ALREADY_STARTED, message);
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/client/src/components/chat/ChatBubbleUI.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, memo } from 'react';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import { cn } from '@/utils/cn';
4 |
5 | const chatBubbleVariants = cva(
6 | 'select-text break-all px-2.5 inline-flex max-w-[85%] items-center justify-center rounded-lg border-2 border-violet-950 text-violet-950 text-base min-h-8 lg:text-lg 2xl:py-0.5 2xl:text-xl',
7 | {
8 | variants: {
9 | variant: {
10 | default: 'bg-halfbaked-200',
11 | secondary: 'bg-chartreuseyellow-200',
12 | },
13 | },
14 | defaultVariants: {
15 | variant: 'default',
16 | },
17 | },
18 | );
19 |
20 | export interface ChatBubbleProps extends HTMLAttributes
16 |
28 |
25 | {`${nickname}`}
26 |
27 |
29 |
41 |
38 | {role ? PLAYING_ROLE_TEXT[role] : '???'}
39 |
40 |
35 | {isOtherUser && (
36 |
39 | )}
40 |
44 | );
45 | });
46 |
47 | export { ChatBubble, chatBubbleVariants };
48 |
--------------------------------------------------------------------------------
/client/src/components/player/PlayerCardList.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { PlayerRole, PlayerStatus } from '@troublepainter/core';
3 | import { PlayerCard } from '@/components/ui/player-card/PlayerCard';
4 | import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
5 |
6 | const PlayerCardList = memo(() => {
7 | // 개별 selector 사용으로 변경
8 | const players = useGameSocketStore((state) => state.players);
9 | const hostId = useGameSocketStore((state) => state.room?.hostId);
10 | const roundAssignedRole = useGameSocketStore((state) => state.roundAssignedRole);
11 | const currentPlayerId = useGameSocketStore((state) => state.currentPlayerId);
12 |
13 | if (!players?.length) return null;
14 |
15 | const getPlayerRole = (playerRole: PlayerRole | undefined, myRole: PlayerRole | null) => {
16 | if (myRole === PlayerRole.GUESSER) return playerRole === PlayerRole.GUESSER ? playerRole : null;
17 | return playerRole;
18 | };
19 |
20 | return (
21 | <>
22 | {players.map((player) => {
23 | const playerRole = getPlayerRole(player.role, roundAssignedRole) || null;
24 |
25 | return (
26 | 41 | {content} 42 |
43 |드롭다운을 클릭하고 옵션을 선택해보세요.', 36 | }, 37 | }, 38 | }, 39 | tags: ['autodocs'], 40 | } satisfies Meta
setIsHovered(true)}
16 | onMouseLeave={() => setIsHovered(false)}
17 | >
18 | {/* 음소거/재생 토글 버튼 */}
19 |
29 |
30 | {/* 볼륨 슬라이더 */}
31 |
49 | );
50 | };
51 |
52 | export default BackgroundMusicButton;
53 |
--------------------------------------------------------------------------------
/server/src/chat/chat.gateway.ts:
--------------------------------------------------------------------------------
1 | import { ConnectedSocket, MessageBody, SubscribeMessage, WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
2 | import { Server, Socket } from 'socket.io';
3 | import { ChatService } from './chat.service';
4 | import { UseFilters } from '@nestjs/common';
5 | import { WsExceptionFilter } from 'src/filters/ws-exception.filter';
6 | import { BadRequestException, PlayerNotFoundException, RoomNotFoundException } from 'src/exceptions/game.exception';
7 |
8 | @WebSocketGateway({
9 | cors: '*',
10 | namespace: '/socket.io/chat',
11 | })
12 | @UseFilters(WsExceptionFilter)
13 | export class ChatGateway {
14 | constructor(private readonly chatService: ChatService) {}
15 |
16 | @WebSocketServer()
17 | server: Server;
18 |
19 | handleConnection(client: Socket) {
20 | const roomId = client.handshake.auth.roomId;
21 | const playerId = client.handshake.auth.playerId;
22 |
23 | if (!roomId || !playerId) throw new BadRequestException('Room ID and Player ID are required');
24 |
25 | const roomExists = this.chatService.existsRoom(roomId);
26 | if (!roomExists) throw new RoomNotFoundException('Room not found');
27 | const playerExists = this.chatService.existsPlayer(roomId, playerId);
28 | if (!playerExists) throw new PlayerNotFoundException('Player not found in room');
29 |
30 | client.data.roomId = roomId;
31 | client.data.playerId = playerId;
32 |
33 | client.join(roomId);
34 | }
35 |
36 | @SubscribeMessage('sendMessage')
37 | async handleSendMessage(@ConnectedSocket() client: Socket, @MessageBody() data: { message: string }) {
38 | const roomId = client.data.roomId;
39 | const playerId = client.data.playerId;
40 |
41 | if (!roomId || !playerId) throw new BadRequestException('Room ID and Player ID are required');
42 |
43 | const newMessage = await this.chatService.sendMessage(roomId, playerId, data.message);
44 |
45 | client.to(roomId).emit('messageReceived', newMessage);
46 | }
47 | }
48 |
--------------------------------------------------------------------------------
/server/src/drawing/drawing.gateway.ts:
--------------------------------------------------------------------------------
1 | import { UseFilters } from '@nestjs/common';
2 | import {
3 | ConnectedSocket,
4 | MessageBody,
5 | OnGatewayConnection,
6 | SubscribeMessage,
7 | WebSocketGateway,
8 | WebSocketServer,
9 | } from '@nestjs/websockets';
10 | import { Server, Socket } from 'socket.io';
11 | import { BadRequestException, PlayerNotFoundException, RoomNotFoundException } from 'src/exceptions/game.exception';
12 | import { WsExceptionFilter } from 'src/filters/ws-exception.filter';
13 | import { DrawingService } from './drawing.service';
14 |
15 | @WebSocketGateway({
16 | cors: '*',
17 | namespace: '/socket.io/drawing',
18 | })
19 | @UseFilters(WsExceptionFilter)
20 | export class DrawingGateway implements OnGatewayConnection {
21 | @WebSocketServer()
22 | server: Server;
23 |
24 | constructor(private readonly drawingService: DrawingService) {}
25 |
26 | handleConnection(client: Socket) {
27 | const roomId = client.handshake.auth.roomId;
28 | const playerId = client.handshake.auth.playerId;
29 |
30 | if (!roomId || !playerId) throw new BadRequestException('Room ID and Player ID are required');
31 |
32 | const roomExists = this.drawingService.existsRoom(roomId);
33 | if (!roomExists) throw new RoomNotFoundException('Room not found');
34 | const playerExists = this.drawingService.existsPlayer(roomId, playerId);
35 | if (!playerExists) throw new PlayerNotFoundException('Player not found in room');
36 |
37 | client.data.roomId = roomId;
38 | client.data.playerId = playerId;
39 |
40 | client.join(roomId);
41 | }
42 |
43 | @SubscribeMessage('draw')
44 | async handleDraw(@ConnectedSocket() client: Socket, @MessageBody() data: { drawingData: any }) {
45 | const roomId = client.data.roomId;
46 | if (!roomId) throw new BadRequestException('Room ID is required');
47 |
48 | client.to(roomId).emit('drawUpdated', {
49 | playerId: client.data.playerId,
50 | drawingData: data.drawingData,
51 | });
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
/client/src/components/result/PodiumPlayers.tsx:
--------------------------------------------------------------------------------
1 | import { Player } from '@troublepainter/core';
2 | import { cn } from '@/utils/cn';
3 |
4 | const positionStyles = {
5 | first: {
6 | containerStyle: 'absolute w-[40%] left-[30%] top-[29%]',
7 | scoreStyle: 'bottom-[36%] left-[48%]',
8 | },
9 | second: {
10 | containerStyle: 'absolute w-[40%] left-[1%] bottom-[37%]',
11 | scoreStyle: 'bottom-[23%] left-[18%]',
12 | },
13 | third: {
14 | containerStyle: 'absolute w-[40%] right-[1%] bottom-[28%]',
15 | scoreStyle: 'bottom-[18%] right-[17.5%]',
16 | },
17 | };
18 |
19 | interface PodiumPlayersProps {
20 | players: Player[];
21 | position: 'first' | 'second' | 'third';
22 | }
23 |
24 | const PodiumPlayers = ({ players, position }: PodiumPlayersProps) => {
25 | if (!players || players.length === 0 || players[0].score === 0) return null;
26 |
27 | const { containerStyle, scoreStyle } = positionStyles[position];
28 |
29 | return (
30 | <>
31 |
32 | {String(players[0].score).padStart(2, '0')}
33 |
34 |
37 | adjustVolume(Number(e.target.value))}
44 | className="h-1 w-24 appearance-none rounded-full bg-chartreuseyellow-200"
45 | aria-label="배경음악 볼륨 조절"
46 | />
47 |
48 |
35 | {players.map((player) => (
36 |
52 |
53 | );
54 | };
55 |
56 | export default PodiumPlayers;
57 |
--------------------------------------------------------------------------------
/client/src/components/canvas/CanvasToolbar.tsx:
--------------------------------------------------------------------------------
1 | import { ChangeEvent } from 'react';
2 | import { LINEWIDTH_VARIABLE, DRAWING_MODE } from '@/constants/canvasConstants';
3 | import { useCanvasStore } from '@/stores/useCanvasStore';
4 | import { CanvasStore, PenModeType } from '@/types/canvas.types';
5 |
6 | const CV = ['#000', '#f257c9', '#e2f724', '#4eb4c2', '#d9d9d9'];
7 | //임시 색상 코드
8 |
9 | const CanvasToolBar = () => {
10 | const lineWidth = useCanvasStore((state: CanvasStore) => state.penSetting.lineWidth);
11 | const setPenSetting = useCanvasStore((state: CanvasStore) => state.action.setPenSetting);
12 | const setPenMode = useCanvasStore((state: CanvasStore) => state.action.setPenMode);
13 |
14 | const handleChangeToolColor = (colorNum: number) => {
15 | setPenSetting({ colorNum });
16 | };
17 | const handleChangeLineWidth = (lineWidth: string) => {
18 | setPenSetting({ lineWidth: Number(lineWidth) });
19 | };
20 | const handleChangeToolMode = (modeNum: PenModeType) => {
21 | setPenMode(modeNum);
22 | };
23 |
24 | return (
25 |
37 | 
46 |
47 | {player.nickname}
48 |
49 |
50 | ))}
51 |
60 |
62 | ),
63 | ],
64 | tags: ['autodocs'],
65 | } satisfies Meta
41 |
65 |
42 | 정말 게임을 나가실거에요...??
43 |
44 | 퇴장하면 다시 돌아오기 힘들어요! 🥺💔
45 |
47 |
55 |
63 |
64 |
33 | {/* 라운드 정보 */}
34 |
58 |
59 | );
60 | };
61 |
62 | export { QuizTitle };
63 |
--------------------------------------------------------------------------------
/client/src/hooks/useScrollToBottom.ts:
--------------------------------------------------------------------------------
1 | import { RefObject, useCallback, useEffect, useRef, useState } from 'react';
2 |
3 | interface UseScrollToBottom {
4 | /** 스크롤 컨테이너 요소를 참조하기 위한 ref 객체 */
5 | containerRef: RefObject35 | {currentRound} 36 | of 37 | {totalRound} 38 |
39 | 40 | {/* 제시어 */} 41 |{title}
42 | 43 | {/* 타이머 */} 44 |
45 |
57 |
46 | {remainingTime > 10 ? (
47 | 
48 | ) : (
49 | 
50 | )}
51 |
52 |
53 | {remainingTime}
54 |
55 |
56 |
31 | * {messages.map(message => (
32 | *
35 | * );
36 | * ```
37 | */
38 | export const useScrollToBottom = (dependencies: unknown[] = []): UseScrollToBottom => {
39 | const containerRef = useRef
35 |
42 |
43 |
,
63 | modalRoot,
64 | );
65 | };
66 |
67 | Modal.displayName = 'Modal';
68 |
69 | export { Modal };
70 |
--------------------------------------------------------------------------------
/client/src/components/ui/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes } from 'react';
2 | import ArrowDownIcon from '@/assets/arrow.svg';
3 | import { SHORTCUT_KEYS } from '@/constants/shortcutKeys';
4 | import { useDropdown } from '@/hooks/useDropdown';
5 | import { cn } from '@/utils/cn';
6 |
7 | export interface DropdownProps extends HTMLAttributes e.stopPropagation()}
50 | onKeyDown={handleKeyDown}
51 | tabIndex={0}
52 | {...props}
53 | >
54 | {title && (
55 |
62 |
56 |
58 | )}
59 |
60 | {title}
57 |{children}
61 |
23 |
34 |
35 |
59 | );
60 | };
61 |
62 | export default Dropdown;
63 |
--------------------------------------------------------------------------------
/client/src/utils/soundManager.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * 애플리케이션의 사운드 재생을 관리하는 클래스입니다.
3 | *
4 | * @remarks
5 | * - 싱글턴 패턴을 사용하여 인스턴스가 하나만 존재하도록 보장합니다.
6 | * - 효율적인 재생을 위해 사운드를 미리 로드합니다.
7 | * - 자동 재생 제한을 우아하게 처리합니다.
8 | *
9 | * @example
10 | * ```typescript
11 | * const soundManager = SoundManager.getInstance();
12 | * soundManager.preloadSound(SOUND_IDS.ENTRY, 'path/to/entry-sound.mp3');
13 | * await soundManager.playSound(SOUND_IDS.ENTRY, 0.5);
14 | * ```
15 | */
16 | export class SoundManager {
17 | private static instance: SoundManager;
18 | private audioMap: Map
42 |
58 |
43 | {options.map((option, index) => (
44 |
55 | ))}
56 |
57 |
51 |
53 | ),
54 | ],
55 | tags: ['autodocs'],
56 | } satisfies Meta
42 | {/* Content */}
43 |
69 | );
70 | },
71 | );
72 |
73 | Toast.displayName = 'Toast';
74 |
75 | export { Toast, type ToastProps, toastVariants };
76 |
--------------------------------------------------------------------------------
/client/src/components/ui/player-card/PlayerProfile.tsx:
--------------------------------------------------------------------------------
1 | import crownFirst from '@/assets/crown-first.png';
2 | import profilePlaceholder from '@/assets/profile-placeholder.png';
3 | import { cn } from '@/utils/cn';
4 |
5 | interface PlayerCardProfileProps {
6 | nickname: string;
7 | profileImage?: string;
8 | isWinner?: boolean;
9 | score?: number;
10 | isHost: boolean;
11 | isMe: boolean | null;
12 | showScore?: boolean;
13 | className?: string;
14 | }
15 |
16 | export const PlayerCardProfile = ({
17 | nickname,
18 | profileImage,
19 | isWinner,
20 | score,
21 | isHost,
22 | isMe,
23 | showScore = false,
24 | className,
25 | }: PlayerCardProfileProps) => {
26 | // 순위에 따른 Crown Image 렌더링 로직
27 | const showCrown = isWinner !== undefined;
28 |
29 | return (
30 |
44 | {title && (
45 |
55 |
56 | {/* Close Button */}
57 | {onClose && (
58 |
67 | )}
68 |
46 | {title}
47 |
48 | )}
49 | {description && (
50 |
51 | {description}
52 |
53 | )}
54 |
31 |
80 | );
81 | };
82 |
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "client",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "start": "vite preview",
10 | "lint": "eslint .",
11 | "lint:fix": "eslint . --fix",
12 | "lint:strict": "eslint . --max-warnings=0",
13 | "format": "prettier --write .",
14 | "format:check": "prettier --check .",
15 | "check": "pnpm format:check && pnpm lint:strict",
16 | "fix": "pnpm format && pnpm lint:fix",
17 | "storybook": "storybook dev -p 6006",
18 | "build-storybook": "storybook build"
19 | },
20 | "dependencies": {
21 | "@lottiefiles/dotlottie-react": "^0.10.1",
22 | "@lottiefiles/react-lottie-player": "^3.5.4",
23 | "@troublepainter/core": "workspace:*",
24 | "class-variance-authority": "^0.7.0",
25 | "clsx": "^2.1.1",
26 | "react": "^18.3.1",
27 | "react-dom": "^18.3.1",
28 | "react-router-dom": "^6.28.0",
29 | "socket.io-client": "^4.8.1",
30 | "tailwind-merge": "^2.5.4",
31 | "zustand": "^5.0.1"
32 | },
33 | "devDependencies": {
34 | "@chromatic-com/storybook": "^3.2.2",
35 | "@eslint/js": "^9.13.0",
36 | "@storybook/addon-essentials": "^8.4.1",
37 | "@storybook/addon-interactions": "^8.4.1",
38 | "@storybook/addon-onboarding": "^8.4.1",
39 | "@storybook/blocks": "^8.4.1",
40 | "@storybook/react": "^8.4.1",
41 | "@storybook/react-vite": "^8.4.1",
42 | "@storybook/test": "^8.4.1",
43 | "@types/node": "^22.9.0",
44 | "@types/react": "^18.3.12",
45 | "@types/react-dom": "^18.3.1",
46 | "@types/socket.io-client": "^3.0.0",
47 | "@typescript-eslint/eslint-plugin": "^8.12.2",
48 | "@typescript-eslint/parser": "^8.12.2",
49 | "@vitejs/plugin-react": "^4.3.3",
50 | "autoprefixer": "^10.4.20",
51 | "eslint": "^9.14.0",
52 | "eslint-config-airbnb": "^19.0.4",
53 | "eslint-config-airbnb-base": "^15.0.0",
54 | "eslint-config-airbnb-typescript": "^18.0.0",
55 | "eslint-config-prettier": "^9.1.0",
56 | "eslint-plugin-import": "^2.31.0",
57 | "eslint-plugin-jsx-a11y": "^6.10.2",
58 | "eslint-plugin-prettier": "^5.2.1",
59 | "eslint-plugin-react": "^7.37.2",
60 | "eslint-plugin-react-hooks": "^5.0.0",
61 | "eslint-plugin-react-refresh": "^0.4.14",
62 | "eslint-plugin-storybook": "^0.10.2",
63 | "globals": "^15.11.0",
64 | "postcss": "^8.4.47",
65 | "prettier": "^3.3.3",
66 | "prettier-plugin-tailwindcss": "^0.6.8",
67 | "storybook": "^8.4.1",
68 | "tailwindcss": "^3.4.14",
69 | "tailwindcss-animate": "^1.0.7",
70 | "typescript": "~5.6.2",
71 | "typescript-eslint": "^8.11.0",
72 | "vite": "^5.4.10"
73 | },
74 | "eslintConfig": {
75 | "extends": [
76 | "plugin:storybook/recommended"
77 | ]
78 | }
79 | }
80 |
--------------------------------------------------------------------------------
/client/src/components/ui/Modal.stories.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { Modal, ModalProps } from './Modal';
3 | import type { Meta, StoryObj } from '@storybook/react';
4 | import { useModal } from '@/hooks/useModal';
5 |
6 | type Story = StoryObj
39 | 
44 |
45 | {/* 모바일 상태 오버레이 */}
46 | {showScore ? (
47 | 
77 | )}
78 |
79 |
53 | {score}
54 |
55 | ) : (
56 | <>
57 | {((isHost && !isMe) || isMe) && (
58 |
64 | {isMe ? '나!' : '방장'}
65 |
66 | )}
67 |
68 | )}
69 |
70 | {/* 왕관 이미지 */}
71 | {showCrown && (
72 | 모달 열기 버튼을 누르면 모달이 뜹니다.', 44 | }, 45 | }, 46 | }, 47 | tags: ['autodocs'], 48 | } satisfies Meta
60 |
61 |
63 | );
64 | };
65 |
66 | const AutoCloseModalExample = (args: ModalProps) => {
67 | const { isModalOpened, openModal } = useModal(3000);
68 |
69 | return (
70 |
71 |
72 |
73 |
75 |
76 | );
77 | };
78 |
79 | export const Default: Story = {
80 | parameters: {
81 | docs: {
82 | description: {
83 | story:
84 | '기본적인 모달 사용 예시입니다. 모달은 overlay를 클릭하거나, overlay나 모달이 focusing 됐을 때 ESC 키로 닫을 수 있습니다.',
85 | },
86 | },
87 | },
88 | args: {
89 | title: 'default Modal',
90 | },
91 | render: (args) => 이 모달은 3초 후에 자동으로 닫힙니다.
74 |
66 |
68 |
69 | {/* Setting content */}
70 | Setting
67 |
85 |
99 | );
100 | };
101 |
102 | export { PlayerCard, type PlayerCardProps, playerCardVariants };
103 |
--------------------------------------------------------------------------------
86 |
97 |