design: 퀴즈 디자인 변경 사항 반영 (#33)

GlowTales · Aug 25, 2024 · 06183c6 · 06183c6
1 parent 9c638f7
commit 06183c6
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/components/learn/SentenceQuiz.tsx b/src/components/learn/SentenceQuiz.tsx
@@ -85,15 +85,29 @@ const SentenceQuiz = ({ setter, data, isQuizGraded }: SentenceQuizProps) => {
           $isPlaceholder={selectedWords.length === 0}
           $state={!isQuizGraded ? "gray" : isCorrectOrder() ? "green" : "red"}
         >
+          {isQuizGraded && (
+            <S.SelectIcon
+              src={isCorrectOrder() ? "/correct.png" : "/wrong.png"}
+              alt="선택지"
+            />
+          )}
           {selectedWords.length === 0
             ? "단어를 선택해주세요"
             : selectedWords.map((wordObj) => wordObj.word).join(" ")}
         </S.SelectedSentence>
         {isQuizGraded && !isCorrectOrder() && (
-          <S.ResultSentence $isCorrect={isCorrectOrder()}>
-            {"정답: " +
-              data.sequenceList.map((wordObj) => wordObj.word).join(" ")}
-          </S.ResultSentence>
+          <S.SelectedSentence
+            $isPlaceholder={selectedWords.length === 0}
+            $state={"green"}
+          >
+            {isQuizGraded && (
+              <S.SelectIcon
+                src={isCorrectOrder() ? "/correct.png" : "/wrong.png"}
+                alt="선택지"
+              />
+            )}
+            {data.sequenceList.map((wordObj) => wordObj.word).join(" ")}
+          </S.SelectedSentence>
         )}
       </S.SubContainer>
       <S.WordButtonContainer>{renderWordButtons()}</S.WordButtonContainer>

diff --git a/src/components/learn/learn.styled.ts b/src/components/learn/learn.styled.ts
@@ -87,7 +87,7 @@ export const SelectedSentence = styled.div<{
 }>`
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  justify-content: start;
   align-items: center;
   padding: 1rem 1.5rem;
   width: 90%;
@@ -121,3 +121,10 @@ export const PreSubTitle = styled.div`
   font-weight: 400;
   color: #f7a300;
 `;
+
+export const SelectIcon = styled.img`
+  width: 2.3rem;
+  height: 2.3rem;
+  margin-right: 10px;
+  vertical-align: middle;
+`;