feat: 퀴즈 결과 카드 컴포넌트 추가 및 스토리북 작성 #56
Conversation
| isCorrect={true} | ||
| isMarked={true} |
There was a problem hiding this comment.
P3
={true} 형태는 축약 가능해요~
<QuizReultCard
wordId={1}
isCorrect
isMarked
| name={'아젠다(Agenda)'} | ||
| selectedOptionDescription={ | ||
| '완수해야 하는 실무 내용을 사전에 정리해 둔 항목들' | ||
| } | ||
| answerOptionDescription={ | ||
| '완수해야 하는 실무 내용을 사전에 정리해 둔 항목들' | ||
| } |
| {isCorrect ? ( | ||
| <Image | ||
| src={'/icons/correct.svg'} | ||
| alt={'correct.svg'} | ||
| width={20} | ||
| height={20} | ||
| /> | ||
| ) : ( | ||
| <Image | ||
| src={'/icons/wrong.svg'} | ||
| alt={'wrong.svg'} | ||
| width={20} | ||
| height={20} | ||
| /> |
There was a problem hiding this comment.
P3
지금의 컴포넌트는 실시간으로 isCorrect 값이 변경되진 않으므로 렌더링 성능 이슈가 없겠지만
보편적으로 조금 더 클린한 코드는 아래에 가깝다고 생각해요!
<Image
src={isCorrect ? '/icons/correct.svg' : '/icons/wrong.svg'}
alt={isCorrect ? 'correct.svg' : 'wrong.svg'}
width={20}
height={20}
/>
| </div> | ||
| <BookmarkButton wordId={wordId} isMarked={isMarked} /> | ||
| </div> | ||
| {isCorrect ? null : ( |
There was a problem hiding this comment.
P3
isCorrect && (
이렇게 표현하는 것이 더 좋겠네요~
src/types/quizresult.ts
Outdated
| import { ExplanationInfo } from '@/types/quizresult' | ||
| import BookmarkButton from '../BookmarkButton' | ||
|
|
||
| export default function QuizReultCard({ |
|
스토리북상으로 피그마랑 비교했을 때 텍스트 색상, 굵기, 색상, 간격 다 제대로 적용이 안 된 것 같아요 수정해주세욥 |
true 생략
단순한 문자열 중괄호 생략
QuizReultCard -> QuizResultCard
조건부 렌더링에 대한 성능 고려
엇..!! 컴포넌트 크기는 화면에 따라 그때 그때 조절하는 줄 알았는데 아니였군요! 바로 적용하도록 하겠습니다! |
아 제가 중복으로 잘못 썼네요 그냥 텍스트 색상 말한 거였어요! |
앗 네넵! 확인했습니다! 간격 어디 부분인지도 확인했고, 같이 수정해서 올리겠습니다! |
#️⃣ 이슈 번호
📝 작업 내용
퀴즈 결과 부분에 쓰일 결과 카드의 컴포넌트 스토리북을 작성하였습니다.
📸 스크린샷
💬 리뷰 요구사항/참고 사항
처음 스토리북을 사용해서 미숙한 부분이 많지만, 잘못된 부분이나 개선했으면 하는 부분 이야기해주시면 반영하도록 하겠습니다!