{gender === "FEMALE" ? (
@@ -168,6 +174,7 @@ const ListMemberLayout = ({
onAppointClick,
useDeleteModal,
onDelete,
+ isManager,
} = props;
const getNumberText = () => {
@@ -204,7 +211,7 @@ const ListMemberLayout = ({
/>
{
diff --git a/src/components/common/system/header/MainHeader.tsx b/src/components/common/system/header/MainHeader.tsx
index 6a41c7b7..ad689f73 100644
--- a/src/components/common/system/header/MainHeader.tsx
+++ b/src/components/common/system/header/MainHeader.tsx
@@ -37,7 +37,7 @@ export const MainHeader = ({
setHasNotification(data.data.existNewNotification);
} catch (err) {
- console.log("알람 존재여부 api 오류: ", err);
+ console.error("알람 존재여부 api 오류: ", err);
}
};
diff --git a/src/components/home/MyExerciseCalendar.tsx b/src/components/home/MyExerciseCalendar.tsx
index 23fff96d..2903b95b 100644
--- a/src/components/home/MyExerciseCalendar.tsx
+++ b/src/components/home/MyExerciseCalendar.tsx
@@ -195,7 +195,7 @@ export const MyExerciseCalendar = ({ setCount }: MyExerciseCalendarProps) => {
setIsInitialLoading(false);
}
} catch (err) {
- console.log(err);
+ console.error(err);
setIsInitialLoading(false);
} finally {
inFlightRef.current = false;
diff --git a/src/firebase.ts b/src/firebase.ts
index 84864166..17531714 100644
--- a/src/firebase.ts
+++ b/src/firebase.ts
@@ -29,17 +29,13 @@ export async function requestFcmToken(): Promise {
return null;
}
- console.log("[FCM] 현재 권한 상태:", Notification.permission);
-
if (Notification.permission === "denied") {
console.warn("[FCM] 알림 권한이 차단(denied) 상태입니다.");
return null;
}
if (Notification.permission === "default") {
- console.log("[FCM] 권한 요청 팝업 호출");
const permission = await Notification.requestPermission();
- console.log("[FCM] 권한 요청 결과:", permission);
if (permission !== "granted") {
return null;
}
@@ -55,7 +51,6 @@ export async function requestFcmToken(): Promise {
});
if (token) {
- console.log("[FCM] 토큰 발급 성공");
await sendTokenToServer(token);
} else {
console.warn("[FCM] 토큰 발급 실패(빈 토큰)");
diff --git a/src/hooks/useFcmToken.ts b/src/hooks/useFcmToken.ts
index 05fba94a..c59dc35d 100644
--- a/src/hooks/useFcmToken.ts
+++ b/src/hooks/useFcmToken.ts
@@ -12,11 +12,7 @@ export function useFcmToken() {
return;
}
- console.log("[FCM] useFcmToken mounted. permission:", Notification.permission);
-
- const unsubscribe = onMessage(messaging, (payload) => {
- console.log("[FCM] 포그라운드 알림 수신:", payload);
- });
+ const unsubscribe = onMessage(messaging, () => {});
const cleanupUserGestureListeners = () => {
document.removeEventListener("click", handleFirstGesture);
@@ -25,7 +21,6 @@ export function useFcmToken() {
};
const handleFirstGesture = () => {
- console.log("[FCM] 사용자 제스처 감지 -> 토큰 등록 시도");
cleanupUserGestureListeners();
registerToken();
};
@@ -38,12 +33,9 @@ export function useFcmToken() {
document.addEventListener("click", handleFirstGesture);
document.addEventListener("touchstart", handleFirstGesture);
document.addEventListener("keydown", handleFirstGesture);
- } else {
- console.info("[FCM] 알림 권한이 차단되어 있습니다. 브라우저 설정에서 허용이 필요합니다.");
}
return () => {
- console.log("[FCM] useFcmToken cleanup");
cleanupUserGestureListeners();
unsubscribe();
};
diff --git a/src/hooks/useGameWs.ts b/src/hooks/useGameWs.ts
new file mode 100644
index 00000000..a83ca512
--- /dev/null
+++ b/src/hooks/useGameWs.ts
@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from "react";
+import {
+ connectGameWs,
+ disconnectGameWs,
+ subscribeGameBoard,
+ unsubscribeGameBoard,
+ createGameWS,
+ startGameWS,
+ completeGameWS,
+ deleteGameWS,
+ moveCourtWS,
+ moveToWaitingWS,
+ addGameWsListener,
+ addGameWsOpenListener,
+ addGameWsCloseListener,
+ isGameWsOpen,
+ type GameResponseEnvelope,
+} from "../api/game/rawWs";
+import useUserStore from "../store/useUserStore";
+
+// 게임판 화면 진입 시 연결하고, 이탈 시 해당 보드를 구독 해제한다.
+// (소켓 연결 자체는 다른 게임판 화면과 공유될 수 있어 연결 종료는 하지 않음)
+export const useGameWs = (opts: { gameBoardId?: number; origin?: string } = {}) => {
+ const [isOpen, setIsOpen] = useState(false);
+ const [lastMessage, setLastMessage] = useState(
+ null,
+ );
+ const mounted = useRef(false);
+
+ const token =
+ useUserStore(s => s.user?.accessToken) ??
+ localStorage.getItem("accessToken") ??
+ "";
+
+ useEffect(() => {
+ mounted.current = true;
+
+ if (!token) {
+ setIsOpen(false);
+ disconnectGameWs();
+ return () => {
+ mounted.current = false;
+ };
+ }
+
+ connectGameWs({ origin: opts.origin });
+
+ if (isGameWsOpen()) setIsOpen(true);
+ const offOpen = addGameWsOpenListener(() => mounted.current && setIsOpen(true));
+ const offClose = addGameWsCloseListener(
+ () => mounted.current && setIsOpen(false),
+ );
+ const offMsg = addGameWsListener(msg => {
+ if (!mounted.current) return;
+ setLastMessage(msg);
+ });
+
+ return () => {
+ mounted.current = false;
+ offOpen();
+ offClose();
+ offMsg();
+ };
+ }, [token, opts.origin]);
+
+ // 보드 구독/해제: 소켓 open 이후에 시도, 언마운트 시 자동 해제
+ useEffect(() => {
+ if (!isOpen || !opts.gameBoardId) return;
+
+ subscribeGameBoard(opts.gameBoardId).catch(() => {});
+
+ return () => {
+ unsubscribeGameBoard(opts.gameBoardId!).catch(() => {});
+ };
+ }, [isOpen, opts.gameBoardId]);
+
+ return {
+ isOpen,
+ lastMessage,
+ createGame: createGameWS,
+ startGame: startGameWS,
+ completeGame: completeGameWS,
+ deleteGame: deleteGameWS,
+ moveCourt: moveCourtWS,
+ moveToWaiting: moveToWaitingWS,
+ };
+};
diff --git a/src/hooks/useRawWsConnect.ts b/src/hooks/useRawWsConnect.ts
index 695900ca..3ad9260e 100644
--- a/src/hooks/useRawWsConnect.ts
+++ b/src/hooks/useRawWsConnect.ts
@@ -78,15 +78,6 @@ export const useRawWsConnect = (opts: {
unreadCount: m.newUnreadCount ?? 0,
});
}
-
- // 해제 ACK 로깅
- if (
- (msg.type === "UNSUBSCRIBE" || msg.type === "SUBSCRIBE") &&
- "message" in msg &&
- "chatRoomId" in msg
- ) {
- console.log(`[WS] ${msg.type} ACK #${msg.chatRoomId}: ${msg.message}`);
- }
});
return () => {
diff --git a/src/hooks/useSeedChatUnread.ts b/src/hooks/useSeedChatUnread.ts
new file mode 100644
index 00000000..fd16a827
--- /dev/null
+++ b/src/hooks/useSeedChatUnread.ts
@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import {
+ getGroupChatRooms,
+ getPersonalChatRooms,
+} from "../api/chat/chatList";
+import { useChatWsStore } from "../store/useChatWsStore";
+import useUserStore from "../store/useUserStore";
+import { resolveMemberId } from "../utils/auth";
+
+// [임시 조치] 하단 네비 채팅 안읽음 뱃지는
+// 1) UNREAD_STATUS_UPDATE 웹소켓 push (접속 이후 상태가 "변할 때"만 옴)
+// 2) 채팅 탭(ChatPage)에서만 채워지던 useChatWsStore.meta
+// 두 가지에만 의존한다. 그래서 채팅 탭을 한 번도 안 들어가면, 앱을 켜기 전에 쌓여 있던
+// 안읽음이 메인 화면 뱃지에 반영되지 않는다 (채팅 탭 진입 후에야 뜸).
+//
+// 근본 해결은 서버가 소켓 접속/구독 직후 현재 안읽음 상태를 1회 push하는 것.
+// 그 전까지의 임시 방편으로, 앱 진입 시(로그인 상태) 채팅방 목록을 한 번 조회해
+// store를 seed 한다. 서버 push가 적용되면 이 훅은 제거 가능.
+let seededFor: number | null = null;
+
+export const useSeedChatUnread = () => {
+ const hydrateFromAPI = useChatWsStore(s => s.hydrateFromAPI);
+ const token =
+ useUserStore(s => s.user?.accessToken) ??
+ localStorage.getItem("accessToken") ??
+ "";
+ const memberId = resolveMemberId() ?? 0;
+
+ useEffect(() => {
+ if (!token || !memberId || seededFor === memberId) return;
+ seededFor = memberId;
+
+ (async () => {
+ try {
+ const [groupRes, personalRes] = await Promise.all([
+ getGroupChatRooms(),
+ getPersonalChatRooms(),
+ ]);
+ hydrateFromAPI(
+ [...groupRes.content, ...personalRes.content].map(r => ({
+ chatRoomId: r.chatRoomId,
+ lastMessage: r.lastMessage?.content ?? null,
+ timestamp: r.lastMessage?.timestamp ?? null,
+ unreadCount: r.unreadCount ?? 0,
+ })),
+ );
+ } catch (err) {
+ seededFor = null; // 실패 시 다음 기회에 재시도
+ console.error("[unread] 초기 안읽음 상태 seed 실패", err);
+ }
+ })();
+ }, [token, memberId, hydrateFromAPI]);
+};
diff --git a/src/layout/GroupLayout.tsx b/src/layout/GroupLayout.tsx
index f6d19d31..f7ce4785 100644
--- a/src/layout/GroupLayout.tsx
+++ b/src/layout/GroupLayout.tsx
@@ -147,7 +147,7 @@ export const GroupLayout = () => {
},
});
} catch (err) {
- console.log(err);
+ console.error(err);
}
};
diff --git a/src/layout/PrivateRoute.tsx b/src/layout/PrivateRoute.tsx
index fd82e7d1..f3f57e77 100644
--- a/src/layout/PrivateRoute.tsx
+++ b/src/layout/PrivateRoute.tsx
@@ -10,6 +10,7 @@ interface PrivateRouteProps {
export const PrivateRoute = ({ children }: PrivateRouteProps) => {
const navigate = useNavigate();
const isAuthenticated = localStorage.getItem("accessToken");
+
useEffect(() => {
if (!isAuthenticated) {
navigate("/login");
diff --git a/src/main.tsx b/src/main.tsx
index bcdd3fa7..ae52ba30 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -22,9 +22,6 @@ if ("serviceWorker" in navigator) {
.finally(() => {
navigator.serviceWorker
.register("/firebase-messaging-sw.js")
- .then(() => {
- console.log("[FCM] firebase-messaging-sw 등록 완료");
- })
.catch((err) => {
console.error("Service Worker 등록 실패:", err);
});
diff --git a/src/pages/alarm/AlertPage.tsx b/src/pages/alarm/AlertPage.tsx
index c0cafd4f..2a0eec21 100644
--- a/src/pages/alarm/AlertPage.tsx
+++ b/src/pages/alarm/AlertPage.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import AlertInvite from "../../components/common/contentcard/alertTest/AlertInvite";
@@ -13,14 +13,17 @@ import api from "../../api/api";
import { PageHeader } from "../../components/common/system/header/PageHeader";
import { EmptyState } from "../../components/alert/EmptyState";
import AlertTest1 from "../../components/common/contentcard/alertTest/AlertTest1";
-import type { AlertListResponse, ResponseAlertDto } from "../../types/alert";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AlertListResponse, ResponseAlertDto, AlertListPage } from "../../types/alert";
+import { useMutation, useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
import { AlertSkeleton } from "../../components/alert/AlertSkeleton";
import DefaultGroupImg from "@/assets/icons/defaultGroupImg.svg?url";
-const fetchNotifications = async (): Promise => {
- const response = await api.get("/api/notifications");
- return response.data.data.notifications;
+const fetchNotifications = async ({ pageParam = null }: { pageParam?: number | null }): Promise => {
+ const cursorParam = pageParam ? `&cursor=${pageParam}` : "";
+ const response = await api.get(
+ `/api/v2/notifications?destination=APP${cursorParam}`
+ );
+ return response.data.data;
};
export const AlertPage = () => {
@@ -31,20 +34,43 @@ export const AlertPage = () => {
const [modalType, setModalType] = useState<"approve" | "reject" | null>(null);
const {
- data: notifications = [],
+ data,
+ fetchNextPage,
+ hasNextPage,
isLoading,
isError,
- } = useQuery({
+ } = useInfiniteQuery({
queryKey: ["notifications"],
queryFn: fetchNotifications,
+ initialPageParam: null as number | null,
+ getNextPageParam: (lastPage) => (lastPage.hasNext ? lastPage.nextCursor : undefined),
staleTime: 1000 * 60,
});
+ const notifications = data?.pages.flatMap(page => page.notifications) || [];
+
// INVITE/CHANGE/SIMPLE 만 노출
const visibleNotifications = notifications.filter(alert =>
["INVITE", "CHANGE", "SIMPLE"].includes(alert.type),
);
+ const observerRef = useRef(null);
+
+ useEffect(() => {
+ const observer = new IntersectionObserver(
+ entries => {
+ if (entries[0].isIntersecting && hasNextPage && !isLoading) {
+ fetchNextPage();
+ }
+ },
+ { threshold: 0.1 },
+ );
+ if (observerRef.current) {
+ observer.observe(observerRef.current);
+ }
+ return () => observer.disconnect();
+ }, [hasNextPage, fetchNextPage, isLoading]);
+
const handleAccept = (id: number) => {
setTargetId(id);
setModalType("approve");
@@ -56,8 +82,6 @@ export const AlertPage = () => {
};
const handleDetail = (partyId: number, data?: ResponseAlertDto["data"]) => {
- console.log("모임 페이지로 이동", partyId);
-
if (data?.exerciseDate && data?.exerciseId) {
navigate(`/group/${partyId}`, {
state: {
@@ -92,10 +116,8 @@ export const AlertPage = () => {
// 🌟CHANGE/SIMPLE 읽음 처리 공통 뮤테이션
const markReadMutation = useMutation({
mutationFn: async (notification: ResponseAlertDto) => {
- const { notificationId, type } = notification;
-
- // 현재 구현처럼 쿼리스트링로 전송
- await api.patch(`/api/notifications/${notificationId}?type=${type}`);
+ const { notificationId } = notification;
+ await api.patch(`/api/v2/notifications/${notificationId}/read`);
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ["notifications"] });
@@ -110,19 +132,13 @@ export const AlertPage = () => {
const { notificationId, partyId } = notification;
const invitationId = extractInvitationId(notification.data);
- // 알림 상태 수정 (INVITE → INVITE_ACCEPT)
- await api.patch(
- `/api/notifications/${notificationId}?type=INVITE_ACCEPT`,
- );
+ // V2: 알림 읽음 처리만 하고, 수락은 초대 API로 별도 호출
+ await api.patch(`/api/v2/notifications/${notificationId}/read`);
if (partyId && invitationId) {
await api.patch(`/api/parties/invitations/${invitationId}`, {
action: "APPROVE",
});
- } else if (partyId && !invitationId) {
- console.log("모임 있지만 invitationId 없음");
- } else {
- console.log("모임도 없고 invitationId도 없음");
}
},
onSuccess: () => {
@@ -138,9 +154,8 @@ export const AlertPage = () => {
mutationFn: async (notification: ResponseAlertDto) => {
const { notificationId, data } = notification;
- await api.patch(
- `/api/notifications/${notificationId}?type=INVITE_REJECT`,
- );
+ // V2: 알림 읽음 처리만 하고, 거절은 초대 API로 별도 호출
+ await api.patch(`/api/v2/notifications/${notificationId}/read`);
if (data?.invitationId) {
await api.patch(`/api/parties/invitations/${data.invitationId}`, {
@@ -218,6 +233,7 @@ export const AlertPage = () => {
),
)
)}
+ {hasNextPage && }
{modalType === "approve" && selectedAlert && (
diff --git a/src/pages/group/CreateExercise.tsx b/src/pages/group/CreateExercise.tsx
index ccf4b626..81b85dc6 100644
--- a/src/pages/group/CreateExercise.tsx
+++ b/src/pages/group/CreateExercise.tsx
@@ -8,7 +8,7 @@ import RedCircle from "@/assets/icons/cicle_s_red.svg?react";
import { DropBox } from "../../components/common/DropBox";
import { TitleBtn } from "../../components/group/main/create_exercise/TitleBtn";
import { TextField } from "../../components/group/main/create_exercise/TextField";
-import GR400_L from "../../components/common/Btn_Static/Text/GR400_L";
+import Grad_GR400_L from "../../components/common/Btn_Static/Text/Grad_GR400_L";
import { LocationField } from "../../components/common/LocationField";
import {
useLocation,
@@ -272,13 +272,15 @@ export const CreateExercise = () => {
+
+
+ (null);
+ const menuRef = useRef(null);
+ const longPressTimer = useRef | null>(null);
+ const suppressNextClick = useRef(false);
+ const { setNodeRef: setDropRef, isOver } = useDroppable({
+ id: courtDroppableId(courtId),
+ });
+
+ useEffect(() => {
+ if (!isMenuOpen) return;
+ const handleClickOutside = (e: MouseEvent) => {
+ if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+ if (cardRef.current?.contains(e.target as Node)) {
+ suppressNextClick.current = true;
+ }
+ setIsMenuOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, [isMenuOpen]);
+
+ const openMenuAt = (x: number, y: number) => {
+ setMenuPosition(clampMenuPosition(x, y, MENU_WIDTH, MENU_HEIGHT));
+ setIsMenuOpen(true);
+ };
+
+ const clearLongPressTimer = () => {
+ if (longPressTimer.current) {
+ clearTimeout(longPressTimer.current);
+ longPressTimer.current = null;
+ }
+ };
+
+ const handleContextMenu = (e: ReactMouseEvent) => {
+ e.preventDefault();
+ openMenuAt(e.clientX, e.clientY);
+ };
+
+ const handleTouchStart = (e: ReactTouchEvent) => {
+ const touch = e.touches[0];
+ clearLongPressTimer();
+ longPressTimer.current = setTimeout(() => {
+ openMenuAt(touch.clientX, touch.clientY);
+ }, LONG_PRESS_MS);
+ };
+
+ if (!players) {
+ return (
+ (null);
+ const menuRef = useRef(null);
+ const longPressTimer = useRef | null>(null);
+
+ useEffect(() => {
+ if (!isMenuOpen) return;
+ const handleClickOutside = (e: MouseEvent) => {
+ if (
+ menuRef.current &&
+ !menuRef.current.contains(e.target as Node) &&
+ !cardRef.current?.contains(e.target as Node)
+ ) {
+ setIsMenuOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, [isMenuOpen]);
+
+ // 코트 개수에 따라 메뉴 높이가 달라지므로 렌더된 실제 크기를 측정해 위치를 보정한다.
+ // clickPoint는 openMenuAt마다 새 객체로 갱신되어, 메뉴가 이미 열려 있는 상태에서
+ // 같은 카드를 다시 우클릭/롱프레스해도 이 effect가 다시 실행된다.
+ useLayoutEffect(() => {
+ if (!isMenuOpen || !clickPoint || !menuRef.current) return;
+ const rect = menuRef.current.getBoundingClientRect();
+ const corrected = clampMenuPosition(
+ clickPoint.x,
+ clickPoint.y,
+ rect.width,
+ rect.height,
+ );
+ setMenuPosition(prev =>
+ prev.top === corrected.top && prev.left === corrected.left
+ ? prev
+ : corrected,
+ );
+ }, [isMenuOpen, clickPoint, courts.length]);
+
+ const openMenuAt = (x: number, y: number) => {
+ setClickPoint({ x, y });
+ setMenuPosition(clampMenuPosition(x, y, MENU_WIDTH, 0));
+ setIsMenuOpen(true);
+ };
+
+ const clearLongPressTimer = () => {
+ if (longPressTimer.current) {
+ clearTimeout(longPressTimer.current);
+ longPressTimer.current = null;
+ }
+ };
+
+ const handleContextMenu = (e: ReactMouseEvent) => {
+ e.preventDefault();
+ openMenuAt(e.clientX, e.clientY);
+ };
+
+ const handleTouchStart = (e: ReactTouchEvent) => {
+ const touch = e.touches[0];
+ clearLongPressTimer();
+ longPressTimer.current = setTimeout(() => {
+ openMenuAt(touch.clientX, touch.clientY);
+ }, LONG_PRESS_MS);
+ };
+
+ return (
+ (courts);
+ const [newLabel, setNewLabel] = useState("");
+ const [isNewLabelFocused, setIsNewLabelFocused] = useState(false);
+
+ const handleAdd = () => {
+ const trimmed = newLabel.trim();
+ if (!trimmed) return;
+ setItems(prev => [...prev, { courtName: trimmed }]);
+ setNewLabel("");
+ };
+
+ const handleRemove = (index: number) => {
+ setItems(prev => prev.filter((_, i) => i !== index));
+ };
+
+ const handleSave = () => {
+ const trimmed = newLabel.trim();
+ onSave(trimmed ? [...items, { courtName: trimmed }] : items);
+ onClose();
+ };
+
+ const isOverlay = variant === "overlay";
+
+ const content = (
+ <>
+ 코트 관리
+
+ setName(e.target.value.slice(0, 17))}
+ />
+
+ setLevel(val ?? "")}
+ />
+
+ ([]);
+ const [members, setMembers] = useState([]);
+ const [courts, setCourts] = useState([]);
+ const [waitingGroups, setWaitingGroups] = useState([]);
+ const [isAddPlayerOpen, setIsAddPlayerOpen] = useState(false);
+ const [editingMemberId, setEditingMemberId] = useState(null);
+ const [isWebViewOpen, setIsWebViewOpen] = useState(false);
+ const [isFilterOpen, setIsFilterOpen] = useState(false);
+ const [isDuplicateCheckOpen, setIsDuplicateCheckOpen] = useState(false);
+ const [completingCourtId, setCompletingCourtId] = useState(
+ null,
+ );
+ const [isRandomMatchFailOpen, setIsRandomMatchFailOpen] = useState(false);
+ const [courtManageVariant, setCourtManageVariant] = useState<
+ "sheet" | "overlay" | null
+ >(null);
+ const [filters, setFilters] = useState({
+ levels: [],
+ gender: "전체",
+ shuttle: null,
+ });
+ const [activeDragGroup, setActiveDragGroup] = useState(
+ null,
+ );
+
+ const dndSensors = useSensors(
+ useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+ );
+
+ const gameWs = useGameWs({ gameBoardId });
+
+ const isFilterActive =
+ filters.levels.length > 0 ||
+ (filters.gender !== null && filters.gender !== "전체") ||
+ filters.shuttle !== null;
+
+ const applyBoard = (board: GameBoardResponse) => {
+ const { courts: nextCourts, waitingGroups: nextWaitingGroups } =
+ toBoardViewModel(board);
+ setCourts(nextCourts);
+ setWaitingGroups(nextWaitingGroups);
+ if (board.courtCount === 0) {
+ setCourtManageVariant(prev => prev ?? "sheet");
+ }
+ };
+
+ const applyMembersResponse = (res: {
+ gameBoardMembers: GameBoardMember[];
+ }) => {
+ setMembers(res.gameBoardMembers.map(toGameMember));
+ };
+
+ const refreshMembers = () => {
+ getGameBoardMembers(gameBoardId, toGameBoardMembersParams(filters)).then(
+ applyMembersResponse,
+ );
+ };
+
+ const handleApplyFilters = (next: GameBoardMemberFilters) => {
+ setFilters(next);
+ getGameBoardMembers(gameBoardId, toGameBoardMembersParams(next)).then(
+ applyMembersResponse,
+ );
+ };
+
+ useEffect(() => {
+ setIsLoading(true);
+ Promise.all([
+ getGameBoard(gameBoardId),
+ getGameBoardMembers(gameBoardId, toGameBoardMembersParams(filters)),
+ ])
+ .then(([board, memberRes]) => {
+ applyBoard(board);
+ setMembers(memberRes.gameBoardMembers.map(toGameMember));
+ })
+ .finally(() => setIsLoading(false));
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [gameBoardId]);
+
+ // 진행중인 코트의 경과 시간 스톱워치 (startedAt 기준 1초마다 재계산)
+ useEffect(() => {
+ const id = setInterval(() => {
+ setCourts(prev =>
+ prev.map(c =>
+ c.startedAt ? { ...c, timer: formatElapsed(c.startedAt) } : c,
+ ),
+ );
+ }, 1000);
+ return () => clearInterval(id);
+ }, []);
+
+ // 다른 클라이언트의 변경사항 브로드캐스트 반영
+ useEffect(() => {
+ const msg = gameWs.lastMessage;
+ if (!msg) return;
+
+ if (msg.type === "BOARD_UPDATED" && msg.data) {
+ applyBoard(msg.data as GameBoardResponse);
+ refreshMembers();
+ } else if (
+ (msg.type === "GAME_CREATED" || msg.type === "GAME_DELETED") &&
+ msg.data &&
+ typeof msg.data === "object" &&
+ "board" in msg.data
+ ) {
+ applyBoard((msg.data as { board: GameBoardResponse }).board);
+ refreshMembers();
+ } else if (msg.type === "MEMBERS_UPDATED") {
+ refreshMembers();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [gameWs.lastMessage]);
+
+ const toggleSelect = (id: number) => {
+ setSelectedIds(prev => {
+ if (prev.includes(id)) return prev.filter(v => v !== id);
+ if (prev.length >= MAX_SELECTED_MEMBERS) return prev;
+ return [...prev, id];
+ });
+ };
+
+ const selectedMembers = members.filter(m => selectedIds.includes(m.id));
+ const editingMember = members.find(m => m.id === editingMemberId) ?? null;
+
+ const handleSaveMemberEdit = async (updated: EditedGamePlayer) => {
+ if (editingMemberId === null) return;
+ const memberId = editingMemberId;
+ try {
+ await updateGameBoardMember(
+ gameBoardId,
+ memberId,
+ toGameBoardMemberPayload(updated),
+ );
+ setMembers(prev =>
+ prev.map(m =>
+ m.id === memberId
+ ? {
+ ...m,
+ name: updated.name,
+ gender: updated.gender,
+ group: updated.level,
+ ageGroup: updated.ageGroup,
+ }
+ : m,
+ ),
+ );
+ setEditingMemberId(null);
+ } catch (err) {
+ console.error("[GAME] 플레이어 정보 수정 실패", err);
+ alert("정보 수정에 실패했어요.");
+ }
+ };
+
+ const handleAddPlayer = async (player: {
+ name: string;
+ gender: "MALE" | "FEMALE";
+ level: string;
+ ageGroup: string;
+ }) => {
+ try {
+ await createGameBoardMember(gameBoardId, toGameBoardMemberPayload(player));
+ refreshMembers();
+ setIsAddPlayerOpen(false);
+ } catch (err) {
+ console.error("[GAME] 명단 추가 실패", err);
+ alert("명단 추가에 실패했어요.");
+ }
+ };
+
+ const handleToggleParticipation = async (id: number) => {
+ const member = members.find(m => m.id === id);
+ if (!member) return;
+ const nextParticipating = member.tags.includes("미참");
+ try {
+ await updateGameBoardMemberParticipation(
+ gameBoardId,
+ id,
+ nextParticipating,
+ );
+ setMembers(prev =>
+ prev.map(m => {
+ if (m.id !== id) return m;
+ return nextParticipating
+ ? {
+ ...m,
+ tags: m.tags.filter(t => t !== "미참"),
+ selectable: true,
+ }
+ : { ...m, tags: ["미참"], selectable: false };
+ }),
+ );
+ setSelectedIds(prev => prev.filter(v => v !== id));
+ } catch (err) {
+ console.error("[GAME] 참여 상태 변경 실패", err);
+ alert("참여 상태 변경에 실패했어요.");
+ }
+ };
+
+ const handleAddToWaitingQueue = async () => {
+ if (selectedMembers.length === 0) return;
+ try {
+ await gameWs.createGame({
+ gameBoardId,
+ gameBoardMemberIds: selectedMembers.map(m => m.id),
+ });
+ setSelectedIds([]);
+ } catch (err) {
+ console.error("[GAME] CREATE_GAME 실패", err);
+ alert("대기열 추가에 실패했어요.");
+ }
+ };
+
+ const handleChangeWaitingGroup = async (group: WaitingGroup) => {
+ try {
+ const res = await gameWs.deleteGame({
+ gameBoardId,
+ gameId: group.gameId,
+ restore: true,
+ });
+ const restoredIds = res.data?.players.map(p => p.gameBoardMemberId);
+ setSelectedIds(restoredIds?.length ? restoredIds : group.memberIds);
+ } catch (err) {
+ console.error("[GAME] DELETE_GAME(restore) 실패", err);
+ alert("대기열 변경에 실패했어요.");
+ }
+ };
+
+ const handleRemoveWaitingGroup = async (id: number) => {
+ const group = waitingGroups.find(g => g.id === id);
+ if (!group) return;
+ try {
+ await gameWs.deleteGame({
+ gameBoardId,
+ gameId: group.gameId,
+ restore: false,
+ });
+ } catch (err) {
+ console.error("[GAME] DELETE_GAME 실패", err);
+ alert("대기열 삭제에 실패했어요.");
+ }
+ };
+
+ const handleMoveToCourt = async (waitingGroupId: number, courtId: number) => {
+ const group = waitingGroups.find(g => g.id === waitingGroupId);
+ if (!group) return;
+ try {
+ await gameWs.startGame({ gameBoardId, gameId: group.gameId, courtId });
+ } catch (err) {
+ console.error("[GAME] START_GAME 실패", err);
+ alert("게임 시작에 실패했어요.");
+ }
+ };
+
+ // 경기중인 코트에 대기열 매치를 드래그해 놓았을 때: 기존 매치를 대기로 보내고 그 자리를 새 매치가 차지한다.
+ const handleSwapCourtMatch = async (
+ waitingGroupId: number,
+ courtId: number,
+ ) => {
+ const group = waitingGroups.find(g => g.id === waitingGroupId);
+ const court = courts.find(c => c.id === courtId);
+ if (!group || !court?.gameId) return;
+ try {
+ await gameWs.moveToWaiting({ gameBoardId, gameId: court.gameId });
+ await gameWs.startGame({ gameBoardId, gameId: group.gameId, courtId });
+ } catch (err) {
+ console.error("[GAME] 코트 교체 실패", err);
+ alert("코트 교체에 실패했어요.");
+ }
+ };
+
+ const handleDragStart = (event: DragStartEvent) => {
+ const group = waitingGroups.find(
+ g => waitingDraggableId(g.id) === event.active.id,
+ );
+ setActiveDragGroup(group ?? null);
+ };
+
+ const handleDragEnd = (event: DragEndEvent) => {
+ setActiveDragGroup(null);
+ const { active, over } = event;
+ if (!over) return;
+ const group = waitingGroups.find(
+ g => waitingDraggableId(g.id) === active.id,
+ );
+ const court = courts.find(c => courtDroppableId(c.id) === over.id);
+ if (!group || !court) return;
+ if (court.players) {
+ handleSwapCourtMatch(group.id, court.id);
+ } else {
+ handleMoveToCourt(group.id, court.id);
+ }
+ };
+
+ const handleCompleteCourt = async (courtId: number) => {
+ const court = courts.find(c => c.id === courtId);
+ if (!court?.gameId) return;
+ try {
+ await gameWs.completeGame({ gameBoardId, gameId: court.gameId });
+ } catch (err) {
+ console.error("[GAME] COMPLETE_GAME 실패", err);
+ alert("게임 완료에 실패했어요.");
+ } finally {
+ setCompletingCourtId(null);
+ }
+ };
+
+ const handleReturnToWaiting = async (courtId: number) => {
+ const court = courts.find(c => c.id === courtId);
+ if (!court?.gameId) return;
+ try {
+ await gameWs.moveToWaiting({ gameBoardId, gameId: court.gameId });
+ } catch (err) {
+ console.error("[GAME] MOVE_TO_WAITING 실패", err);
+ alert("대기로 되돌리기에 실패했어요.");
+ }
+ };
+
+ const handleCancelCourtGame = async (courtId: number) => {
+ const court = courts.find(c => c.id === courtId);
+ if (!court?.gameId) return;
+ try {
+ const res = await gameWs.deleteGame({
+ gameBoardId,
+ gameId: court.gameId,
+ restore: true,
+ });
+ const restoredIds = res.data?.players.map(p => p.gameBoardMemberId);
+ setSelectedIds(restoredIds?.length ? restoredIds : []);
+ } catch (err) {
+ console.error("[GAME] 경기 취소 실패", err);
+ alert("경기 취소에 실패했어요.");
+ }
+ };
+
+ const handleAutoMatch = async () => {
+ try {
+ const { gameBoardMemberIds } = await postRandomMatch(gameBoardId);
+ setSelectedIds(gameBoardMemberIds);
+ } catch (err) {
+ console.error("[GAME] RANDOM_MATCH 실패", err);
+ setIsRandomMatchFailOpen(true);
+ }
+ };
+
+ const handleSaveCourts = async (items: CourtManageItem[]) => {
+ try {
+ const res = await updateCourts(gameBoardId, {
+ courts: items.map(item => ({
+ courtId: item.courtId,
+ courtName: item.courtName,
+ })),
+ });
+ setCourts(prev =>
+ res.courts.map(updatedCourt => {
+ const existing = prev.find(c => c.id === updatedCourt.courtId);
+ return {
+ id: updatedCourt.courtId,
+ label: updatedCourt.courtName,
+ gameId: existing?.gameId,
+ startedAt: existing?.startedAt,
+ timer: existing?.timer,
+ players: existing?.players ?? null,
+ };
+ }),
+ );
+ setCourtManageVariant(null);
+ } catch (err) {
+ console.error("[GAME] 코트 저장 실패", err);
+ alert("코트 저장에 실패했어요.");
+ }
+ };
+
+ if (isLoading) {
+ return
+
+ {activeDragGroup ? (
+
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameBoardTabSkeleton.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameBoardTabSkeleton.tsx
new file mode 100644
index 00000000..0b7d1389
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameBoardTabSkeleton.tsx
@@ -0,0 +1,113 @@
+// 게임판(게임 코트 / 대기 / 명단) 로딩 스켈레톤 UI
+
+const SkeletonBox = ({ className = "" }: { className?: string }) => (
+
+);
+
+// 코트/대기 카드 안에 들어가는 선수 뱃지 자리
+const PlayerBadgeSkeleton = () => (
+ (
+ null,
+ );
+
+ return (
+ = {
+ recent: "border border-rd-500 shadow-[0_0_4px_rgba(246,45,45,0.16)]",
+ previous: "border border-gr-500 shadow-[0_0_4px_rgba(26,187,101,0.16)]",
+ first: "shadow-[0_0_8px_rgba(18,18,18,0.16)]",
+};
+
+const MATCHUP_LINE_COLOR: Record = {
+ recent: "#F62D2D",
+ previous: "#1ABB65",
+ first: "#E4E7EA",
+};
+
+interface MatchBadgeProps {
+ className?: string;
+ info: { count: number; type: MatchupType };
+}
+
+const MatchBadge = ({ className, info }: MatchBadgeProps) => (
+ 
+);
+
+// 정확히 4명 선택 시, 4명이 이루는 다이아몬드 대진 관계(변 4개 + 대각선 2개 = 총 6쌍)를 그대로 시각화한다.
+const DiamondMatchup = ({
+ members,
+ matchups,
+}: {
+ members: GameMember[];
+ matchups: Map;
+}) => {
+ const [topLeft, bottomLeft, topRight, bottomRight] = members;
+ const infoFor = (a: GameMember, b: GameMember) =>
+ matchups.get(getMatchupKey(a.id, b.id)) ?? {
+ count: 0,
+ type: "first" as const,
+ };
+
+ return (
+ ;
+}) => {
+ const pairs: [GameMember, GameMember][] = [];
+ for (let i = 0; i < members.length; i++) {
+ for (let j = i + 1; j < members.length; j++) {
+ pairs.push([members[i], members[j]]);
+ }
+ }
+
+ if (pairs.length === 0) {
+ return (
+ | null>(
+ null,
+ );
+
+ useEffect(() => {
+ let active = true;
+ setMatchups(null);
+ getGameDuplicateCheck(
+ gameBoardId,
+ members.map(m => m.id),
+ ).then(res => {
+ if (!active) return;
+ const next = new Map();
+ res.pairs.forEach(p => {
+ next.set(getMatchupKey(p.memberIdA, p.memberIdB), {
+ count: p.count,
+ type: deriveMatchupType(p.count, p.playedInLastGame),
+ });
+ });
+ setMatchups(next);
+ });
+ return () => {
+ active = false;
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [gameBoardId, members.map(m => m.id).join(",")]);
+
+ const content = (
+ <>
+ 게임 중복 체크
+
+ setName(e.target.value.slice(0, 17))}
+ />
+
+ setLevel(val ?? "")}
+ />
+
+ (initialFilters.levels);
+ const [gender, setGender] = useState(initialFilters.gender);
+ const [shuttle, setShuttle] = useState(
+ initialFilters.shuttle,
+ );
+
+ // "전체" 선택 시 개별 급수 선택을 모두 해제, 개별 급수 선택 시 다중 토글
+ const handleToggleLevel = (option: string) => {
+ if (option === "전체") {
+ setLevels([]);
+ return;
+ }
+ setLevels(prev =>
+ prev.includes(option)
+ ? prev.filter(l => l !== option)
+ : [...prev, option],
+ );
+ };
+
+ const handleReset = () => {
+ setLevels([]);
+ setGender("전체");
+ setShuttle(null);
+ };
+
+ const handleApply = () => {
+ onApply({ levels, gender, shuttle });
+ onClose();
+ };
+
+ const isOverlay = variant === "overlay";
+
+ const sections = (
+ <>
+
+ option === "전체" ? levels.length === 0 : levels.includes(option)
+ }
+ onSelect={handleToggleLevel}
+ />
+
+
+ gender === option}
+ onSelect={setGender}
+ />
+
+
+ shuttle === option}
+ onSelect={value =>
+ setShuttle(prev => (prev === value ? null : value))
+ }
+ />
+
+ );
+
+ if (isOverlay) {
+ return (
+ = {
+ 운동: "bg-gr-100 text-gr-700",
+ 대기: "bg-[#fff4d2] text-[#d96303]",
+ 미참: "bg-gy-100 text-gy-700",
+};
+
+const LONG_PRESS_MS = 600;
+const MENU_WIDTH = 149;
+const MENU_HEIGHT = 84;
+const MENU_EDGE_MARGIN = 8;
+
+interface GameMemberCardProps {
+ member: GameMember;
+ selected: boolean;
+ onToggleSelect: () => void;
+ onEditInfo?: () => void;
+ onToggleParticipation?: () => void;
+}
+
+export const GameMemberCard = ({
+ member,
+ selected,
+ onToggleSelect,
+ onEditInfo,
+ onToggleParticipation,
+}: GameMemberCardProps) => {
+ const { name, gender, ageGroup, group, playCount, tags, imgUrl, selectable } =
+ member;
+ const isWithdrawn = tags.includes("미참");
+
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+ const cardRef = useRef(null);
+ const menuRef = useRef(null);
+ const longPressTimer = useRef | null>(null);
+ const suppressNextClick = useRef(false);
+
+ useEffect(() => {
+ if (!isMenuOpen) return;
+ const handleClickOutside = (e: MouseEvent) => {
+ if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+ if (cardRef.current?.contains(e.target as Node)) {
+ suppressNextClick.current = true;
+ }
+ setIsMenuOpen(false);
+ }
+ };
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, [isMenuOpen]);
+
+ const openMenuAt = (x: number, y: number) => {
+ const left = Math.min(
+ Math.max(x - MENU_WIDTH, MENU_EDGE_MARGIN),
+ window.innerWidth - MENU_WIDTH - MENU_EDGE_MARGIN,
+ );
+ const top = Math.min(
+ Math.max(y, MENU_EDGE_MARGIN),
+ window.innerHeight - MENU_HEIGHT - MENU_EDGE_MARGIN,
+ );
+ setMenuPosition({ top, left });
+ setIsMenuOpen(true);
+ };
+
+ const clearLongPressTimer = () => {
+ if (longPressTimer.current) {
+ clearTimeout(longPressTimer.current);
+ longPressTimer.current = null;
+ }
+ };
+
+ const handleContextMenu = (e: ReactMouseEvent) => {
+ e.preventDefault();
+ openMenuAt(e.clientX, e.clientY);
+ };
+
+ const handleTouchStart = (e: ReactTouchEvent) => {
+ const touch = e.touches[0];
+ clearLongPressTimer();
+ longPressTimer.current = setTimeout(() => {
+ openMenuAt(touch.clientX, touch.clientY);
+ }, LONG_PRESS_MS);
+ };
+
+ return (
+ = {
+ 남성: "MALE",
+ 여성: "FEMALE",
+};
+
+const GENDER_EN_TO_KO: Record<"MALE" | "FEMALE", "남성" | "여성"> = {
+ MALE: "남성",
+ FEMALE: "여성",
+};
+
+// 명단 추가/수정 payload: 서버는 gender를 한글("남성"/"여성")로만 받는다.
+export const toGameBoardMemberPayload = (player: {
+ name: string;
+ gender: "MALE" | "FEMALE";
+ level: string;
+ ageGroup?: string;
+}): GameBoardMemberPayload => ({
+ name: player.name,
+ gender: GENDER_EN_TO_KO[player.gender],
+ level: player.level,
+ ageGroup: player.ageGroup || undefined,
+});
+
+// 노출 조건 (판정 우선순위): 경기중 > 대기열 포함 > 운동 불참 > 뱃지 없음. 한 번에 하나만 노출한다.
+export const toGameMember = (m: GameBoardMember): GameMember => {
+ const tags: GameMember["tags"] = m.inGame
+ ? ["운동"]
+ : m.waiting
+ ? ["대기"]
+ : !m.participating
+ ? ["미참"]
+ : [];
+
+ return {
+ id: m.gameBoardMemberId,
+ name: m.name,
+ gender: GENDER_KO_TO_EN[m.gender],
+ ageGroup: m.ageGroup,
+ group: m.level,
+ playCount: m.gameCount,
+ tags: [...tags],
+ imgUrl: m.profileImageUrl,
+ selectable: m.participating,
+ };
+};
+
+export interface GameBoardMemberFilters {
+ levels: string[]; // 한글 급수 라벨, 다중 선택
+ gender: string | null; // "전체" | "남성" | "여성"
+ shuttle: string | null; // "제출함" | "미제출" | null
+}
+
+// level/gender는 한글 표시값을 그대로 API 쿼리에 전달한다 (명단조회 API 스펙).
+export const toGameBoardMembersParams = (
+ filters: GameBoardMemberFilters,
+): GetGameBoardMembersParams => ({
+ level: filters.levels.length ? filters.levels : undefined,
+ gender:
+ filters.gender === "남성" || filters.gender === "여성"
+ ? filters.gender
+ : undefined,
+ shuttlecockSubmitted:
+ filters.shuttle === "제출함"
+ ? true
+ : filters.shuttle === "미제출"
+ ? false
+ : undefined,
+});
diff --git a/src/pages/group/MyGroupDetail/GameBoard/mockGameBoardData.ts b/src/pages/group/MyGroupDetail/GameBoard/mockGameBoardData.ts
new file mode 100644
index 00000000..efd404d1
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/mockGameBoardData.ts
@@ -0,0 +1,50 @@
+export interface GamePlayer {
+ id: number;
+ name: string;
+ group: string;
+ color: "pink" | "blue";
+}
+
+export interface CourtGroup {
+ id: number; // courtId
+ label: string;
+ gameId?: number; // 진행중인 게임 id (완료/대기이동 액션에 필요)
+ timer?: string; // startedAt으로부터 계산된 표시용 "MM:SS"
+ startedAt?: string; // 스톱워치 기준 시각
+ players: GamePlayer[] | null; // null → 빈 코트
+}
+
+export interface WaitingGroup {
+ id: number;
+ gameId: number; // 대기중인 게임 id (삭제/시작 액션에 필요)
+ label: string;
+ players: GamePlayer[];
+ memberIds: number[];
+}
+
+export type MemberTag = "운동" | "대기" | "미참";
+
+export interface GameMember {
+ id: number;
+ name: string;
+ gender: "MALE" | "FEMALE";
+ ageGroup: string;
+ group: string;
+ playCount: number;
+ tags: MemberTag[];
+ imgUrl?: string | null;
+ selectable: boolean;
+}
+
+// 직전 경기: 가장 최근에 함께 뛴 조합 / 첫 경기: 한 번도 함께 뛴 적 없는 조합 / 이전 경기: 그 외 함께 뛴 적 있는 조합
+export type MatchupType = "recent" | "first" | "previous";
+
+export interface MatchupInfo {
+ count: number;
+ type: MatchupType;
+}
+
+export const getMatchupKey = (memberIdA: number, memberIdB: number) =>
+ memberIdA < memberIdB
+ ? `${memberIdA}-${memberIdB}`
+ : `${memberIdB}-${memberIdA}`;
diff --git a/src/pages/group/MyGroupDetail/GameFinishedTab.tsx b/src/pages/group/MyGroupDetail/GameFinishedTab.tsx
new file mode 100644
index 00000000..72406026
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameFinishedTab.tsx
@@ -0,0 +1,164 @@
+import React, { useState, useMemo } from "react";
+import { useGetCompletedGames } from "../../../api/game/game";
+
+export interface PlayerInfo {
+ name: string;
+ tag: string;
+ team?: "A" | "B";
+}
+
+export interface MatchInfo {
+ id: number;
+ duration: string;
+ endTime: string;
+ teamA: PlayerInfo[];
+ teamB: PlayerInfo[];
+}
+
+interface GameFinishedTabProps {
+ exerciseId: number;
+}
+
+export const GameFinishedTab = ({ exerciseId }: GameFinishedTabProps) => {
+ const [courtNo, setCourtNo] = useState(1);
+
+ const { data, fetchNextPage, hasNextPage, isLoading } = useGetCompletedGames(
+ exerciseId,
+ courtNo
+ );
+
+ const matches: MatchInfo[] = useMemo(() => {
+ if (!data) return [];
+
+ return data.pages.flatMap((page) =>
+ page.games.map((game) => {
+ const teamA = game.players.filter(p => p.team === "A");
+ const teamB = game.players.filter(p => p.team === "B");
+
+ const finalTeamA = teamA.length > 0 ? teamA : game.players.slice(0, Math.ceil(game.players.length / 2));
+ const finalTeamB = teamB.length > 0 ? teamB : game.players.slice(Math.ceil(game.players.length / 2));
+
+ return {
+ id: game.gameId,
+ duration: `${game.durationMin}분`,
+ endTime: "완료",
+ teamA: finalTeamA.map(p => ({ name: p.name, tag: p.tag })),
+ teamB: finalTeamB.map(p => ({ name: p.name, tag: p.tag }))
+ };
+ })
+ );
+ }, [data]);
+
+ const handlePrevCourt = () => {
+ if (courtNo > 1) setCourtNo((prev) => prev - 1);
+ };
+
+ const handleNextCourt = () => {
+ setCourtNo((prev) => prev + 1);
+ };
+
+ const scrollRef = React.useRef(null);
+ const [isDragging, setIsDragging] = useState(false);
+ const [startY, setStartY] = useState(0);
+ const [scrollTop, setScrollTop] = useState(0);
+
+ const onMouseDown = (e: React.MouseEvent) => {
+ if (!scrollRef.current) return;
+ setIsDragging(true);
+ setStartY(e.pageY - scrollRef.current.offsetTop);
+ setScrollTop(scrollRef.current.scrollTop);
+ };
+
+ const onMouseLeave = () => setIsDragging(false);
+ const onMouseUp = () => setIsDragging(false);
+
+ const onMouseMove = (e: React.MouseEvent) => {
+ if (!isDragging || !scrollRef.current) return;
+ e.preventDefault();
+ const y = e.pageY - scrollRef.current.offsetTop;
+ const walk = (y - startY) * 1.5; // 스크롤 민감도
+ scrollRef.current.scrollTop = scrollTop - walk;
+ };
+
+ return (
+ (null);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [selectMode, setSelectMode] = useState(false);
+
+
+
+ const handleAppointClick = (member: MemberProps) => {
+ if (member.isManager) {
+ // 이미 지정된 경우 취소하거나 무시
+ return;
+ }
+ setSelectedMember(member);
+ setIsModalOpen(true);
+ };
+
+ const handleConfirmAppoint = async () => {
+ if (!selectedMember || selectedMember.participantId === undefined) return;
+
+ try {
+ await changeGameHost(exerciseIdNumber, selectedMember.participantId);
+ queryClient.invalidateQueries({
+ queryKey: ["gameHostCandidates", exerciseIdNumber],
+ });
+
+ setIsModalOpen(false);
+ setSelectMode(false);
+ alert("게임 진행자가 변경되었습니다.");
+
+ } catch (error: any) {
+ alert(error?.message || "게임 진행자 변경에 실패했습니다.");
+ }
+ };
+
+ // 검색 기능
+ const handleSearchChange = (e: React.ChangeEvent) => {
+ setSearchTerm(e.target.value);
+ };
+
+ const filteredMembers = members.filter((member) => {
+ const term = searchTerm.toLowerCase();
+ if (!term) return true;
+ return (
+ member.name?.toLowerCase().includes(term) ||
+ member.level?.toLowerCase().includes(term)
+ );
+ });
+
+
+ return (
+ (null);
- const [members, setMembers] = useState([]);
+ const [detail, setDetail] = useState({
+ notice: "API 에러(CORS/Network)로 인해 출력된 임시 화면입니다.",
+ placeName: "테스트 체육관 코트",
+ placeAddress: "서울특별시 강남구 테헤란로 123",
+ participantGenderCount: { male: 2, female: 2 },
+ participantsCount: 4,
+ isManager: true,
+ participantMembers: [],
+ waitingMembers: [],
+ waitingGenderCount: { male: 0, female: 0 },
+ } as any);
+ const [members, setMembers] = useState([
+ {
+ participantId: 1,
+ memberId: 1,
+ status: "Participating",
+ name: "김셰익스피어",
+ gender: "MALE",
+ level: "A조",
+ isMe: true,
+ isLeader: true,
+ position: "leader",
+ imgUrl: null,
+ canCancel: true,
+ isGuest: false,
+ inviterName: "",
+ isWithdrawn: false,
+ }
+ ]);
// const [participantsCount, setParticipantsCount] = useState(0);
const [waitingMembers, setWaitingMembers] = useState([]);
@@ -51,6 +81,28 @@ export const MyExerciseDetail = () => {
const [isWithdrawnModal, setIsWithdrawnModal] = useState(false);
+ const location = window.location;
+ type TabType = "detail" | "game" | "finished";
+ const [activeTab, setActiveTab] = useState(() => {
+ if (location.pathname.includes("/EndGame")) return "finished";
+ return "detail";
+ });
+ const tabOptions = [
+ { label: "운동 상세", value: "detail" },
+ { label: "게임판", value: "game" },
+ { label: "게임 완료", value: "finished" },
+ ];
+
+ const handleTabChange = (value: TabType) => {
+ setActiveTab(value);
+ const returnPathQuery = returnPath !== -1 ? `?returnPath=${returnPath}` : "";
+ if (value === "finished") {
+ window.history.replaceState(null, "", `/Group/MyGroup/Detail/Exercise_Detail/EndGame/${exerciseIdNumber}${returnPathQuery}`);
+ } else {
+ window.history.replaceState(null, "", `/group/Mygroup/MyExerciseDetail/${exerciseIdNumber}${returnPathQuery}`);
+ }
+ };
+
// 운동 상세 조회
useEffect(() => {
if (exerciseIdNumber) {
@@ -73,8 +125,8 @@ export const MyExerciseDetail = () => {
p.position === "PARTY_MANAGER",
position:
p.position === "OWNER" ||
- p.position === "MANAGER" ||
- p.position === "PARTY_MANAGER"
+ p.position === "MANAGER" ||
+ p.position === "PARTY_MANAGER"
? "leader"
: p.position === "SUBOWNER" || p.position === "PARTY_SUBMANAGER"
? "sub_leader"
@@ -162,138 +214,77 @@ export const MyExerciseDetail = () => {
}}
/>
-
{errorMsg && (
{
currentCount={exercise.currentParticipants}
totalCount={exercise.maxCapacity}
like={exercise.isBookmarked}
- onToggleFavorite={id => console.log(`Toggled favorite: ${id}`)}
/>
))
diff --git a/src/pages/group/MyGroupDetail/GameBoard/CourtCard.tsx b/src/pages/group/MyGroupDetail/GameBoard/CourtCard.tsx
new file mode 100644
index 00000000..fc522b5e
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/CourtCard.tsx
@@ -0,0 +1,416 @@
+import {
+ useEffect,
+ useLayoutEffect,
+ useRef,
+ useState,
+ type MouseEvent as ReactMouseEvent,
+ type TouchEvent as ReactTouchEvent,
+} from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { useDraggable, useDroppable } from "@dnd-kit/core";
+import Pen from "@/assets/icons/pen.svg";
+import Reject from "@/assets/icons/reject.svg";
+import type { GamePlayer } from "./mockGameBoardData";
+
+export const courtDroppableId = (courtId: number) => `court-${courtId}`;
+export const waitingDraggableId = (waitingGroupId: number) =>
+ `waiting-${waitingGroupId}`;
+
+// 대기/코트 뱃지에서는 "급수 없음"을 "없음"으로만 표기한다.
+const formatBadgeGroup = (group: string) =>
+ group.replace(/^급수\s*없음$/, "없음");
+
+export const PlayerBadge = ({ name, group, color }: GamePlayer) => (
+ {errorMsg}
)} -
+
+ {name}
+
+
+ {formatBadgeGroup(group)}
+
+
+);
+
+interface CourtCardProps {
+ courtId: number;
+ label: string;
+ timer?: string;
+ players: GamePlayer[] | null;
+ onComplete?: () => void;
+ onReturnToWaiting?: () => void;
+ onCancelGame?: () => void;
+}
+
+export const CourtCard = ({
+ courtId,
+ label,
+ timer,
+ players,
+ onComplete,
+ onReturnToWaiting,
+ onCancelGame,
+}: CourtCardProps) => {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+ const cardRef = useRef
+
+ );
+ }
+
+ return (
+
+ {label}
+
+
+ 빈 코트
+
+ {
+ cardRef.current = node;
+ setDropRef(node);
+ }}
+ className={clsx(
+ "flex w-[12.5rem] shrink-0 cursor-pointer flex-col gap-2 rounded-2xl bg-white p-2 shadow-ds100 transition-colors",
+ isOver && "ring-2 ring-gr-500",
+ )}
+ onClick={() => {
+ if (suppressNextClick.current) {
+ suppressNextClick.current = false;
+ return;
+ }
+ onReturnToWaiting?.();
+ }}
+ onContextMenu={handleContextMenu}
+ onTouchStart={handleTouchStart}
+ onTouchEnd={clearLongPressTimer}
+ onTouchMove={clearLongPressTimer}
+ >
+
+ );
+};
+
+interface WaitingCardProps {
+ waitingGroupId: number;
+ label: string;
+ players: GamePlayer[];
+ courts: { id: number; label: string }[];
+ onMoveToCourt?: (courtId: number) => void;
+ onChange?: () => void;
+ onReject?: () => void;
+}
+
+const LONG_PRESS_MS = 600;
+const MENU_WIDTH = 149;
+const MENU_HEIGHT = 84;
+const MENU_EDGE_MARGIN = 8;
+
+const clampMenuPosition = (
+ x: number,
+ y: number,
+ width: number,
+ height: number,
+) => ({
+ left: Math.min(
+ Math.max(x - width, MENU_EDGE_MARGIN),
+ window.innerWidth - width - MENU_EDGE_MARGIN,
+ ),
+ top: Math.min(
+ Math.max(y, MENU_EDGE_MARGIN),
+ window.innerHeight - height - MENU_EDGE_MARGIN,
+ ),
+});
+
+export const WaitingCard = ({
+ waitingGroupId,
+ label,
+ players,
+ courts,
+ onMoveToCourt,
+ onChange,
+ onReject,
+}: WaitingCardProps) => {
+ const {
+ attributes: dragAttributes,
+ listeners: dragListeners,
+ setNodeRef: setDragRef,
+ isDragging,
+ } = useDraggable({ id: waitingDraggableId(waitingGroupId) });
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+ const [clickPoint, setClickPoint] = useState<{ x: number; y: number } | null>(
+ null,
+ );
+ const cardRef = useRef
+
+
+ {label}
+ {timer && {timer}}
+
+
+
+ {players.map(p => (
+
+
+ {isMenuOpen &&
+ createPortal(
+ e.stopPropagation()}
+ >
+
+
+
+
,
+ document.body,
+ )}
+ {
+ cardRef.current = node;
+ setDragRef(node);
+ }}
+ className={clsx(
+ "flex w-[12.5rem] shrink-0 touch-pan-x flex-col gap-2 rounded-2xl bg-white p-2 shadow-ds100",
+ isDragging && "opacity-40",
+ )}
+ onContextMenu={handleContextMenu}
+ onTouchStart={handleTouchStart}
+ onTouchEnd={clearLongPressTimer}
+ onTouchMove={clearLongPressTimer}
+ {...dragAttributes}
+ {...dragListeners}
+ >
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/CourtManageBottomSheet.tsx b/src/pages/group/MyGroupDetail/GameBoard/CourtManageBottomSheet.tsx
new file mode 100644
index 00000000..4d871c3f
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/CourtManageBottomSheet.tsx
@@ -0,0 +1,139 @@
+import { useState } from "react";
+import clsx from "clsx";
+import Dismiss from "@/assets/icons/dismiss.svg";
+import Add from "@/assets/icons/add.svg";
+import { useLockBodyScroll } from "@/hooks/useLockBodyScroll";
+import GR400_L from "@/components/common/Btn_Static/Text/GR400_L";
+import GR400_M from "@/components/common/Btn_Static/Text/GR400_M";
+
+export interface CourtManageItem {
+ courtId?: number; // 있으면 기존 코트(이름 변경), 없으면 신규 생성
+ courtName: string;
+}
+
+interface CourtManageBottomSheetProps {
+ variant?: "sheet" | "overlay";
+ courts: CourtManageItem[];
+ onClose: () => void;
+ onSave: (courts: CourtManageItem[]) => void;
+}
+
+export const CourtManageBottomSheet = ({
+ variant = "sheet",
+ courts,
+ onClose,
+ onSave,
+}: CourtManageBottomSheetProps) => {
+ useLockBodyScroll(true);
+ const [items, setItems] = useState
+ {label}
+
+
+
+
+
+
+ {players.map(p => (
+
+
+ {isMenuOpen &&
+ createPortal(
+
+ {courts.map((court, index) => (
+
,
+ document.body,
+ )}
+
+ {index > 0 && }
+
+
+ ))}
+
+
+
+
+ {items.map((item, index) => (
+
+
+
+
+ {item.courtName}
+
+ {index !== 0 && (
+
+ )}
+
+ ))}
+
+
+ setNewLabel(e.target.value)}
+ onFocus={() => setIsNewLabelFocused(true)}
+ onBlur={() => setIsNewLabelFocused(false)}
+ onKeyDown={e => {
+ if (e.key === "Enter") {
+ e.preventDefault();
+ handleAdd();
+ }
+ }}
+ className={clsx(
+ "w-full rounded-xl border px-3 py-2.5 body-md-500 text-black outline-none",
+ isNewLabelFocused ? "border-[#87c95e]" : "border-gy-200",
+ )}
+ />
+
+
+
+ {isOverlay ? (
+
+
+ );
+
+ if (isOverlay) {
+ return (
+
+
+ );
+ }
+
+ return (
+ e.stopPropagation()}
+ >
+ {content}
+
+
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameAddPlayerModal.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameAddPlayerModal.tsx
new file mode 100644
index 00000000..a6cbea92
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameAddPlayerModal.tsx
@@ -0,0 +1,143 @@
+import { useState } from "react";
+import { PageHeader } from "@/components/common/system/header/PageHeader";
+import InputField from "@/components/common/Search_Filed/InputField";
+import TextBox from "@/components/common/Text_Box/TextBox";
+import DropCheckBox from "@/components/common/Drop_Box/DropCheckBox";
+import { DropBox } from "@/components/common/DropBox";
+import Grad_GR400_L from "@/components/common/Btn_Static/Text/Grad_GR400_L";
+import GR400_M from "@/components/common/Btn_Static/Text/GR400_M";
+import Circle_RedIcon from "@/assets/icons/cicle_s_red.svg?url";
+import { LEVEL_KEY } from "@/constants/options";
+import { useLockBodyScroll } from "@/hooks/useLockBodyScroll";
+
+const AGE_OPTIONS = ["10대", "20대", "30대", "40대", "50대", "60대 이상"];
+
+export interface NewGamePlayer {
+ name: string;
+ gender: "MALE" | "FEMALE";
+ level: string;
+ ageGroup: string;
+}
+
+interface GameAddPlayerModalProps {
+ variant?: "sheet" | "overlay";
+ onClose: () => void;
+ onSubmit: (player: NewGamePlayer) => void;
+}
+
+export const GameAddPlayerModal = ({
+ variant = "sheet",
+ onClose,
+ onSubmit,
+}: GameAddPlayerModalProps) => {
+ useLockBodyScroll(true);
+ const [name, setName] = useState("");
+ const [gender, setGender] = useState<"MALE" | "FEMALE" | null>(null);
+ const [level, setLevel] = useState("");
+ const [ageGroup, setAgeGroup] = useState("");
+
+ const levelOptions = LEVEL_KEY.slice(1);
+ const isLevelValid = level === "disabled" || levelOptions.includes(level);
+ const isFormValid = name.trim().length > 0 && gender !== null && isLevelValid;
+
+ const handleSubmit = () => {
+ if (!isFormValid || gender === null) return;
+ onSubmit({
+ name: name.trim(),
+ gender,
+ level: level === "disabled" ? "급수없음" : level,
+ ageGroup,
+ });
+ };
+
+ const fields = (
+ <>
+ e.stopPropagation()}
+ >
+ {content}
+
+
+
+
+
+ 성별
+ 
+
+
+ setGender(prev => (prev === "MALE" ? null : "MALE"))}
+ className="w-19"
+ >
+ 남성
+
+
+ setGender(prev => (prev === "FEMALE" ? null : "FEMALE"))
+ }
+ className="w-19"
+ >
+ 여성
+
+
+
+ 나이대
+ ({ value }))}
+ value={ageGroup}
+ onChange={setAgeGroup}
+ />
+
+
+ );
+
+ if (variant === "overlay") {
+ return (
+
+
+ );
+ }
+
+ return (
+ e.stopPropagation()}
+ >
+ 명단 추가
+
+ {fields}
+
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameBoardTab.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameBoardTab.tsx
new file mode 100644
index 00000000..5ce64273
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameBoardTab.tsx
@@ -0,0 +1,741 @@
+import { useEffect, useState } from "react";
+import clsx from "clsx";
+import {
+ DndContext,
+ DragOverlay,
+ PointerSensor,
+ useSensor,
+ useSensors,
+ type DragEndEvent,
+ type DragStartEvent,
+} from "@dnd-kit/core";
+import AddWhite from "@/assets/icons/add_white.svg";
+import Sparkle from "@/assets/icons/sparkle_filled.svg";
+import Dismiss from "@/assets/icons/dismiss.svg";
+import FilterBtn from "@/components/common/DynamicBtn/FilterBtn";
+import { getGameBoard, type GameBoardResponse } from "@/api/game/board";
+import {
+ createGameBoardMember,
+ getGameBoardMembers,
+ updateGameBoardMember,
+ updateGameBoardMemberParticipation,
+ type GameBoardMember,
+} from "@/api/game/members";
+import { updateCourts } from "@/api/game/courts";
+import { postRandomMatch } from "@/api/game/randomMatch";
+import { useGameWs } from "@/hooks/useGameWs";
+import {
+ CourtCard,
+ WaitingCard,
+ PlayerBadge,
+ courtDroppableId,
+ waitingDraggableId,
+} from "./CourtCard";
+import { GameMemberCard } from "./GameMemberCard";
+import {
+ type CourtGroup,
+ type GameMember,
+ type WaitingGroup,
+} from "./mockGameBoardData";
+import { GameAddPlayerModal } from "./GameAddPlayerModal";
+import {
+ GameEditPlayerModal,
+ type EditedGamePlayer,
+} from "./GameEditPlayerModal";
+import { GameBoardWebView } from "./GameBoardWebView";
+import { GameBoardTabSkeleton } from "./GameBoardTabSkeleton";
+import { GameRandomMatchFailModal } from "./GameRandomMatchFailModal";
+import {
+ CourtManageBottomSheet,
+ type CourtManageItem,
+} from "./CourtManageBottomSheet";
+import { GameFilterPage } from "./GameFilterPage";
+import { GameEndModal } from "./GameEndModal";
+import { GameDuplicateCheckModal } from "./GameDuplicateCheckModal";
+import {
+ formatElapsed,
+ toBoardViewModel,
+ toGameBoardMemberPayload,
+ toGameBoardMembersParams,
+ toGameMember,
+ type GameBoardMemberFilters,
+} from "./gameBoardAdapter";
+
+const MAX_SELECTED_MEMBERS = 4;
+
+interface GameBoardTabProps {
+ gameBoardId: number;
+ isManager: boolean;
+}
+
+export const GameBoardTab = ({ gameBoardId, isManager }: GameBoardTabProps) => {
+ const [isLoading, setIsLoading] = useState(true);
+ const [selectedIds, setSelectedIds] = useState{fields}
+
+
+
+
+ {/* 게임 코트 */}
+ setIsDuplicateCheckOpen(true)}
+ onAutoMatch={handleAutoMatch}
+ members={members}
+ selectedIds={selectedIds}
+ toggleSelect={toggleSelect}
+ onToggleParticipation={handleToggleParticipation}
+ onEditMember={setEditingMemberId}
+ onAddPlayer={() => setIsAddPlayerOpen(true)}
+ onManageCourts={() => setCourtManageVariant("overlay")}
+ onOpenFilter={() => setIsFilterOpen(true)}
+ onClose={() => setIsWebViewOpen(false)}
+ />
+ )}
+
+ {isAddPlayerOpen && (
+ setIsAddPlayerOpen(false)}
+ onSubmit={handleAddPlayer}
+ />
+ )}
+
+ {editingMember && (
+ setEditingMemberId(null)}
+ onSubmit={handleSaveMemberEdit}
+ />
+ )}
+
+ {courtManageVariant && (
+ ({ courtId: c.id, courtName: c.label }))}
+ onClose={() => setCourtManageVariant(null)}
+ onSave={handleSaveCourts}
+ />
+ )}
+
+ {isFilterOpen && (
+ setIsFilterOpen(false)}
+ />
+ )}
+
+ {completingCourtId !== null && (
+ setCompletingCourtId(null)}
+ onConfirm={() => handleCompleteCourt(completingCourtId)}
+ />
+ )}
+
+ {isRandomMatchFailOpen && (
+ setIsRandomMatchFailOpen(false)}
+ />
+ )}
+
+ {isDuplicateCheckOpen && (
+ setIsDuplicateCheckOpen(false)}
+ onConfirm={() => {
+ handleAddToWaitingQueue();
+ setIsDuplicateCheckOpen(false);
+ }}
+ />
+ )}
+
+
+
+
+ {/* 대기 */}
+
+ 게임 코트
+ {isManager && (
+
+
+
+
+
+ )}
+
+
+
+
+
+ {courts.map(court => (
+ setCompletingCourtId(court.id)}
+ onReturnToWaiting={() => handleReturnToWaiting(court.id)}
+ onCancelGame={() => handleCancelCourtGame(court.id)}
+ />
+ ))}
+
+
+
+
+ {/* 명단 */}
+
+ 대기
+
+ {waitingGroups.length === 0 ? (
+
+
+ 대기중인 팀이 없어요
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {waitingGroups.map(group => (
+
+ handleMoveToCourt(group.id, courtId)
+ }
+ onChange={() => handleChangeWaitingGroup(group)}
+ onReject={() => handleRemoveWaitingGroup(group.id)}
+ />
+ ))}
+
+
+
+
+ {/* 하단 선택 바 */}
+ {isManager && (
+
+ 명단
+ {isManager && (
+
+ )}
+
+
+
+ 전체 {members.length}
+
+ setIsFilterOpen(true)}
+ >
+ 필터
+
+
+
+ {members.map(member => (
+ toggleSelect(member.id)}
+ onEditInfo={() => setEditingMemberId(member.id)}
+ onToggleParticipation={() =>
+ handleToggleParticipation(member.id)
+ }
+ />
+ ))}
+
+
+ {selectedMembers.length > 0 && (
+
+ )}
+
+ {isWebViewOpen && (
+
+ {selectedMembers.map((m, i) => (
+
+ ))}
+
+ )}
+
+
+
+
+ {selectedIds.length}
+
+ 선택됨
+
+
+ {selectedIds.length > 0 ? (
+
+ ) : (
+
+ )}
+
+
+ {activeDragGroup.label}
+
+
+ ) : null}
+
+ {activeDragGroup.players.map(p => (
+
+
+
+);
+
+// 대기 카드 한 장
+const WaitingCardSkeleton = () => (
+
+
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+
+);
+
+// 명단 멤버 카드 한 장
+const MemberCardSkeleton = () => (
+
+
+
+
+
+ {Array.from({ length: 4 }).map((_, i) => (
+
+
+
+);
+
+export const GameBoardTabSkeleton = () => (
+
+
+
+
+
+
+
+ {/* 게임 코트 */}
+
+);
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameBoardWebView.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameBoardWebView.tsx
new file mode 100644
index 00000000..5489a75c
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameBoardWebView.tsx
@@ -0,0 +1,234 @@
+import { useState } from "react";
+import clsx from "clsx";
+import { DndContext } from "@dnd-kit/core";
+import AddWhite from "@/assets/icons/add_white.svg";
+import Sparkle from "@/assets/icons/sparkle_filled.svg";
+import Dismiss from "@/assets/icons/dismiss.svg";
+import ArrowLeft from "@/assets/icons/arrow_left.svg";
+import Filter from "@/assets/icons/filter.svg";
+import { CourtCard, WaitingCard } from "./CourtCard";
+import { GameMemberCard } from "./GameMemberCard";
+import { GameEndModal } from "./GameEndModal";
+import {
+ type CourtGroup,
+ type GameMember,
+ type WaitingGroup,
+} from "./mockGameBoardData";
+
+interface GameBoardWebViewProps {
+ courts: CourtGroup[];
+ onCompleteCourt: (courtId: number) => void;
+ waitingGroups: WaitingGroup[];
+ onRemoveWaitingGroup: (id: number) => void;
+ onMoveToCourt: (waitingGroupId: number, courtId: number) => void;
+ onChangeWaitingGroup: (group: WaitingGroup) => void;
+ onAddToWaitingQueue: () => void;
+ onAutoMatch: () => void;
+ members: GameMember[];
+ selectedIds: number[];
+ toggleSelect: (id: number) => void;
+ onToggleParticipation: (id: number) => void;
+ onEditMember: (id: number) => void;
+ onAddPlayer: () => void;
+ onManageCourts: () => void;
+ onOpenFilter: () => void;
+ onClose: () => void;
+}
+
+export const GameBoardWebView = ({
+ courts,
+ onCompleteCourt,
+ waitingGroups,
+ onRemoveWaitingGroup,
+ onMoveToCourt,
+ onChangeWaitingGroup,
+ onAddToWaitingQueue,
+ onAutoMatch,
+ members,
+ selectedIds,
+ toggleSelect,
+ onToggleParticipation,
+ onEditMember,
+ onAddPlayer,
+ onManageCourts,
+ onOpenFilter,
+ onClose,
+}: GameBoardWebViewProps) => {
+ const selectedMembers = members.filter(m => selectedIds.includes(m.id));
+ const [completingCourtId, setCompletingCourtId] = useState
+
+
+ {/* 대기 */}
+
+
+
+
+
+
+
+ {Array.from({ length: 2 }).map((_, i) => (
+
+
+
+
+ {/* 명단 */}
+
+
+
+ {Array.from({ length: 2 }).map((_, i) => (
+
+
+
+
+
+
+
+
+ {Array.from({ length: 6 }).map((_, i) => (
+
+
+ setCompletingCourtId(null)}
+ onConfirm={() => {
+ onCompleteCourt(completingCourtId);
+ setCompletingCourtId(null);
+ }}
+ />
+ )}
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameDuplicateCheckModal.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameDuplicateCheckModal.tsx
new file mode 100644
index 00000000..19af93a9
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameDuplicateCheckModal.tsx
@@ -0,0 +1,387 @@
+import { useEffect, useState } from "react";
+import DefaultProfile from "@/assets/images/base_profile_img.png";
+import GR400_L from "@/components/common/Btn_Static/Text/GR400_L";
+import GR400_M from "@/components/common/Btn_Static/Text/GR400_M";
+import { useLockBodyScroll } from "@/hooks/useLockBodyScroll";
+import { getGameDuplicateCheck } from "@/api/game/duplicateCheck";
+import {
+ getMatchupKey,
+ type GameMember,
+ type MatchupInfo,
+ type MatchupType,
+} from "./mockGameBoardData";
+
+const LEGEND_ITEMS: {
+ type: MatchupType;
+ label: string;
+ dotClass: string;
+ textClass: string;
+}[] = [
+ {
+ type: "recent",
+ label: "직전 경기",
+ dotClass: "bg-rd-500",
+ textClass: "text-rd-500",
+ },
+ {
+ type: "first",
+ label: "첫 경기",
+ dotClass: "bg-gy-500",
+ textClass: "text-gy-700",
+ },
+ {
+ type: "previous",
+ label: "이전 경기",
+ dotClass: "bg-gr-700",
+ textClass: "text-gr-700",
+ },
+];
+
+const MATCHUP_BADGE_STYLE: Record
+
+ 게임판
+
+
+
+
+ {/* 게임 코트 */}
+
+
+ {/* 명단 */}
+
+
+ {completingCourtId !== null && (
+
+
+
+ {/* 대기 */}
+
+ 게임 코트
+
+
+
+
+
+
+
+ {courts.map(court => (
+ setCompletingCourtId(court.id)}
+ />
+ ))}
+
+
+
+
+ 대기
+
+ {waitingGroups.length === 0 ? (
+
+
+ 대기중인 팀이 없어요
+
+
+ ) : (
+
+
+ )}
+
+
+
+ {waitingGroups.map(group => (
+
+ onMoveToCourt(group.id, courtId)
+ }
+ onChange={() => onChangeWaitingGroup(group)}
+ onReject={() => onRemoveWaitingGroup(group.id)}
+ />
+ ))}
+
+
+
+
+
+
+
+ 명단
+
+
+
+
+
+ {selectedMembers.length > 0 && (
+
+
+ {selectedMembers.map((m, i) => (
+
+ ))}
+
+ )}
+
+
+ {selectedIds.length}
+
+ 선택됨
+
+
+
+
+ {members.map(member => (
+ toggleSelect(member.id)}
+ onEditInfo={() => onEditMember(member.id)}
+ onToggleParticipation={() => onToggleParticipation(member.id)}
+ />
+ ))}
+
+
+ {info.count}
+
+);
+
+const Avatar = ({ member }: { member: GameMember }) => (
+
+);
+
+// 정확히 4명 선택 시, 4명이 이루는 다이아몬드 대진 관계(변 4개 + 대각선 2개 = 총 6쌍)를 그대로 시각화한다.
+const DiamondMatchup = ({
+ members,
+ matchups,
+}: {
+ members: GameMember[];
+ matchups: Map
+ {/* overflow-visible: 외곽 4개 선이 viewBox 경계(0/160)에 걸쳐 있어 기본 clip 시
+ stroke의 절반이 잘려 대각선보다 얇게 보이므로, 잘리지 않도록 노출한다. */}
+
+
+ {/* 노드는 아바타 폭(w-10)으로 고정해 그리드 꼭짓점(x=92/252)에 정확히 중앙 정렬한다.
+ 이름은 whitespace-nowrap으로 양옆 대칭 오버플로우시켜 아바타 위치에 영향을 주지 않게 한다. */}
+
+ );
+};
+
+// 4명이 아닌 인원수(1~3명, 5명 이상)에서는 다이아몬드 도형이 성립하지 않으므로,
+// 동일한 배지 색 규칙을 유지하는 쌍별 리스트로 대체한다.
+const PairListMatchup = ({
+ members,
+ matchups,
+}: {
+ members: GameMember[];
+ matchups: Map
+
+ {topLeft.name}
+
+
+
+
+
+
+ {topRight.name}
+
+
+
+
+
+
+ 비교할 상대가 없어요.
+
+ );
+ }
+
+ return (
+
+ {pairs.map(([a, b]) => {
+ const info = matchups.get(getMatchupKey(a.id, b.id)) ?? {
+ count: 0,
+ type: "first" as const,
+ };
+ return (
+
+ );
+};
+
+interface GameDuplicateCheckModalProps {
+ variant?: "sheet" | "overlay";
+ gameBoardId: number;
+ members: GameMember[];
+ onClose: () => void;
+ onConfirm: () => void;
+}
+
+const deriveMatchupType = (
+ count: number,
+ playedInLastGame: boolean,
+): MatchupType =>
+ playedInLastGame ? "recent" : count === 0 ? "first" : "previous";
+
+export const GameDuplicateCheckModal = ({
+ variant = "sheet",
+ gameBoardId,
+ members,
+ onClose,
+ onConfirm,
+}: GameDuplicateCheckModalProps) => {
+ useLockBodyScroll(true);
+ const isOverlay = variant === "overlay";
+
+ const [matchups, setMatchups] = useState
+
+ );
+ })}
+
+
+ {a.name}
+
+
+
+
+
+ {b.name}
+
+
+
+
+
+ {matchups === null ? (
+
+ 이 조합, 얼마나 겹쳤을까요?
+
+ 선수들이 이전에 서로 경기한 횟수에요.
+
+
+
+ {LEGEND_ITEMS.map(item => (
+
+
+
+
+ {item.label}
+
+
+ ))}
+
+ 불러오는 중이에요...
+
+ ) : members.length === 4 ? (
+
+
+ );
+ }
+
+ return (
+ e.stopPropagation()}
+ >
+ {content}
+
+
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameEditPlayerModal.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameEditPlayerModal.tsx
new file mode 100644
index 00000000..55c9edf7
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameEditPlayerModal.tsx
@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { PageHeader } from "@/components/common/system/header/PageHeader";
+import InputField from "@/components/common/Search_Filed/InputField";
+import TextBox from "@/components/common/Text_Box/TextBox";
+import DropCheckBox from "@/components/common/Drop_Box/DropCheckBox";
+import { DropBox } from "@/components/common/DropBox";
+import Grad_GR400_L from "@/components/common/Btn_Static/Text/Grad_GR400_L";
+import GR400_M from "@/components/common/Btn_Static/Text/GR400_M";
+import Circle_RedIcon from "@/assets/icons/cicle_s_red.svg?url";
+import { LEVEL_KEY } from "@/constants/options";
+import { useLockBodyScroll } from "@/hooks/useLockBodyScroll";
+import type { GameMember } from "./mockGameBoardData";
+
+const AGE_OPTIONS = ["10대", "20대", "30대", "40대", "50대", "60대 이상"];
+
+export interface EditedGamePlayer {
+ name: string;
+ gender: "MALE" | "FEMALE";
+ level: string;
+ ageGroup: string;
+}
+
+interface GameEditPlayerModalProps {
+ variant?: "sheet" | "overlay";
+ member: GameMember;
+ onClose: () => void;
+ onSubmit: (player: EditedGamePlayer) => void;
+}
+
+export const GameEditPlayerModal = ({
+ variant = "sheet",
+ member,
+ onClose,
+ onSubmit,
+}: GameEditPlayerModalProps) => {
+ useLockBodyScroll(true);
+ const [name, setName] = useState(member.name);
+ const [gender, setGender] = useState<"MALE" | "FEMALE" | null>(
+ member.gender,
+ );
+ const [level, setLevel] = useState(
+ member.group === "급수없음" ? "disabled" : member.group,
+ );
+ const [ageGroup, setAgeGroup] = useState(member.ageGroup);
+
+ const levelOptions = LEVEL_KEY.slice(1);
+ const isLevelValid = level === "disabled" || levelOptions.includes(level);
+ const isFormValid = name.trim().length > 0 && gender !== null && isLevelValid;
+
+ const handleSubmit = () => {
+ if (!isFormValid || gender === null) return;
+ onSubmit({
+ name: name.trim(),
+ gender,
+ level: level === "disabled" ? "급수없음" : level,
+ ageGroup,
+ });
+ };
+
+ const fields = (
+ <>
+ e.stopPropagation()}
+ >
+ {content}
+
+
+
+
+
+ 성별
+
+
+
+ setGender(prev => (prev === "MALE" ? null : "MALE"))}
+ className="w-19"
+ >
+ 남성
+
+
+ setGender(prev => (prev === "FEMALE" ? null : "FEMALE"))
+ }
+ className="w-19"
+ >
+ 여성
+
+
+
+ 나이대
+ ({ value }))}
+ value={ageGroup}
+ onChange={setAgeGroup}
+ />
+
+
+ );
+
+ if (variant === "overlay") {
+ return (
+
+
+ );
+ }
+
+ return (
+ e.stopPropagation()}
+ >
+ 정보 수정
+
+ {fields}
+
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameEndModal.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameEndModal.tsx
new file mode 100644
index 00000000..bc720825
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameEndModal.tsx
@@ -0,0 +1,46 @@
+import Dismiss from "@/assets/icons/dismiss.svg";
+import ExerciseFilled from "@/assets/icons/Exercise_filled.svg";
+
+interface GameEndModalProps {
+ onClose: () => void;
+ onConfirm: () => void;
+}
+
+export const GameEndModal = ({ onClose, onConfirm }: GameEndModalProps) => (
+ {fields}
+
+
+
+
+
+);
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameFilterPage.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameFilterPage.tsx
new file mode 100644
index 00000000..cd472b75
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameFilterPage.tsx
@@ -0,0 +1,191 @@
+import { useState } from "react";
+import clsx from "clsx";
+import { PageHeader } from "@/components/common/system/header/PageHeader";
+import TextBox from "@/components/common/Text_Box/TextBox";
+import GR400_M from "@/components/common/Btn_Static/Text/GR400_M";
+import Refresh from "@/assets/icons/refresh.svg";
+import ArrowUp from "@/assets/icons/arrow_up.svg";
+import { LEVEL_KEY } from "@/constants/options";
+import { useLockBodyScroll } from "@/hooks/useLockBodyScroll";
+import type { GameBoardMemberFilters } from "./gameBoardAdapter";
+
+const LEVEL_OPTIONS = [...LEVEL_KEY, "급수없음"];
+const GENDER_OPTIONS = ["전체", "남성", "여성"];
+const SHUTTLE_OPTIONS = ["제출함", "미제출"];
+
+interface FilterToggleSectionProps {
+ title: string;
+ options: string[];
+ isSelected: (option: string) => boolean;
+ onSelect: (value: string) => void;
+}
+
+const FilterToggleSection = ({
+ title,
+ options,
+ isSelected,
+ onSelect,
+}: FilterToggleSectionProps) => {
+ const [isOpen, setIsOpen] = useState(true);
+
+ return (
+ e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+ 
+ 게임을 완료하시겠어요?
+
+ 완료한 게임은 '게임 완료' 탭에서 확인할 수 있어요.
+
+
+
+
+
+
+ );
+};
+
+interface GameFilterPageProps {
+ variant?: "sheet" | "overlay";
+ initialFilters: GameBoardMemberFilters;
+ onApply: (filters: GameBoardMemberFilters) => void;
+ onClose: () => void;
+}
+
+export const GameFilterPage = ({
+ variant = "sheet",
+ initialFilters,
+ onApply,
+ onClose,
+}: GameFilterPageProps) => {
+ useLockBodyScroll(true);
+ const [levels, setLevels] = useState
+ {title}
+
+
+ {isOpen && (
+
+ {options.map(option => (
+ onSelect(option)}
+ className="w-19"
+ >
+ {option}
+
+ ))}
+
+ )}
+
+
+ );
+ }
+
+ return (
+ e.stopPropagation()}
+ >
+ 필터
+
+ {sections}
+
+
+
+
+
+
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameMemberCard.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameMemberCard.tsx
new file mode 100644
index 00000000..658cd378
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameMemberCard.tsx
@@ -0,0 +1,233 @@
+import {
+ useEffect,
+ useRef,
+ useState,
+ type MouseEvent as ReactMouseEvent,
+ type TouchEvent as ReactTouchEvent,
+} from "react";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import DefaultProfile from "@/assets/images/base_profile_img.png";
+import Female from "@/assets/icons/female.svg";
+import Male from "@/assets/icons/male.svg";
+import CircleS from "@/assets/icons/circle_s.svg";
+import Exercise from "@/assets/icons/Exercise.svg";
+import ExerciseFilled from "@/assets/icons/Exercise_filled.svg";
+import type { GameMember, MemberTag } from "./mockGameBoardData";
+
+const TAG_STYLE: Record{sections}
+
+
+
+
+
+
+ {
+ if (suppressNextClick.current) {
+ suppressNextClick.current = false;
+ return;
+ }
+ if (selectable) onToggleSelect();
+ }}
+ onContextMenu={handleContextMenu}
+ onTouchStart={handleTouchStart}
+ onTouchEnd={clearLongPressTimer}
+ onTouchMove={clearLongPressTimer}
+ className={clsx(
+ "flex w-[10.3125rem] flex-col gap-2 rounded-2xl p-2 text-left",
+ selectable ? "cursor-pointer" : "cursor-default",
+ isWithdrawn
+ ? "bg-gy-100 opacity-50 shadow-ds100"
+ : selected
+ ? "bg-[#f1f9f3] shadow-ds200-gr"
+ : "bg-white shadow-ds100",
+ )}
+ >
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/GameBoard/GameRandomMatchFailModal.tsx b/src/pages/group/MyGroupDetail/GameBoard/GameRandomMatchFailModal.tsx
new file mode 100644
index 00000000..ce29da57
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/GameRandomMatchFailModal.tsx
@@ -0,0 +1,48 @@
+import Dismiss from "@/assets/icons/dismiss.svg";
+import EmojiSurprise from "@/assets/icons/emoji_surprise.svg";
+
+interface GameRandomMatchFailModalProps {
+ onClose: () => void;
+}
+
+// 랜덤(자동) 매칭 실패 시 노출되는 안내 모달
+export const GameRandomMatchFailModal = ({
+ onClose,
+}: GameRandomMatchFailModalProps) => (
+
+
+
+
+ {tags.map(tag => (
+
+ {tag}
+
+ ))}
+
+
+ {playCount}회
+
+
+ 
+ {name}
+
+
+
+ {name}
+
+ 
+
+
+
+ {isMenuOpen &&
+ createPortal(
+
+ {gender && (
+ 
+ )}
+ {group}
+ 
+
+ {ageGroup}
+
+
+ {
+ e.stopPropagation();
+ if (suppressNextClick.current) {
+ suppressNextClick.current = false;
+ return;
+ }
+ if (selectable) onToggleSelect();
+ }}
+ >
+ e.stopPropagation()}
+ >
+
+
+
+
,
+ document.body,
+ )}
+
+
+);
diff --git a/src/pages/group/MyGroupDetail/GameBoard/gameBoardAdapter.ts b/src/pages/group/MyGroupDetail/GameBoard/gameBoardAdapter.ts
new file mode 100644
index 00000000..6f03c59a
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameBoard/gameBoardAdapter.ts
@@ -0,0 +1,129 @@
+// 게임판 REST/WS 응답(GameBoardDTO 등)을 화면에서 쓰는 view model(CourtGroup/WaitingGroup/GameMember)로 변환한다.
+import type {
+ GameBoardCourt,
+ GameBoardPlayer,
+ GameBoardResponse,
+ GameBoardWaiting,
+} from "@/api/game/board";
+import type {
+ GameBoardMember,
+ GameBoardMemberPayload,
+ GetGameBoardMembersParams,
+} from "@/api/game/members";
+import type {
+ CourtGroup,
+ GameMember,
+ GamePlayer,
+ WaitingGroup,
+} from "./mockGameBoardData";
+
+// 서버가 타임존 표시 없이 UTC 시각을 내려줄 때, Date가 이를 로컬 시간으로 오인해
+// 9시간(한국 UTC+9)만큼 어긋나는 것을 막기 위해 명시적으로 UTC로 해석한다.
+const parseServerDate = (value: string) =>
+ new Date(/[Zz]|[+-]\d{2}:\d{2}$/.test(value) ? value : `${value}Z`);
+
+export const formatElapsed = (startedAt: string) => {
+ const ms = Date.now() - parseServerDate(startedAt).getTime();
+ const totalSec = Math.max(0, Math.floor(ms / 1000));
+ const mm = String(Math.floor(totalSec / 60)).padStart(2, "0");
+ const ss = String(totalSec % 60).padStart(2, "0");
+ return `${mm}:${ss}`;
+};
+
+const toGamePlayer = (p: GameBoardPlayer): GamePlayer => ({
+ id: p.gameBoardMemberId,
+ name: p.name,
+ group: p.level,
+ color: p.playerOrder % 2 === 0 ? "pink" : "blue",
+});
+
+export const toCourtGroup = (c: GameBoardCourt): CourtGroup => ({
+ id: c.courtId,
+ label: c.courtName,
+ gameId: c.game?.gameId,
+ startedAt: c.game?.startedAt,
+ timer: c.game ? formatElapsed(c.game.startedAt) : undefined,
+ players: c.game ? c.game.players.map(toGamePlayer) : null,
+});
+
+export const toWaitingGroup = (w: GameBoardWaiting): WaitingGroup => ({
+ id: w.gameId,
+ gameId: w.gameId,
+ label: `대기 ${w.waitingOrder}번`,
+ players: w.players.map(toGamePlayer),
+ memberIds: w.players.map(p => p.gameBoardMemberId),
+});
+
+export const toBoardViewModel = (board: GameBoardResponse) => ({
+ courts: board.courts.map(toCourtGroup),
+ waitingGroups: board.waitings.map(toWaitingGroup),
+});
+
+const GENDER_KO_TO_EN: Record e.stopPropagation()}
+ >
+
+
+
+
+
+
+
+ 
+ 매칭 실패
+
+ 매칭에 실패했습니다. 명단을 확인해주세요.
+
+
+
+
+
+ {/* 코트명 */}
+
+ );
+};
+
diff --git a/src/pages/group/MyGroupDetail/GameManagerPage.tsx b/src/pages/group/MyGroupDetail/GameManagerPage.tsx
new file mode 100644
index 00000000..f0ebd2b3
--- /dev/null
+++ b/src/pages/group/MyGroupDetail/GameManagerPage.tsx
@@ -0,0 +1,199 @@
+import { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
+import { PageHeader } from "../../../components/common/system/header/PageHeader";
+import { Member, type MemberProps } from "../../../components/common/contentcard/Member";
+import { changeGameHost, useGetGameHostCandidates } from "../../../api/game/game";
+import { useQueryClient } from "@tanstack/react-query";
+import DismissIcon from "../../../assets/icons/dismiss.svg?react";
+import Search from "../../../assets/icons/search.svg?react";
+import Grad_GR400_L from "../../../components/common/Btn_Static/Text/Grad_GR400_L";
+
+export const GameManagerPage = () => {
+ const navigate = useNavigate();
+ const { exerciseId } = useParams<{ exerciseId: string }>();
+ const exerciseIdNumber = Number(exerciseId);
+ const queryClient = useQueryClient();
+ const [searchTerm, setSearchTerm] = useState("");
+
+ const { data } = useGetGameHostCandidates(exerciseIdNumber);
+ const totalCount = data?.totalCount || 0;
+
+ const members: MemberProps[] = data?.participants.map(p => ({
+ participantId: p.participantId,
+ // memberId가 응답에 없으므로 일단 participantId로 임시 사용 또는 제외
+ memberId: p.participantId,
+ status: "Participating" as const,
+ name: p.name,
+ gender: p.gender as "MALE" | "FEMALE",
+ level: p.level,
+ lastExerciseDate: p.lastExerciseDate,
+ imgUrl: p.profileImageUrl,
+ // partyPosition: "모임장", "부모임장", "일반 회원" 등 한글 또는 영문 처리
+ isLeader: p.partyPosition === "OWNER" || p.partyPosition === "MANAGER" || p.partyPosition === "PARTY_MANAGER" || p.partyPosition === "모임장",
+ isManager: p.isGameHost,
+ position: p.partyPosition === "OWNER" || p.partyPosition === "MANAGER" || p.partyPosition === "PARTY_MANAGER" || p.partyPosition === "모임장"
+ ? "leader"
+ : p.partyPosition === "SUBOWNER" || p.partyPosition === "PARTY_SUBMANAGER" || p.partyPosition === "부모임장"
+ ? "sub_leader"
+ : null,
+ })) || [];
+
+ const [selectedMember, setSelectedMember] = useState
+ {String(courtNo).padStart(2, '0')} 코트
+
+
+
+ {/* 왼쪽 화살표 */}
+
+
+ {/* 매치 리스트 */}
+
+
+ {isLoading &&
+
+ {/* 오른쪽 화살표 */}
+
+ 로딩 중...
}
+ {!isLoading && matches.length === 0 && (
+ 완료된 게임이 없습니다.
+ )}
+ {matches.map(match => (
+
+
+ ))}
+ {hasNextPage && (
+
+ )}
+
+ {match.duration}
+ {match.endTime}
+
+
+
+
+ {match.teamA.map((p, idx) => (
+
+
+ {p.name}
+ {p.tag}
+
+ ))}
+
+ {match.teamB.map((p, idx) => (
+
+
+ {p.name}
+ {p.tag}
+
+ ))}
+ setSelectMode(false)}
+ >
+ navigate(-1)} />
+
+
+ );
+};
diff --git a/src/pages/group/MyGroupDetail/MyExerciseDetail.tsx b/src/pages/group/MyGroupDetail/MyExerciseDetail.tsx
index b76b7fc2..7648384e 100644
--- a/src/pages/group/MyGroupDetail/MyExerciseDetail.tsx
+++ b/src/pages/group/MyGroupDetail/MyExerciseDetail.tsx
@@ -10,6 +10,9 @@ import { Modal_ExDel } from "../../../components/group/Modal_ExDel copy";
import { useState, useEffect } from "react";
import { getModalConfig } from "../../../components/group/modalConfig";
import { SortBottomSheet } from "../../../components/common/SortBottomSheet";
+import TabSelector from "../../../components/common/TabSelector";
+import { GameBoardTab } from "./GameBoard/GameBoardTab";
+import { GameFinishedTab } from "./GameFinishedTab";
import {
getExerciseDetail,
cancelSelf,
@@ -35,8 +38,35 @@ export const MyExerciseDetail = () => {
const { exerciseId } = useParams<{ exerciseId: string }>();
const exerciseIdNumber = Number(exerciseId);
- const [detail, setDetail] = useState e.stopPropagation()}>
+ {/* 검색창 */}
+
+
+ {/* 하단버튼 */}
+ {!selectMode && (
+
+
+
+ {/* 인원 표시 */}
+
+
+
+
+
+
+
+ {/* 멤버 리스트 */}
+
+
+
+
+
+ {totalCount}
+
+ {filteredMembers.map((member, idx) => (
+
+
+ {
+ if (!selectMode && member.memberId) {
+ navigate(`/mypage/profile/${member.memberId}`);
+ }
+ }}
+ onAppointClick={() => handleAppointClick(member)}
+ />
+
+
+ ))}
+ e.stopPropagation()}
+ >
+ setSelectMode(true)}
+ />
+
+ )}
+
+ {/* 게임 진행자 지정 모달 */}
+ {isModalOpen && (
+ setIsModalOpen(false)}
+ >
+
+ )}
+ e.stopPropagation()}
+ >
+ setIsModalOpen(false)}
+ />
+
+
+
+
+
+
+
+ 게임 진행자로 지정하시겠어요?
+ +
+
+ '지정하기'를 누르시면,
+게임 진행 권한이 부여됩니다.
+
+
+
+
- {/* 장소 정보 */}
- handleTabChange(val as TabType)}
+ />
- {/* 참여 멤버 리스트 */}
- {members.map((member, idx) => {
- const modalConfig = getModalConfig(
- member.status,
- isCurrentUserLeader,
- member.isMe ?? false,
- member.name,
- );
- const handleIsUSer = () => {
- if (member.isWithdrawn) {
- setIsWithdrawnModal(true);
- } else {
- navigate(`/mypage/profile/${member.memberId}`);
- }
- };
- return (
-
- {detail.notice && (
- <>
-
-
- {/* 참여 인원 */}
-
-
-
- )}
- {detail.notice}
-
-
-
-
- - {detail.placeName} -
-{detail.placeAddress}
-
-
+
-
-
-
-
- {detail.participantGenderCount.male +
- detail.participantGenderCount.female}{" "}
- / {detail.participantsCount}
-
-
-
-
- - {detail.participantGenderCount.female} -
-- {detail.participantGenderCount.male} -
-
- {
- if (member.participantId !== undefined) {
- handleDeleteMember(member.participantId, {
- isLeaderAction: isCurrentUserLeader && !member.isMe,
- isGuest: member.isGuest,
- });
- }
- }}
- showDeleteButton={
- isCurrentUserLeader || (member.isMe && !isCurrentUserLeader)
- }
- modalConfig={modalConfig ?? undefined}
- />
-
- {isWithdrawnModal && (
- setIsWithdrawnModal(false)}
- />
+
+ {activeTab === "detail" && (
+
+ {/* 장소 정보 */}
+
+ {detail.notice && (
+ <>
+
- );
- })}
-
- {/* 대기 인원 */}
- {waitingMembers.length > 0 && (
-
+
+
)}
- {detail.notice}
+
-
- setIsSortOpen(false)}
- options={["운동 수정하기", "운동 삭제하기"]}
+ options={["게임 진행자 관리", "운동 수정하기", "운동 삭제하기"]}
onSelect={option => {
+ if (option === "게임 진행자 관리") {
+ navigate(
+ `/Group/MyGroup/Detail/Exercise_Detail/ChangeHost/${exerciseId}?returnPath=${returnPath}`,
+ );
+ }
if (option === "운동 수정하기") {
navigate(
`/group/exercise/edit/${exerciseId}?returnPath=${returnPath}`,
diff --git a/src/pages/group/groupMaking/GroupMember.tsx b/src/pages/group/groupMaking/GroupMember.tsx
index 4ab4205d..f7b053f7 100644
--- a/src/pages/group/groupMaking/GroupMember.tsx
+++ b/src/pages/group/groupMaking/GroupMember.tsx
@@ -33,7 +33,7 @@ export const GroupMember = () => {
//디바운스
const debouncedSearch = useDebounce(search, 200);
- const { data: page, isLoading } = useMemberInfinite({
+ const { data: page } = useMemberInfinite({
levelSearch: debouncedSearch,
page: 0,
size: 10,
@@ -89,9 +89,6 @@ export const GroupMember = () => {
})),
[members],
);
- if (!isLoading) {
- console.log(page);
- }
const filteredMembers = useMemo(() => {
const filterText = debouncedSearch.trim().toLowerCase();
if (!filterText) return memberList;
diff --git a/src/pages/group/index.ts b/src/pages/group/index.ts
index 9339c731..93093eea 100644
--- a/src/pages/group/index.ts
+++ b/src/pages/group/index.ts
@@ -5,3 +5,4 @@ export { ViceLeaderDefault } from "./AdminMenu/ViceLeaderDefault";
export { EditGroupInfoDefault } from "./AdminMenu/EditGroupInfoDefault";
export { ExerciseDetail } from "./MyGroupDetail/ExerciseDetail"; // 대기 신청하는 화면
export { MyExerciseDetail } from "./MyGroupDetail/MyExerciseDetail"; //MyExerciseDetail 내 운동 상세
+export { GameManagerPage } from "./MyGroupDetail/GameManagerPage";
diff --git a/src/pages/home/EditLocationPage.tsx b/src/pages/home/EditLocationPage.tsx
index 10ac9dd5..ae1e0ef3 100644
--- a/src/pages/home/EditLocationPage.tsx
+++ b/src/pages/home/EditLocationPage.tsx
@@ -48,7 +48,7 @@ export const EditLocationPage = () => {
setSelectedId(mainAddr.addrId);
}
} catch (err) {
- console.log("등록된 위치 불러오기 오류: ", err);
+ console.error("등록된 위치 불러오기 오류: ", err);
}
};
diff --git a/src/pages/login/KakaoLogin.tsx b/src/pages/login/KakaoLogin.tsx
index a27381e0..0874093b 100644
--- a/src/pages/login/KakaoLogin.tsx
+++ b/src/pages/login/KakaoLogin.tsx
@@ -34,7 +34,6 @@ export default function KakaoLogin() {
};
setUser(newUserData);
localStorage.setItem("accessToken", data.accessToken);
- console.log(data);
if (data.isNewMember && data.needsOnboarding) {
//onboarding으로
//미사용자
@@ -45,7 +44,7 @@ export default function KakaoLogin() {
}
},
onError: error => {
- console.log(error);
+ console.error(error);
},
});
return ;
diff --git a/vite.config.ts b/vite.config.ts
index 668105db..a9bc1fa3 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -87,6 +87,17 @@ export default defineConfig(({ mode }) => {
server: {
host: true,
+ proxy: {
+ "/api": {
+ target: "https://api.cockple.site",
+ changeOrigin: true,
+ },
+ "/ws": {
+ target: "https://api.cockple.site",
+ changeOrigin: true,
+ ws: true,
+ },
+ },
},
define: {
-
-
{waitingCount}
+
+
-
+
+ {detail.placeName} +
+{detail.placeAddress}
+
-
+
+ {/* 참여 인원 */}
+ - {detail.waitingGenderCount?.female ?? 0} -
-- {detail.waitingGenderCount?.male ?? 0} -
+
+
- {waitingMembers.map((member, idx) => {
+ {/* 참여 멤버 리스트 */}
+ {members.map((member, idx) => {
const modalConfig = getModalConfig(
member.status,
isCurrentUserLeader,
member.isMe ?? false,
member.name,
);
-
const handleIsUSer = () => {
if (member.isWithdrawn) {
setIsWithdrawnModal(true);
- // } else {
- // navigate(`/mypage/profile/${member.memberId}`);
+ } else {
+ navigate(`/mypage/profile/${member.memberId}`);
}
};
-
return (
-
+
+
+
+ {detail.participantGenderCount.male +
+ detail.participantGenderCount.female}{" "}
+ / {detail.participantsCount}
+
+
+
+
+ {detail.participantGenderCount.female} +
++ {detail.participantGenderCount.male} +
+
+
{
}
}}
showDeleteButton={
- isCurrentUserLeader ||
- (member.isMe && !isCurrentUserLeader)
+ isCurrentUserLeader || (member.isMe && !isCurrentUserLeader)
}
modalConfig={modalConfig ?? undefined}
/>
+ {isWithdrawnModal && (
+ setIsWithdrawnModal(false)}
+ />
+ )}
);
})}
+
+ {/* 대기 인원 */}
+ {waitingMembers.length > 0 && (
+
)}
+
+ {activeTab === "game" && (
+
+
+ )}
+
+
+ {waitingMembers.map((member, idx) => {
+ const modalConfig = getModalConfig(
+ member.status,
+ isCurrentUserLeader,
+ member.isMe ?? false,
+ member.name,
+ );
+
+ const handleIsUSer = () => {
+ if (member.isWithdrawn) {
+ setIsWithdrawnModal(true);
+ // } else {
+ // navigate(`/mypage/profile/${member.memberId}`);
+ }
+ };
+
+ return (
+
+
+
+ {waitingCount}
+
+
+ + {detail.waitingGenderCount?.female ?? 0} +
++ {detail.waitingGenderCount?.male ?? 0} +
+
+ {
+ if (member.participantId !== undefined) {
+ handleDeleteMember(member.participantId, {
+ isLeaderAction: isCurrentUserLeader && !member.isMe,
+ isGuest: member.isGuest,
+ });
+ }
+ }}
+ showDeleteButton={
+ isCurrentUserLeader ||
+ (member.isMe && !isCurrentUserLeader)
+ }
+ modalConfig={modalConfig ?? undefined}
+ />
+
+
+ );
+ })}
+