refactor: RoomSettingHeader에 Modal Context 적용 #272

frontend/src/components/layout/Header/Header.test.tsx

@@ -0,0 +1,21 @@
+import { screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import { RoomSettingHeader } from './Header';
+
+import { customRenderWithIsMaster } from '@/utils/test-utils';
+
+describe('Header 테스트', () => {
+  it('방 설정 버튼을 클릭했을 때, 방 설정 모달이 뜬다.', async () => {
+    const user = userEvent.setup();
+    customRenderWithIsMaster(<RoomSettingHeader title="밸런스 게임" />, true);
+
+    const roomSettingButton = await screen.findByAltText('방 설정');
+    await user.click(roomSettingButton);
+
+    await waitFor(() => {
+      const category = screen.getByText('카테고리');
+      expect(category).toBeInTheDocument();
+    });
+  });
+});

frontend/src/components/layout/Header/Header.tsx

@@ -43,24 +43,27 @@ export const TitleHeader = ({ title }: HeaderProps) => (
 
 // 3. 가운데 제목, 우측 상단 차지하는 헤더 : 게임 대기 화면
 export const RoomSettingHeader = ({ title }: HeaderProps) => {
-  const { isOpen, show, close } = useModal();
+  const { show } = useModal();
   const { handleExit } = useExit();
   const memberInfo = useRecoilValue(memberInfoState);
 
+  const handleClickRoomSetting = () => {
+    show(RoomSettingModal);
+  };
+
   return (
     <header css={headerLayout()}>
       <button onClick={handleExit} css={buttonWrapper}>
-        <img src={ExitIcon} alt="방 설정" css={iconImage} />
+        <img src={ExitIcon} alt="방 나가기" css={iconImage} />
       </button>
       <h1 css={gameTitle}>{title}</h1>
       {memberInfo.isMaster ? (
-        <button onClick={show} css={buttonWrapper}>
+        <button onClick={handleClickRoomSetting} css={buttonWrapper}>
           <img src={SettingIcon} alt="방 설정" css={iconImage} />
         </button>
       ) : (
         <span css={roundText}></span>
       )}
-      {isOpen && <RoomSettingModal isOpen={isOpen} onClose={close} />}
     </header>
   );
 };