From 02c90f0fae332ed701b86468e3aaf06b0e7895b9 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Thu, 10 Oct 2024 16:50:07 +0900
Subject: [PATCH 01/12] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=ED=86=B5=EA=B3=84,=20=ED=88=AC=ED=91=9C=20=ED=98=84=ED=99=A9?=
 =?UTF-8?q?=20=ED=83=AD=EC=97=90=20role=3D"tab"=20=EB=B0=8F=20aria-current?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9=EC=9C=BC=EB=A1=9C=20=ED=83=AD=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=EC=9D=98=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/RoundResultTab/RoundResultTab.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/RoundResultTab/RoundResultTab.tsx b/frontend/src/components/RoundResultTab/RoundResultTab.tsx
index 92856d02..d3585767 100644
--- a/frontend/src/components/RoundResultTab/RoundResultTab.tsx
+++ b/frontend/src/components/RoundResultTab/RoundResultTab.tsx
@@ -15,7 +15,12 @@ const TAB_TITLE = {
 
 const RoundResultTab = ({ tab, activeTab, handleClickTab }: RoundResultTabProps) => {
   return (
-    <button css={tabButtonStyle(activeTab === tab)} onClick={() => handleClickTab(tab)}>
+    <button
+      css={tabButtonStyle(activeTab === tab)}
+      onClick={() => handleClickTab(tab)}
+      role="tab"
+      aria-current={activeTab === tab}
+    >
       {TAB_TITLE[tab]}
     </button>
   );

From 66f51c6c48653752a39411f964275f6f32bb8545 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Thu, 10 Oct 2024 17:34:00 +0900
Subject: [PATCH 02/12] =?UTF-8?q?refactor:=20=EB=9D=BC=EC=9A=B4=EB=93=9C?=
 =?UTF-8?q?=20=EA=B2=B0=EA=B3=BC=20=EB=B0=8F=20=EA=B2=8C=EC=9E=84=20Header?=
 =?UTF-8?q?=EC=97=90=20=EC=8B=9C=EA=B0=81=EC=A0=81=20=EC=9A=94=EC=86=8C?=
 =?UTF-8?q?=EB=A5=BC=20aria-hidden=20=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1=20=EC=A0=84=EC=9A=A9=20=ED=85=8D?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/layout/Header/Header.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
index 61d4219c..30960596 100644
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -18,6 +18,7 @@ import useRoutePath from './hooks/useRoutePath';
 import ArrowLeft from '@/assets/images/arrowLeft.svg';
 import ExitIcon from '@/assets/images/exitIcon.webp';
 import SettingIcon from '@/assets/images/settingsIcon.webp';
+import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
 import RoomSettingModal from '@/components/common/RoomSettingModal/RoomSettingModal';
 import { ROUTES } from '@/constants/routes';
 import useBalanceContentQuery from '@/hooks/useBalanceContentQuery';
@@ -94,11 +95,17 @@ export const RoundHeader = () => {
 
   return (
     <header css={headerLayout()}>
-      <span css={roundText}>
+      <span css={roundText} aria-hidden={true}>
         {balanceContent.currentRound}/{balanceContent.totalRound}
       </span>
-      <h1 css={gameTitle}>{title}</h1>
-      <span css={roundText}></span>
+      <h1 css={gameTitle} aria-hidden={true}>
+        {title}
+      </h1>
+      <span css={roundText} aria-hidden={true}></span>
+
+      <A11yOnly>
+        {balanceContent.totalRound}라운드.중.{balanceContent.currentRound}라운드.{title}페이지
+      </A11yOnly>
     </header>
   );
 };

From a069acd28eb92682dec9d4c2c51d2473f63608d8 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Fri, 11 Oct 2024 00:26:38 +0900
Subject: [PATCH 03/12] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=ED=86=B5=EA=B3=84=20=ED=83=AD=20=EC=8B=9C=EA=B0=81=EC=A0=81=20?=
 =?UTF-8?q?=EC=9A=94=EC=86=8C=20aria-hidden=20=EC=B2=98=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EC=A0=84=EC=9A=A9=20?=
 =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TabContentContainer.tsx                   | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/TabContentContainer/TabContentContainer.tsx b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
index 8030bd4a..70ca2978 100644
--- a/frontend/src/components/TabContentContainer/TabContentContainer.tsx
+++ b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
@@ -16,6 +16,7 @@ import {
   totalResultInfoText,
 } from './TabContentContainer.styled';
 import getDominantVote from './TabContentContainer.util';
+import A11yOnly from '../common/a11yOnly/A11yOnly';
 import OptionParticipantsContainer from '../OptionParticipantsContainer/OptionParticipantsContainer';
 import useTotalCountAnimation from '../RoundVoteContainer/RoundVoteContainer.hook';
 import TopicContainer from '../TopicContainer/TopicContainer';
@@ -55,7 +56,13 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
       <TopicContainer />
       {isVote && isVoteStatisticsTabActive && (
         <>
-          <div css={roundVoteResultContainer}>
+          <A11yOnly>
+            {groupRoundResult.firstOption.name}.{groupRoundResult.firstOption.percent}%.
+            {groupRoundResult.firstOption.memberCount}명 선택. {groupRoundResult.secondOption.name}.
+            {groupRoundResult.secondOption.percent}%.{groupRoundResult.secondOption.memberCount}명
+            선택
+          </A11yOnly>
+          <div css={roundVoteResultContainer} aria-hidden={true}>
             <div css={categoryContainer}>
               <span>{groupRoundResult.firstOption.name}</span>
               <span>{groupRoundResult.secondOption.name}</span>
@@ -76,18 +83,20 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
           {totalResult && dominantVoteData && (
             <div css={totalResultInfoContainer}>
               {dominantVoteData.isEqual ? (
-                <span css={totalResultInfoText}>
-                  🥜 땅콩 유저들 사이에서 선택이 팽팽하게 갈렸어요! 😲
-                </span>
+                <span css={totalResultInfoText}>📢 전체 유저 사이에서는 의견이 반반이에요 😲</span>
               ) : (
                 <>
-                  <span css={totalResultInfoText}>
-                    🥜 땅콩 유저 중{' '}
+                  <span css={totalResultInfoText} aria-hidden={true}>
+                    📢 전체 유저 중{' '}
                     <span css={emphasizeText}>{dominantVoteData.dominantPercent}%</span>는
                   </span>
-                  <span css={totalResultInfoText}>
+                  <span css={totalResultInfoText} aria-hidden={true}>
                     <span css={emphasizeText}>{dominantVoteData.dominantName}</span>를 선택했어요 !
                   </span>
+                  <A11yOnly>
+                    📢 전체 유저 중 {dominantVoteData.dominantPercent}%는.
+                    {dominantVoteData.dominantName}를 선택했어요
+                  </A11yOnly>
                 </>
               )}
             </div>

From 4eb4ca67070adf3b9bc6885d195b9227458e8fc7 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Fri, 11 Oct 2024 01:27:33 +0900
Subject: [PATCH 04/12] =?UTF-8?q?refactor:=20A11yOnly=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9C=84=EC=B9=98=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TabContentContainer/TabContentContainer.tsx           | 8 ++++----
 frontend/src/components/layout/Header/Header.tsx          | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/TabContentContainer/TabContentContainer.tsx b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
index 70ca2978..b52ee6ab 100644
--- a/frontend/src/components/TabContentContainer/TabContentContainer.tsx
+++ b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
@@ -86,6 +86,10 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
                 <span css={totalResultInfoText}>📢 전체 유저 사이에서는 의견이 반반이에요 😲</span>
               ) : (
                 <>
+                  <A11yOnly>
+                    📢 전체 유저 중 {dominantVoteData.dominantPercent}%는.
+                    {dominantVoteData.dominantName}를 선택했어요
+                  </A11yOnly>
                   <span css={totalResultInfoText} aria-hidden={true}>
                     📢 전체 유저 중{' '}
                     <span css={emphasizeText}>{dominantVoteData.dominantPercent}%</span>는
@@ -93,10 +97,6 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
                   <span css={totalResultInfoText} aria-hidden={true}>
                     <span css={emphasizeText}>{dominantVoteData.dominantName}</span>를 선택했어요 !
                   </span>
-                  <A11yOnly>
-                    📢 전체 유저 중 {dominantVoteData.dominantPercent}%는.
-                    {dominantVoteData.dominantName}를 선택했어요
-                  </A11yOnly>
                 </>
               )}
             </div>
diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
index 30960596..598ec3c8 100644
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -95,6 +95,10 @@ export const RoundHeader = () => {
 
   return (
     <header css={headerLayout()}>
+      <A11yOnly>
+        {balanceContent.totalRound}라운드.중.{balanceContent.currentRound}라운드.{title}페이지
+      </A11yOnly>
+
       <span css={roundText} aria-hidden={true}>
         {balanceContent.currentRound}/{balanceContent.totalRound}
       </span>
@@ -102,10 +106,6 @@ export const RoundHeader = () => {
         {title}
       </h1>
       <span css={roundText} aria-hidden={true}></span>
-
-      <A11yOnly>
-        {balanceContent.totalRound}라운드.중.{balanceContent.currentRound}라운드.{title}페이지
-      </A11yOnly>
     </header>
   );
 };

From a071cc5b8608514c42e9cce04c90f20c771fab85 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Fri, 11 Oct 2024 01:46:46 +0900
Subject: [PATCH 05/12] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=ED=98=84=ED=99=A9=20=EC=84=A0=ED=83=9D=EC=A7=80=EB=AA=85?=
 =?UTF-8?q?=EA=B3=BC=20=ED=88=AC=ED=91=9C=20=EC=88=98=20aria-hidden=20?=
 =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?=
 =?UTF-8?q?=EC=A0=84=EC=9A=A9=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OptionParticipants/OptionParticipants.tsx    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/OptionParticipants/OptionParticipants.tsx b/frontend/src/components/OptionParticipants/OptionParticipants.tsx
index 24bdb894..7988641e 100644
--- a/frontend/src/components/OptionParticipants/OptionParticipants.tsx
+++ b/frontend/src/components/OptionParticipants/OptionParticipants.tsx
@@ -3,6 +3,7 @@ import {
   optionParticipantsLayout,
   participantsListWrapper,
 } from './OptionParticipants.styled';
+import A11yOnly from '../common/a11yOnly/A11yOnly';
 import NicknameItem from '../NicknameItem/NicknameItem';
 
 export interface OptionParticipantsProps {
@@ -14,7 +15,10 @@ export interface OptionParticipantsProps {
 const OptionParticipants = ({ optionName, memberCount, members }: OptionParticipantsProps) => {
   return (
     <div css={optionParticipantsLayout}>
-      <p css={optionInfo}>
+      <A11yOnly>
+        {optionName}.{memberCount}명
+      </A11yOnly>
+      <p css={optionInfo} aria-hidden={true}>
         {optionName}: {memberCount}
       </p>
       <ul css={participantsListWrapper}>

From bd4f9647fa0338401a4d5402085dcf3365ce74bf Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Fri, 11 Oct 2024 20:09:32 +0900
Subject: [PATCH 06/12] =?UTF-8?q?test:=20RoundVoteContainer=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RoundVoteContainer.test.tsx               | 27 ++++++++-----------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/RoundVoteContainer/RoundVoteContainer.test.tsx b/frontend/src/components/RoundVoteContainer/RoundVoteContainer.test.tsx
index 0b060bb5..10c6dc91 100644
--- a/frontend/src/components/RoundVoteContainer/RoundVoteContainer.test.tsx
+++ b/frontend/src/components/RoundVoteContainer/RoundVoteContainer.test.tsx
@@ -10,25 +10,20 @@ describe('RoundVoteContainer 컴포넌트 테스트', () => {
     const user = userEvent.setup();
     customRender(<RoundVoteContainer />);
 
-    const button = await screen.findByRole('button', { name: '투표 현황' });
+    const button = await screen.findByRole('tab', { name: '투표 현황' });
     await user.click(button);
 
     await waitFor(() => {
-      // 첫 번째 선택지와 투표자 확인
-      expect(screen.getByText((content) => content.includes('100억 빚 송강'))).toBeInTheDocument();
-      expect(screen.getByText((content) => content.includes('d'))).toBeInTheDocument();
-      // 두 번째 선택지와 투표자 확인
-      expect(
-        screen.getByText((content) => content.includes('100억 부자 송강호')),
-      ).toBeInTheDocument();
-      expect(
-        screen.getByText((content) => content.includes('일이삼사오육칠팔구십일이')),
-      ).toBeInTheDocument();
-      // 기권자 확인
-      expect(
-        screen.getByText((content) => content.includes('투표에 참여하지 않으셨어요')),
-      ).toBeInTheDocument();
-      expect(screen.getByText((content) => content.includes('ㅁ'))).toBeInTheDocument();
+      // 첫 번째 선택지의 투표자 확인
+      expect(screen.getByText('d')).toBeInTheDocument();
+
+      // 두 번째 선택지의 투표자들 확인
+      expect(screen.getByText('일이삼사오육칠팔구십일이')).toBeInTheDocument();
+      expect(screen.getByText('가나다라마바사아자차카타')).toBeInTheDocument();
+      expect(screen.getByText('abc')).toBeInTheDocument();
+      expect(screen.getByText('땅콩땅콩땅콩땅콩땅콩땅콩')).toBeInTheDocument();
+      expect(screen.getByText('123456789012')).toBeInTheDocument();
+      expect(screen.getByText('안녕하세요안녕하세요안녕')).toBeInTheDocument();
     });
   });
 });

From 751f2835c9b9007af77f4d44ccc9011348b88292 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Sun, 13 Oct 2024 18:03:23 +0900
Subject: [PATCH 07/12] =?UTF-8?q?refactor:=20mock=20data=EB=A5=BC=20?=
 =?UTF-8?q?=EC=9D=B4=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=ED=85=8C?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=88=AC?=
 =?UTF-8?q?=ED=91=9C=EB=A5=BC=20=ED=95=98=EC=A7=80=20=EC=95=8A=EC=9D=80=20?=
 =?UTF-8?q?=EB=A9=A4=EB=B2=84=20=ED=99=95=EC=9D=B8=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RoundVoteContainer.test.tsx               | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/RoundVoteContainer/RoundVoteContainer.test.tsx b/frontend/src/components/RoundVoteContainer/RoundVoteContainer.test.tsx
index 10c6dc91..0b34df4e 100644
--- a/frontend/src/components/RoundVoteContainer/RoundVoteContainer.test.tsx
+++ b/frontend/src/components/RoundVoteContainer/RoundVoteContainer.test.tsx
@@ -3,6 +3,8 @@ import { userEvent } from '@testing-library/user-event';
 
 import RoundVoteContainer from './RoundVoteContainer';
 
+import ROUND_VOTE_RESULT from '@/mocks/data/roundVoteResult.json';
+
 import { customRender } from '@/test-utils';
 
 describe('RoundVoteContainer 컴포넌트 테스트', () => {
@@ -14,16 +16,23 @@ describe('RoundVoteContainer 컴포넌트 테스트', () => {
     await user.click(button);
 
     await waitFor(() => {
-      // 첫 번째 선택지의 투표자 확인
-      expect(screen.getByText('d')).toBeInTheDocument();
-
-      // 두 번째 선택지의 투표자들 확인
-      expect(screen.getByText('일이삼사오육칠팔구십일이')).toBeInTheDocument();
-      expect(screen.getByText('가나다라마바사아자차카타')).toBeInTheDocument();
-      expect(screen.getByText('abc')).toBeInTheDocument();
-      expect(screen.getByText('땅콩땅콩땅콩땅콩땅콩땅콩')).toBeInTheDocument();
-      expect(screen.getByText('123456789012')).toBeInTheDocument();
-      expect(screen.getByText('안녕하세요안녕하세요안녕')).toBeInTheDocument();
+      // 첫 번째 선택지의 투표 멤버 확인
+      const firstOptionMembers = ROUND_VOTE_RESULT.group.firstOption.members;
+      firstOptionMembers.forEach((member) => {
+        expect(screen.getByText(member)).toBeInTheDocument();
+      });
+
+      // 두 번째 선택지의 투표 멤버 확인
+      const secondOptionMembers = ROUND_VOTE_RESULT.group.secondOption.members;
+      secondOptionMembers.forEach((member) => {
+        expect(screen.getByText(member)).toBeInTheDocument();
+      });
+
+      // 투표를 하지 않은 멤버 확인
+      const giveUpMembers = ROUND_VOTE_RESULT.group.giveUp.members;
+      giveUpMembers.forEach((member) => {
+        expect(screen.getByText(member)).toBeInTheDocument();
+      });
     });
   });
 });

From 812444aaaed40e247e3063ef4ed0663def73a988 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Sun, 13 Oct 2024 18:06:45 +0900
Subject: [PATCH 08/12] =?UTF-8?q?refactor:=20aria-hidden=20true=20?=
 =?UTF-8?q?=EB=AA=85=EC=8B=9C=ED=95=98=EC=A7=80=20=EC=95=8A=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/OptionParticipants/OptionParticipants.tsx    | 2 +-
 .../components/TabContentContainer/TabContentContainer.tsx  | 6 +++---
 frontend/src/components/layout/Header/Header.tsx            | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/OptionParticipants/OptionParticipants.tsx b/frontend/src/components/OptionParticipants/OptionParticipants.tsx
index 7988641e..b7339c0b 100644
--- a/frontend/src/components/OptionParticipants/OptionParticipants.tsx
+++ b/frontend/src/components/OptionParticipants/OptionParticipants.tsx
@@ -18,7 +18,7 @@ const OptionParticipants = ({ optionName, memberCount, members }: OptionParticip
       <A11yOnly>
         {optionName}.{memberCount}명
       </A11yOnly>
-      <p css={optionInfo} aria-hidden={true}>
+      <p css={optionInfo} aria-hidden>
         {optionName}: {memberCount}
       </p>
       <ul css={participantsListWrapper}>
diff --git a/frontend/src/components/TabContentContainer/TabContentContainer.tsx b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
index b52ee6ab..853ccee6 100644
--- a/frontend/src/components/TabContentContainer/TabContentContainer.tsx
+++ b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
@@ -62,7 +62,7 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
             {groupRoundResult.secondOption.percent}%.{groupRoundResult.secondOption.memberCount}명
             선택
           </A11yOnly>
-          <div css={roundVoteResultContainer} aria-hidden={true}>
+          <div css={roundVoteResultContainer} aria-hidden>
             <div css={categoryContainer}>
               <span>{groupRoundResult.firstOption.name}</span>
               <span>{groupRoundResult.secondOption.name}</span>
@@ -90,11 +90,11 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
                     📢 전체 유저 중 {dominantVoteData.dominantPercent}%는.
                     {dominantVoteData.dominantName}를 선택했어요
                   </A11yOnly>
-                  <span css={totalResultInfoText} aria-hidden={true}>
+                  <span css={totalResultInfoText} aria-hidden>
                     📢 전체 유저 중{' '}
                     <span css={emphasizeText}>{dominantVoteData.dominantPercent}%</span>는
                   </span>
-                  <span css={totalResultInfoText} aria-hidden={true}>
+                  <span css={totalResultInfoText} aria-hidden>
                     <span css={emphasizeText}>{dominantVoteData.dominantName}</span>를 선택했어요 !
                   </span>
                 </>
diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
index 598ec3c8..89e3ba07 100644
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -99,13 +99,13 @@ export const RoundHeader = () => {
         {balanceContent.totalRound}라운드.중.{balanceContent.currentRound}라운드.{title}페이지
       </A11yOnly>
 
-      <span css={roundText} aria-hidden={true}>
+      <span css={roundText} aria-hidden>
         {balanceContent.currentRound}/{balanceContent.totalRound}
       </span>
-      <h1 css={gameTitle} aria-hidden={true}>
+      <h1 css={gameTitle} aria-hidden>
         {title}
       </h1>
-      <span css={roundText} aria-hidden={true}></span>
+      <span css={roundText} aria-hidden></span>
     </header>
   );
 };

From 066d36fb280b48df137cdbcbb93fb6278828a97d Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Sun, 13 Oct 2024 18:41:23 +0900
Subject: [PATCH 09/12] =?UTF-8?q?refactor:=20=EC=8A=A4=ED=81=AC=EB=A6=B0?=
 =?UTF-8?q?=20=EB=A6=AC=EB=8D=94=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=B3=80?=
 =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EA=B4=80=EB=A6=AC=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TabContentContainer/TabContentContainer.tsx   | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/TabContentContainer/TabContentContainer.tsx b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
index 853ccee6..006ea171 100644
--- a/frontend/src/components/TabContentContainer/TabContentContainer.tsx
+++ b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
@@ -51,16 +51,18 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
 
   const dominantVoteData = totalResult ? getDominantVote(totalResult) : null;
 
+  const screenReaderFirstOption = `${groupRoundResult.firstOption.name},${groupRoundResult.firstOption.percent}%,${groupRoundResult.firstOption.memberCount}명 선택,`;
+  const screenReaderSecondOption = `${groupRoundResult.secondOption.name},${groupRoundResult.secondOption.percent}%,${groupRoundResult.secondOption.memberCount}명 선택`;
+  const screenReaderDominantVote = `📢 전체 유저 중 ${dominantVoteData?.dominantPercent}%는, ${dominantVoteData?.dominantName}를 선택했어요`;
+
   return (
     <div css={contentWrapperStyle}>
       <TopicContainer />
       {isVote && isVoteStatisticsTabActive && (
         <>
           <A11yOnly>
-            {groupRoundResult.firstOption.name}.{groupRoundResult.firstOption.percent}%.
-            {groupRoundResult.firstOption.memberCount}명 선택. {groupRoundResult.secondOption.name}.
-            {groupRoundResult.secondOption.percent}%.{groupRoundResult.secondOption.memberCount}명
-            선택
+            {screenReaderFirstOption}
+            {screenReaderSecondOption}
           </A11yOnly>
           <div css={roundVoteResultContainer} aria-hidden>
             <div css={categoryContainer}>
@@ -86,10 +88,7 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
                 <span css={totalResultInfoText}>📢 전체 유저 사이에서는 의견이 반반이에요 😲</span>
               ) : (
                 <>
-                  <A11yOnly>
-                    📢 전체 유저 중 {dominantVoteData.dominantPercent}%는.
-                    {dominantVoteData.dominantName}를 선택했어요
-                  </A11yOnly>
+                  <A11yOnly>{screenReaderDominantVote}</A11yOnly>
                   <span css={totalResultInfoText} aria-hidden>
                     📢 전체 유저 중{' '}
                     <span css={emphasizeText}>{dominantVoteData.dominantPercent}%</span>는

From fd03654409fec09a6baa26b6f95cc51df2f38331 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Sun, 13 Oct 2024 18:49:43 +0900
Subject: [PATCH 10/12] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20?=
 =?UTF-8?q?=ED=98=84=ED=99=A9=EC=97=90=EC=84=9C=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20=EC=9D=B4=EB=AF=B8=EC=A7=80=EB=A5=BC=20=EC=9D=BD?=
 =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/NicknameItem/NicknameItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/NicknameItem/NicknameItem.tsx b/frontend/src/components/NicknameItem/NicknameItem.tsx
index 1568456a..02a0c559 100644
--- a/frontend/src/components/NicknameItem/NicknameItem.tsx
+++ b/frontend/src/components/NicknameItem/NicknameItem.tsx
@@ -14,7 +14,7 @@ const NicknameItem = ({ nickName }: NicknameItemProp) => {
 
   return (
     <li css={nicknameItemLayout}>
-      <img src={SillyDdangkong} alt="사용자 프로필" css={profileImage} />
+      <img src={SillyDdangkong} alt="" css={profileImage} />
       <span css={nicknameText(isMyNickname)}>{nickName}</span>
     </li>
   );

From 1a4660547aa9437323eef0d9c07f9fa05fa398b1 Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Wed, 16 Oct 2024 17:47:55 +0900
Subject: [PATCH 11/12] =?UTF-8?q?refactor:=20=EC=95=88=EB=93=9C=EB=A1=9C?=
 =?UTF-8?q?=EC=9D=B4=EB=93=9C=EC=97=90=EC=84=9C=EB=8A=94=20,=EB=A5=BC=20?=
 =?UTF-8?q?=EB=81=8A=EC=96=B4=20=EC=9D=BD=EA=B8=B0=EB=A1=9C=20=EC=9D=B8?=
 =?UTF-8?q?=EC=8B=9D=ED=95=98=EC=A7=80=20=EC=95=8A=EC=95=84=20.=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/TabContentContainer/TabContentContainer.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/TabContentContainer/TabContentContainer.tsx b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
index 006ea171..ef7c073d 100644
--- a/frontend/src/components/TabContentContainer/TabContentContainer.tsx
+++ b/frontend/src/components/TabContentContainer/TabContentContainer.tsx
@@ -51,9 +51,9 @@ const TabContentContainer = ({ isVoteStatisticsTabActive }: TabContentContainerP
 
   const dominantVoteData = totalResult ? getDominantVote(totalResult) : null;
 
-  const screenReaderFirstOption = `${groupRoundResult.firstOption.name},${groupRoundResult.firstOption.percent}%,${groupRoundResult.firstOption.memberCount}명 선택,`;
-  const screenReaderSecondOption = `${groupRoundResult.secondOption.name},${groupRoundResult.secondOption.percent}%,${groupRoundResult.secondOption.memberCount}명 선택`;
-  const screenReaderDominantVote = `📢 전체 유저 중 ${dominantVoteData?.dominantPercent}%는, ${dominantVoteData?.dominantName}를 선택했어요`;
+  const screenReaderFirstOption = `${groupRoundResult.firstOption.name} ${groupRoundResult.firstOption.percent}%. ${groupRoundResult.firstOption.memberCount}명 선택.`;
+  const screenReaderSecondOption = `${groupRoundResult.secondOption.name} ${groupRoundResult.secondOption.percent}%. ${groupRoundResult.secondOption.memberCount}명 선택`;
+  const screenReaderDominantVote = `📢 전체 유저 중 ${dominantVoteData?.dominantPercent}%는. ${dominantVoteData?.dominantName}를 선택했어요`;
 
   return (
     <div css={contentWrapperStyle}>

From 46ab039ab3e28897230275024a6d3957d7fb3efe Mon Sep 17 00:00:00 2001
From: useon <roqkftjs@gmail.com>
Date: Wed, 16 Oct 2024 17:48:40 +0900
Subject: [PATCH 12/12] =?UTF-8?q?refactor:=20RoundResultHeader=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC=20#325?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/layout/Header/Header.stories.tsx  |  4 ++--
 frontend/src/components/layout/Header/Header.tsx | 16 +++++-----------
 frontend/src/pages/GamePage/GamePage.tsx         |  4 ++--
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/layout/Header/Header.stories.tsx b/frontend/src/components/layout/Header/Header.stories.tsx
index 274d2d00..d6f1cf39 100644
--- a/frontend/src/components/layout/Header/Header.stories.tsx
+++ b/frontend/src/components/layout/Header/Header.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from '@storybook/react';
 
-import Header, { BackHeader, RoomSettingHeader, RoundHeader, TitleHeader } from './Header';
+import Header, { BackHeader, RoomSettingHeader, RoundResultHeader, TitleHeader } from './Header';
 
 const meta = {
   title: 'Header',
@@ -20,7 +20,7 @@ export const 방_설정_헤더: Story = {
 };
 
 export const 라운드_헤더: Story = {
-  render: () => <RoundHeader />,
+  render: () => <RoundResultHeader />,
 };
 
 export const 투표_현황_헤더: Story = {
diff --git a/frontend/src/components/layout/Header/Header.tsx b/frontend/src/components/layout/Header/Header.tsx
index 89e3ba07..ef3563ef 100644
--- a/frontend/src/components/layout/Header/Header.tsx
+++ b/frontend/src/components/layout/Header/Header.tsx
@@ -36,7 +36,7 @@ const Header = () => {
 
   if (isNicknamePage) return <TitleHeader title="닉네임 설정" />;
   if (isReadyPage) return <RoomSettingHeader title="밸런스 게임" />;
-  if (isRoundResultPage) return <RoundHeader />;
+  if (isRoundResultPage) return <RoundResultHeader />;
   if (isMatchingResultPage) return <MatchingResultHeader title="매칭 결과" />;
 };
 
@@ -85,25 +85,19 @@ export const RoomSettingHeader = ({ title }: HeaderProps) => {
 };
 
 // 4. 좌측 상단 라운드, 가운데 제목 차지하는 헤더 (API 호출 O) : 게임 화면, 라운드 통계 화면
-export const RoundHeader = () => {
+export const RoundResultHeader = () => {
   const { roomId } = useParams();
-  const isRoundResultPage = location.pathname === ROUTES.roundResult(Number(roomId));
-
   const { balanceContent } = useBalanceContentQuery(Number(roomId));
-
-  const title = isRoundResultPage ? '투표 결과' : '밸런스 게임';
+  const screenReaderRoundResult = `${balanceContent.totalRound}라운드 중. ${balanceContent.currentRound}라운드. 투표 결과 페이지`;
 
   return (
     <header css={headerLayout()}>
-      <A11yOnly>
-        {balanceContent.totalRound}라운드.중.{balanceContent.currentRound}라운드.{title}페이지
-      </A11yOnly>
-
+      <A11yOnly>{screenReaderRoundResult}</A11yOnly>
       <span css={roundText} aria-hidden>
         {balanceContent.currentRound}/{balanceContent.totalRound}
       </span>
       <h1 css={gameTitle} aria-hidden>
-        {title}
+        투표 결과
       </h1>
       <span css={roundText} aria-hidden></span>
     </header>
diff --git a/frontend/src/pages/GamePage/GamePage.tsx b/frontend/src/pages/GamePage/GamePage.tsx
index 10aacfc6..3be16bb8 100644
--- a/frontend/src/pages/GamePage/GamePage.tsx
+++ b/frontend/src/pages/GamePage/GamePage.tsx
@@ -1,12 +1,12 @@
 import Content from '@/components/layout/Content/Content';
-import { RoundHeader } from '@/components/layout/Header/Header';
+import { RoundResultHeader } from '@/components/layout/Header/Header';
 import SelectContainer from '@/components/SelectContainer/SelectContainer';
 import TopicContainer from '@/components/TopicContainer/TopicContainer';
 
 const GamePage = () => {
   return (
     <>
-      <RoundHeader />
+      <RoundResultHeader />
       <Content>
         <TopicContainer />
         <SelectContainer />