Merge branch 'FE/QuizCard' into 'frontend'
[Front-End] design:quizCard See merge request s11-webmobile1-sub2/S11P12A701!110
This commit is contained in:
commit
fb5025c60b
@ -1,5 +1,7 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import styles from './QuizCard.module.css';
|
import styles from './QuizCard.module.css';
|
||||||
|
import CloseIcon from '/src/assets/icons/close.svg?react';
|
||||||
|
import PlusIcon from '/src/assets/icons/plus.svg?react';
|
||||||
|
|
||||||
export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
|
export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
|
||||||
// TODO: 카드 디자인 완성 및 이쁘게 바꾸기
|
// TODO: 카드 디자인 완성 및 이쁘게 바꾸기
|
||||||
@ -53,10 +55,10 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
|
|||||||
<div className={styles.header}>
|
<div className={styles.header}>
|
||||||
<span className={styles.heading}>퀴즈 생성 카드</span>
|
<span className={styles.heading}>퀴즈 생성 카드</span>
|
||||||
<button
|
<button
|
||||||
className={`${styles.button} ${styles.cardRemove}`}
|
className={`${styles.cardRemove}`}
|
||||||
onClick={() => deleteQuiz(quiz.id)}
|
onClick={() => deleteQuiz(quiz.id)}
|
||||||
>
|
>
|
||||||
X
|
<CloseIcon />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<label htmlFor={`file-input-${quiz.id}`}>
|
<label htmlFor={`file-input-${quiz.id}`}>
|
||||||
@ -68,7 +70,8 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
|
|||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className={styles.imagePreview}>
|
<div className={styles.imagePreview}>
|
||||||
<div>이미지 업로드</div>
|
<PlusIcon />
|
||||||
|
<span>퀴즈 이미지 추가</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</label>
|
</label>
|
||||||
@ -112,13 +115,15 @@ export default function QuizCard({ quiz, updateQuiz, deleteQuiz }) {
|
|||||||
>
|
>
|
||||||
선택지 추가하기
|
선택지 추가하기
|
||||||
</button>
|
</button>
|
||||||
<button
|
{choices.length > 0 && (
|
||||||
type="button"
|
<button
|
||||||
onClick={handlePopChoice}
|
type="button"
|
||||||
className={`${styles.button} ${styles.remove}`}
|
onClick={handlePopChoice}
|
||||||
>
|
className={`${styles.button} ${styles.remove}`}
|
||||||
선택지 줄이기
|
>
|
||||||
</button>
|
선택지 줄이기
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{choices.map?.((choice, idx) => (
|
{choices.map?.((choice, idx) => (
|
||||||
<div
|
<div
|
||||||
|
@ -30,7 +30,10 @@
|
|||||||
|
|
||||||
.imagePreview {
|
.imagePreview {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
color: var(--text-color);
|
||||||
|
stroke: var(--text-color);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 295px;
|
width: 295px;
|
||||||
height: 220px;
|
height: 220px;
|
||||||
@ -39,6 +42,7 @@
|
|||||||
background-color: var(--background-secondary);
|
background-color: var(--background-secondary);
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hiddenInput {
|
.hiddenInput {
|
||||||
@ -105,8 +109,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cardRemove {
|
.cardRemove {
|
||||||
border: 1px solid var(--background-secondary);
|
border: 0;
|
||||||
background-color: var(--background-secondary);
|
background-color: var(--background);
|
||||||
color: var(--text-color-secondary);
|
color: var(--text-color);
|
||||||
stroke: var(--text-color-secondary);
|
stroke: var(--text-color);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
@ -4,6 +4,7 @@ import styles from './QuizsetForm.module.css';
|
|||||||
import EditIcon from '/src/assets/icons/edit.svg?react';
|
import EditIcon from '/src/assets/icons/edit.svg?react';
|
||||||
import BackIcon from '/src/assets/icons/back.svg?react';
|
import BackIcon from '/src/assets/icons/back.svg?react';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
|
import PlusIcon from '/src/assets/icons/plus.svg?react';
|
||||||
|
|
||||||
export default function QuizsetForm({ headerTitle, topic, to, onSubmit, initialValue = null }) {
|
export default function QuizsetForm({ headerTitle, topic, to, onSubmit, initialValue = null }) {
|
||||||
const [title, setTitle] = useState('');
|
const [title, setTitle] = useState('');
|
||||||
@ -74,7 +75,8 @@ export default function QuizsetForm({ headerTitle, topic, to, onSubmit, initialV
|
|||||||
onClick={handleAddQuiz}
|
onClick={handleAddQuiz}
|
||||||
className={styles.addCard}
|
className={styles.addCard}
|
||||||
>
|
>
|
||||||
카드 추가
|
<PlusIcon />
|
||||||
|
<span>새 퀴즈 추가</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
|
@ -76,11 +76,17 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
height: 592px;
|
height: 592px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: var(--background-secondary);
|
background-color: var(--background);
|
||||||
stroke: var(--text-color);
|
stroke: var(--text-color);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addCard:hover {
|
||||||
|
background-color: var(--background-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
.quizsetDetail {
|
.quizsetDetail {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 40px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: var(--background-default);
|
background-color: var(--background-default);
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
|
Loading…
Reference in New Issue
Block a user