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 ( - - - - - - {feedbackCardData.username} - - - - {feedbackType === "develop" ? ( - <> - 개발 역량 피드백 -

{feedbackTarget}. 나의 리뷰어

- - ) : ( - <> - 소프트스킬 역량 피드백 -

{feedbackTarget}. 나의 리뷰이

- - )} -
-
+ <> + 미션의 상세 피드백 내용입니다. + + + + + + {feedbackCardData.username} + + + + {feedbackType === "develop" ? ( + <> + 개발 역량 피드백 +

{feedbackTarget}. 나의 리뷰어

+ + ) : ( + <> + 소프트스킬 역량 피드백 +

{feedbackTarget}. 나의 리뷰이

+ + )} +
+
- - 피드백 점수 - - + + 피드백 점수 + + - - 피드백 키워드 - - {feedbackCardData.feedbackKeywords.map((keyword) => ( - {keyword} - ))} - - + + 피드백 키워드 + + {feedbackCardData.feedbackKeywords.map((keyword) => ( + {keyword} + ))} + + - - 세부 피드백 -