UX개선, 겹침 문제
검색창을 클릭시 검색창 테두리만 바뀌어도 가시성은 충분하다고 판단하였고 검색창이 약간 늘어나는 옵션은 삭제하였다.
사이트 크기가 작아지는 경우
헤더의 햄버거 버튼, 사용자 데이터, 로고, 검색창이 겹치는 문제가 생긴다.
그래서 헤더의 기능들 우선순위를 정하여 중요도 낮은 순서대로 숨김 처리하도록 하였다.
1순위 햄버거 아이콘, 2순위 검색창과 검색 아이콘,
3순위 중앙 로고, 4순위 사용자 정보
- 겹쳐지기 직전에 사라지도록
- 1, 2, 3순위가 남아있을 때
로고를 무리하게 중앙 정렬 하지 않고 사용자 정보 자리로 이동
사용자 닉네임이 길어질 경우 조정이 필요할 수 있음
추후 개선 예정
아마도 사용자 닉네임이 몇 글자 이상으로 길어지면 ...로 생략하고 출력하는 방식을 사용하지 않을까 싶다.
현재 방식처럼 미디어 쿼리를 사용하되 수치만 정밀하게 다듬는 방식은 픽셀 단위로 겹쳐지는 순간을 감지하지는 못한다.
그래서 JS로 겹침을 실시간으로 감지하는 코드를 사용하여 구현하였다.
구현 원리
1. 실시간 감지: 브라우저 창의 크기가 변경될 때마다(resize 이벤트) JS 실행
2. 요소 크기 및 위치 측정: 실행된 스크립트는 각 요소(예: 왼쪽의 사용자 정보, 중앙 로고, 오른쪽의 검색창)의 실시간 위치와 가로 길이 정보를 픽셀 단위로 정밀하게 계산 (getBoundingClientRect() 함수)
3. 겹침 판단: 이 위치/길이 값을 바탕으로 두 요소의 영역이 겹치는지 여부를 판단
4. 동적 스타일 변경: 겹침이 감지되면, JS가 우선순위가 낮은 요소에 CSS 클래스(예: .is-hidden)를 추가하여 화면에서 숨긴다.
코드 오류로 삭제
시청을 완료하면 찜한 작품 목록에서는 삭제되고
평점은 선택하여 매길 수 있다.
평점 수정 기능이 있고 시청 기록을 삭제할 경우 평점도 삭제된다.
https://github.com/tk7580/ltk_spring_project/commit/1c217ded04bb3f8e02b95e471396dbaad2d851f4
