41 |
43 |
44 |
51 | setIsHovered(true)}
16 | onMouseLeave={() => setIsHovered(false)}
17 | >
18 | {/* 음소거/재생 토글 버튼 */}
19 |
29 |
30 | {/* 볼륨 슬라이더 */}
31 |
49 | );
50 | };
51 |
52 | export default BackgroundMusicButton;
53 |
--------------------------------------------------------------------------------
/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 | 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 | {isOtherUser && (
36 |
39 | )}
40 |
44 | );
45 | });
46 |
47 | export { ChatBubble, chatBubbleVariants };
48 |
--------------------------------------------------------------------------------
/client/src/components/chat/ChatButtle.stories.tsx:
--------------------------------------------------------------------------------
1 | import { ChatBubble } from './ChatBubbleUI';
2 | import type { Meta, StoryObj } from '@storybook/react';
3 |
4 | type Story = StoryObj41 | {content} 42 |
43 |
51 |
53 | ),
54 | ],
55 | tags: ['autodocs'],
56 | } satisfies Meta
12 |
15 | );
16 | });
17 |
--------------------------------------------------------------------------------
/client/src/components/chat/ChatList.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | import { ChatBubble } from '@/components/chat/ChatBubbleUI';
3 | import { useScrollToBottom } from '@/hooks/useScrollToBottom';
4 | import { useChatSocketStore } from '@/stores/socket/chatSocket.store';
5 | import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
6 |
7 | export const ChatList = memo(() => {
8 | const messages = useChatSocketStore((state) => state.messages);
9 | const currentPlayerId = useGameSocketStore((state) => state.currentPlayerId);
10 | const { containerRef } = useScrollToBottom([messages]);
11 |
12 | return (
13 |
14 |
31 | );
32 | });
33 |
--------------------------------------------------------------------------------
/client/src/components/lobby/InviteButton.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { Button } from '@/components/ui/Button';
3 | import { useShortcuts } from '@/hooks/useShortcuts';
4 | import { useToastStore } from '@/stores/toast.store';
5 | import { cn } from '@/utils/cn';
6 |
7 | export const InviteButton = () => {
8 | const [copied, setCopied] = useState(false);
9 | const actions = useToastStore((state) => state.actions);
10 |
11 | const handleCopyInvite = async () => {
12 | if (copied) return;
13 | try {
14 | await navigator.clipboard.writeText(window.location.href);
15 | setCopied(true);
16 | setTimeout(() => setCopied(false), 2000);
17 |
18 | actions.addToast({
19 | title: '초대 링크 복사',
20 | description: '친구에게 링크를 공유해 방에 초대해보세요!',
21 | variant: 'success',
22 | duration: 2000,
23 | });
24 | } catch (error) {
25 | console.error(error);
26 | actions.addToast({
27 | title: '복사 실패',
28 | description: '나중에 다시 시도해주세요.',
29 | variant: 'error',
30 | });
31 | }
32 | };
33 |
34 | // 게임 초대 단축키 적용
35 | useShortcuts([
36 | {
37 | key: 'GAME_INVITE',
38 | action: () => void handleCopyInvite(),
39 | },
40 | ]);
41 |
42 | return (
43 |
65 | );
66 | };
67 |
68 | export default InviteButton;
69 |
--------------------------------------------------------------------------------
/client/src/components/lobby/StartButton.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@/components/ui/Button';
2 | import { useGameStart } from '@/hooks/useStartButton';
3 | import { cn } from '@/utils/cn';
4 |
5 | export const StartButton = () => {
6 | const { isHost, buttonConfig, handleStartGame, isStarting } = useGameStart();
7 | return (
8 |
20 | );
21 | };
22 |
--------------------------------------------------------------------------------
/client/src/components/modal/NavigationModal.tsx:
--------------------------------------------------------------------------------
1 | import { KeyboardEvent, useCallback } from 'react';
2 | import { useNavigate } from 'react-router-dom';
3 | import { Button } from '@/components/ui/Button';
4 | import { Modal } from '@/components/ui/Modal';
5 | import { useNavigationModalStore } from '@/stores/navigationModal.store';
6 |
7 | export const NavigationModal = () => {
8 | const navigate = useNavigate();
9 | const isOpen = useNavigationModalStore((state) => state.isOpen);
10 | const actions = useNavigationModalStore((state) => state.actions);
11 |
12 | const handleConfirmExit = () => {
13 | actions.closeModal();
14 | navigate('/', { replace: true });
15 | };
16 |
17 | const handleKeyDown = useCallback(
18 | (e: KeyboardEvent
15 | 여기에다가 답하고
16 |
채팅할 수 있습니다.
17 |
41 |
65 |
42 | 정말 게임을 나가실거에요...??
43 |
44 | 퇴장하면 다시 돌아오기 힘들어요! 🥺💔
45 |
47 |
55 |
63 |
64 |
35 | {players.map((player) => (
36 |
52 |
53 | );
54 | };
55 |
56 | export default PodiumPlayers;
57 |
--------------------------------------------------------------------------------
/client/src/components/setting/Setting.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, memo, useCallback, useEffect, useState } from 'react';
2 | import { RoomSettings } from '@troublepainter/core';
3 | import { SettingContent } from '@/components/setting/SettingContent';
4 | import { SHORTCUT_KEYS } from '@/constants/shortcutKeys';
5 | import { gameSocketHandlers } from '@/handlers/socket/gameSocket.handler';
6 | import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
7 | import { cn } from '@/utils/cn';
8 |
9 | type SettingKey = keyof RoomSettings;
10 |
11 | export interface RoomSettingItem {
12 | key: SettingKey;
13 | label: string;
14 | options: number[];
15 | shortcutKey: keyof typeof SHORTCUT_KEYS;
16 | }
17 |
18 | export const ROOM_SETTINGS: RoomSettingItem[] = [
19 | { label: '라운드 수', key: 'totalRounds', options: [3, 5, 7, 9, 11], shortcutKey: 'DROPDOWN_TOTAL_ROUNDS' },
20 | { label: '최대 플레이어 수', key: 'maxPlayers', options: [4, 5], shortcutKey: 'DROPDOWN_MAX_PLAYERS' },
21 | { label: '제한 시간', key: 'drawTime', options: [15, 20, 25, 30], shortcutKey: 'DROPDOWN_DRAW_TIME' },
22 | //{ label: '픽셀 수', key: 'maxPixels', options: [300, 500] },
23 | ];
24 |
25 | const Setting = memo(({ className, ...props }: HTMLAttributes
37 | 
46 |
47 | {player.nickname}
48 |
49 |
50 | ))}
51 |
66 |
68 |
69 | {/* Setting content */}
70 | Setting
67 |
15 |
30 | ));
31 |
--------------------------------------------------------------------------------
/client/src/components/setting/SettingItem.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useCallback } from 'react';
2 | import { RoomSettings } from '@troublepainter/core';
3 | import Dropdown from '@/components/ui/Dropdown';
4 | import { SHORTCUT_KEYS } from '@/constants/shortcutKeys';
5 |
6 | interface SettingItemProps {
7 | label: string;
8 | settingKey: keyof RoomSettings;
9 | value?: number;
10 | options: number[];
11 | onSettingChange: (key: keyof RoomSettings, value: string) => void;
12 | isHost: boolean;
13 | shortcutKey: keyof typeof SHORTCUT_KEYS;
14 | }
15 |
16 | export const SettingItem = memo(
17 | ({ label, settingKey, value, options, onSettingChange, isHost, shortcutKey }: SettingItemProps) => {
18 | const handleChange = useCallback(
19 | (value: string) => {
20 | onSettingChange(settingKey, value);
21 | },
22 | [settingKey, onSettingChange],
23 | );
24 |
25 | return (
26 |
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.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from './Button';
2 | import type { Meta, StoryObj } from '@storybook/react';
3 | import helpIcon from '@/assets/help-icon.svg';
4 |
5 | type Story = StoryObj드롭다운을 클릭하고 옵션을 선택해보세요.', 36 | }, 37 | }, 38 | }, 39 | tags: ['autodocs'], 40 | } satisfies Meta
23 |
34 |
35 |
59 | );
60 | };
61 |
62 | export default Dropdown;
63 |
--------------------------------------------------------------------------------
/client/src/components/ui/HelpContainer.tsx:
--------------------------------------------------------------------------------
1 | import { MouseEvent } from 'react';
2 | import helpIcon from '@/assets/help-icon.svg';
3 | import HelpRollingModal from '@/components/modal/HelpRollingModal';
4 | import { Button } from '@/components/ui/Button';
5 | import { useModal } from '@/hooks/useModal';
6 |
7 | const HelpContainer = ({}) => {
8 | const { isModalOpened, closeModal, openModal, handleKeyDown } = useModal();
9 |
10 | const handleOpenHelpModal = (e: MouseEvent
42 |
58 |
43 | {options.map((option, index) => (
44 |
55 | ))}
56 |
57 | 모달 열기 버튼을 누르면 모달이 뜹니다.', 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 |
35 |
42 |
43 |
,
63 | modalRoot,
64 | );
65 | };
66 |
67 | Modal.displayName = 'Modal';
68 |
69 | export { Modal };
70 |
--------------------------------------------------------------------------------
/client/src/components/ui/QuizTitle.stories.tsx:
--------------------------------------------------------------------------------
1 | import { QuizTitle } from './QuizTitle';
2 | import type { Meta, StoryObj } from '@storybook/react';
3 |
4 | type Story = StoryObj e.stopPropagation()}
50 | onKeyDown={handleKeyDown}
51 | tabIndex={0}
52 | {...props}
53 | >
54 | {title && (
55 |
62 |
56 |
58 | )}
59 |
60 | {title}
57 |{children}
61 |
60 |
62 | ),
63 | ],
64 | tags: ['autodocs'],
65 | } satisfies Meta
33 | {/* 라운드 정보 */}
34 |
58 |
59 | );
60 | };
61 |
62 | export { QuizTitle };
63 |
--------------------------------------------------------------------------------
/client/src/components/ui/Toast.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, KeyboardEvent, forwardRef } from 'react';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import { cn } from '@/utils/cn';
4 |
5 | const toastVariants = cva('flex items-center justify-between rounded-lg border-2 border-violet-950 p-4 shadow-lg', {
6 | variants: {
7 | variant: {
8 | default: 'bg-violet-200 text-violet-950',
9 | error: 'bg-red-100 text-red-900 border-red-900',
10 | success: 'bg-green-100 text-green-900 border-green-900',
11 | warning: 'bg-yellow-100 text-yellow-900 border-yellow-900',
12 | },
13 | },
14 | defaultVariants: {
15 | variant: 'default',
16 | },
17 | });
18 |
19 | interface ToastProps extends HTMLAttributes35 | {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 |
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/PlayerCard.tsx:
--------------------------------------------------------------------------------
1 | import { PlayerRole } from '@troublepainter/core';
2 | import { cva, type VariantProps } from 'class-variance-authority';
3 | import { PlayerCardInfo } from '@/components/ui/player-card/PlayerInfo';
4 | import { PlayerCardProfile } from '@/components/ui/player-card/PlayerProfile';
5 | import { PlayerCardStatus } from '@/components/ui/player-card/PlayerStatus';
6 | import { cn } from '@/utils/cn';
7 |
8 | const playerCardVariants = cva(
9 | 'flex h-20 w-20 items-center gap-2 duration-200 lg:aspect-[3/1] lg:w-full lg:items-center lg:justify-between lg:rounded-lg lg:border-2 lg:p-1 lg:transition-colors xl:p-3',
10 | {
11 | variants: {
12 | status: {
13 | // 게임 참여 전 상태
14 | NOT_PLAYING: 'bg-transparent lg:bg-eastbay-400',
15 | // 게임 진행 중 상태
16 | PLAYING: 'bg-transparent lg:bg-eastbay-400',
17 | },
18 | isMe: {
19 | true: 'bg-transparent lg:bg-violet-500 lg:border-violet-800',
20 | false: 'lg:border-halfbaked-800',
21 | },
22 | },
23 | defaultVariants: {
24 | status: 'NOT_PLAYING',
25 | isMe: false,
26 | },
27 | },
28 | );
29 |
30 | interface PlayerCardProps extends VariantProps
44 | {title && (
45 |
55 |
56 | {/* Close Button */}
57 | {onClose && (
58 |
67 | )}
68 |
46 | {title}
47 |
48 | )}
49 | {description && (
50 |
51 | {description}
52 |
53 | )}
54 |
85 |
99 | );
100 | };
101 |
102 | export { PlayerCard, type PlayerCardProps, playerCardVariants };
103 |
--------------------------------------------------------------------------------
/client/src/components/ui/player-card/PlayerInfo.tsx:
--------------------------------------------------------------------------------
1 | import { PlayerRole } from '@troublepainter/core';
2 | import { PLAYING_ROLE_TEXT } from '@/constants/gameConstant';
3 | import { cn } from '@/utils/cn';
4 |
5 | interface PlayerCardInfoProps {
6 | nickname: string;
7 | role?: PlayerRole | null;
8 | className?: string;
9 | }
10 |
11 | export const PlayerCardInfo = ({ nickname, role, className }: PlayerCardInfoProps) => {
12 | return (
13 | /* 사용자 정보 섹션 */
14 |
86 |
97 |
15 |
42 | );
43 | };
44 |
--------------------------------------------------------------------------------
/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 |
16 |
28 |
25 | {`${nickname}`}
26 |
27 |
29 |
41 |
38 | {role ? PLAYING_ROLE_TEXT[role] : '???'}
39 |
40 |
31 |
80 | );
81 | };
82 |
--------------------------------------------------------------------------------
/client/src/components/ui/player-card/PlayerStatus.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from '@/utils/cn';
2 |
3 | interface PlayerCardStatusProps {
4 | score?: number;
5 | isHost: boolean | null;
6 | isPlaying: boolean;
7 | isMe: boolean | null;
8 | className?: string;
9 | }
10 |
11 | export const PlayerCardStatus = ({ score, isHost, isPlaying, isMe, className }: PlayerCardStatusProps) => {
12 | return (
13 | /* 데스크탑 점수/상태 표시 섹션 */
14 |
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 |
15 | {score !== undefined && isPlaying && (
16 |
32 | );
33 | };
34 |
--------------------------------------------------------------------------------
/client/src/constants/backgroundConstants.ts:
--------------------------------------------------------------------------------
1 | export const SIZE = 55;
2 | export const GAP = 40;
3 | export const OFFSET = SIZE;
4 | export const PARTICLE_SIZE = SIZE / 3;
5 |
6 | export const RANDOM_POINT_RANGE_WIDTH = 20;
7 | export const RANDOM_POINT_RANGE_HEIGHT = 30;
8 |
9 | export const CURSOR_WIDTH = 20;
10 | export const CURSOR_LENGTH = 7;
11 | export const DELETE_INTERVAL = 30;
12 |
--------------------------------------------------------------------------------
/client/src/constants/canvasConstants.ts:
--------------------------------------------------------------------------------
1 | export const DRAWING_MODE = {
2 | PEN: 0,
3 | FILL: 1,
4 | };
5 |
6 | export const LINEWIDTH_VARIABLE = {
7 | MIN_WIDTH: 4,
8 | MAX_WIDTH: 20,
9 | STEP_WIDTH: 2,
10 | };
11 |
12 | export const MAINCANVAS_RESOLUTION_WIDTH = 1000;
13 | export const MAINCANVAS_RESOLUTION_HEIGHT = 625;
14 | //해상도 비율 변경 시 CanvasUI의 aspect-[16/10] 도 수정해야 정상적으로 렌더링됩니다.
15 |
16 | export const COLORS_INFO = [
17 | { color: '검정', backgroundColor: '#000000' },
18 | { color: '분홍', backgroundColor: '#FF69B4' },
19 | { color: '노랑', backgroundColor: '#FFFF00' },
20 | { color: '하늘', backgroundColor: '#87CEEB' },
21 | { color: '회색', backgroundColor: '#808080' },
22 | ];
23 |
24 | export const DEFAULT_MAX_PIXELS = 50000; // 기본값 설정
25 |
--------------------------------------------------------------------------------
/client/src/constants/cdn.ts:
--------------------------------------------------------------------------------
1 | const CDN_BASE = 'https://kr.object.ncloudstorage.com/troublepainter-assets';
2 |
3 | export const CDN = {
4 | BACKGROUND_MUSIC: `${CDN_BASE}/sounds/background-music.mp3`,
5 | MAIN_LOGO: `${CDN_BASE}/logo/main-logo.png`,
6 | SIDE_LOGO: `${CDN_BASE}/logo/side-logo.png`,
7 | // tailwind config 설정
8 | // BACKGROUND: `${CDN_BASE}/patterns/background.png`,
9 | } as const;
10 |
--------------------------------------------------------------------------------
/client/src/constants/gameConstant.ts:
--------------------------------------------------------------------------------
1 | import { PlayerRole } from '@troublepainter/core';
2 | import { PlayingRoleText } from '@/types/game.types';
3 |
4 | export const PLAYING_ROLE_TEXT: Record
17 |
19 | )}
20 |
21 | {!isPlaying && isHost && (
22 | {score}
18 |
28 | 방장
29 |
30 | )}
31 |
31 | * {messages.map(message => (
32 | *
35 | * );
36 | * ```
37 | */
38 | export const useScrollToBottom = (dependencies: unknown[] = []): UseScrollToBottom => {
39 | const containerRef = useRef
15 |
23 | );
24 | };
25 |
26 | export default RootLayout;
27 |
--------------------------------------------------------------------------------
/client/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import '@/index.css';
4 | import { RouterProvider } from 'react-router-dom';
5 | import App from '@/App.tsx';
6 | import { router } from '@/routes';
7 |
8 | createRoot(document.getElementById('root')!).render(
9 |
10 |
21 |
22 | );
23 | };
24 | export default LobbyPage;
25 |
--------------------------------------------------------------------------------
/client/src/pages/MainPage.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import Background from '@/components/ui/BackgroundCanvas';
3 | import { Button } from '@/components/ui/Button';
4 | import { Logo } from '@/components/ui/Logo';
5 | import { PixelTransitionContainer } from '@/components/ui/PixelTransitionContainer';
6 | import { useCreateRoom } from '@/hooks/useCreateRoom';
7 | import { usePageTransition } from '@/hooks/usePageTransition';
8 | import { cn } from '@/utils/cn';
9 |
10 | const MainPage = () => {
11 | const { createRoom, isLoading } = useCreateRoom();
12 | const { isExiting, transitionTo } = usePageTransition();
13 |
14 | useEffect(() => {
15 | // 현재 URL을 루트로 변경
16 | window.history.replaceState(null, '', '/');
17 | }, []);
18 |
19 | const handleCreateRoom = async () => {
20 | // transitionTo(`/lobby/${roomId}`);
21 | const response = await createRoom();
22 | if (response && response.roomId) {
23 | transitionTo(`/lobby/${response.roomId}`);
24 | }
25 | };
26 |
27 | return (
28 | 11 | Get Ready for the next battle 12 |
13 | 14 |
16 |
20 |