refactor: 리뷰어, 참여자 문구 보여주기

woowacourse-teams · Dec 9, 2024 · aff7438 · aff7438
1 parent 8c3e639
commit aff7438
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 7 deletions.
diff --git a/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx b/frontend/src/components/roomDetailPage/roomInfoCard/RoomInfoCard.tsx
@@ -64,15 +64,15 @@ const RoomInfoCard = ({ roomInfo }: { roomInfo: RoomInfo }) => {
           <S.RoomContentSmall>
             <S.ContentLineBreak aria-hidden>
               <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-              <S.ContentTerm>총 인원: </S.ContentTerm>
+              <S.ContentTerm>참여 인원: </S.ContentTerm>
               <S.ContentDescription>
-                {roomInfo.reviewerCount + roomInfo.bothCount} /{roomInfo.limitedParticipants}명
+                {roomInfo.bothCount} / {roomInfo.limitedParticipants}명
               </S.ContentDescription>
               <S.ContentTermSub>
                 리뷰어 {roomInfo.reviewerCount}, 참여자 {roomInfo.bothCount}
               </S.ContentTermSub>
             </S.ContentLineBreak>
-            <S.ScreenReader>{`총 인원 : ${roomInfo.limitedParticipants}명 중 ${roomInfo.reviewerCount + roomInfo.bothCount}명, 리뷰어 ${roomInfo.reviewerCount}명, 참여자 ${roomInfo.bothCount}명`}</S.ScreenReader>
+            <S.ScreenReader>{`총 인원 : ${roomInfo.limitedParticipants}명 중 ${roomInfo.bothCount}명, 리뷰어 ${roomInfo.reviewerCount}명, 참여자 ${roomInfo.bothCount}명`}</S.ScreenReader>
           </S.RoomContentSmall>
 
           <S.RoomContentSmall>

diff --git a/frontend/src/components/shared/roomCard/RoomCard.style.ts b/frontend/src/components/shared/roomCard/RoomCard.style.ts
@@ -129,6 +129,12 @@ export const JoinMember = styled.span`
   color: ${({ theme }) => theme.COLOR.grey4};
 `;
 
+export const ContentTermSub = styled.span`
+  font: ${({ theme }) => theme.TEXT.semiSmall};
+  line-height: normal;
+  color: ${({ theme }) => theme.COLOR.grey2};
+`;
+
 export const DeadLineText = styled.span`
   display: flex;
   gap: 0.6rem;

diff --git a/frontend/src/components/shared/roomCard/RoomCard.tsx b/frontend/src/components/shared/roomCard/RoomCard.tsx
@@ -105,8 +105,11 @@ const RoomCard = React.memo(({ roomInfo }: RoomCardProps) => {
               aria-label={`미션 참여 인원 최대 ${roomInfo.limitedParticipants}명, 현재 ${roomInfo.reviewerCount + roomInfo.bothCount}명`}
             >
               <Icon kind="person" size="1.8rem" color={theme.COLOR.grey4} />
-              {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}
+              {roomInfo.bothCount} / {roomInfo.limitedParticipants}
             </S.JoinMember>
+            <S.ContentTermSub>
+              리뷰어 {roomInfo.reviewerCount}, 참여자 {roomInfo.bothCount}
+            </S.ContentTermSub>
           </S.EtcContainer>
         </S.RoomInformation>
       </S.RoomCardContainer>

diff --git a/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx b/frontend/src/components/shared/roomCardModal/RoomCardModal.tsx
@@ -84,9 +84,9 @@ const RoomCardModal = ({ isOpen, onClose, roomInfo }: RoomCardModalProps) => {
           </S.InfoRow>
 
           <S.InfoRow>
-            <S.InfoTitle aria-hidden>총 인원</S.InfoTitle>
+            <S.InfoTitle aria-hidden>참여 인원</S.InfoTitle>
             <S.InfoContent aria-hidden>
-              {roomInfo.reviewerCount + roomInfo.bothCount} / {roomInfo.limitedParticipants}명
+              {roomInfo.bothCount} / {roomInfo.limitedParticipants}명
               <span className="sub">
                 리뷰어 {roomInfo.reviewerCount}, 참여자 {roomInfo.bothCount}
               </span>

diff --git a/frontend/src/constants/feedback.ts b/frontend/src/constants/feedback.ts
@@ -39,7 +39,7 @@ export const DEVELOP_GOOD_KEYWORD_OPTIONS = [
   "메서드 및 클래스 이름이 명확해요",
   "기능이 명확하게 잘 구현되어 있어요",
   "코드의 구조가 논리적이에요",
-  "코드의 재사용성이 높아요",
+  "코드 재사용성이 높아요",
   "예외 처리가 잘 되어 있어 안정적이에요",
   "문서화가 잘 되어 있어요",
   "테스트가 잘 작성되어 있어요",