design: 피드백 페이지 개수 제목 옆에 붙이기

woowacourse-teams · Nov 8, 2024 · eb76994 · eb76994
1 parent 5274776
commit eb76994
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.style.ts
@@ -108,20 +108,17 @@ export const FeedbackMissionPrompt = styled.span<{ $isSelected: boolean }>`
   animation: ${fadeInOut} 2s infinite;
 `;
 
-export const FeedbackMissionInfo = styled.div`
-  display: flex;
-  align-items: start;
-
-  margin-right: 1rem;
+export const FeedbackMissionInfo = styled.div``;
 
+export const FeedbackTitle = styled.span`
   font: ${({ theme }) => theme.TEXT.medium_bold};
   color: ${({ theme }) => theme.COLOR.black};
 `;
 
-export const FeedbackCount = styled.div`
+export const FeedbackCount = styled.span`
+  margin-left: 0.5rem;
   font: ${({ theme }) => theme.TEXT.small_bold};
   color: ${({ theme }) => theme.COLOR.primary2};
-  border-radius: 6px;
 `;
 
 export const FeedbackKeywordContainer = styled.div`

diff --git a/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx b/frontend/src/components/feedback/feedbackCardList/FeedbackCardList.tsx
@@ -55,12 +55,14 @@ const FeedbackCardList = ({
               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.FeedbackMissionInfo>
+                  <S.FeedbackTitle>{feedback.title}</S.FeedbackTitle>
+                  <S.FeedbackCount
+                    aria-label={`총 ${feedback.developFeedback.length + feedback.socialFeedback.length}개의 피드백`}
+                  >
+                    ({feedback.developFeedback.length + feedback.socialFeedback.length})
+                  </S.FeedbackCount>
+                </S.FeedbackMissionInfo>
                 <S.FeedbackKeywordContainer role="group" aria-label="피드백 키워드">
                   {feedback.roomKeywords.filter((keyword) => keyword.trim() !== "").length > 0 ? (
                     feedback.roomKeywords.map(
@@ -93,6 +95,7 @@ const FeedbackCardList = ({
                 </HoverStyledLink>
               )}
             </S.FeedbackMissionWrapper>
+
             <S.FeedbackInfoWrapper
               $isVisible={feedback.roomId === selectedFeedback}
               aria-hidden={feedback.roomId !== selectedFeedback}