feat: 충전모달 디자인#57
Merged
Merged
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
이번 풀 리퀘스트에서는 상점 기능을 위한 ChargeDrawer 컴포넌트를 신규 추가하고, 기존 코인 섹션에 연결하였습니다. 리뷰 결과, 공통 UI 컴포넌트인 DrawerContent에 특정 너비를 하드코딩하여 재사용성을 저해하는 디자인 이슈가 발견되었습니다. 또한, ChargeDrawer 파일의 크기가 스타일 가이드 권장 사항인 200줄을 초과하여 유지보수를 위한 서브 컴포넌트 분리가 필요하며, 카테고리 칩의 시맨틱 마크업 적용 및 미사용 상태값(activeCategory)을 활용한 실제 필터링 로직 구현이 요구됩니다.
Contributor
Author
|
@gemini-code-assist review |
Contributor
Author
|
@gemini-code-assist review |
Comment on lines
+29
to
+31
| const [activeTab, setActiveTab] = React.useState(0); | ||
|
|
||
| const ActiveContent = TAB_CONTENT[activeTab]; |
Contributor
There was a problem hiding this comment.
탭 전환 시 상태 유지 문제가 발생할 수 있습니다. 현재 ActiveContent가 activeTab에 따라 교체되면서 이전 탭의 컴포넌트가 언마운트됩니다. 이로 인해 DepositorNameContent 탭에서 입력 중이던 이름 정보가 다른 탭으로 이동했다가 돌아오면 초기화됩니다. 사용자 경험을 위해 입력 상태를 ChargeDrawer 부모 컴포넌트로 끌어올리거나, 전역 상태 관리 또는 display: none 방식을 사용하여 상태를 유지하는 것을 권장합니다. 이는 폼 입력 값을 유지하여 사용자 경험을 개선하라는 저장소 규칙과 일치합니다.
References
- 사용자 경험 향상을 위해 폼 제출 과정이나 화면 전환 시에도 사용자가 입력한 데이터가 유실되지 않도록 상태를 유지해야 합니다.
Comment on lines
+21
to
+35
| <span className="typo-14-500 text-[#666666]">입금자명</span> | ||
| <div | ||
| className="flex h-[48px] items-center border-b border-[#B3B3B3] px-2" | ||
| style={{ | ||
| background: | ||
| "linear-gradient(180deg, rgba(245, 245, 245, 0.03) 0%, rgba(245, 245, 245, 0.24) 100%)", | ||
| }} | ||
| > | ||
| <input | ||
| type="text" | ||
| value={name} | ||
| onChange={handleNameChange} | ||
| placeholder="이름을 입력해주세요" | ||
| className="typo-16-500 w-full bg-transparent text-center text-[#1A1A1A] outline-none placeholder:text-[#B3B3B3]" | ||
| maxLength={6} |
Contributor
There was a problem hiding this comment.
입금자명 입력 필드에 대한 접근성을 개선해야 합니다. <span> 대신 <label>을 사용하고 input 요소의 id와 연결하여 스크린 리더 지원 및 클릭 영역 확대를 보장하세요. 또한, 배경 그라데이션과 같이 Tailwind로 표현하기 어려운 정밀한 스타일은 저장소 규칙에 따라 인라인 스타일을 사용합니다.
<label htmlFor="depositor-name" className="typo-14-500 text-[#666666]">
입금자명
</label>
<div
className="flex h-[48px] items-center border-b border-[#B3B3B3] px-2"
style={{
background:
"linear-gradient(180deg, rgba(245, 245, 245, 0.03) 0%, rgba(245, 245, 245, 0.24) 100%)",
}}
>
<input
id="depositor-name"
type="text"
value={name}
onChange={handleNameChange}
placeholder="이름을 입력해주세요"
className="typo-16-500 w-full bg-transparent text-center text-[#1A1A1A] outline-none placeholder:text-[#B3B3B3]"
maxLength={6}
/>
</div>
References
- 입력 필드는 label과 연결되어야 하며 웹 표준을 준수해야 함 (link)
- Tailwind utility 클래스로 정확하게 표현하기 어려운 복잡한 그라데이션이나 정밀한 수치는 인라인 스타일을 사용합니다.
Comment on lines
+41
to
+58
| <div className="flex flex-col"> | ||
| {INDIVIDUAL_ITEMS.map((item) => ( | ||
| <div | ||
| key={item.label} | ||
| className="border-color-gray-100 flex items-center justify-between border-b py-4" | ||
| > | ||
| <span className="typo-16-600 text-color-text-black"> | ||
| {item.label} | ||
| </span> | ||
| <button | ||
| type="button" | ||
| className="typo-16-600 bg-color-flame-700 flex h-10 w-24 items-center justify-center rounded-[8px] text-white" | ||
| > | ||
| {item.price} | ||
| </button> | ||
| </div> | ||
| ))} | ||
| </div> |
Contributor
There was a problem hiding this comment.
상품 목록을 렌더링할 때 시맨틱 마크업을 위해 div 대신 ul과 li 태그를 사용하는 것이 좋습니다. 이는 웹 표준을 준수하고 구조적인 의미를 명확히 하는 데 도움이 됩니다. 저장소 스타일 가이드 85번 규칙(Semantic Markup)을 참고하세요.
Suggested change
| <div className="flex flex-col"> | |
| {INDIVIDUAL_ITEMS.map((item) => ( | |
| <div | |
| key={item.label} | |
| className="border-color-gray-100 flex items-center justify-between border-b py-4" | |
| > | |
| <span className="typo-16-600 text-color-text-black"> | |
| {item.label} | |
| </span> | |
| <button | |
| type="button" | |
| className="typo-16-600 bg-color-flame-700 flex h-10 w-24 items-center justify-center rounded-[8px] text-white" | |
| > | |
| {item.price} | |
| </button> | |
| </div> | |
| ))} | |
| </div> | |
| <ul className="flex flex-col"> | |
| {INDIVIDUAL_ITEMS.map((item) => ( | |
| <li | |
| key={item.label} | |
| className="border-color-gray-100 flex items-center justify-between border-b py-4" | |
| > | |
| <span className="typo-16-600 text-color-text-black"> | |
| {item.label} | |
| </span> | |
| <button | |
| type="button" | |
| className="typo-16-600 bg-color-flame-700 flex h-10 w-24 items-center justify-center rounded-[8px] text-white" | |
| > | |
| {item.price} | |
| </button> | |
| </li> | |
| ))} | |
| </ul> |
References
- 단순히 스타일을 위해 div를 남용하지 말고 의미에 맞는 태그(ul, li 등)를 사용해야 함 (link)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Type
Enhancement
Description
충전 기능을 위한 새로운
ChargeDrawer컴포넌트 구현뽑기권, 옵션권 개별 및 번들 상품 판매 UI 구성
보유 현황 및 구매 한도 정보 표시 기능 추가
Drawer 컴포넌트 반응형 스타일 개선 (모바일 최적화)
Diagram Walkthrough
File Walkthrough
ChargeDrawer.tsx
충전 모달 컴포넌트 신규 구현components/common/ChargeDrawer.tsx
MyCoinSection.tsx
MyCoinSection에 ChargeDrawer 통합components/common/MyCoinSection.tsx
ChargeDrawer컴포넌트 import 추가ChargeDrawer트리거로 변경drawer.tsx
Drawer 반응형 스타일 최적화components/ui/drawer.tsx
mx-auto,max-w-[430px]추가로 중앙 정렬 및 최대 너비 제한✨ Describe tool usage guide:
Overview:
The
describetool 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_descriptionsection), use the following template:With a configuration file, use the following template:
Enabling\disabling automation
meaning the
describetool will run automatically on every PR.the tool will replace every marker of the form
pr_agent:marker_namein the PR description with the relevant content, wheremarker_nameis 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
describetool 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 performanceNew endpoint- pr_agent:A new endpoint was added in this PRSQL query- pr_agent:A new SQL query was added in this PRDockerfile changes- pr_agent:The PR contains changes in the DockerfileThe 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
describetool 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_summaryin 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
describetool 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:
Use triple quotes to write multi-line instructions. Use bullet points to make the instructions more readable.
More PR-Agent commands
See the describe usage page for a comprehensive guide on using this tool.