feat : 퀴즈 생성창 구성 완료

[sernan96]

개요

퀴즈 생성 페이지 만들기

구현 사항

• O/X문제인지 단답식인지, 중복선택 가능한 객관식인지 선택할 수 있는 드롭다운
• 퀴즈만들때 저장해야하는 여러 데이터 입력input 컴포넌트 구현 (제목, 문제, 정답)
• 이미지 업로드 구현
• 문제가 길어지면 자동으로 컴포넌트 크기 조정 및 스크롤 가능
• scss 스타일 적용 완료

기타

QuizCreator
│
├── <button> .back-button
│    └── IoMdArrowBack (뒤로가기 아이콘)
│
└── <div> .quiz-creator
     │
     ├── <h2> .title ("Quiz 생성" 제목)
     │
     ├── <div> .form-group (Quiz 제목 입력 필드)
     │    ├── <label> (Label: "Quiz 제목")
     │    └── <input> (Text Input: questionTitle)
     │
     ├── <div> .form-group (Quiz 내용 입력 필드)
     │    ├── <label> (Label: "Quiz 내용")
     │    └── <textarea> (Text Area: questionContent)
     │
     ├── <div> .form-group (Quiz 유형 선택 필드)
     │    ├── <label> (Label: "Quiz 유형")
     │    └── <select> (Dropdown: questionType)
     │         ├── <option> ("중복 정답")
     │         ├── <option> ("O/X")
     │         └── <option> ("단답식")
     │
     ├── <div> .answers-container (정답 입력 필드 그룹)
     │    ├── <div> .answer-group (각 정답 입력 필드)
     │    │    ├── <label> .answer-label (Answer Label)
     │    │    ├── <input> (Text Input: answer.text)
     │    │    └── <label> (Checkbox: answer.correct)
     │    │
     │    ├── <div> .answer-group (각 정답 입력 필드)
     │    │    ├── <label> .answer-label (Answer Label)
     │    │    ├── <input> (Text Input: answer.text)
     │    │    └── <label> (Checkbox: answer.correct)
     │    │
     │    └── ... (다른 정답 그룹 반복)
     │
     ├── <div> .form-group (이미지 업로드 필드)
     │    ├── <label> (Label: "이미지")
     │    └── <input> (File Input: image)
     │
     └── <div> .button-group (버튼 그룹)
          ├── <button> .button-quiz-add ("Quiz 추가" 버튼)
          └── <button> ("Quiz 생성 완료" 버튼)

이미지