[feat] 분야별 내역 페이지 UI 구현

[seunghee0321]

Pull Request

📝 변경 내용

• 분야별 내역 메인 페이지
  • top 6 추출 (각 분야별로 상세내역 확인 가능)
  • 가로형 바 차트 반영
  • 총 금액 click -> 전체 분야별 내역 page 이동
• 분야별 내역 상세 내역
• 분야별 전체 내역
• 분야별 내역 상세 내역 -> 개별 내역

🔗 관련 이슈

• Closes [FEAT] 분야별 내역 페이지 UI 구현 #27

🎯 변경 사항

• 새로운 기능 추가
• 버그 수정
• 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]

수고하셨어요! 메인 페이지에서 총 지출액 클릭 시 /asset/sector-full로 이동하고, 그외 클릭 시 location.state를 통해 필터 상태를 넘겨주는 방식이 되게 좋아보입니당 깔끔해서 맘에 들어요~~

지금 단계에서 하면 좋을 것 같은거 한가지 정도만 말씀드릴게요! 현재 상세 페이지(SectorDetailPage)에서 카테고리 데이터를 찾기 위해 다시 전체 데이터를 가공(transformToCategoryGroups)하는 중인데, 만약 데이터가 크다면 이전 페이지에서 클릭한 sector 객체 전체를 Maps의 state로 넘겨주거나 store를 따로 파면 처리가 더 깔끔해질 것 같아요! 보시고 내일 회의 전까지 가능하시다면 작업해주시면 좋을 듯 합니다.

아래 벨로그 글이 짧고 간단해서 한번 슥 읽어보시고 모르겠는 부분들 검색하시면 좋을거에요!!
벨로그

[seunghee0321]

주신 피드백 적용해서 코드 수정했습니다.

작업 목적

• 상세 페이지(SectorDetailPage) 진입 시마다 발생하던 불필요한 중복 데이터 연산 로직을 개선하여 렌더링 성능을 최적화했습니다.

주요 변경 사항

• 데이터 전달 방식 개선:
  기존에는 상세 페이지 진입 시 전체 데이터를 처음부터 다시 분류/계산했습니다.
  변경 후에는 리스트 페이지에서 이미 계산된 결과값(SectorData)을 location state를 통해 직접 전달합니다.

• 안정성 확보 (Fallback 로직):
  직접 URL로 진입하거나 페이지 새로고침으로 인해 state가 없는 경우에도, 기존처럼 훅을 통해 데이터를 복구할 수 있도록 하이브리드 데이터 로딩 방식을 적용했습니다.

[seunghee0321]

month-test.mp4

[작업 내용]

• 월별 데이터 필터링: selectedDate 파라미터를 통해 원하는 달의 지출 내역을 조회하는 로직을 추가했습니다.
• 전월 대비 비교: 현재 달과 지난달의 지출 합계를 계산하여 상단 요약 UI에 차액을 반영했습니다.

[seunghee0321]

[작업 내용]

• 페이지 내 컴포넌트를 Summary, List, Chart 섹션별로 모듈화
• 차트 데이터 구성 방식 변경 (Top 5 + 그외 항목 합산 로직 적용)

[dohy-eon]

lgtm

[dohy-eon]

@seunghee0321
Merge branch 'feat/sector-analysis' into feat/compare-analysis
4aa2055
여기도 동일하게 수정해주세요!

[seunghee0321]

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