[Next.js] 최종 팀프로젝트 - (16) 단어오답노트 CSS 수정

(왼쪽: 수정 전 / 오른쪽: 수정 후)

1. 틀린문제의 단어 나타내기

• 디자이너님께서 만들어주신 디자인 시안을 보면
  틀린 단어문제가 영어로 나타나고, 품사와 뜻이 바로 옆에 나타난다.

{question?.content} 부분이 기존에는 '{question?.answer}'였던 것이다.
{question?.reason} 부분이 기존에는 '{question?.content}'와 '{question?.reason}'이 같이 있었던 것이다.

수정 후 이렇게 변경했다.

2. 디자인과 동일하게 수정

• 틀린단어의 색이 검정색인데 빨간색으로 되어있어 변경했다.
• 단어의 길이가 너무 길어질 경우 줄바꿈하도록 수정했다.
• 뜻도 왼쪽 정렬로 수정했다.
  

3. TTS(TextToSpeech) 기능을 구현하기 위한 변경

• 스피커 이미지 추가
• 버튼의 범위를 하나의 단어 border가 있는 것이 아니라, 체크 이미지는 '완료/미완료'를 분류하기 위한 버튼, 나머지(스피커+단어+설명) 부분은 단어의 발음을 듣기 위한 버튼 태그로 구성했다.
• 단어 및 뜻의 길이가 길어져서 두 줄로 되었을 경우 똑같이 수직 가운데 정렬로 맞춰주었다.
  

⛰️ 변경된 코드결과

기능 구현보다... css 수정이 더 복잡하고 번거로운 것 같다...TTS 기술을 사용한 기능구현보다 더 오래 걸린 스타일링...🤯