YU-Quiz / web

front(react)
2 stars 0 forks source link

refact: quiz 리스트 페이지 카드 그리드 형식 적용 및 퀴즈 유형별 UI 리팩토링 외 기타 오류 수정 #70

Closed sernan96 closed 4 days ago

sernan96 commented 4 days ago

개요

퀴즈 풀이 페이지 UI 개선과 리팩토링(스타일 및 기능)을 진행하였습니다. 특히 Back 버튼의 위치를 고정하여 스크롤 시에도 항상 화면의 왼쪽 상단에 고정되도록 수정하였고, 좋아요/즐겨찾기 버튼의 위치 문제를 해결하여 일관된 사용자 경험을 제공하였습니다. 또한 추후에 조회수나 좋아요가 많아져 가독성과 컴포넌트가 의도치 않게 보이는 것을 방지하기 위해 1000단위로 k처리를 도입했고 제목의 길이도 길어질 경우 ...처리를 해줬습니다.

구현 사항

  1. Back 버튼 위치 고정

    • 기존 Back 버튼position: absolute;로 설정되어 스크롤 시 따라 움직이는 문제가 있었습니다.
    • 이를 position: fixed;로 수정하여 스크롤 시에도 화면의 왼쪽 상단에 고정되도록 변경하였습니다.
    • z-index를 추가하여 다른 UI 요소와 겹치지 않도록 조정하였습니다.
  2. 좋아요/즐겨찾기 버튼 위치 수정

    • dropdown-containermargin-right: auto; 속성 문제로 인해 버튼이 화면의 중간에 위치하는 문제를 해결하였습니다.
    • position: fixed;right: 20px;을 사용하여 화면의 오른쪽 상단에 고정되도록 수정하였습니다.
  3. UI 일관성 개선

    • Back 버튼, 좋아요/즐겨찾기 버튼 모두 동일한 위치 고정 방식을 사용하여 UI 일관성을 높였습니다.
    • 버튼 스타일을 개선하여 hover 시 배경 색상 변화 및 반응형 디자인을 추가하였습니다.
    • 퀴즈 리스트의 카드 형식 적용과 그리드를 통해 훨씬 더 깔끔하고 눌렀을때 애니메이션도 약간 줘서 훨씬 생동감이 넘칩니다.
  4. 기타 리팩토링

    • 사용하지 않는 CSS 속성을 제거하고, 중복된 스타일을 통합하였습니다.
    • styled-components를 사용하여 스타일 코드의 재사용성을 높였습니다.

디자인 개선

기타

아직 마음에 안드는 색상 같은건 한꺼번에 수정할 예정입니다.(제일 잘어울리는 색으로 상수화해서 처리할 생각)

이미지