From f620ab932d52ca84bd48f72dcf83668abc365a05 Mon Sep 17 00:00:00 2001
From: rbgksqkr <rbgks1937@naver.com>
Date: Fri, 20 Sep 2024 19:41:53 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20RoomSettingHeader=EC=97=90=20Modal?=
 =?UTF-8?q?=20Context=20=EC=A0=81=EC=9A=A9=20#272?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/layout/Header/Header.test.tsx  | 21 +++++++++++++++++++
 .../src/components/layout/Header/Header.tsx   | 11 ++++++----
 2 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/layout/Header/Header.test.tsx

diff --git a/frontend/src/components/layout/Header/Header.test.tsx b/frontend/src/components/layout/Header/Header.test.tsx
new file mode 100644
index 000000000..249f2c986
--- /dev/null
+++ b/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();
+    });
+  });
+});
diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
index 24e0065c2..568229ee4 100644
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/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>
   );
 };