모바일 반응형 및 UI 버그 수정#709
Merged
Merged
Conversation
- 닉네임 row: 중복확인/저장 버튼을 flex 컨테이너로 묶어 함께 줄바꿈 - 휴대폰 번호 row: select/button shrink-0 + input min-w-0 로 버튼 잘림 방지 - 배너 섹션: flex-col sm:flex-row 로 모바일 수직 스택 처리 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthrough마이페이지 프로필 정보 입력 구간의 스타일과 닉네임 버튼 레이아웃이 조정되고, 기본 정보 섹션의 인증완료/이메일/휴대폰 번호 UI가 재구성되었습니다. 배너 섹션의 반응형 레이아웃이 변경되었으며, 모바일 네비게이션에 builder-ticket 항목이 추가되고 comingSoon 상태를 지원하는 토스트 기능이 구현되었습니다. Changes마이페이지 UI 및 네비게이션 개선
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Suggested labels
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
- ProfileRow 레이블: Bold→Regular, 컬럼 170px→200px - 인증완료 값: 14r→16b (Bold) - 이메일: disabled input→텍스트 표시 + 변경불가 inline - 휴대폰 번호: 1행→3행 (국가드롭다운/입력+인증하기/취소하기) - 기본 정보 행 간격: gap-500(40px)→gap-375(30px) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
border-border-subtle → border-[#D5D7DA] Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/app/`(service)/(my)/my-page/page.tsx:
- Line 370: Replace the arbitrary Tailwind color class used in the component's
className (the token "border-[`#D5D7DA`]" string) with the project's design token
class (e.g., "border-border-subtle"); update the className value in the element
where className contains "border-[`#D5D7DA`]" so it uses the token class instead
of an arbitrary color token to comply with global.css token usage.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 9f4a2c2d-dfd0-4a38-8ea1-06ee5d7a8713
📒 Files selected for processing (2)
src/app/(service)/(my)/my-page/page.tsxsrc/components/common/layout/sidebar/my-page-mobile-nav.tsx
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="border-border-subtle rounded-200 flex flex-1 items-center justify-center gap-175 overflow-hidden border bg-gray-50 py-250 transition-colors hover:bg-gray-100" | ||
| className="border-[#D5D7DA] rounded-200 flex flex-1 items-center justify-center gap-175 overflow-hidden border bg-gray-50 py-250 transition-colors hover:bg-gray-100" |
There was a problem hiding this comment.
임의 색상 클래스 대신 토큰 클래스 사용 필요
border-[#D5D7DA]는 하드코딩된 arbitrary color라서 현재 스타일 규칙을 위반합니다. 토큰 클래스(border-border-subtle 등)로 교체해주세요.
수정 제안
- className="border-[`#D5D7DA`] rounded-200 flex flex-1 items-center justify-center gap-175 overflow-hidden border bg-gray-50 py-250 transition-colors hover:bg-gray-100"
+ className="border-border-subtle rounded-200 flex flex-1 items-center justify-center gap-175 overflow-hidden border bg-gray-50 py-250 transition-colors hover:bg-gray-100"As per coding guidelines src/app/**/*.{tsx,jsx} and src/**/*.{ts,tsx,css}: “Do not use arbitrary Tailwind values… Use only defined tokens from global.css.”
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| className="border-[#D5D7DA] rounded-200 flex flex-1 items-center justify-center gap-175 overflow-hidden border bg-gray-50 py-250 transition-colors hover:bg-gray-100" | |
| className="border-border-subtle rounded-200 flex flex-1 items-center justify-center gap-175 overflow-hidden border bg-gray-50 py-250 transition-colors hover:bg-gray-100" |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/app/`(service)/(my)/my-page/page.tsx at line 370, Replace the arbitrary
Tailwind color class used in the component's className (the token
"border-[`#D5D7DA`]" string) with the project's design token class (e.g.,
"border-border-subtle"); update the className value in the element where
className contains "border-[`#D5D7DA`]" so it uses the token class instead of an
arbitrary color token to comply with global.css token usage.
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.
Problem
Solution
Changes
Bug Fixes
src/app/(service)/(my)/my-page/page.tsxsrc/app/global.csssrc/app/(landing)/class/[slug]/*src/components/common/layout/*src/components/common/layout/sidebar/my-page-mobile-nav.tsxResult
Screenshots
스크린샷:
public/pr-screenshots/706/참조Test plan
🤖 Generated with Claude Code