Conversation
|
Note
|
| 코호트 / 파일(s) | 변경 요약 |
|---|---|
CSS — 예금 검색 src/pages/deposit-search/deposit-search-page.css.ts |
섹션 gap 조정(0.2rem → 0.1rem); termMent, depositHowSorted, depositHowmany, howManyNumber, notFound 5개 스타일 export 추가. |
UI — 예금 검색 src/pages/deposit-search/deposit-search-page.tsx |
기간 아래 안내 문구(termMent) 추가; 결과 리스트 상단에 정렬 안내(depositHowSorted)·결과 수(depositHowmany/howManyNumber) 표시 추가; 빈/에러 상태를 notFound 스타일 컨테이너로 변경. |
CSS — 적금 검색 src/pages/savings-search/savings-search-page.css.ts |
섹션 gap 조정(0.2rem → 0.1rem); savingListContainer → savingsListContainer 이름 변경; termMent, savingsHowSorted, savingsHowmany, howManyNumber, notFound 스타일 export 추가. |
UI — 적금 검색 src/pages/savings-search/savings-search-page.tsx |
기간 아래 안내 문구(termMent) 추가; 리스트 상단에 정렬 안내(savingsHowSorted)·결과 수(savingsHowmany/howManyNumber) 표시 추가; 로딩 클래스명 변경(savingsListContainer), 빈/에러 상태를 notFound 스타일 컨테이너로 변경. |
CSS — 홈 src/pages/home/home-page.css.ts |
popularityContainer gap(1rem → 0.5rem), popularityTitle 폰트/굵기 조정, popularityMent 신규 스타일 추가; contentWrapper paddingTop 추가; section marginBottom 축소(5rem → 3rem); sectionTitle 타이포 변경. |
UI — 홈 src/pages/home/home-page.tsx |
popularityContainer 아래에 안내 문구(popularityMent) 추가: "현재 인기 있는 상품들을 추천드려요👍🏻". |
Estimated code review effort
🎯 3 (Moderate) | ⏱️ ~20 minutes
- 주된 검토 포인트:
- CSS export 이름 변경(
savingListContainer→savingsListContainer)의 모든 사용처 일치 여부 확인. - 추가된 한글 문구의 오탈자 및 일관성 확인.
- 결과 카운트 렌더링 시 null/undefined 안전성(예: depositList/savingsList 존재 여부) 점검.
- CSS export 이름 변경(
Possibly related issues
- SKKU-FINITY/fini-client#13 — 동일한 안내 텍스트와 not-found 스타일 적용을 요구한 이슈로 본 PR과 목표가 일치합니다.
#61: [Feat] 안내 텍스트 추가 — 기간 안내, 정렬 안내, 홈 멘트, not-found 스타일 등 이 PR의 작업 항목을 명시한 이슈입니다.
Possibly related PRs
- [Feat] 예적금 검색페이지 구현 #60 — 동일 파일들(deposit/savings 페이지 및 CSS)에 유사한 UI·스타일 추가를 적용한 PR로 코드상의 연관성이 높습니다.
Pre-merge checks and finishing touches
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Linked Issues check | ✅ Passed | PR의 모든 구현 사항이 #61 이슈의 요구 사항을 충족합니다. 기간 선택 UI 아래 안내 문구, 정렬 기준 안내, 홈 화면 인기 상품 추천 문구, 검색 결과 없을 때 텍스트 스타일 수정, 그리고 상품 개수 안내가 모두 구현되었습니다. |
| Out of Scope Changes check | ✅ Passed | 모든 변경 사항이 #61 이슈의 요구 범위 내에 있습니다. CSS 스타일 수정, 안내 텍스트 추가, UI 요소 개선 등이 모두 관련 범위 내의 변경입니다. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Title check | ✅ Passed | PR 제목이 변경 사항의 주요 목적을 정확하게 반영합니다. 안내 텍스트 추가/수정과 검색 상품 개수 안내라는 핵심 내용이 명확하게 표현되어 있습니다. |
✨ Finishing touches
- 📝 Generate docstrings
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Post copyable unit tests in a comment
- Commit unit tests in branch
feature/adding_text/#61
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/pages/savings-search/savings-search-page.tsx (1)
124-177: 기간·정렬·개수 안내 로직과 일치, 헤딩 태그만 경미한 개선 여지
termMent문구는 실제 조회 조건(선택한 기간 이하 상품 노출)을 정확히 설명하고 있고,- 정렬 설명도
saveTerm → maxRate → baseRate내림차순 정렬 로직과 정확히 일치하며,- 검색 결과 개수도
savingsList.length로 올바르게 계산되고 있어 기능적 문제는 없어 보입니다.다만 아래는 선택적으로 고려해 볼 만합니다.
- 헤딩 시맨틱 개선 (선택 사항)
같은 섹션 안에 제목(기간)과 설명이 둘 다<h2>인 상태라, 스크린리더/문서 구조 관점에서 설명 문구는 단락(p)이 더 자연합니다.- <h2 className={styles.termMent}>선택한 기간보다 짧은 기간의 상품들이 보여져요.</h2> + <p className={styles.termMent}>선택한 기간보다 짧은 기간의 상품들이 보여져요.</p>
- 0건일 때 개수 노출 여부 (선택 사항)
현재는 결과가 있을 때만 “총 N개의 상품이 검색되었습니다.”가 보이고, 0건일 때는notFound문구만 표시됩니다. 검색이 정상 수행되었음을 명시하고 싶다면 0건에도 “총 0개의 상품이 검색되었습니다.”를 함께 노출하는 UX도 고려해볼 수 있습니다.src/pages/deposit-search/deposit-search-page.css.ts (1)
22-27: 예금 검색 안내 텍스트 스타일 정의 일관성 양호
termMent,depositHowSorted,depositHowmany,howManyNumber,notFound모두 적금/상세 페이지와 동일한 타이포 스케일을 사용하고 있어 화면 간 일관성이 잘 맞습니다. 기능적인 문제는 없어 보입니다.나중에 리팩터링 여유가 생기면, 예금/적금 검색·상세에서 반복되는
termMent·howManyNumber·notFound같은 텍스트 스타일을 공통 스타일로 추출해 재사용성을 높여도 좋겠습니다.Also applies to: 106-110, 138-155, 161-165
src/pages/deposit-search/deposit-search-page.tsx (1)
125-178: 예금 기간·정렬·개수 안내 문구 정합성 OK, 기간 설명 헤딩만 경미한 개선 제안
- 기간 안내, 정렬 설명, 검색 개수 안내 모두 실제 정렬/조회 로직과 잘 일치해 UX 측면에서 혼동 여지는 없어 보입니다.
- 빈 결과/에러 상태에서
styles.notFound로 메시지를 통일한 것도 좋습니다.선택적으로 고려해볼 만한 부분은 다음 정도입니다.
- 기간 설명 헤딩 시맨틱 (선택 사항)
기간섹션에서 제목과 설명이 모두<h2>인 구조라, 설명 문구는 단락(p)으로 바꾸는 편이 더 자연스러운 문서 구조가 됩니다.- <h2 className={styles.termMent}>선택한 기간보다 짧은 기간의 상품들이 보여져요.</h2> + <p className={styles.termMent}>선택한 기간보다 짧은 기간의 상품들이 보여져요.</p>
- 0건 결과 시 개수 안내 노출 여부 (선택 사항)
현재는 예금도 적금과 동일하게, 결과가 있을 때만 “총 N개의 상품이 검색되었습니다.”가 보입니다. 검색이 성공했고 단지 0건이라는 점을 더 명확히 알리고 싶다면 0건에도 “총 0개의 상품이 검색되었습니다.”를 함께 표시하는 UX도 고려할 수 있습니다.src/pages/savings-search/savings-search-page.css.ts (1)
106-110: 적금 검색 안내 텍스트 스타일 정의 일관성 양호 (간격만 소소한 통일 제안)
termMent,savingHowmany,howManyNumber,notFound모두 예금 검색/상세 페이지와 유사한 타이포 스케일을 사용해 화면 간 일관성이 잘 맞습니다.notFound도 detail/search 전반에서 동일 스타일을 쓰도록 맞춘 점 좋습니다.한 가지 소소한 부분은, 예금 쪽
depositHowSorted는marginBottom: '1.5rem'이 있는 반면 여기savingHowSorted에는 간격이 없어, 정렬 설명과 개수 문구 사이 세로 간격이 화면마다 다를 수 있다는 점입니다. 두 페이지를 완전히 동일한 레이아웃으로 맞추고 싶다면 아래처럼 margin을 통일하는 것도 고려할 수 있습니다.export const savingHowSorted = style({ fontSize: vars.size.ms, - color: vars.color.gray700, -}) + color: vars.color.gray700, + marginBottom: '1.5rem', +})Also applies to: 138-165
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/pages/deposit-search/deposit-search-page.css.ts(3 hunks)src/pages/deposit-search/deposit-search-page.tsx(3 hunks)src/pages/home/home-page.css.ts(2 hunks)src/pages/home/home-page.tsx(1 hunks)src/pages/savings-search/savings-search-page.css.ts(2 hunks)src/pages/savings-search/savings-search-page.tsx(3 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-02T15:48:58.573Z
Learnt from: 1jiwoo27
Repo: SKKU-FINITY/fini-client PR: 63
File: src/shared/components/deposit-popular/deposit-popular.css.ts:8-8
Timestamp: 2025-12-02T15:48:58.573Z
Learning: In src/shared/components/deposit-popular/deposit-popular.css.ts and src/shared/components/savings-popular/savings-popular.css.ts, the container height was intentionally reduced from '17rem' to '16rem' as a necessary design adjustment by 1jiwoo27.
Applied to files:
src/pages/savings-search/savings-search-page.tsxsrc/pages/savings-search/savings-search-page.css.tssrc/pages/deposit-search/deposit-search-page.tsxsrc/pages/deposit-search/deposit-search-page.css.tssrc/pages/home/home-page.css.ts
🧬 Code graph analysis (3)
src/pages/savings-search/savings-search-page.css.ts (3)
src/pages/deposit-search/deposit-search-page.css.ts (4)
termMent(106-110)howManyNumber(150-154)bankLogo(59-66)notFound(161-165)src/pages/deposit-detail/deposit-detail-page.css.ts (1)
notFound(16-20)src/pages/savings-detail/savings-detail-page.css.ts (1)
notFound(16-20)
src/pages/deposit-search/deposit-search-page.css.ts (4)
src/pages/savings-search/savings-search-page.css.ts (4)
termMent(106-110)howManyNumber(149-153)bankLogo(59-66)notFound(161-165)src/styles/theme.css.ts (1)
vars(3-48)src/pages/deposit-detail/deposit-detail-page.css.ts (1)
notFound(16-20)src/pages/savings-detail/savings-detail-page.css.ts (1)
notFound(16-20)
src/pages/home/home-page.css.ts (3)
src/styles/theme.css.ts (1)
vars(3-48)src/pages/deposit-search/deposit-search-page.css.ts (1)
sectionTitle(22-27)src/pages/savings-search/savings-search-page.css.ts (1)
sectionTitle(22-27)
🔇 Additional comments (2)
src/pages/home/home-page.tsx (1)
111-114: 홈 인기 상품 안내 문구 추가 적절
popularityMent로 추가된 문구가 인기 상품 추천 섹션의 의도와 잘 맞고, 데이터 의존 로직도 없어 리스크가 없습니다. 그대로 가셔도 될 것 같습니다.src/pages/home/home-page.css.ts (1)
41-52: 홈 인기 섹션 타이포/간격 조정 일관성 양호
popularityTitle/popularityMent로 제목·보조 문구 계층이 잘 나뉘고,section/sectionTitle의 크기·간격도 다른 검색 페이지와 유사한 스케일이라 UI 일관성이 좋아졌습니다. 기능적인 문제는 없어 보입니다.Also applies to: 60-65, 67-72
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/pages/deposit-search/deposit-search-page.css.ts(3 hunks)src/pages/deposit-search/deposit-search-page.tsx(2 hunks)src/pages/home/home-page.css.ts(1 hunks)src/pages/home/home-page.tsx(1 hunks)src/pages/savings-search/savings-search-page.css.ts(3 hunks)src/pages/savings-search/savings-search-page.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/pages/deposit-search/deposit-search-page.css.ts
- src/pages/home/home-page.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-02T15:48:58.573Z
Learnt from: 1jiwoo27
Repo: SKKU-FINITY/fini-client PR: 63
File: src/shared/components/deposit-popular/deposit-popular.css.ts:8-8
Timestamp: 2025-12-02T15:48:58.573Z
Learning: In src/shared/components/deposit-popular/deposit-popular.css.ts and src/shared/components/savings-popular/savings-popular.css.ts, the container height was intentionally reduced from '17rem' to '16rem' as a necessary design adjustment by 1jiwoo27.
Applied to files:
src/pages/savings-search/savings-search-page.tsxsrc/pages/savings-search/savings-search-page.css.tssrc/pages/deposit-search/deposit-search-page.tsxsrc/pages/home/home-page.css.ts
🧬 Code graph analysis (1)
src/pages/home/home-page.css.ts (3)
src/styles/theme.css.ts (1)
vars(3-48)src/pages/deposit-search/deposit-search-page.css.ts (2)
section(15-20)sectionTitle(22-27)src/pages/savings-search/savings-search-page.css.ts (2)
section(15-20)sectionTitle(22-27)
🔇 Additional comments (11)
src/pages/deposit-search/deposit-search-page.tsx (2)
149-169: 정렬 순서 안내와 결과 개수 표시가 잘 구현되었습니다.실제 정렬 로직(31-35번째 줄)과 안내 문구가 일치하며, 동적 개수 표시도 정확합니다. 사용자 경험 개선에 기여하는 좋은 추가 기능입니다.
171-171: 스타일된 빈 결과 표시로 개선되었습니다.기존 단순 텍스트에서
notFound클래스를 사용한 스타일된 표시로 변경되어 시각적 일관성이 향상되었습니다.src/pages/home/home-page.css.ts (2)
36-36: 타이포그래피 및 간격 조정이 일관성 있게 적용되었습니다.디자인 토큰을 올바르게 사용하여 타이포그래피와 간격을 조정했으며, 전체적인 시각적 계층 구조가 개선되었습니다. 변경 사항이 deposit/savings 검색 페이지의 스타일 패턴과도 일관성을 유지하고 있습니다.
Also applies to: 42-43, 58-58, 65-65, 69-70
47-52: 새로운 안내 텍스트 스타일 추가 확인.
popularityMent스타일이 적절하게 정의되었으며, 검색 페이지의termMent스타일과 유사한 패턴을 따르고 있어 일관성이 유지됩니다.src/pages/savings-search/savings-search-page.tsx (2)
141-141: 클래스 이름 수정으로 일관성 개선.
savingListContainer에서savingsListContainer로 수정하여 명명 일관성이 향상되었습니다(적금은 "savings", 단수 "saving"이 아님).Also applies to: 145-145
147-168: 예금 검색 페이지와 일관된 구현.정렬 순서 안내와 결과 개수 표시가 deposit-search-page.tsx와 동일한 패턴으로 구현되어 있어 사용자 경험의 일관성이 유지됩니다. 실제 정렬 로직(31-35번째 줄)과도 정확히 일치합니다.
src/pages/savings-search/savings-search-page.css.ts (5)
18-18: 간격 조정 확인.
sectiongap이 0.2rem에서 0.1rem으로 미세하게 조정되었으며, deposit-search-page.css.ts의 동일한 설정과 일치합니다.
106-110: 새 안내 텍스트 스타일 추가.
termMent스타일이 적절히 정의되었으며, deposit-search-page.css.ts와 일관된 패턴을 따릅니다.
131-131: 명명 일관성 개선.
savingListContainer에서savingsListContainer로 리네이밍하여 명명 규칙이 개선되었습니다.
138-153: 검색 결과 안내를 위한 새 스타일 추가.
savingsHowSorted,savingsHowmany,howManyNumber스타일이 잘 정의되어 있으며, 디자인 토큰을 올바르게 사용하고 있습니다. deposit-search-page.css.ts의 대응 스타일(depositHowSorted,depositHowmany)과 일관성을 유지합니다.
160-167: 빈 결과/오류 상태 스타일 추가.
notFound스타일이 중앙 정렬과 적절한 타이포그래피로 잘 정의되어 있어, 빈 결과나 오류 상태를 명확하게 표시합니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/savings-search/savings-search-page.tsx (1)
174-176: 에러 상태와 빈 결과 상태의 스타일을 분리할지 검토해볼 만함현재 에러 메시지도
styles.notFound를 공유해서, 시각적으로는 “검색 결과 없음”과 거의 동일하게 보일 가능성이 있습니다. UX 측면에서 필요하다면, 에러 전용 스타일(색상/아이콘/톤만 다르게 등)을 분리해서 사용자가 “데이터 없음”과 “시스템 오류”를 더 쉽게 구분할 수 있게 하는 것도 고려해 볼 수 있습니다.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/pages/deposit-search/deposit-search-page.tsx(2 hunks)src/pages/savings-search/savings-search-page.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/deposit-search/deposit-search-page.tsx
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2025-12-02T15:48:58.573Z
Learnt from: 1jiwoo27
Repo: SKKU-FINITY/fini-client PR: 63
File: src/shared/components/deposit-popular/deposit-popular.css.ts:8-8
Timestamp: 2025-12-02T15:48:58.573Z
Learning: In src/shared/components/deposit-popular/deposit-popular.css.ts and src/shared/components/savings-popular/savings-popular.css.ts, the container height was intentionally reduced from '17rem' to '16rem' as a necessary design adjustment by 1jiwoo27.
Applied to files:
src/pages/savings-search/savings-search-page.tsx
🔇 Additional comments (3)
src/pages/savings-search/savings-search-page.tsx (3)
124-124: 기간 안내 문구의 시맨틱 마크업 수정 👍이전 리뷰에서 지적됐던 h2 사용 문제가
<p>로 잘 교정되어, 같은 섹션 내 헤딩 계층도 자연스럽고 보조기기 접근성 측면에서도 더 적절합니다.
141-168: 정렬 기준 안내/상품 개수 표기가 실제 로직과 정확히 일치함
fetchSavingsList정렬 로직(기간 → 최대 금리 → 기본 금리 모두 내림차순)과 안내 문구가 정확히 대응하고, 표시되는 개수도savingsList.length를 그대로 사용해 리스트 렌더링과 불일치 위험이 없습니다. 구조도 로딩/완료 케이스 모두savingsListContainer를 재사용해 레이아웃 일관성이 유지됩니다.
170-170: 검색 결과 없음 상태 메시지 정리 적절결과가 없을 때 메시지를
styles.notFound컨테이너로 통일한 부분이 요구사항(텍스트 스타일 수정)에 잘 맞고, 리스트/에러/없음 상태가 명확히 분기되어 있습니다.
1jiwoo27
changed the title
2 participants
📌 Related Issue
✅ Checklist
📚 Tasks
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.