feat: 결제 두번째 모달 디자인

[dasosann]

PR Type

Enhancement

---

Description

• 결제 확인 모달(Drawer) 컴포넌트 신규 구현

• 상수 데이터 구조 API 응답 형식으로 리팩토링

• 개별/번들 아이템 렌더링 로직 컴포넌트화

• 입금 계좌 정보 및 입금자명 관리 기능 추가

---

Diagram Walkthrough

flowchart LR
  A["상수 데이터<br/>SHOP_ITEMS_API"] --> B["ShopItemRow<br/>ShopBundleRow"]
  B --> C["ConfirmChargeDrawer<br/>결제 확인 모달"]
  D["QuickBundleCard"] --> C
  C --> E["계좌이체 정보<br/>입금자명 수정<br/>동의 체크"]

Loading

File Walkthrough

	Relevant files
Configuration changes	charge.ts API 기반 데이터 구조로 전환 및 타입 정의                                                                lib/constants/charge.ts QUICK_BUNDLES에 priceValue 필드 추가 (숫자 형식 가격) 기존 ITEM_PRICES, INDIVIDUAL_ITEMS, BUNDLE_ITEMS 상수 제거 API 응답 타입 인터페이스 Reward, ShopItemAPI 신규 정의 통합 아이템 데이터 SHOP_ITEMS_API 배열로 리팩토링 입금 계좌 정보 상수 BANK_INFO 추가 +54/-28
Enhancement	ConfirmChargeDrawer.tsx 계좌이체 결제 확인 모달 신규 구현                                                                            components/common/charge-confirm/ConfirmChargeDrawer.tsx 결제 확인 모달 컴포넌트 신규 구현 입금 계좌 정보 표시 및 복사 기능 입금자명 인라인 수정 기능 (edit mode toggle) 동의 체크박스 및 충전 완료 확인 버튼 계좌이체 완료 여부 확인 후 활성화되는 CTA 버튼 +201/-0  QuickBundleCard.tsx 결제 모달 연동 및 Props 확장                                                                            components/common/charge/QuickBundleCard.tsx Props에 priceValue 필드 추가 기존 버튼을 ConfirmChargeDrawer로 래핑 숫자 형식 가격을 모달에 전달 +14/-6    ShopContent.tsx 아이템 렌더링 로직 컴포넌트화 및 데이터 소스 통합                                                          components/common/charge/ShopContent.tsx INDIVIDUAL_ITEMS, BUNDLE_ITEMS 상수 제거 SHOP_ITEMS_API 기반 동적 필터링 로직 추가 (리워드 개수 기준) 개별/번들 아이템 렌더링을 ShopItemRow, ShopBundleRow 컴포넌트로 위임 임포트 구문 정리 및 컴포넌트 분리 +15/-42  ShopRows.tsx 상점 아이템 행 컴포넌트 신규 구현                                                                            components/common/charge/ShopRows.tsx ShopItemRow 컴포넌트 신규 구현 (개별 아이템 행) ShopBundleRow 컴포넌트 신규 구현 (번들 아이템 행) 각 행에 ConfirmChargeDrawer 통합 리워드 데이터 기반 동적 텍스트 생성 (보너스 항목 분리) +76/-0

---

---

✨ Describe tool usage guide:

---

Overview:
The describe tool scans the PR code changes, and generates a description for the PR - title, type, summary, walkthrough and labels. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

When commenting, to edit configurations related to the describe tool (pr_description section), use the following template:

/describe --pr_description.some_config1=... --pr_description.some_config2=...

With a configuration file, use the following template:

[pr_description]
some_config1=...
some_config2=...

Enabling\disabling automation When you first install the app, the default mode for the describe tool is: pr_commands = ["/describe", ...] meaning the describe tool will run automatically on every PR. Markers are an alternative way to control the generated description, to give maximal control to the user. If you set: pr_commands = ["/describe --pr_description.use_description_markers=true", ...] the tool will replace every marker of the form pr_agent:marker_name in the PR description with the relevant content, where marker_name is one of the following: type: the PR type. summary: the PR summary. walkthrough: the PR walkthrough. diagram: the PR sequence diagram (if enabled). Note that when markers are enabled, if the original PR description does not contain any markers, the tool will not alter the description at all.

Custom labels The default labels of the describe tool are quite generic: [Bug fix, Tests, Enhancement, Documentation, Other]. If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases. Examples for custom labels: Main topic:performance - pr_agent:The main topic of this PR is performance New endpoint - pr_agent:A new endpoint was added in this PR SQL query - pr_agent:A new SQL query was added in this PR Dockerfile changes - pr_agent:The PR contains changes in the Dockerfile ... The list above is eclectic, and aims to give an idea of different possibilities. Define custom labels that are relevant for your repo and use cases. Note that Labels are not mutually exclusive, so you can add multiple label categories. Make sure to provide proper title, and a detailed and well-phrased description for each label, so the tool will know when to suggest it.

Inline File Walkthrough 💎 For enhanced user experience, the describe tool can add file summaries directly to the "Files changed" tab in the PR page. This will enable you to quickly understand the changes in each file, while reviewing the code changes (diffs). To enable inline file summary, set pr_description.inline_file_summary in the configuration file, possible values are: 'table': File changes walkthrough table will be displayed on the top of the "Files changed" tab, in addition to the "Conversation" tab. true: A collapsable file comment with changes title and a changes summary for each file in the PR. false (default): File changes walkthrough will be added only to the "Conversation" tab.

Utilizing extra instructions The describe tool can be configured with extra instructions, to guide the model to a feedback tailored to the needs of your project. Be specific, clear, and concise in the instructions. With extra instructions, you are the prompter. Notice that the general structure of the description is fixed, and cannot be changed. Extra instructions can change the content or style of each sub-section of the PR description. Examples for extra instructions: [pr_description] extra_instructions="""- The PR title should be in the format: '<PR type>: <title>' - The title should be short and concise (up to 10 words) - ... """ Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.

More PR-Agent commands To invoke the PR-Agent, add a comment using one of the following commands: /review: Request a review of your Pull Request. /describe: Update the PR title and description based on the contents of the PR. /improve [--extended]: Suggest code improvements. Extended mode provides a higher quality feedback. /ask <QUESTION>: Ask a question about the PR. /update_changelog: Update the changelog based on the PR's contents. /help_docs <QUESTION>: Given a path to documentation (either for this repository or for a given one), ask a question. /add_docs 💎: Generate docstring for new components introduced in the PR. /generate_labels 💎: Generate labels for the PR based on the PR's contents. /analyze 💎: Automatically analyzes the PR, and presents changes walkthrough for each component. See the tools guide for more details. To list the possible configuration parameters, add a /config comment.

See the describe usage page for a comprehensive guide on using this tool.

[gemini-code-assist]

Code Review

이번 PR에서는 충전 프로세스를 위한 ConfirmChargeDrawer 컴포넌트를 신규 도입하고, 기존 상점 UI를 서브 컴포넌트로 분리하여 구조를 개선했습니다. 리뷰를 통해 ConfirmChargeDrawer 내 하드코딩된 기본값 수정과 한글 입력 시 UI 깨짐 방지를 위한 너비 조정을 제안했습니다. 또한, 보너스 아이템 판별 로직을 문자열 매칭 대신 데이터 필드 기반으로 개선하여 유지보수성을 확보할 것을 권장했습니다.