Merge pull request #1561 from 42organization/agenda

[test-deploy] bug fix 확인을 위한 test
42organization · Sep 9, 2024 · bbd5661 · bbd5661
2 parents 5af8f9b + a9060c9
commit bbd5661
Show file tree

Hide file tree

Showing 18 changed files with 157 additions and 113 deletions.
diff --git a/components/agenda/Form/AdminTeamForm.tsx b/components/agenda/Form/AdminTeamForm.tsx
@@ -2,7 +2,7 @@ import router from 'next/router';
 import { useState } from 'react';
 import { TeamDetailProps } from 'types/agenda/teamDetail/TeamDetailTypes';
 import { transformTeamLocation } from 'utils/agenda/transformLocation';
-import { Coalition } from 'constants/agenda/agenda';
+import { Coalition, TeamStatus } from 'constants/agenda/agenda';
 import Participant from 'components/agenda/agendaDetail/tabs/Participant';
 import { AddElementBtn, CancelBtn } from 'components/agenda/button/Buttons';
 import CheckBoxInput from 'components/agenda/Input/CheckboxInput';
@@ -18,7 +18,7 @@ interface AdminTeamFormProps {
   teamLocation: string;
 }
 
-const AdminTeamFrom = ({
+const AdminTeamForm = ({
   teamKey,
   teamData,
   teamLocation,
@@ -27,18 +27,14 @@ const AdminTeamFrom = ({
   const [teamMates, setTeamMates] = useState(teamData.teamMates);
 
   const transformFormData = (formData: FormData) => {
-    const data = JSON.parse(JSON.stringify(Object.fromEntries(formData)));
-
-    data.teamIsPrivate = data.teamIsPrivate === 'on';
-
-    // 팀 위치 변환
-    data.teamLocation = transformTeamLocation(data.teamLocation);
-
-    // 트림 처리
-    data.teamName = data.teamName.trim();
-    data.teamContent = data.teamContent.trim(); // 추가
-
-    return data;
+    const data = Object.fromEntries(formData) as any;
+    return {
+      ...data,
+      teamIsPrivate: data.teamIsPrivate === 'on',
+      teamLocation: transformTeamLocation(data.teamLocation),
+      teamName: data.teamName.trim(),
+      teamContent: data.teamContent.trim(),
+    };
   };
 
   const handleDeleteParticipant = (index: number) => {
@@ -50,12 +46,11 @@ const AdminTeamFrom = ({
   };
 
   const handleAddMember = () => {
-    const newMemberIdInput = document.getElementById(
-      'newMemberId'
-    ) as HTMLInputElement;
-    const newMemberId = newMemberIdInput?.value.trim();
+    const newMemberId = (
+      document.getElementById('newMemberId') as HTMLInputElement
+    )?.value.trim();
 
-    if (newMemberId === '') {
+    if (!newMemberId) {
       alert('intra ID를 입력해주세요.');
       return;
     }
@@ -67,40 +62,51 @@ const AdminTeamFrom = ({
       ...prev,
       { intraId: newMemberId, coalition: Coalition.OTHER },
     ]);
-    newMemberIdInput.value = ''; // 입력 필드 초기화
+    (document.getElementById('newMemberId') as HTMLInputElement).value = '';
+  };
+
+  const AddLeader = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    if (
+      teamData.teamStatus === TeamStatus.CANCEL &&
+      e.target.value !== TeamStatus.CANCEL
+    ) {
+      if (
+        !teamMates.some(
+          (member) => member.intraId === teamData.teamLeaderIntraId
+        )
+      ) {
+        setTeamMates((prev) => [
+          { intraId: teamData.teamLeaderIntraId, coalition: Coalition.OTHER },
+          ...prev,
+        ]);
+      }
+    }
   };
 
-  const SubmitTeamForm = (target: React.FormEvent<HTMLFormElement>) => {
-    target.preventDefault();
+  const SubmitTeamForm = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
 
-    const formData = new FormData(target.currentTarget);
+    const formData = new FormData(event.currentTarget);
     const data = transformFormData(formData);
 
-    if (
-      data.teamName === '' ||
-      data.teamContent === '' ||
-      data.teamStatus === ''
-    ) {
-      alert('모든 항목을 입력해주세요.'); // 임시
+    if (!data.teamName || !data.teamContent || !data.teamStatus) {
+      alert('모든 항목을 입력해주세요.');
       return;
     }
 
-    data.teamKey = teamKey;
-    data.teamMates = teamMates;
-    data.teamAward = teamData.teamAward;
-    data.teamAwardPriority = teamData.teamAwardPriority;
-
     sendRequest(
       'PATCH',
       'admin/team',
-      data,
-      {},
-      (res: any) => {
-        router.back();
+      {
+        ...data,
+        teamKey,
+        teamMates,
+        teamAward: teamData.teamAward,
+        teamAwardPriority: teamData.teamAwardPriority,
       },
-      (err: string) => {
-        console.error(err);
-      }
+      {},
+      () => router.back(),
+      (err: string) => console.error(err)
     );
   };
 
@@ -111,6 +117,18 @@ const AdminTeamFrom = ({
       className={styles.container}
     >
       <div className={styles.pageContianer}>
+        {teamData.teamStatus === TeamStatus.CANCEL ? (
+          <div className={styles.topContainer}>
+            <div className={`${styles.label_text} ${styles.highlight}`}>
+              팀 상태 : CANCEL
+            </div>
+            <div className={styles.description}>
+              CANCEL 상태에서는 수정이 불가능합니다.{' '}
+              <span className={styles.span}>[ OPEN/CONFIM ]</span>으로 팀 상태를
+              변경 후 이용해주세요.
+            </div>
+          </div>
+        ) : null}
         <TitleInput
           name='teamName'
           label='팀 이름'
@@ -130,10 +148,12 @@ const AdminTeamFrom = ({
         <SelectInput
           name='teamStatus'
           label='팀 상태'
-          options={['OPEN', 'CONFIRM', 'CANCEL']}
+          options={['OPEN', 'CONFIRM']}
           selected={teamData.teamStatus}
+          onChange={(e) => {
+            AddLeader(e);
+          }}
         />
-
         {teamLocation === 'MIX' ? (
           <input type='hidden' name='teamLocation' value={'MIX'} />
         ) : (
@@ -148,7 +168,7 @@ const AdminTeamFrom = ({
         <CheckBoxInput
           name='teamIsPrivate'
           label='비밀방(초대만 가능, 대회 내역에서 보이지 않음)'
-          checked={teamData.teamIsPrivate} // 팀 상세 페이지 - 수정
+          checked={teamData.teamIsPrivate}
         />
         <div className={styles.label_text}>상 이름 : {teamData.teamAward}</div>
         <div className={styles.label_text}>
@@ -202,4 +222,4 @@ const AdminTeamFrom = ({
   );
 };
 
-export default AdminTeamFrom;
+export default AdminTeamForm;
diff --git a/components/agenda/Profile/CurrentList.tsx b/components/agenda/Profile/CurrentList.tsx
@@ -11,8 +11,9 @@ const CurrentList = ({
   isHost: boolean;
 }) => {
   const listTitle = isHost ? '개최중 아젠다' : '참여중 아젠다';
+  const bottomMargin = isHost ? '' : styles.bottomMargin;
   return (
-    <div className={styles.currentListContainer}>
+    <div className={`${styles.currentListContainer} ${bottomMargin}`}>
       <div className={styles.currentListTitle}>{listTitle}</div>
 
       <div className={styles.currentListItems}>

diff --git a/components/agenda/agendaDetail/tabs/AgendaDescription.tsx b/components/agenda/agendaDetail/tabs/AgendaDescription.tsx
@@ -35,6 +35,10 @@ export default function AgendaDescription({ agendaData }: AgendaProps) {
       {AgendaTags(agendaData)}
       <div className={styles.descriptionWarp}>
         <div className={styles.midContainer}>
+          <div className={styles.descriptionItem}>
+            <h3>대회 설명</h3>
+            <span>{agendaContent}</span>
+          </div>
           <div className={styles.descriptionItem}>
             <h3>모집 완료 기간</h3>
             <span>{formatDate(agendaDeadLine)}</span>

diff --git a/components/agenda/agendaDetail/tabs/Participant.tsx b/components/agenda/agendaDetail/tabs/Participant.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import React from 'react';
 import { ParticipantProps } from 'types/agenda/agendaDetail/tabs/participantTypes';
 import { colorMapping, iconMapping } from 'types/agenda/utils/colorList';
@@ -18,13 +19,17 @@ export default function Participant({
   const IconComponent = iconMapping[coalitionEnum[0]];
 
   return (
-    <div
-      className={`${styles.participantItem} ${colorMapping[coalitionEnum[0]]}`}
-    >
-      <div className={styles.participantItemWarp}>
-        <div className={styles.participantcontent}>{teamName}</div>
-        {IconComponent ? <IconComponent /> : ''}
+    <Link href={`/agenda/profile/user?id=${teamName}`}>
+      <div
+        className={`${styles.participantItem} ${
+          colorMapping[coalitionEnum[0]]
+        }`}
+      >
+        <div className={styles.participantItemWarp}>
+          <div className={styles.participantcontent}>{teamName}</div>
+          {IconComponent ? <IconComponent /> : ''}
+        </div>
       </div>
-    </div>
+    </Link>
   );
 }
diff --git a/components/error/AgendaError.tsx b/components/error/AgendaError.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import { useRecoilState, useResetRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilState, useResetRecoilState } from 'recoil';
 import { agendaErrorState } from 'utils/recoil/agendaError';
-import { loginState } from 'utils/recoil/login';
 import { modalState } from 'utils/recoil/takgu/modal';
 import { useRouter } from 'next/router';
 import useErrorPage from 'hooks/error/useErrorPage';
@@ -12,20 +11,10 @@ export default function ErrorPage() {
   const { goHome } = useErrorPage();
   const [error, setError] = useRecoilState(agendaErrorState);
   const { msg, status } = error;
-  const setLoggedIn = useSetRecoilState<boolean>(loginState);
   const resetModal = useResetRecoilState(modalState);
   const router = useRouter();
 
-  if (status === 401) {
-    localStorage.removeItem('42gg-token');
-    setLoggedIn(false);
-  }
-
   const resetHandler = () => {
-    if (status === 401) {
-      localStorage.removeItem('42gg-token');
-      setLoggedIn(false);
-    }
     setError({ msg: '', status: 0 });
     goHome();
   };

diff --git a/hooks/agenda/usePageNation.ts b/hooks/agenda/usePageNation.ts
@@ -27,45 +27,54 @@ const usePageNation = <T>({
 
   const getData = useCallback(
     async (page: number, size: number) => {
-      const res = await instanceInAgenda.get(url, { params });
-      const content = res.data.content ? res.data.content : [];
-      const totalSize = res.data.totalSize ? res.data.totalSize : 0;
+      const res = await instanceInAgenda.get(url, {
+        params: { ...params, page, size },
+      });
+      const content = res.data.content || [];
+      const totalSize = res.data.totalSize || 0;
 
       if (useIdx) {
-        res.data.content = res.data.content.map((c: T, idx: number) => {
-          const temp = c as T & { idx: number };
-          temp.idx = idx + 1 + size * (page - 1);
-          return temp;
+        content.forEach((c: T, idx: number) => {
+          (c as T & { idx: number }).idx = idx + 1 + size * (page - 1);
         });
       }
 
-      status.current = res.status; // 상태 업데이트
+      status.current = res.status;
       return { totalSize, content };
     },
     [url, params, useIdx]
   );
 
+  const fetchData = async () => {
+    const data = await getData(currentPage.current, size);
+    totalPages.current = Math.ceil(data.totalSize / size);
+    setContent(data.content);
+  };
+
   const pageChangeHandler = async (pageNumber: number) => {
     if (pageNumber < 1 || pageNumber > totalPages.current) return;
-    const res = await getData(pageNumber, size);
     currentPage.current = pageNumber;
-    setContent(res.content);
+    await fetchData();
   };
 
   useEffect(() => {
-    const fetchData = async () => {
-      const data = await getData(currentPage.current, size);
-      totalPages.current = Math.ceil(data.totalSize / size);
-      setContent(data.content);
-    };
-
     if (
-      isReady == true &&
+      isReady === true &&
       (!status.current || Math.floor(status.current / 100) !== 2)
     ) {
       fetchData();
     }
-  }, [getData, size, params]); // getData와 size에 의존
+  }, [getData, size, params, isReady]);
+
+  useEffect(() => {
+    currentPage.current = 1;
+
+    setContent(null);
+
+    if (isReady) {
+      fetchData();
+    }
+  }, [url, isReady]);
 
   const PagaNationElementProps = {
     curPage: currentPage.current,