[2주차 과제] 심화 과제 구현

[Navi-Up]

🏡 과제 명세

🔥 심화 과제

1. 헤더

   • 왼쪽 아이콘 클릭 시, 페이지 새로고침

2. 검색 필터

• 필터에 dropdown을 1개 이상 사용
• 초기화 버튼을 누르면 모든 필드가 비워짐
• 여러 조건들을 모두 만족하도록(and) 검색 필터 적용

3. 표

• 전체 체크박스 기능 (전체가 체크되면 맨위 체크박스도 자동으로 체크, 하나라도 해제되면 같이 해제)
• 좌측 상단에 날짜를 기준으로 정렬하는 드롭다운 존재(변경 시 바로 반영)
• 각 항목의 제목 클릭 시, 세부 내용 모달 열림
• '금액' 항목에 스타일 적용(금액 앞 +/- 기호 적용, 구분에 따른 색상 적용, 금액 포맷팅(5000 → 5,000)
• 최하단에 total 값 계산하여 출력

4. 내역 추가 모달

• 백드롭(모달 주변 어두운 배경 부분) 클릭 시 모달 닫힘

5. 세부 내용 모달

• 항목 상세 내용(제목, 금액, 날짜, 카테고리, 결제수단)이 표시(UI는 자유)
• x 버튼 클릭 시 모달 닫힘
• 백드롭(모달 주변 어두운 배경 부분) 클릭 시 모달 닫힘

심화 과제 구현 완료

📷 결과물