From 06183c60ca3256758b17b0e44a232df6377f476d Mon Sep 17 00:00:00 2001
From: gominzip <ahaminji@naver.com>
Date: Mon, 26 Aug 2024 03:35:43 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=ED=80=B4=EC=A6=88=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EB=B3=80=EA=B2=BD=20=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20(#33)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/learn/SentenceQuiz.tsx | 22 ++++++++++++++++++----
 src/components/learn/learn.styled.ts  |  9 ++++++++-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/src/components/learn/SentenceQuiz.tsx b/src/components/learn/SentenceQuiz.tsx
index 1c7c37f..6543305 100644
--- 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
index 60d005b..84cd9d3 100644
--- 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;
+`;