[Feat] 적금 상세 페이지 구현

[1jiwoo27]

📌 Related Issue

• Closes [Feat] 적금 상세 페이지 구현 #39

✅ Checklist

• PR 제목의 형식을 잘 작성했나요? e.g. [Feat] PR 템플릿 작성
• 빌드가 성공했나요? (pnpm build)
• 이슈는 등록했나요?
• 리뷰어와 라벨을 지정했나요?

📚 Tasks

• 적금 상세 페이지 구현
• 라우터 설정 및 엔드포인트 수정

⭐ PR Point (To Reviewer)

• 예금 상세 페이지 구현 후, 적금/예금 각각 유사 상품 컴포넌트 구현하여 상세 페이지에 넣을 예정입니다!
• 현재는 mockdata를 넣어놨는데 다른 페이지들 완성되면 이후에 수정하도록 하겠습니다.

📷 Screenshot

Summary by CodeRabbit

• New Features

  • 예금 상세 정보 페이지 추가 (자격 요건, 가입 방법, 한도, 특별 조건, 만기 정보 등 포함)
  • 예금 카드에서 상세 정보 페이지로의 네비게이션 추가

• Style

  • 예금 및 예치금 상세 컨테이너 너비 조정
  • 새로운 테마 사이즈 토큰 추가

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'ignored_paths'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

요약

새로운 저축 상품 상세 페이지를 추가합니다. API 엔드포인트를 단일 ID에서 productId와 optionId 두 개 매개변수로 변경하고, 라우팅, 스타일링, 네비게이션 기능을 구현합니다.

변경 사항

집단 / 파일	변경 요약
저축 상세 페이지 src/pages/savings-detail/savings-detail-page.css.ts, src/pages/savings-detail/savings-detail-page.tsx	새로운 저축 상세 페이지 구성요소와 스타일 정의 추가. CSS 모듈은 detailContainer, bank, product, 옵션 관련 스타일 등 14개의 새로운 스타일 토큰 내보냄. React 컴포넌트는 productId/optionId 라우트 파라미터 읽기, API 데이터 페칭, 모의 데이터 사용 및 상세 정보 렌더링 구현
API 엔드포인트 업데이트 src/shared/api/endpoints.ts	SAVINGS_DETAIL, DEPOSITS_DETAIL, SAVINGS_COMPARE, DEPOSITS_COMPARE 엔드포인트를 단일 ID 대신 (productId, optionId) 두 개 매개변수를 받도록 변경. URL 경로도 /products/savings/${id} → /savings/${productId}/${optionId} 형태로 수정
API 함수 서명 업데이트 src/shared/api/products.ts, src/shared/api/popularity.ts	getSavingsDetail, getDepositsDetail, compareSavings, compareDeposits 함수의 매개변수를 (id: number)에서 (productId: number, optionId: number)로 변경
컴포넌트 업데이트 src/shared/components/savings/savings.tsx, src/shared/components/savings/savings.css.ts, src/shared/components/deposit/deposit.css.ts	Savings 컴포넌트에 productId, optionId props 추가 및 클릭 시 /savings/{productId}/{optionId}로 네비게이션하는 동작 구현. 스타일에 width 속성 추가 (savings: '10rem', deposit: '7rem')
라우팅 및 테마 src/shared/router/index.tsx, src/shared/router/path.ts, src/styles/theme.css.ts	새로운 라우트 경로 SAVINGS_DETAIL: '/savings/:productId/:optionId' 추가. 라우터에 SavingsDetailPage 컴포넌트 등록. 테마에 새로운 크기 토큰 ms: '1.6rem' 추가

시퀀스 다이어그램

sequenceDiagram
    actor User
    participant Savings 컴포넌트
    participant React Router
    participant SavingsDetailPage
    participant API

    User->>Savings 컴포넌트: 저축 상품 클릭
    Savings 컴포넌트->>React Router: navigate('/savings/{productId}/{optionId}')
    React Router->>SavingsDetailPage: 라우트 매개변수 전달
    SavingsDetailPage->>SavingsDetailPage: 컴포넌트 마운트, 상태 초기화
    SavingsDetailPage->>API: getSavingsDetail(productId, optionId)
    API-->>SavingsDetailPage: 상세 정보 반환
    SavingsDetailPage->>SavingsDetailPage: res.result로 상태 업데이트
    SavingsDetailPage->>User: 상세 페이지 렌더링 (헤더, 은행정보, 옵션, 유사상품)

Loading

예상 코드 리뷰 난이도

🎯 3 (보통) | ⏱️ ~25분

• 주의 필요 사항:
  • API 엔드포인트 변경에 따른 모든 호출 사이트 업데이트 확인 필요 (products.ts, popularity.ts 함수들이 올바르게 두 매개변수를 전달하는지 확인)
  • SavingsDetailPage 컴포넌트의 mock 데이터와 실제 API 데이터 통합 계획 확인 (코멘트에 언급된 향후 정리 사항)
  • 새로운 라우트 경로 및 네비게이션 로직이 다른 페이지/컴포넌트와 일관성이 있는지 검증
  • CSS 스타일 토큰 명명 규칙과 기존 코드베이스의 일관성 확인

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Free

📥 Commits

Reviewing files that changed from the base of the PR and between fb9deef and cf34cea.

📒 Files selected for processing (11)

• src/pages/savings-detail/savings-detail-page.css.ts (1 hunks)
• src/pages/savings-detail/savings-detail-page.tsx (1 hunks)
• src/shared/api/endpoints.ts (1 hunks)
• src/shared/api/popularity.ts (2 hunks)
• src/shared/api/products.ts (2 hunks)
• src/shared/components/deposit/deposit.css.ts (1 hunks)
• src/shared/components/savings/savings.css.ts (1 hunks)
• src/shared/components/savings/savings.tsx (2 hunks)
• src/shared/router/index.tsx (1 hunks)
• src/shared/router/path.ts (1 hunks)
• src/styles/theme.css.ts (1 hunks)

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}