Merge pull request #73 from SSASINSA/refactor/sprint-fix(#68)

Refactor/행사 참여자 관리 페이지 수정(#68)

Author: seungsang2000

src/components/pages/events/EventDetail/EventDetail.tsx

@@ -461,67 +461,6 @@ const EventDetail: React.FC = () => {
     }
   };
 
-  const findOptionById = (options: EventOption[], optionId: number): EventOption | null => {
-    for (const option of options) {
-      if (option.optionId === optionId) {
-        return option;
-      }
-      if (option.children && option.children.length > 0) {
-        const found = findOptionById(option.children, optionId);
-        if (found) return found;
-      }
-    }
-    return null;
-  };
-
-  const getOptionPath = (options: EventOption[], optionId: number): string => {
-    const findPath = (opts: EventOption[], targetId: number, path: string[]): string[] | null => {
-      for (const opt of opts) {
-        const currentPath = [...path, opt.name];
-        if (opt.optionId === targetId) {
-          return currentPath;
-        }
-        if (opt.children && opt.children.length > 0) {
-          const found = findPath(opt.children, targetId, currentPath);
-          if (found) return found;
-        }
-      }
-      return null;
-    };
-
-    const path = findPath(options, optionId, []);
-    return path ? path.join(" > ") : "알 수 없음";
-  };
-
-  const getApplicationStatusClass = (status: string): string => {
-    switch (status.toUpperCase()) {
-      case "APPLIED":
-        return "applied";
-      case "CHECKED_IN":
-        return "checked-in";
-      case "CANCELLED":
-        return "cancelled";
-      case "REJECTED":
-        return "rejected";
-      default:
-        return "";
-    }
-  };
-
-  const getApplicationStatusText = (status: string): string => {
-    switch (status.toUpperCase()) {
-      case "APPLIED":
-        return "신청됨";
-      case "CHECKED_IN":
-        return "체크인";
-      case "CANCELLED":
-        return "취소됨";
-      case "REJECTED":
-        return "거절됨";
-      default:
-        return status;
-    }
-  };
 
   const OptionTreeItem: React.FC<{ option: EventOption; depth: number }> = ({ option, depth }) => {
     const hasChildren = option.children && option.children.length > 0;
@@ -770,45 +709,6 @@ const EventDetail: React.FC = () => {
               </div>
             </div>
           )}
-
-          {/* 신청 현황 섹션 */}
-          {eventData.applications && eventData.applications.length > 0 && (
-            <div className={styles["event-applications-section"]}>
-              <h3 className={styles["section-title"]}>신청 현황</h3>
-              <div className={styles["applications-table-container"]}>
-                <table className={styles["applications-table"]}>
-                  <thead>
-                    <tr>
-                      <th>이름</th>
-                      <th>이메일</th>
-                      <th>옵션</th>
-                      <th>상태</th>
-                      <th>신청일</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {eventData.applications.map((application) => {
-                      const option = findOptionById(eventData.options, application.optionId);
-                      const optionPath = option ? getOptionPath(eventData.options, application.optionId) : "알 수 없음";
-                      return (
-                        <tr key={application.applicationId}>
-                          <td>{application.displayName}</td>
-                          <td>{application.email}</td>
-                          <td>{optionPath}</td>
-                          <td>
-                            <span className={`${styles["status-badge"]} ${styles[getApplicationStatusClass(application.status)]}`}>
-                              {getApplicationStatusText(application.status)}
-                            </span>
-                          </td>
-                          <td>{formatDateTime(application.appliedAt)}</td>
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          )}
         </div>
 
         {/* 사이드바 - 스태프 코드 발급 */}

src/components/pages/events/EventParticipantManagement/EventParticipantManagement.module.css

@@ -493,9 +493,7 @@
   text-align: center !important;
   padding: 16px 0 !important;
   width: 60px;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
+  vertical-align: middle;
 }
 
 .participants-table tbody tr:hover {
@@ -662,9 +660,7 @@
   max-width: 80px !important;
   text-align: center !important;
   padding: 12px 8px !important;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
+  vertical-align: middle;
 }
 
 .participants-section .dl-table-wrapper {
@@ -674,10 +670,16 @@
 .actions-cell {
   padding-right: 0 !important;
   padding-left: 0 !important;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
   text-align: center !important;
+  vertical-align: middle;
+}
+
+.actions-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
 }
 
 .action-btn {

src/components/pages/events/EventParticipantManagement/EventParticipantManagement.tsx

@@ -141,6 +141,11 @@ const EventParticipantManagement: React.FC = () => {
     }
   };
 
+  const isEventEnded = (status: string): boolean => {
+    const displayStatus = mapApiStatusToDisplayStatus(status);
+    return displayStatus === "completed" || displayStatus === "deleted";
+  };
+
   const fetchEventInfo = useCallback(async () => {
     if (!eventId) return;
 
@@ -705,16 +710,25 @@ const EventParticipantManagement: React.FC = () => {
                 width: 80,
                 align: "center",
                 className: styles["actions-cell"],
-                render: (p: Participant) => (
-                  (p.status === "APPLIED" || p.status === "CHECKED_IN") ? (
-                    <button
-                      className={`${styles["action-btn"]} ${styles["cancel"]}`}
-                      onClick={() => handleCancelClick(p.applicationId, p.name)}
-                    >
-                      취소
-                    </button>
-                  ) : null
-                ),
+                render: (p: Participant) => {
+                  const canCancel = 
+                    (p.status === "APPLIED" || p.status === "CHECKED_IN") &&
+                    eventInfo &&
+                    !isEventEnded(eventInfo.status);
+                  
+                  return (
+                    <div className={styles["actions-wrapper"]}>
+                      {canCancel ? (
+                        <button
+                          className={`${styles["action-btn"]} ${styles["cancel"]}`}
+                          onClick={() => handleCancelClick(p.applicationId, p.name)}
+                        >
+                          취소
+                        </button>
+                      ) : null}
+                    </div>
+                  );
+                },
               },
             ]}
             data={isLoading ? [] : participants}