refactor: 초대하기 모달 Modal Context 적용 #272

frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.test.tsx

@@ -0,0 +1,21 @@
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import ReadyMembersContainer from './ReadyMembersContainer';
+
+import { customRender } from '@/utils/test-utils';
+
+describe('ReadyMembersContainer 테스트', () => {
+  it('초대하기 버튼을 클릭했을 때, 초대 모달이 뜬다.', async () => {
+    const user = userEvent.setup();
+    customRender(<ReadyMembersContainer />);
+
+    const inviteButton = await screen.findByText('초대하기');
+    await user.click(inviteButton);
+
+    await waitFor(() => {
+      const copyText = screen.getByText('초대 링크 복사');
+      expect(copyText).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/ReadyMembersContainer/ReadyMembersContainer.tsx

@@ -23,9 +23,13 @@ import { memberInfoState } from '@/recoil/atom';
 
 const ReadyMembersContainer = () => {
   const { members, master } = useGetRoomInfo();
-  const { isOpen, show, close } = useModal();
+  const { show } = useModal();
   const [memberInfo, setMemberInfo] = useRecoilState(memberInfoState);
 
+  const handleClickInvite = () => {
+    show(InviteModal);
+  };
+
   // 원래 방장이 아니다 + 방장의 memberId와 내 memberId가 같다 -> 방장으로 변경
   useEffect(() => {
     if (!memberInfo.isMaster && master.memberId === memberInfo.memberId) {
@@ -39,7 +43,7 @@ const ReadyMembersContainer = () => {
       <section css={membersContainer}>
         <ul css={memberList}>
           <li>
-            <button css={inviteButton} onClick={show}>
+            <button css={inviteButton} onClick={handleClickInvite}>
               <div css={profileBox}>
                 <img src={plusIcon} alt="추가 아이콘" />
               </div>
@@ -59,7 +63,6 @@ const ReadyMembersContainer = () => {
           ))}
         </ul>
       </section>
-      <InviteModal isOpen={isOpen} onClose={close} />
     </section>
   );
 };