퀴즈 풀이 페이지 UI 개선과 리팩토링(스타일 및 기능)을 진행하였습니다. 특히 Back 버튼의 위치를 고정하여 스크롤 시에도 항상 화면의 왼쪽 상단에 고정되도록 수정하였고, 좋아요/즐겨찾기 버튼의 위치 문제를 해결하여 일관된 사용자 경험을 제공하였습니다. 또한 추후에 조회수나 좋아요가 많아져 가독성과 컴포넌트가 의도치 않게 보이는 것을 방지하기 위해 1000단위로 k처리를 도입했고 제목의 길이도 길어질 경우 ...처리를 해줬습니다.
구현 사항
Back 버튼 위치 고정
기존 Back 버튼이 position: absolute;로 설정되어 스크롤 시 따라 움직이는 문제가 있었습니다.
이를 position: fixed;로 수정하여 스크롤 시에도 화면의 왼쪽 상단에 고정되도록 변경하였습니다.
z-index를 추가하여 다른 UI 요소와 겹치지 않도록 조정하였습니다.
좋아요/즐겨찾기 버튼 위치 수정
dropdown-container의 margin-right: auto; 속성 문제로 인해 버튼이 화면의 중간에 위치하는 문제를 해결하였습니다.
position: fixed;와 right: 20px;을 사용하여 화면의 오른쪽 상단에 고정되도록 수정하였습니다.
UI 일관성 개선
Back 버튼, 좋아요/즐겨찾기 버튼 모두 동일한 위치 고정 방식을 사용하여 UI 일관성을 높였습니다.
버튼 스타일을 개선하여 hover 시 배경 색상 변화 및 반응형 디자인을 추가하였습니다.
퀴즈 리스트의 카드 형식 적용과 그리드를 통해 훨씬 더 깔끔하고 눌렀을때 애니메이션도 약간 줘서 훨씬 생동감이 넘칩니다.
기타 리팩토링
사용하지 않는 CSS 속성을 제거하고, 중복된 스타일을 통합하였습니다.
styled-components를 사용하여 스타일 코드의 재사용성을 높였습니다.
디자인 개선
Back 버튼 및 좋아요/즐겨찾기 버튼의 위치와 스타일을 통일하여 사용자 경험을 향상시켰습니다.
스크롤 시에도 버튼들이 고정된 위치에 유지되도록 하여, 사용자가 쉽게 접근할 수 있도록 개선하였습니다.
기타
리팩토링
코드 가독성을 높이기 위해 불필요한 CSS 속성을 제거하고, 컴포넌트 간 스타일을 통일했습니다.
퀴즈 유형별 깨지던 UI 변화에 따라 관련 코드를 고치고 스타일을 수정과 함께 Styled Component를 적용했습니다.
아직 마음에 안드는 색상 같은건 한꺼번에 수정할 예정입니다.(제일 잘어울리는 색으로 상수화해서 처리할 생각)
개요
퀴즈 풀이 페이지 UI 개선과 리팩토링(스타일 및 기능)을 진행하였습니다. 특히
Back 버튼
의 위치를 고정하여 스크롤 시에도 항상 화면의 왼쪽 상단에 고정되도록 수정하였고,좋아요/즐겨찾기
버튼의 위치 문제를 해결하여 일관된 사용자 경험을 제공하였습니다. 또한 추후에 조회수나 좋아요가 많아져 가독성과 컴포넌트가 의도치 않게 보이는 것을 방지하기 위해 1000단위로 k처리를 도입했고 제목의 길이도 길어질 경우 ...처리를 해줬습니다.구현 사항
Back 버튼 위치 고정
Back 버튼
이position: absolute;
로 설정되어 스크롤 시 따라 움직이는 문제가 있었습니다.position: fixed;
로 수정하여 스크롤 시에도 화면의 왼쪽 상단에 고정되도록 변경하였습니다.z-index
를 추가하여 다른 UI 요소와 겹치지 않도록 조정하였습니다.좋아요/즐겨찾기 버튼 위치 수정
dropdown-container
의margin-right: auto;
속성 문제로 인해 버튼이 화면의 중간에 위치하는 문제를 해결하였습니다.position: fixed;
와right: 20px;
을 사용하여 화면의 오른쪽 상단에 고정되도록 수정하였습니다.UI 일관성 개선
Back 버튼
,좋아요/즐겨찾기 버튼
모두 동일한 위치 고정 방식을 사용하여 UI 일관성을 높였습니다.hover
시 배경 색상 변화 및 반응형 디자인을 추가하였습니다.기타 리팩토링
styled-components
를 사용하여 스타일 코드의 재사용성을 높였습니다.디자인 개선
Back 버튼
및좋아요/즐겨찾기 버튼
의 위치와 스타일을 통일하여 사용자 경험을 향상시켰습니다.기타
아직 마음에 안드는 색상 같은건 한꺼번에 수정할 예정입니다.(제일 잘어울리는 색으로 상수화해서 처리할 생각)
이미지
퀴즈 리스트 화면
객관식
OX
주관식