feat(web): 선수 관리 페이지 추가 (#410)

* feat: exclude test files from biome scanner includes

* feat: add player management page with edit functionality

* feat: implement player management functionality with player list and query integration

* feat: enhance player management page with search functionality and improved player list display

* feat: add Modal component and integrate with player management page

* feat: add AlertDialog component for player deletion confirmation

* feat: enhance player list display with student number and adjust typography sizes

* feat: add spinner component with customizable size and color, and enhance color definitions

* feat: add loading state to Button component and integrate Spinner for better user feedback

* feat: add search functionality to player list with input field for filtering by name or student number

* feat: add player management page with add player button and update player list layout

* feat: add player creation and update functionality with form handling and toast notifications

* feat: refactor player delete menu import path for better module organization

* feat: update player form to display message when no teams are available

* feat: improve loading state handling in alert dialog and refactor player delete function

Author: ohprettyhak

apps/manager/package.json

@@ -28,7 +28,9 @@
     "@vercel/analytics": "^1.5.0",
     "next": "^15.4.6",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-hook-form": "^7.62.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@hcc/typescript-config": "workspace:*",

apps/manager/src/api/mutations/index.ts

@@ -1 +1,4 @@
+export * from './useCreatePlayers';
+export * from './useDeletePlayers';
 export * from './useLogin';
+export * from './useUpdatePlayers';

apps/manager/src/api/mutations/useCreatePlayers.ts

@@ -0,0 +1,20 @@
+import { fetcher, useMutation, useQueryClient } from '@hcc/api-base';
+import type { PlayerType } from '~/api';
+import { queryKeys } from '~/api/queryKey';
+
+export type PlayerFormType = Pick<PlayerType, 'name' | 'studentNumber'>;
+
+export const postPlayers = (request: PlayerFormType) => {
+  return fetcher.post<void>('players', { json: request });
+};
+
+export const useCreatePlayers = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: postPlayers,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: queryKeys.players._def });
+    },
+  });
+};

apps/manager/src/api/mutations/useDeletePlayers.ts

@@ -0,0 +1,21 @@
+import { fetcher, useMutation, useQueryClient } from '@hcc/api-base';
+import { queryKeys } from '~/api/queryKey';
+
+type Request = {
+  id: number;
+};
+
+export const deletePlayers = ({ id }: Request) => {
+  return fetcher.delete<void>(`players/${id}`, { json: null });
+};
+
+export const useDeletePlayers = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deletePlayers,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: queryKeys.players._def });
+    },
+  });
+};

apps/manager/src/api/mutations/useUpdatePlayers.ts

@@ -0,0 +1,22 @@
+import { fetcher, useMutation, useQueryClient } from '@hcc/api-base';
+import type { PlayerFormType } from '~/api';
+import { queryKeys } from '~/api/queryKey';
+
+type Request = {
+  id: number;
+} & PlayerFormType;
+
+export const patchPlayers = ({ id, ...request }: Request) => {
+  return fetcher.patch<void>(`players/${id}`, { json: request });
+};
+
+export const useUpdatePlayers = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: patchPlayers,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: queryKeys.players._def });
+    },
+  });
+};

apps/manager/src/api/queries/index.ts

@@ -1,2 +1,4 @@
 export * from './useLeaguesHome';
 export * from './useLeaguesLeague';
+export * from './usePlayer';
+export * from './usePlayers';

apps/manager/src/api/queries/usePlayer.ts

@@ -0,0 +1,9 @@
+import { useQuery, useSuspenseQuery } from '@hcc/api-base';
+import type { PlayerDetailPayload } from '~/api';
+import { queryKeys } from '../queryKey';
+
+export const usePlayer = (payload: PlayerDetailPayload) =>
+  useQuery(queryKeys.players.detail(payload));
+
+export const useSuspensePlayer = (payload: PlayerDetailPayload) =>
+  useSuspenseQuery(queryKeys.players.detail(payload));

apps/manager/src/api/queries/usePlayers.ts

@@ -0,0 +1,6 @@
+import { useQuery, useSuspenseQuery } from '@hcc/api-base';
+import { queryKeys } from '../queryKey';
+
+export const usePlayers = () => useQuery(queryKeys.players.list);
+
+export const useSuspensePlayers = () => useSuspenseQuery(queryKeys.players.list);

apps/manager/src/api/queryKey.ts

@@ -1,6 +1,6 @@
 import { fetcher } from '@hcc/api-base';
 import { createQueryKeys, mergeQueryKeys } from '@lukemorales/query-key-factory';
-import type { LeagueDetailType, LeagueType } from './types';
+import type { LeagueDetailType, LeagueType, PlayerDetailPayload, PlayerType } from './types';
 
 const leagueQueryKeys = createQueryKeys('leagues', {
   home: {
@@ -13,4 +13,15 @@ const leagueQueryKeys = createQueryKeys('leagues', {
   },
 });
 
-export const queryKeys = mergeQueryKeys(leagueQueryKeys);
+const playerQueryKeys = createQueryKeys('players', {
+  list: {
+    queryKey: null,
+    queryFn: () => fetcher.get<PlayerType[]>('players'),
+  },
+  detail: (payload: PlayerDetailPayload) => ({
+    queryKey: [payload],
+    queryFn: () => fetcher.get<PlayerType>(`players/${payload.id}`),
+  }),
+});
+
+export const queryKeys = mergeQueryKeys(leagueQueryKeys, playerQueryKeys);

apps/manager/src/api/types/games.ts

@@ -1,12 +1,12 @@
-import type { TeamType } from '~/api/types/teams';
+import type { GameTeamType } from '~/api/types/teams';
 
 export type GameType = {
   id: number;
+  isPkTaken: boolean;
   startTime: string;
   gameQuarter: string;
   gameName: string;
   round: number;
   videoId: string;
-  gameTeams: TeamType[];
-  isPkTaken: boolean;
+  gameTeams: GameTeamType[];
 };