const qlist = {
  quiz: [
    // ...
  ],
}

// quiz의 내용은?
qlist.quiz
//(26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

// quiz의 첫 번째 값은?
qlist.quiz[0]
// {class: '2022년도 2회차 기출', type: '1', quizContent: '따뜻하고 풍요로운 이미지와 차갑고 쓸쓸한 이미지 두가지를 연출해 보세요.', condition: '(3색상 이상 10칸 이상)'}

// 그대로 복사
qlist.quiz.map((q) => ({ ...q }))
//(26) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

// 복사한 값에 index를 id로 추가
qlist.quiz.map((q, index) => ({ ...q, id: index + 1 }))
// {
//   class: "2022년도 2회차 기출"
//   condition: "(3색상 이상 10칸 이상)"
//   id: 1
//   quizContent: "따뜻하고 풍요로운 이미지와 차갑고 쓸쓸한 이미지 두가지를 연출해 보세요."
//   type: "1"
// }

// id가 추가된 quiz를 JSON 문자열로 직렬화
JSON.stringify(qlist.quiz.map((q, index) => ({ ...q, id: index + 1 })))

//index.tsx
;<Route path="/quiz/:quizId" element={<TestForm />} />
{
  /* /problem/:problemId */
}
{
  /* /problem/1 */
}
{
  /* /problem/2 */
}

//Testform.tsx

const params = useParams() // url에 있는 파라미터(path variable, dynamic routes)를 가져옴!
// ?? 널 병합 연산자. 왼쪽이 null이나 undefined면 오른쪽의 값을 fallback으로 써라
const quizId = parseInt((params['quizId'] as string | undefined) ?? '1') // ex 1
const quiz = QuizList.quiz[quizId - 1] // index는 0부터 셈으로...

<Link to={`/quiz/${Math.min(Math.floor(Math.random() * 26 + 1), 26)}`}>무작위 문제 보기</Link>

// 0부터 1사이의 값
Math.random()

// 0부터 26사이의 값
Math.random() * 26

// 1부터 27 사이의 값 (소수 포함)
Math.random() * 26 + 1

// 1부터 27사이의 정수 (27이 나올 가능성이 매우매우 적음)
Math.floor(Math.random() * 26 + 1)

// 1부터 26사이의 값
Math.min(Math.floor(Math.random() * 26 + 1), 26)

<div className="quiz-paragraph">
  <a className="category" href="">
    {quiz.class}
  </a>
  <h1 className="text-2xl mb-2">Q. {quiz.quizContent}</h1>
  <h2 id="condition" className="text-lg">
    {quiz.condition}
  </h2>
</div>