✨ Implement change club representative

sparcs-kaist · Dec 23, 2023 · 6f2aab4 · 6f2aab4
1 parent 8b88ef5
commit 6f2aab4
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 27 deletions.
diff --git a/back/routes/club.js b/back/routes/club.js
@@ -173,7 +173,7 @@ router.post("/updateDescription", async (req, res) => {
   }
 });
 
-router.get("/clubMembers/:clubId", async (req, res) => {
+router.get("/club_members/:clubId", async (req, res) => {
   const { clubId } = req.params;
   const today = new Date();
 
@@ -193,9 +193,8 @@ router.get("/clubMembers/:clubId", async (req, res) => {
     // Fetch club representatives for the current semester
     const representatives = await ClubRepresentative.findAll({
       where: {
-        club_id: clubId,
         start_term: { [Op.lte]: today },
-        end_term: { [Op.gte]: today },
+        [Op.or]: [{ end_term: { [Op.gte]: today } }, { end_term: null }],
       },
     });
 
@@ -229,6 +228,52 @@ router.get("/clubMembers/:clubId", async (req, res) => {
   }
 });
 
+router.post("/update_representatives", async (req, res) => {
+  const { prev_student_id, next_student_id, rep_id, club_id } = req.body; // POST 요청이므로 req.body를 사용합니다
+
+  try {
+    // 현재 날짜와 어제 날짜 계산
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    // 기존 대표자의 end_term 업데이트
+    await ClubRepresentative.update(
+      { end_term: yesterday },
+      {
+        where: {
+          club_id: club_id,
+          student_id: prev_student_id,
+          type_id: rep_id,
+        },
+      }
+    );
+
+    // 새 대표자 확인 및 추가
+    const [newRep, created] = await ClubRepresentative.findOrCreate({
+      where: {
+        club_id: club_id,
+        student_id: next_student_id,
+        type_id: rep_id,
+      },
+      defaults: {
+        start_term: today,
+        end_term: null,
+      },
+    });
+
+    if (!created) {
+      // 이미 존재하는 경우, end_term만 업데이트
+      await newRep.update({ end_term: null });
+    }
+
+    res.send({ message: "Representatives updated successfully" });
+  } catch (error) {
+    console.error("Error updating representatives:", error);
+    res.status(500).send({ message: "Error updating representatives" });
+  }
+});
+
 router.get("/club_manage", async (req, res) => {
   const { student_id } = req.session.user;
   const currentDate = new Date();
@@ -242,7 +287,7 @@ router.get("/club_manage", async (req, res) => {
       [Op.or]: [{ end_term: null }, { end_term: { [Op.gte]: currentDate } }],
     },
   });
-  if (!clubRep.club_id) {
+  if (!clubRep) {
     return res.status(400).json({
       success: false,
       message: "club_id query parameter is required",

diff --git a/front/src/pages/ClubManage/ClubManage.css b/front/src/pages/ClubManage/ClubManage.css
@@ -85,7 +85,7 @@
   padding: 4px 3px;
   position: absolute;
   top: 0;
-  width: 211px;
+  width: 211px !important;
 }
 
 .club-manage .text-wrapper-8 {

diff --git a/front/src/pages/ClubManage/ClubManage.tsx b/front/src/pages/ClubManage/ClubManage.tsx
@@ -44,6 +44,64 @@ export const ClubManage = (): JSX.Element => {
     advisor: "",
   });
   const [activities, setActivities] = useState<ActivityInfo[]>([]);
+  const [memberList, setMemberList] = useState([]);
+
+  useEffect(() => {
+    getRequest(
+      `club/club_members/${clubId}`,
+      (data) => {
+        setMemberList(
+          data.map(
+            (member: { student_id: any; name: any }) =>
+              `${member.student_id} ${member.name}`
+          )
+        );
+      },
+      (error) => {
+        console.error("Error fetching club members:", error);
+        setMemberList([]);
+      }
+    );
+  }, [clubId, clubInfo.representatives]);
+
+  const handleDropdownChange = async (
+    event: React.ChangeEvent<HTMLSelectElement>,
+    index: number
+  ) => {
+    const selectedMemberInfo = event.target.value.split(" ");
+    const next_student_id = selectedMemberInfo[0];
+    const prev_student_id = clubInfo.representatives[index].student_id;
+    const rep_id = index + 1;
+
+    if (
+      window.confirm(
+        `${
+          index == 0 ? "대표자를" : "대의원을"
+        } ${event.target.value.trim()}(으)로 변경하시겠습니까?`
+      )
+    ) {
+      try {
+        await postRequest(
+          "club/update_representatives",
+          {
+            prev_student_id,
+            next_student_id,
+            rep_id,
+            club_id: clubInfo.clubId,
+          },
+          () => {
+            window.location.reload(); // 페이지 새로고침
+          },
+          (error) => {
+            alert("대표자/대의워 변경에 실패했습니다. 다시 시도해주세요.");
+            console.error("Error updating representative:", error);
+          }
+        );
+      } catch (error) {
+        console.error("Error sending update request:", error);
+      }
+    }
+  };
 
   const handleDescriptionChange = (
     event: React.ChangeEvent<HTMLTextAreaElement>
@@ -61,7 +119,6 @@ export const ClubManage = (): JSX.Element => {
         "club/updateDescription",
         dataToSend,
         () => {
-          console.log("Description updated successfully");
           alert("설명이 저장되었습니다.");
           // Optionally, show a success message
         },
@@ -121,42 +178,50 @@ export const ClubManage = (): JSX.Element => {
         />
         <div className="frame-wrapper">
           <div className="frame-12">
-            {/* {typeId === 1 && ( */}
-            <div className="frame-13">
-              <SubTitle
-                className="sub-title-instance"
-                divClassName="design-component-instance-node"
-                text="동아리 대표자"
-              />
-              <div className="frame-14">
-                {Array.isArray(clubInfo.representatives) &&
-                  clubInfo.representatives.map((rep, index) => (
+            {typeId === 1 && (
+              <div className="frame-13">
+                <SubTitle
+                  className="sub-title-instance"
+                  divClassName="design-component-instance-node"
+                  text="동아리 대의원 변경"
+                />
+                <div className="frame-14">
+                  {clubInfo.representatives.map((rep, index) => (
                     <div key={index} className="overlap-group-wrapper">
                       <div className="overlap-group">
-                        <div className="frame-15">
-                          <div className="text-wrapper-8">
-                            {rep.student_id > 0
-                              ? `${rep.student_id} ${rep.name}`
-                              : "없음"}
-                          </div>
-                        </div>
                         <p className="p">
                           <span className="span">
                             {index === 0 ? "대표자 :" : "대의원 :"}
                           </span>
                           <span className="text-wrapper-9">&nbsp;</span>
                         </p>
+                        <select
+                          className="frame-15 text-wrapper-8"
+                          value=""
+                          onChange={(e) => handleDropdownChange(e, index)}
+                        >
+                          <option value="">
+                            {rep.student_id > 0
+                              ? `${rep.student_id} ${rep.name}`
+                              : "없음"}
+                          </option>
+                          {memberList.map((member, idx) => (
+                            <option key={idx} value={member}>
+                              {member}
+                            </option>
+                          ))}
+                        </select>
                       </div>
                     </div>
                   ))}
+                </div>
               </div>
-            </div>
-            {/* )} */}
+            )}
             <div className="frame-16">
               <SubTitle
                 className="sub-title-instance"
                 divClassName="design-component-instance-node"
-                text="동아리 설명"
+                text="동아리 설명 변경"
               />
               <div className="frame-17">
                 <textarea
@@ -180,7 +245,7 @@ export const ClubManage = (): JSX.Element => {
                     <SubTitle
                       className="sub-title-instance"
                       divClassName="design-component-instance-node"
-                      text="활동 보고서"
+                      text="활동 보고서 작성"
                     />
                     <div className="frame-22">
                       <Activity