틀린문제 문제번호 박스 표시

src/pages/QuizExplanation.css

@@ -89,6 +89,14 @@ body {
   background-color: #e0e4e9;
   transform: scale(1.1);
 }
+.left-panel .skipped-button.incorrect {
+  background-color: #ffdddd !important; /* 연한 빨강 */
+  border-color: #ff7777 !important;
+}
+.left-panel .skipped-button.correct {
+  background-color: #ddffdd !important; /* 연한 초록 */
+  border-color: #77ff77 !important;
+}
 
 /* 중앙 패널: 퀴즈 + 해설 영역 */
 .center-panel {

src/pages/QuizExplanation.jsx

@@ -317,19 +317,39 @@ const QuizExplanation = () => {
         <div className="layout-container">
           {/* 좌측 번호 패널 */}
           <aside className="left-panel">
-            {initialQuizzes.map((q) => (
-              <button
-                key={q.number}
-                className={`skipped-button${
-                  q.userAnswer !== 0 ? " answered" : ""
-                }${q.check ? " checked" : ""}${
-                  q.number === currentQuestion ? " current" : ""
-                }`}
-                onClick={() => handleQuestionClick(q.number)}
-              >
-                {q.number}
-              </button>
-            ))}
+            {initialQuizzes.map((q) => {
+              let resultClass = "";
+              if (q.userAnswer) {
+                // userAnswer가 0이 아닌 경우(즉, truthy)
+                const correctOption = q.selections.find(
+                  (opt) => opt.correct === true
+                );
+
+                if (correctOption) {
+                  // 데이터 타입 불일치 방지를 위해 숫자로 변환하여 비교
+                  if (
+                    Number(q.userAnswer) === Number(correctOption.id) &&
+                    Number(q.userAnswer) !== 0
+                  ) {
+                    resultClass = " correct";
+                  } else {
+                    resultClass = " incorrect";
+                  }
+                }
+              }
+
+              return (
+                <button
+                  key={q.number}
+                  className={`skipped-button${resultClass}${
+                    q.number === currentQuestion ? " current" : ""
+                  }`}
+                  onClick={() => handleQuestionClick(q.number)}
+                >
+                  {q.number}
+                </button>
+              );
+            })}
           </aside>
 
           {/* 가운데 패널: 문제 + 선지 + 확인 + 해설 */}