Conversation
Review Summary by Qodo디자인 토큰 정리 및 메인 페이지 UI 구현
WalkthroughsDescription• 디자인 토큰에서 모든 타이포그래피 유틸리티의 line-height 속성 제거 • bg-pink-conic 유틸리티를 Tailwind @layer utilities로 마이그레이션 • 메인 페이지 컴포넌트 구조 구현 (헤더, 코인, 연락처, 버튼) • 온보딩 페이지 마크업 간소화 Diagramflowchart LR
A["Design Tokens<br/>tokens.css"] -->|Remove line-height| B["Typography Utils<br/>Simplified"]
C["Global Styles<br/>globals.css"] -->|Migrate to @layer| D["bg-pink-conic<br/>Utility Class"]
E["Main Page<br/>Components"] -->|Header + Coin| F["ScreenMainPage<br/>Layout"]
E -->|Contact + Buttons| F
G["OnBoarding<br/>Cleanup"] -->|Remove wrapper| H["Simplified Structure"]
File Changes3. scripts/generate-tokens.js
|
Enabling\disabling automation
meaning the
the tool will replace every marker of the form
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 labelsThe default labels of the If you specify custom labels in the repo's labels page or via configuration file, you can get tailored labels for your use cases.
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. |
Inline File Walkthrough 💎For enhanced user experience, the To enable inline file summary, set
|
Utilizing extra instructionsThe 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.
Code Review by Qodo
1. Zero line-height inheritance
|
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 Pull Request는 디자인 시스템의 타이포그래피 토큰에서 불필요한 Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 PR은 디자인 토큰에서 line-height를 제거하고, 새로운 메인 매칭 페이지 UI를 구현하는 변경 사항을 포함하고 있습니다. 전반적으로 컴포넌트 구조화가 잘 이루어졌지만, 몇 가지 중요한 시맨틱 HTML 및 접근성 관련 개선점을 발견했습니다. 특히, 상호작용이 필요한 아이콘에 <button> 태그와 aria-label을 추가하고, 페이지 구조에 맞게 <main> 태그 사용을 조정하는 것이 필요합니다. 또한, 장식용 이미지에는 빈 alt 속성을 사용하여 스크린 리더 사용자 경험을 향상시키는 것을 제안합니다. 모든 제안된 코멘트는 기존 규칙과 충돌하지 않으며, 코드 품질과 접근성을 개선하는 데 기여합니다. 자세한 내용은 각 파일의 리뷰 코멘트를 참고해주세요.
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
|
@gemini-code-assist review |
There was a problem hiding this comment.
Code Review
전반적으로 매칭 페이지의 새로운 디자인 구현과 디자인 토큰 정리, 그리고 HEIC 이미지 지원 추가 등 좋은 개선이 이루어졌습니다. 특히 next/image를 적극적으로 사용하고, HEIC 이미지 변환 로직을 추가하여 사용자 경험을 개선한 점이 인상적입니다.
다만, 몇 가지 개선점을 제안합니다.
- 웹 접근성 및 시맨틱 마크업: 일부 이미지와 버튼에
alt속성이나aria-label이 누락되어 있어 보강이 필요합니다. 또한, 페이지의 주요 콘텐츠 영역에는<main>태그를 사용하는 것이 좋습니다. - 하드코딩된 값: 컴포넌트 내에 하드코딩된 숫자나 문자열이 있어 동적으로 처리하도록 수정하면 유지보수성이 향상될 것입니다.
- 반응형 디자인:
vh단위나 고정px너비 사용은 다양한 화면 크기에서 레이아웃 문제를 일으킬 수 있으므로, 보다 유연한 단위 사용을 고려해 주세요. - 컴포넌트 분리: 가이드라인에 따라 200줄이 넘는 컴포넌트는 더 작은 단위로 분리하여 가독성과 재사용성을 높이는 것을 권장합니다.
자세한 내용은 각 파일의 코드 리뷰 코멘트를 참고해 주세요.
I am having trouble creating individual review comments. Click here to see my feedback.
app/main/_components/ContactUserProfile.tsx (9)
현재 ContactUserProfile 컴포넌트의 코드 라인 수가 200줄을 초과합니다. 프로젝트 스타일 가이드(규칙 71)에 따라, 컴포넌트가 너무 커지면 유지보수성과 가독성이 저하될 수 있습니다.
프로필 카드의 헤더, 정보 섹션, 소개 문구 등 논리적인 단위로 컴포넌트를 분리하는 것을 고려해 보세요. 예를 들어, ProfileCardHeader, ProfileInfo, ProfileIntro 와 같은 하위 컴포넌트로 나눌 수 있습니다.
References
- 컴포넌트 파일이 200줄을 초과하면 더 작은 서브 컴포넌트로 분리할 것을 권장하세요. (link)
app/main/_components/FooterButtonList.tsx (11)
버튼 높이를 h-[13.11vh]와 같이 vh 단위로 설정하면, 사용자의 기기 화면 높이에 따라 버튼 크기가 의도치 않게 변경되어 레이아웃이 깨지거나 다른 요소와 겹칠 수 있습니다. 이는 CLS(Cumulative Layout Shift)를 유발할 수 있어 사용자 경험에 좋지 않습니다(규칙 64).
rem, px 등 고정적인 단위를 사용하여 일관된 UI를 제공하는 것을 권장합니다.
References
- CLS 이슈를 경고하세요 (예: 크기가 지정되지 않은 이미지, 로딩 중 레이아웃 밀림). (link)
app/main/_components/ContactUserProfile.tsx (93-103)
아이콘만 있는 버튼은 스크린 리더 사용자가 어떤 동작을 하는지 알기 어렵습니다. 웹 접근성 가이드라인(규칙 78)에 따라 aria-label 속성을 추가하여 버튼의 역할을 명확히 설명해 주세요.
<button
type="button"
aria-label="메시지 보내기"
className="flex h-4 w-4 items-center justify-center"
>
<Image
src="/icons/send-message.svg"
alt=""
width={16}
height={16}
/>
</button>
References
- 이미지의 alt 속성, 아이콘 전용 버튼의 aria-label, 키보드 네비게이션 가능 여부를 확인하세요. (link)
app/main/_components/ContactUserProfile.tsx (74)
이미지의 alt 속성이 "Profile"로 고정되어 있습니다. 스크린 리더 사용자에게 이미지에 대한 구체적인 정보를 제공하기 위해, 프로필 주인의 닉네임을 포함하는 것이 좋습니다. 이는 웹 접근성 가이드라인(규칙 78)에 해당합니다.
alt={profile.nickname || "익명 사용자의 프로필 사진"}
References
- 이미지의 alt 속성, 아이콘 전용 버튼의 aria-label, 키보드 네비게이션 가능 여부를 확인하세요. (link)
app/main/_components/ContactUserProfile.tsx (104-111)
아이콘만 있는 버튼은 스크린 리더 사용자가 어떤 동작을 하는지 알기 어렵습니다. 웹 접근성 가이드라인(규칙 78)에 따라 aria-label 속성을 추가하여 '더보기'와 같이 버튼의 역할을 명확히 설명해 주세요.
<button
type="button"
aria-label="더보기"
className="flex h-4 w-4 flex-col items-center justify-center gap-1"
>
<div className="bg-color-gray-800 h-[2.57px] w-[2.57px] rounded-full" />
<div className="bg-color-gray-800 h-[2.57px] w-[2.57px] rounded-full" />
<div className="bg-color-gray-800 h-[2.57px] w-[2.57px] rounded-full" />
</button>
References
- 이미지의 alt 속성, 아이콘 전용 버튼의 aria-label, 키보드 네비게이션 가능 여부를 확인하세요. (link)
app/main/_components/ContactUserProfile.tsx (121-123)
new Date().getFullYear()를 사용하여 클라이언트 측에서 나이를 계산하고 있습니다. 이 컴포넌트가 서버에서 렌더링될 경우, 서버와 클라이언트의 new Date() 값이 달라 Hydration 오류가 발생할 수 있습니다.
이 컴포넌트는 ScreenMainPage 내부에서 사용되고 ScreenMainPage는 "use client"로 선언되어 있어 당장 문제가 되지는 않겠지만, 잠재적인 위험 요소입니다. 가능하면 서버에서 나이를 계산하여 props로 전달하거나, useEffect 내에서만 이 값을 설정하여 Hydration 불일치를 피하는 것이 좋습니다.
app/main/_components/ContactUserProfile.tsx (64)
map 함수에서 index를 key로 사용하고 있습니다. 리스트의 순서가 변경되거나 아이템이 추가/삭제될 때 예기치 않은 동작이나 성능 저하가 발생할 수 있습니다.
profile 데이터에 id와 같이 고유한 값이 있다면 그것을 key로 사용하는 것이 좋습니다. 만약 없다면, socialAccountId와 같이 고유성이 보장되는 다른 값을 활용하는 것을 고려해 보세요.
key={profile.socialAccountId || index}
app/main/_components/FooterButtonList.tsx (16)
border-l-[#1A1A1A]와 같이 Hex 코드를 직접 사용하고 있습니다. 프로젝트의 tokens.css에 --color-gray-900: #1a1a1a;가 정의되어 있고, 이를 사용하는 border-color-gray-900 유틸리티 클래스가 있습니다.
디자인 시스템의 일관성을 유지하고 유지보수를 용이하게 하기 위해, 정의된 Tailwind CSS 유틸리티 클래스를 사용하는 것이 좋습니다.
className="h-0 w-0 border-y-[7px] border-l-[11px] border-y-transparent border-l-color-gray-900"
References
- 스타일링 시 Tailwind Utility Class 사용을 우선하고, 조건부 스타일링은 clsx나 tailwind-merge (또는 cn 유틸리티) 사용을 권장하세요. (link)
app/main/_components/FooterButtonList.tsx (21)
"현재 740명 참여중이에요!" 문구의 740명이 하드코딩되어 있습니다. 이 값은 실제 참여자 수에 따라 동적으로 변경되어야 합니다.
API를 통해 실제 참여자 수를 받아와 props로 전달하여 렌더링하도록 수정하는 것이 좋습니다.
현재 <span className="text-color-flame-700">{participantCount}명</span> 참여중이에요!
app/main/_components/ScreenMainPage.tsx (52)
페이지의 주요 콘텐츠를 감싸는 최상위 요소로 <section> 태그를 사용하고 있습니다. 웹 표준 및 접근성을 위해 페이지의 핵심적인 내용을 담는 영역은 <main> 태그를 사용하는 것이 더 적절합니다. 이는 스타일 가이드(규칙 85)에서도 권장하는 사항입니다.
<main className="flex min-h-dvh flex-col items-center gap-4 px-4 pb-4">
References
- 단순히 스타일을 위해 를 남용하지 말고, main, section, article 등 의미에 맞는 태그를 사용했는지 엄격히 확인하세요. (link)
app/onboarding/_components/ScreenOnBoarding.tsx (6-8)
기존 코드에 있던 <main> 태그가 제거되었습니다. 페이지의 주요 콘텐츠를 감싸는 <main> 태그는 웹 접근성과 SEO에 중요한 역할을 합니다.
만약 상위 컴포넌트(예: app/onboarding/page.tsx 또는 layout)에서 <main> 태그를 추가하셨다면 문제가 없지만, 그렇지 않다면 시맨틱 구조가 약화될 수 있습니다. 이 컴포넌트를 사용하는 페이지의 전체적인 구조를 다시 한번 확인해 보시는 것을 권장합니다.
References
- 단순히 스타일을 위해 를 남용하지 말고, main, section, article 등 의미에 맞는 태그를 사용했는지 엄격히 확인하세요. (link)
app/register/_components/VerificationStep.tsx (122)
인증번호를 입력하는 FormInput에서 inputMode="numeric" 속성이 제거되었습니다. 이 속성은 모바일 환경에서 숫자 키패드를 바로 띄워주어 사용자가 숫자를 더 편리하게 입력하도록 돕습니다.
사용자 경험 향상을 위해 이 속성을 다시 추가하는 것을 고려해 보세요.
components/common/BusinessInfo.tsx (6)
<p> 태그에 w-[345px]로 고정 너비가 설정되어 있습니다. 이로 인해 화면 너비가 345px보다 좁은 모바일 기기에서 레이아웃이 깨질 수 있습니다.
w-full과 max-w-[345px]를 함께 사용하여, 큰 화면에서는 최대 너비를 유지하고 작은 화면에서는 유연하게 너비가 줄어들도록 하는 것이 좋습니다.
<p className="typo-10-500 text-color-gray-400 w-full max-w-[345px] leading-[140%]">
|
@gemini-code-assist review |
There was a problem hiding this comment.
Code Review
This pull request introduces several new UI components for the main page, including a ContactUserProfile component for displaying scrollable user profiles, FloatingButton for quick actions, FooterButtonList with matching, search, and guide buttons, MainHeader, MyCoinSection to show user assets, NoContactSection for when no matches are found, and NoticeSection for displaying announcements. It also refactors ScreenOnBoarding to directly return StartOnBoarding and updates ProfileButton to use a new bg-pink-gradient class. A significant functional addition is the convertHeicToJpg utility in lib/utils/image.ts and its integration into ProfileImageSelection.tsx to handle HEIC image uploads, along with the addition of heic2any dependency. Furthermore, inputMode="numeric" was removed from VerificationStep.tsx, and line-height: 1.5; was removed from all typo-XX-XXX classes in tokens.css via scripts/generate-tokens.js. Review comments suggest refactoring the large ContactUserProfile component into smaller, more manageable sub-components for improved readability and maintainability, and replacing index with unique IDs like socialAccountId for key props in React map functions to prevent potential issues. Additionally, it is recommended to make the participant count in MatchingButton dynamic via props and to replace emoji icons in SearchMyListButton and GuideBookButton with lucide-react icons for better UI consistency and accessibility.
1 participant
No description provided.