[Merge] #71 - 선택 이슈 해결

Line4Thon-Nugu · Nov 15, 2024 · f2b5ceb · f2b5ceb
2 parents 4119edf + 78989a7
commit f2b5ceb
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 15 deletions.
diff --git a/src/components/testQuestion/TestQuestion.jsx b/src/components/testQuestion/TestQuestion.jsx
@@ -7,15 +7,15 @@ export const TestQuestion = ({
   handleAnswerSelect,
   handleNextQuestion,
   TEST_QUESTION,
-  isAnswerinCorrect, //정답이 맞는지-접속자
+  isAnswerCorrect, //정답이 맞는지-접속자
   isAnswerSelected, //선택되었는지 - 소유자
 }) => {
   const handleSelect = (index) => {
     if (selectedAnswer[currentQuestion] === null) {
       handleAnswerSelect(index);
     }
   };
-  console.log("isAnswerinCorrect:", isAnswerinCorrect);
+  console.log("isAnswerinCorrect:", isAnswerCorrect);
 
   return (
     <S.Container>
@@ -30,8 +30,8 @@ export const TestQuestion = ({
               key={index}
               onClick={() => handleSelect(index)}
               $isSelected={selectedAnswer[currentQuestion] === index}
-              $isAnswerinCorrect={
-                isAnswerinCorrect && selectedAnswer[currentQuestion] === index
+              $isAnswerCorrect={
+                isAnswerCorrect && selectedAnswer[currentQuestion] === index
               }
             >
               {answer}

diff --git a/src/components/testQuestion/styled.js b/src/components/testQuestion/styled.js
@@ -34,24 +34,24 @@ export const AnswerBox = styled.div`
   border-radius: 15px;
   ${({ theme }) => theme.fonts.pretendardB4}
 
-  box-shadow: ${({ $isSelected, $isAnswerinCorrect }) =>
+  box-shadow: ${({ $isSelected, $isAnswerCorrect }) =>
     $isSelected
-      ? $isAnswerinCorrect // 정답인지 확인
+      ? $isAnswerCorrect // 정답인지 확인
         ? "0px 0px 10px 0px rgba(55, 130, 237, 0.50)" //파
         : "0px 0px 10px 0px rgba(255, 0, 0, 0.50)" //빨
       : "none"};
 
   border: 1px solid
-    ${({ theme, $isSelected, $isAnswerinCorrect }) =>
+    ${({ theme, $isSelected, $isAnswerCorrect }) =>
       $isSelected
-        ? $isAnswerinCorrect
+        ? $isAnswerCorrect
           ? theme.colors.blue300
           : theme.colors.red200
         : theme.colors.blue300};
 
-  background: ${({ theme, $isSelected, $isAnswerinCorrect }) =>
+  background: ${({ theme, $isSelected, $isAnswerCorrect }) =>
     $isSelected
-      ? $isAnswerinCorrect
+      ? $isAnswerCorrect
         ? theme.colors.blue100
         : theme.colors.red100
       : theme.colors.gray100};

diff --git a/src/pages/nuguTest/ChallengerTest.jsx b/src/pages/nuguTest/ChallengerTest.jsx
@@ -57,10 +57,8 @@ export const ChallengerTest = () => {
   );
   console.log("rank[currentQuestion]", rank[currentQuestion]);
   //정답 비교
-  const isAnswerinCorrect =
-    selectedAnswer[currentQuestion] === null
-      ? null
-      : rank[currentQuestion] === selectedAnswer[currentQuestion]
+  const isAnswerCorrect =
+    Number(rank[currentQuestion]) == selectedAnswer[currentQuestion]
       ? true
       : false;
 
@@ -95,7 +93,7 @@ export const ChallengerTest = () => {
             handleAnswerSelect={handleAnswerSelect}
             handleNextQuestion={handleNextQuestion}
             TEST_QUESTION={TEST_QUESTION}
-            isAnswerinCorrect={isAnswerinCorrect}
+            isAnswerCorrect={isAnswerCorrect}
             isAnswerSelected={isAnswerSelected}
           />
         )}