<fix>: <리스트 렌더링 시 코드 수정>

- 상태변수명을 좀 더 명확하게 수정 - id값이 정확하게 들어갈 수 있도록 로직 보완
rabyeoljji · Aug 8, 2024 · 61713bc · 61713bc
1 parent ff36262
commit 61713bc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git a/src/components/channel/MemberList.tsx b/src/components/channel/MemberList.tsx
@@ -19,7 +19,7 @@ const banishContent = `해당 멤버를 스터디에서 퇴출시키겠습니까
 const MemberList = ({ setNewSubLeader, setModal, isStudyEnd }: MemberListPropsType): JSX.Element => {
   const { accessToken, isMember } = useAuthStore();
   const { channelId } = useParams();
-  const [studyMemberId, setStudyMemberId] = useState<{ name: string; id: undefined | number }>({
+  const [studyMemberState, setStudyMemberState] = useState<{ name: string; id: undefined | number }>({
     name: "",
     id: undefined,
   });
@@ -39,8 +39,12 @@ const MemberList = ({ setNewSubLeader, setModal, isStudyEnd }: MemberListPropsTy
     studyMemberId: number,
     memberName?: string,
   ) => {
-    if (memberName) {
-      setStudyMemberId(() => ({ name: memberName, id: studyMemberId }));
+    if (studyMemberId) {
+      if (memberName) {
+        setStudyMemberState(() => ({ name: memberName, id: studyMemberId }));
+      } else {
+        setStudyMemberState((origin) => ({ ...origin, id: studyMemberId }));
+      }
     }
 
     const target = e.target as HTMLButtonElement;
@@ -163,15 +167,15 @@ const MemberList = ({ setNewSubLeader, setModal, isStudyEnd }: MemberListPropsTy
                       >
                         퇴출
                       </button>
-                      {modalState.isOpen && studyMemberId && (
+                      {modalState.isOpen && studyMemberState && (
                         <Modal>
                           <div className="w-60 px-6 flex flex-col justify-center items-center text-center whitespace-pre-wrap">
                             {modalState.content}
                             <div className="flex justify-center items-center mt-10">
                               <button
                                 className="yes-btn btn-blue w-10 mr-4"
                                 onClick={(e) =>
-                                  handleConfirm(e, studyMemberId.id ?? member.studyMemberId, studyMemberId.name)
+                                  handleConfirm(e, studyMemberState.id ?? member.studyMemberId, studyMemberState.name)
                                 }
                               >
                                 예

diff --git a/src/components/channel/Recruitment.tsx b/src/components/channel/Recruitment.tsx
@@ -202,14 +202,14 @@ const Recruitment = (): JSX.Element => {
                               {modalState.content}
                               <div className="flex justify-center items-center mt-10">
                                 <button
-                                  id={`${participant.participationId}-modal-yes`}
+                                  id={`${participateId}-modal-yes`}
                                   className="yes-btn btn-blue w-10 mr-4"
                                   onClick={(e) => handleConfirm(e, Number(channelId), participateId)}
                                 >
                                   예
                                 </button>
                                 <button
-                                  id={`${participant.participationId}-modal-no`}
+                                  id={`${participateId}-modal-no`}
                                   className="no-btn btn-blue"
                                   onClick={(e) => handleConfirm(e, Number(channelId), participateId)}
                                 >