Conversation
Walkthrough홈 TopSection의 최소 높이 클래스를 추가하고, 회원가입 페이지의 레이아웃 관련 클래스와 불필요한 내부 래퍼를 제거/조정했습니다. 제어 흐름·이벤트·공개 API에는 변경이 없습니다. Changes
Sequence Diagram(s)Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
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 |
|
MATEBALL-STORYBOOK |
![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
🧹 Nitpick comments (2)
src/pages/home/components/top-section.tsx (1)
13-13: CLS 완화 의도는 적절. 배너 실제 높이와 브레이크포인트별 일치만 확인해주세요.min-h로 초기 레이아웃 확보는 좋습니다. 다만 CardBanner의 실제 렌더 높이(텍스트/아이콘 포함)와 9.6rem이 모든 해상도에서 일관되게 맞는지 확인 필요합니다. 필요 시 aspect-ratio/고정 height 토큰화로 상수(9.6rem) 의존도를 줄이는 것도 고려해주세요.
src/pages/sign-up/sign-up.tsx (1)
12-19: 래퍼 제거 이후 높이 전파 확인 필요(h-full 자식들이 실제로 늘어나는지).상위 컨테이너가 viewport 기준 높이를 보장하지 않으면, 하위의
h-full이 기대대로 동작하지 않을 수 있습니다. iOS 주소창 변동 이슈까지 고려하면min-h-svh가 안전합니다.선택 적용안:
- <div className="h-full flex flex-col bg-gray-white"> + <div className="min-h-svh flex flex-col bg-gray-white">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/home/components/top-section.tsx(1 hunks)src/pages/sign-up/components/signup-step.tsx(1 hunks)src/pages/sign-up/sign-up.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#78
File: src/pages/sign-up/utils/age-calculate.ts:1-4
Timestamp: 2025-07-09T09:08:46.371Z
Learning: heesunee는 나이 계산 시 한국식 나이 시스템을 사용하므로, 정확한 생일 기반 계산보다는 출생연도 기준의 간단한 계산 방식을 선호합니다.
📚 Learning: 2025-07-09T18:07:41.693Z
Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#95
File: src/pages/sign-up/components/nickname-step.tsx:28-30
Timestamp: 2025-07-09T18:07:41.693Z
Learning: heesunee는 src/pages/sign-up/components/nickname-step.tsx의 onSubmit 핸들러 API 호출을 쿼리와 함께 통합해서 처리할 예정이므로, 이 부분에 대해 다시 언급하지 않아야 합니다.
Applied to files:
src/pages/sign-up/components/signup-step.tsx
🔇 Additional comments (1)
src/pages/sign-up/components/signup-step.tsx (1)
121-121: flex 누락으로 레이아웃 붕괴 가능(버튼 하단 정렬/간격 미적용).
flex-col,justify-between은 display:flex 전제입니다. 현재 두 컨테이너에flex가 없어 의도한 세로 배치/공간 분배가 동작하지 않을 수 있습니다.아래 패치 적용 제안:
- className="h-full w-full flex-col justify-between gap-[4rem] px-[1.6rem] pt-[4rem] pb-[1.6rem]" + className="h-full w-full flex flex-col justify-between gap-[4rem] px-[1.6rem] pt-[4rem] pb-[1.6rem]" ... - <div className="h-full w-full flex-col gap-[4rem]"> + <div className="h-full w-full flex flex-col gap-[4rem]">Also applies to: 123-123
⛔ Skipped due to learnings
Learnt from: heesunee PR: MATEBALL/MATEBALL-CLIENT#102 File: src/shared/components/bottom-sheet/bottom-sheet-indicator.tsx:5-5 Timestamp: 2025-07-10T09:58:36.134Z Learning: MATEBALL-CLIENT 프로젝트의 `src/shared/styles/custom-utilities.css`에서 `.flex-col` 클래스는 이미 `apply flex flex-col;`을 포함하고 있어서 별도로 `flex` 클래스를 추가할 필요가 없습니다. CSS 클래스 관련 제안을 하기 전에 반드시 커스텀 유틸리티 클래스 파일을 먼저 확인해야 합니다.Learnt from: heesunee PR: MATEBALL/MATEBALL-CLIENT#77 File: src/shared/components/card/match-card/components/card-header.tsx:56-56 Timestamp: 2025-07-08T13:43:15.684Z Learning: MATEBALL-CLIENT 프로젝트에서는 `src/shared/styles/custom-utilities.css`에 커스텀 유틸리티 클래스들이 정의되어 있습니다. 특히 `.flex-row` 클래스는 이미 `apply flex flex-row;`를 포함하고 있어서 별도로 `flex` 클래스를 추가할 필요가 없습니다.
src/pages/sign-up/sign-up.tsx
Outdated
| </Step> | ||
| </Funnel> | ||
| </div> | ||
| <div className="h-fullflex-col bg-gray-white"> |
There was a problem hiding this comment.
클래스명 오타: h-fullflex-col → 공백 누락으로 클래스 인식 실패. 또한 flex 미지정.
공백 누락으로 두 유틸이 모두 무효화됩니다. 또 flex-col이 의미를 가지려면 flex가 필요합니다.
권장 패치:
- <div className="h-fullflex-col bg-gray-white">
+ <div className="h-full flex flex-col bg-gray-white">📝 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.
| <div className="h-fullflex-col bg-gray-white"> | |
| <div className="h-full flex flex-col bg-gray-white"> |
🤖 Prompt for AI Agents
In src/pages/sign-up/sign-up.tsx around line 11 the div has a typo in className:
"h-fullflex-col bg-gray-white" — insert a space between h-full and flex-col and
add the missing flex utility so the classes read "h-full flex flex-col
bg-gray-white" to ensure height, flex container and column direction are
applied.
Deploying mateball-client with
|
| Latest commit: |
0eefe2d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://75bbdddb.mateball-client.pages.dev |
| Branch Preview URL: | https://fix--388-design.mateball-client.pages.dev |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/sign-up/sign-up.tsx (1)
12-19: Funnel 래퍼 제거 이후 높이 전파 검증 필요 (h-full이 안 먹을 수 있음)
flex-1래퍼 제거로, 내부SignupStep의h-full이 부모 높이 전파를 못 받으면 스크롤/레이아웃 이슈가 생길 수 있습니다.Funnel이 자체적으로display:flex/높이를 보장하지 않는다면 아래처럼min-h-0 flex-1을 부여하는 걸 고려해주세요.- <Funnel> + <Funnel className="min-h-0 flex-1">참고:
Funnel이className을 받지 않으면 최소한 상위 컨테이너 또는Funnel내부 루트에 동일 속성을 부여해 주세요(대안으로 얇은 래퍼 복원).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/sign-up/sign-up.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#78
File: src/pages/sign-up/utils/age-calculate.ts:1-4
Timestamp: 2025-07-09T09:08:46.371Z
Learning: heesunee는 나이 계산 시 한국식 나이 시스템을 사용하므로, 정확한 생일 기반 계산보다는 출생연도 기준의 간단한 계산 방식을 선호합니다.
📚 Learning: 2025-07-10T09:58:36.134Z
Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#102
File: src/shared/components/bottom-sheet/bottom-sheet-indicator.tsx:5-5
Timestamp: 2025-07-10T09:58:36.134Z
Learning: MATEBALL-CLIENT 프로젝트의 `src/shared/styles/custom-utilities.css`에서 `.flex-col` 클래스는 이미 `apply flex flex-col;`을 포함하고 있어서 별도로 `flex` 클래스를 추가할 필요가 없습니다. CSS 클래스 관련 제안을 하기 전에 반드시 커스텀 유틸리티 클래스 파일을 먼저 확인해야 합니다.
Applied to files:
src/pages/sign-up/sign-up.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (2)
src/pages/sign-up/sign-up.tsx (2)
12-19: 이전 ‘flex’ 누락 코멘트는 현재 기준 OK (팀 커스텀 유틸 반영됨)컨테이너의
className="h-full flex-col bg-gray-white"구성은 괜찮습니다. 과거 러닝에 따르면 이 프로젝트의.flex-col은flex를 내장하고 있어(apply flex flex-col) 별도flex유틸 추가가 불필요합니다. 저는 이 러닝을 참고했습니다.
12-19: Step name 문자열이 SIGNUP_STEPS와 일치하여 추가 조치 불필요
AGREEMENT, INFORMATION이 src/pages/sign-up/constants/validation.ts의 SIGNUP_STEPS 배열 ['AGREEMENT', 'INFORMATION']와 정확히 일치합니다.
1 participant
#️⃣ Related Issue
Closes #388
☀️ New-insight
Summary by CodeRabbit
스타일
리팩터