feat: 미션을 열었을 때 상세 피드백임을 알려주기

woowacourse-teams · Oct 24, 2024 · 12f4740 · 12f4740
1 parent dfb80b8
commit 12f4740
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 51 deletions.
diff --git 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
@@ -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>
+    </>
   );
 };