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 && ( + + )} {selectedWords.length === 0 ? "단어를 선택해주세요" : selectedWords.map((wordObj) => wordObj.word).join(" ")} {isQuizGraded && !isCorrectOrder() && ( - - {"정답: " + - data.sequenceList.map((wordObj) => wordObj.word).join(" ")} - + + {isQuizGraded && ( + + )} + {data.sequenceList.map((wordObj) => wordObj.word).join(" ")} + )} {renderWordButtons()} 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; +`;