[feat] 비교 분석 페이지 UI 구현

[seunghee0321]

Pull Request

📝 변경 내용

• 비교 분석 페이지
  • 또래별 비교
  • 카테고리별 비교
  • 소비내역 비교

🔗 관련 이슈

• Closes [FEAT] 비교 분석 페이지 UI 구현 #29

🎯 변경 사항

• 새로운 기능 추가
• 버그 수정
• UI/UX 개선
• 리팩토링
• 문서 업데이트

📱 테스트

• 브라우저에서 정상 동작 확인
• 기존 기능에 영향 없음 확인

📸 스크린샷 (UI 변경시)

test.mp4

📋 체크리스트

• 코드가 정상적으로 동작합니다
• 새로운 에러나 경고가 없습니다
• 필요시 문서를 업데이트했습니다
• 코드 포맷팅을 실행했습니다 (npm run format)
• ESLint 검사를 통과했습니다 (npm run lint:fix)

💻 코드 품질 확인

PR 제출 전에 다음 명령어를 실행하여 코드 품질을 확인해주세요:

# ESLint 자동 수정
npm run lint:fix

# Prettier 포맷팅
npm run format

[dohy-eon]

늦은 시간까지 수고 많으셨습니다! 🙌

먼저 px-5 py-8 bg-white border-b-[8px] border-neutral-5 이런 부분이 자주 보이는데 컴포넌트로 빼서 작업해도 좋을 것 같습니당

추가로 스켈레톤 UI가 들어가면 좋을 것 같은데 어떻게 생각하실까요?? 하단에 참고 링크 첨부해드릴게용
https://tech.kakaopay.com/post/skeleton-ui-idea/

[seunghee0321]

[작업 내용]

레이아웃 공통 컴포넌트화로 중복 코드 제거

• 섹션마다 반복되던 스타일(px-5 py-8 bg-white border-b-[8px] border-neutral-5 )을 AssetSectionLayout 공통 컴포넌트로 분리하여 유지보수성을 높이고 중복 코드를 제거했습니다.

Layout Shift 방지를 위한 스켈레톤 UI 도입

• 공유해주신 기술 블로그를 참고하여 차트 영역에 CompareBarSkeleton을 적용했습니다.
• 데이터 로드 전 실제 콘텐츠와 동일한 크기를 확보하여 Layout Shift 현상을 해결하고 UX를 개선했습니다.

날짜 객체 참조 고정(useMemo)으로 무한 로딩 이슈 해결

• new Date() 생성 시 참조 값이 변해 useEffect가 무한 반복되던 문제를 useMemo를 통한 참조 고정으로 해결했습니다.

skeleton-test.mp4

[dohy-eon]

@seunghee0321
Merge branch 'feat/sector-analysis' into feat/compare-analysis
4aa2055 이부분 커밋 메시지 수정 부탁드리겠습니다. chore: 분야별 분석 및 비교 분석 기능 통합 이런 식으로 작성하면 좋을 것 같아요!

[dohy-eon]

lgtm 🙌

[seunghee0321]

커밋 메시지 수정 후 누락된 코드 추가 커밋했습니다.