Merge branch 'main' into feat/관리자-토너먼트-페이지-브래킷뷰-수정-기능-구현-#1125

components/admin/tournament/TournamentList.tsx

@@ -169,8 +169,8 @@ export default function TournamentList({
                                     onClick={() => {
                                       setModal({
                                         modalName:
-                                          'ADMIN-TOURNAMENT_BRAKET_EDIT',
-                                        tournament: tournament,
+                                          'ADMIN-TOURNAMENT_PARTICIPANT_EDIT',
+                                        tournamentId: tournament.tournamentId,
                                       });
                                     }}
                                   >

components/modal/admin/AdminTournamentParticipantEditModal/AdminSearchUserDropDownMenu.tsx

@@ -0,0 +1,37 @@
+import { Menu, MenuItem } from '@mui/material';
+
+interface AdminSearchUserDropDownMenuProps {
+  inputRef: HTMLInputElement | null;
+  menuOpen: boolean;
+  onMenuClose: () => void;
+  userList: string[];
+  onMenuClick: (id: string) => void;
+}
+
+export default function AdminSearchUserDropDownMenu({
+  inputRef,
+  menuOpen,
+  onMenuClose,
+  userList,
+  onMenuClick,
+}: AdminSearchUserDropDownMenuProps) {
+  return (
+    <Menu
+      id='simple-menu'
+      anchorEl={inputRef}
+      keepMounted
+      open={menuOpen}
+      onClose={onMenuClose}
+    >
+      {userList.map((id) => (
+        <MenuItem key={id} onClick={() => onMenuClick(id)}>
+          {id}
+        </MenuItem>
+      ))}
+      <small>
+        {' '}
+        <b>esc</b>: 포커스 탈출{' '}
+      </small>
+    </Menu>
+  );
+}

components/modal/admin/AdminTournamentParticipantEditModal/AdminTournamenSearchBar.tsx

@@ -0,0 +1,42 @@
+import { RefObject } from 'react';
+import CancelOutlinedIcon from '@mui/icons-material/CancelOutlined';
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
+import { Input, InputAdornment } from '@mui/material';
+
+interface AdminTournamenSearchBarProps {
+  inputRef: RefObject<HTMLInputElement>;
+  inputChangeHandler: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  isIdExist: boolean;
+  inputId: string;
+  isTyping: boolean;
+}
+
+export default function AdminTournamentSearchBar({
+  inputRef,
+  inputChangeHandler,
+  isIdExist,
+  inputId,
+  isTyping,
+}: AdminTournamenSearchBarProps) {
+  return (
+    <Input
+      ref={inputRef}
+      onChange={inputChangeHandler}
+      placeholder='인트라 ID를 입력하세요.'
+      error={!isIdExist}
+      value={inputId}
+      endAdornment={
+        inputId &&
+        !isTyping && (
+          <InputAdornment position='end'>
+            {isIdExist ? (
+              <CheckCircleOutlineIcon style={{ color: 'green' }} />
+            ) : (
+              <CancelOutlinedIcon style={{ color: 'red' }} />
+            )}
+          </InputAdornment>
+        )
+      }
+    />
+  );
+}

components/modal/admin/AdminTournamentParticipantEditModal/AdminTournamentParticipantEditModal.tsx

@@ -0,0 +1,40 @@
+import { useSetRecoilState } from 'recoil';
+import { Button } from '@mui/material';
+import { modalState } from 'utils/recoil/modal';
+import AdminTournamentSearchBarGroup from 'components/modal/admin/AdminTournamentParticipantEditModal/AdminTournamentSearchBarGroup';
+import useAdminTournamentParticipantEdit from 'hooks/admin/modal/useAdminTournamentParticipantEdit';
+import styles from 'styles/admin/modal/AdminTournamentParticipantEditModal.module.scss';
+import AdminTournamentParticipantList from './AdminTournamentParticipantList';
+
+export default function AdminTournamentParticipantEditModal(props: {
+  tournamentId: number;
+}) {
+  const setModal = useSetRecoilState(modalState);
+  const { setUserToAdd, participantList, participantDeleteHandler } =
+    useAdminTournamentParticipantEdit(props.tournamentId);
+
+  return (
+    <div className={styles.whole}>
+      <h2>참가자 수정</h2>
+      <div className={styles.hr}></div>
+      <div className={styles.stickyHeader}>
+        <AdminTournamentSearchBarGroup
+          onAddUser={setUserToAdd}
+          tournamentId={props.tournamentId}
+        />
+      </div>
+      <AdminTournamentParticipantList
+        participantList={participantList}
+        onDelete={participantDeleteHandler}
+      />
+      <div className={styles.buttonGroup}>
+        <Button
+          variant='outlined'
+          onClick={() => setModal({ modalName: null })}
+        >
+          취소
+        </Button>
+      </div>
+    </div>
+  );
+}

components/modal/admin/AdminTournamentParticipantEditModal/AdminTournamentParticipantList.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { Button, TextField, InputAdornment } from '@mui/material';
+import { ITournamentUser } from 'types/admin/adminTournamentTypes';
+import styles from 'styles/admin/modal/AdminTournamentParticipantEditModal.module.scss';
+import AdminTournamentParticipantDeleteConfirmInput from './AdminTournemntParticipantDeleteConfirmInput';
+
+interface AdminTournamentParticipantListProps {
+  participantList: ITournamentUser[];
+  onDelete: (intraId: string) => Promise<void>;
+}
+
+export default function AdminTournamentParticipantList({
+  participantList,
+  onDelete,
+}: AdminTournamentParticipantListProps) {
+  const [deleteMode, setDeleteMode] = useState<Record<number, boolean>>({});
+  const [isSame, setIsSame] = useState<Record<number, boolean>>({});
+
+  function toggleDeleteMode(userId: number) {
+    setDeleteMode((prev) => ({ [userId]: !prev[userId] }));
+  }
+
+  function deleteHandler(userId: number, intraId: string) {
+    if (deleteMode[userId]) {
+      if (isSame[userId]) {
+        onDelete(intraId);
+        setDeleteMode({});
+      }
+    } else {
+      toggleDeleteMode(userId);
+    }
+  }
+
+  return (
+    <ul>
+      {participantList.map((participant, index) => (
+        <>
+          {deleteMode[participant.userId] && (
+            <small className={styles.deleteInputTitle}>
+              삭제할 유저의 아이디를 입력해주세요.
+            </small>
+          )}
+          <li
+            key={participant.userId}
+            className={participant.isJoined ? styles.joined : styles.notJoined}
+          >
+            {deleteMode[participant.userId] ? (
+              <>
+                <AdminTournamentParticipantDeleteConfirmInput
+                  isSame={isSame[participant.userId]}
+                  intraId={participant.intraId}
+                  userId={participant.userId}
+                  setIsSame={setIsSame}
+                />
+              </>
+            ) : (
+              <div>
+                <i>{index + 1}</i>
+                {participant.intraId}{' '}
+                <small>{participant.isJoined ? '참가 중' : '대기 중'}</small>
+              </div>
+            )}
+            {deleteMode[participant.userId] && (
+              <Button onClick={() => toggleDeleteMode(participant.userId)}>
+                취소
+              </Button>
+            )}
+            <Button
+              color='error'
+              disabled={
+                deleteMode[participant.userId] && !isSame[participant.userId]
+              }
+              onClick={() =>
+                deleteHandler(participant.userId, participant.intraId)
+              }
+            >
+              삭제
+            </Button>
+          </li>
+          {deleteMode[participant.userId] && !isSame[participant.userId] && (
+            <small className={styles.deleteInputWarning}>
+              아이디가 일치하지 않습니다!
+            </small>
+          )}
+        </>
+      ))}
+    </ul>
+  );
+}