[fix] 웹 페이지 반응형 레이아웃 개선#342
Hidden character warning
Conversation
|
Warning Review limit reached
Next review available in: 43 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
Walkthrough홈, 동아리 상세(소개 없음), 동아리 등록/수정, 동아리 등록 목록 페이지의 Tailwind 클래스가 수정되었습니다. main 컨테이너에 좌우/하단 반응형 패딩이 추가되고, UniversityCard 및 RegisterClubCard의 고정 너비/높이 클래스가 w-full 또는 min-h 기반으로 대체되었습니다. ClubDetail의 NoneIntroduce는 span 다중 구조에서 p 기반 텍스트 및 반응형 br 처리로 변경되었습니다. RegisterClubList의 form/section에는 max-w, px/py 반응형 값이 적용되고 고정 높이 클래스가 제거되었습니다. Possibly related PRs
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 passed)
✨ Finishing Touches🧪 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (3)
apps/web/src/pages/RegisterClub/index.tsx (2)
38-44: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoff배지 마크업이
RegisterClubList/index.tsx와 거의 동일하게 중복돼요.
h-16,sm:text-[24px],rounded-[30px]등 배지 스타일이 두 파일에 복붙되어 있습니다. 공용InfoBadge컴포넌트로 뽑으면 유지보수가 편해집니다.🤖 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 `@apps/web/src/pages/RegisterClub/index.tsx` around lines 38 - 44, The badge markup in RegisterClub is duplicated from RegisterClubList, so extract the shared styled badge into a reusable InfoBadge component and replace the inline JSX here with that component. Keep the existing badge content and styling behavior, and use the component’s props or children so both RegisterClub and RegisterClubList can share the same implementation without copy-pasted Tailwind classes.
77-77: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
bg-[#ffffff]하드코딩 대신 디자인 토큰 사용을 고려해주세요.As per coding guidelines, "Use CSS export from
@konect/design-tokensfor design tokens, prioritized over inline values." 이 줄은 이번 변경에 포함된 클래스 문자열이라 토큰화된 배경색(예:bg-white혹은 토큰 클래스)로 교체하는 게 좋습니다.🤖 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 `@apps/web/src/pages/RegisterClub/index.tsx` at line 77, The class string in RegisterClub should not hardcode the background color value, and should use a design token or existing tokenized Tailwind class instead. Update the styling in the RegisterClub component to replace bg-[`#ffffff`] with the corresponding token-based background class (for example, a standard white token/class) and keep the rest of the utility string unchanged.Source: Coding guidelines
apps/web/src/pages/RegisterClub/RegisterClubList/index.tsx (1)
13-13: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win고정 높이
h-16가 반응형 텍스트 확대(sm:text-[24px])와 충돌할 수 있어요.
max-w-93폭 제한 안에서 텍스트가 두 줄로 감기면h-16고정 높이 때문에 잘릴 위험이 있습니다. 다른 곳(카드 등)은 이미min-h-*로 전환했으니 여기도min-h-16이 더 안전합니다.♻️ 제안
- <div className="bg-primary-100 border-primary-400 text-primary-500 flex h-16 w-full max-w-93 items-center justify-center gap-2.5 rounded-[30px] border-2 px-7.5 py-3 text-[20px] leading-10 font-semibold sm:text-[24px]"> + <div className="bg-primary-100 border-primary-400 text-primary-500 flex min-h-16 w-full max-w-93 items-center justify-center gap-2.5 rounded-[30px] border-2 px-7.5 py-3 text-[20px] leading-10 font-semibold sm:text-[24px]">🤖 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 `@apps/web/src/pages/RegisterClub/RegisterClubList/index.tsx` at line 13, Replace the fixed height on the RegisterClubList item container with a minimum height so expanded text can wrap without being clipped; in the JSX for the div in RegisterClubList/index.tsx, change the h-16 sizing to min-h-16 and keep the existing alignment/spacing classes so the component can grow with the responsive text size.
🤖 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.
Nitpick comments:
In `@apps/web/src/pages/RegisterClub/index.tsx`:
- Around line 38-44: The badge markup in RegisterClub is duplicated from
RegisterClubList, so extract the shared styled badge into a reusable InfoBadge
component and replace the inline JSX here with that component. Keep the existing
badge content and styling behavior, and use the component’s props or children so
both RegisterClub and RegisterClubList can share the same implementation without
copy-pasted Tailwind classes.
- Line 77: The class string in RegisterClub should not hardcode the background
color value, and should use a design token or existing tokenized Tailwind class
instead. Update the styling in the RegisterClub component to replace
bg-[`#ffffff`] with the corresponding token-based background class (for example, a
standard white token/class) and keep the rest of the utility string unchanged.
In `@apps/web/src/pages/RegisterClub/RegisterClubList/index.tsx`:
- Line 13: Replace the fixed height on the RegisterClubList item container with
a minimum height so expanded text can wrap without being clipped; in the JSX for
the div in RegisterClubList/index.tsx, change the h-16 sizing to min-h-16 and
keep the existing alignment/spacing classes so the component can grow with the
responsive text size.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: c6edf3d8-dfe1-4dd9-bd1d-841a38e592f4
📒 Files selected for processing (4)
apps/web/src/pages/ClubDetail/index.tsxapps/web/src/pages/Home/index.tsxapps/web/src/pages/RegisterClub/RegisterClubList/index.tsxapps/web/src/pages/RegisterClub/index.tsx
* fix: 웹 디자인 수정 (#340) * [fix] 웹 동아리 신청 API 및 상세 소개 UI 수정 (#337) * fix: 웹 동아리 신청 API 경로 수정 * fix: 동아리 상세 미지원 미디어 UI 제거 * [fix] 웹 페이지 반응형 레이아웃 개선 (#342) * fix: 웹 페이지 반응형 레이아웃 개선 * refactor: InfoBadge 공유 컴포넌트 추출 및 bg-white 토큰 적용 Claude-Session: https://claude.ai/code/session_01Uph4TevGS4YtePTVFkFaoe --------- Co-authored-by: 박성주 <145267904+ParkSungju01@users.noreply.github.com>
1 participant
✨ 요약
😎 해결한 이슈
Summary by CodeRabbit