Skip to content

[Fix] admin 동아리 정보설정 가로 스크롤 추가 + input 동적 글자수 추가#92

Merged
dalzzy merged 7 commits intodevelopfrom
fix/WTH-admin-clubInfo-page-반응형
Apr 29, 2026

Hidden character warning

The head ref may contain hidden characters: "fix/WTH-admin-clubInfo-page-\ubc18\uc751\ud615"
Merged

[Fix] admin 동아리 정보설정 가로 스크롤 추가 + input 동적 글자수 추가#92
dalzzy merged 7 commits intodevelopfrom
fix/WTH-admin-clubInfo-page-반응형

Conversation

@dalzzy
Copy link
Copy Markdown
Member

@dalzzy dalzzy commented Apr 29, 2026

✅ PR 유형

어떤 변경 사항이 있었나요?

  • 새로운 기능 추가
  • 버그 수정
  • 코드에 영향을 주지 않는 변경사항(오타 수정, 탭 사이즈 변경, 변수명 변경)
  • 코드 리팩토링
  • 주석 추가 및 수정
  • 문서 수정
  • 빌드 부분 혹은 패키지 매니저 수정
  • 파일 혹은 폴더명 수정
  • 파일 혹은 폴더 삭제

📌 관련 이슈번호


✅ Key Changes

  • 동아리 개설, 어드민 동아리 정보설정 input 동적 글자수 추가
  • 동아리 정보 설정 페이지 가로 스크롤 추가
  • 동아리 정보 설정 페이지 간격 수정

📸 스크린샷 or 실행영상

image
2026-04-29.11.29.45.mov

🎸 기타 사항 or 추가 코멘트

Summary by CodeRabbit

릴리스 노트

  • 새로운 기능

    • 동아리 이름 및 소개 필드에 30자 제한 및 실시간 글자 수 카운터 추가
  • 스타일

    • 폼 필드의 간격 및 여백 개선
    • 에러 메시지 표시 개선 및 인라인 렌더링
    • 스크롤 동작 최적화

@dalzzy dalzzy requested review from JIN921, nabbang6 and woneeeee April 29, 2026 14:30
@dalzzy dalzzy self-assigned this Apr 29, 2026
@dalzzy dalzzy added the 🐞 BugFix Something isn't working label Apr 29, 2026
@github-actions
Copy link
Copy Markdown

PR 테스트 결과

Jest: 통과

🎉 모든 테스트를 통과했습니다!

@github-actions
Copy link
Copy Markdown

🤖 Claude 테스트 제안

모델: claude-sonnet-4-6 | 토큰: 0 입력 / 0 출력

변경된 컴포넌트에 대해 Claude가 생성한 테스트 코드입니다. 검토 후 적합한 부분만 사용하세요.

src/app/(private)/[clubId]/admin/layout.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


src/components/admin/attendance/AttendanceCard.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


src/components/admin/attendance/AttendancePageContent.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


src/components/admin/attendance/AttendanceSessionCard.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


src/components/admin/club-info/AdminInfoCard.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


이 코멘트는 Claude API를 통해 자동 생성되었습니다. 반드시 검토 후 사용하세요.

@github-actions
Copy link
Copy Markdown

PR 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다!

@github-actions
Copy link
Copy Markdown

구현한 기능 Preview: https://weeth-oibszy68q-weethsite-4975s-projects.vercel.app

Copy link
Copy Markdown
Collaborator

@nabbang6 nabbang6 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다아앗
수고하셧씁니당!!

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 29, 2026

Warning

Rate limit exceeded

@dalzzy has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 21 minutes and 1 second before requesting another review.

To keep reviews running without waiting, you can enable usage-based add-on for your organization. This allows additional reviews beyond the hourly cap. Account admins can enable it under billing.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fa1ecac5-6231-4ae6-b732-0c3f199e4540

📥 Commits

Reviewing files that changed from the base of the PR and between 4645e0a and c206c7d.

📒 Files selected for processing (3)
  • src/components/attendance/AttendanceHistoryContent.tsx
  • src/components/auth/hub/CreateClubForm.tsx
  • src/hooks/home/useHomeGuard.ts
📝 Walkthrough

요약

Walkthrough

관리자 동아리 정보 페이지의 레이아웃과 폼 입력 필드들이 업데이트되었습니다. 컨테이너 오버플로우 처리를 개선하고, 동아리 명 및 소개의 30자 제한과 실시간 문자 카운터를 추가했으며, 입력 필드의 패딩과 간격 스타일을 조정했습니다.


Changes

Cohort / File(s) Summary
레이아웃 & 컨테이너 오버플로우
src/app/(private)/[clubId]/admin/layout.tsx, src/components/admin/club-info/ClubInfoPageContent.tsx
수평 스크롤 처리 추가: overflow-x-hidden에서 overflow-x-auto로 변경하여 가로 스크롤 활성화.
클럽 정보 카드 & 필드 스타일
src/components/admin/club-info/AdminInfoCard.tsx, src/components/admin/club-info/FieldBlock.tsx, src/components/admin/club-info/ClubInfoContactSection.tsx
패딩 및 간격 조정: AdminInfoCard의 수평 패딩 표준화, FieldBlock 간격 gap-300에서 gap-400으로 증가, 연락처 섹션 하단 패딩 감소.
문자 수 제한 & 유효성 검사 기능
src/components/admin/club-info/ClubInfoBasicSection.tsx, src/components/auth/hub/CreateClubForm.tsx
30자 제한 및 실시간 문자 카운터 추가: 동아리 명/소개 필드에 maxLength={30} 적용, 폼에서 현재/최대 문자 수 표시, 에러 인라인 렌더링으로 변경.
입력 컴포넌트 확장
src/components/ui/Input.tsx
클리어 버튼 스타일링 커스터마이징: clearButtonClassName prop 추가하여 클리어 버튼을 독립적으로 스타일링 가능하게 변경.

예상 코드 리뷰 난이도

🎯 3 (중간) | ⏱️ ~20분


관련 PR


추천 라벨

🎨 Html&css


추천 리뷰어

  • JIN921
  • woneeeee
  • nabbang6

🐰 축하 시

🐇 레이아웃을 다시 정렬하고,
문자 수를 세어보니 정확해,
스크롤 흐르르르 부드러워,
폼은 이제 야무져졌네! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed 제목은 PR의 주요 변경사항(가로 스크롤 추가, 동적 글자수 추가)을 정확하게 반영하며 변경 내용과 완전히 일치합니다.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description check ✅ Passed PR 설명이 주요 변경사항과 스크린샷을 포함하고 있으나, 관련 이슈번호 섹션이 비어있고 추가 코멘트가 없습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/WTH-admin-clubInfo-page-반응형

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.

❤️ Share
Review rate limit: 0/1 reviews remaining, refill in 21 minutes and 1 second.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)
src/components/admin/club-info/ClubInfoPageContent.tsx (1)

132-139: ⚠️ Potential issue | 🟠 Major

overflow-x-auto로 인해 sticky 상단바의 위치 기준이 변경됩니다.

이 래퍼에 overflow-x-auto를 추가하면 새로운 스크롤 컨테이너를 만들어, ClubInfoTopBarsticky top-0 기준이 뷰포트가 아닌 이 내부 스크롤 영역이 됩니다. 외부 main에서 이미 가로 스크롤을 처리하고 있고, MemberPageContent도 유사한 구조에서 overflow-x-auto 없이 정상 작동하므로 제거하는 것이 안전합니다.

수정 예시
-    <div className="flex w-full flex-col overflow-x-auto">
+    <div className="flex w-full flex-col">
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/admin/club-info/ClubInfoPageContent.tsx` around lines 132 -
139, The wrapper div in ClubInfoPageContent (the element rendering
ClubInfoTopBar when isEditMode is true) uses className "flex w-full flex-col
overflow-x-auto", which creates an internal scroll container and breaks
ClubInfoTopBar's sticky positioning; remove the overflow-x-auto from that
wrapper so the sticky top-0 on ClubInfoTopBar is relative to the viewport
(mirror the approach used in MemberPageContent), then run the page to verify the
top bar stays fixed when editing.
src/components/admin/club-info/ClubInfoContactSection.tsx (1)

31-36: ⚠️ Potential issue | 🟡 Minor

pb-[40px]는 spacing 토큰으로 맞춰 주세요.

임의 px 값을 직접 쓰고 있어서 토큰 체계와 어긋납니다. pb-800을 사용하면 40px을 나타낼 수 있습니다.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/components/admin/club-info/ClubInfoContactSection.tsx` around lines 31 -
36, Replace the hard-coded pixel padding on the AdminInfoCard by using the
spacing token system: change the className value that currently contains
"pb-[40px]" to use the token "pb-800" (on the AdminInfoCard JSX element) so the
component's padding aligns with the design token scale and avoids inline px
values.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/auth/hub/CreateClubForm.tsx`:
- Around line 148-178: The problem is the counter shifts when FieldError is
empty; fix by keeping the error slot width stable: inside the container that
currently uses className="flex min-h-4 items-start justify-between gap-200",
replace it with a layout that fixes the error slot (e.g., use justify-end or
keep the two items but give the FieldError a fixed/min-width or render an
invisible placeholder when errors.name is falsy). Concretely, update the wrapper
under the name input and the description input (the containers around FieldError
and the counter) so FieldError (component reference: FieldError) always renders
an element of consistent width (either by adding a wrapper div with a fixed
min-w, adding aria-hidden/invisible text when no message, or switching the
container to justify-end and aligning the counter to the right) to prevent the
character counter from shifting.

---

Outside diff comments:
In `@src/components/admin/club-info/ClubInfoContactSection.tsx`:
- Around line 31-36: Replace the hard-coded pixel padding on the AdminInfoCard
by using the spacing token system: change the className value that currently
contains "pb-[40px]" to use the token "pb-800" (on the AdminInfoCard JSX
element) so the component's padding aligns with the design token scale and
avoids inline px values.

In `@src/components/admin/club-info/ClubInfoPageContent.tsx`:
- Around line 132-139: The wrapper div in ClubInfoPageContent (the element
rendering ClubInfoTopBar when isEditMode is true) uses className "flex w-full
flex-col overflow-x-auto", which creates an internal scroll container and breaks
ClubInfoTopBar's sticky positioning; remove the overflow-x-auto from that
wrapper so the sticky top-0 on ClubInfoTopBar is relative to the viewport
(mirror the approach used in MemberPageContent), then run the page to verify the
top bar stays fixed when editing.
🪄 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: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a63654d8-0cc2-4458-8903-bfce2123382c

📥 Commits

Reviewing files that changed from the base of the PR and between 5eda075 and 4645e0a.

📒 Files selected for processing (8)
  • src/app/(private)/[clubId]/admin/layout.tsx
  • src/components/admin/club-info/AdminInfoCard.tsx
  • src/components/admin/club-info/ClubInfoBasicSection.tsx
  • src/components/admin/club-info/ClubInfoContactSection.tsx
  • src/components/admin/club-info/ClubInfoPageContent.tsx
  • src/components/admin/club-info/FieldBlock.tsx
  • src/components/auth/hub/CreateClubForm.tsx
  • src/components/ui/Input.tsx

Comment thread src/components/auth/hub/CreateClubForm.tsx
@github-actions
Copy link
Copy Markdown

🤖 Claude 테스트 제안

모델: claude-sonnet-4-6 | 토큰: 0 입력 / 0 출력

변경된 컴포넌트에 대해 Claude가 생성한 테스트 코드입니다. 검토 후 적합한 부분만 사용하세요.

src/app/(private)/[clubId]/admin/layout.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


src/components/admin/attendance/AttendanceCard.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


src/components/admin/attendance/AttendancePageContent.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


src/components/admin/attendance/AttendanceSessionCard.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


src/components/admin/club-info/AdminInfoCard.tsx

오류: Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits.


이 코멘트는 Claude API를 통해 자동 생성되었습니다. 반드시 검토 후 사용하세요.

@github-actions
Copy link
Copy Markdown

PR 테스트 결과

Jest: 통과

🎉 모든 테스트를 통과했습니다!

@github-actions
Copy link
Copy Markdown

구현한 기능 Preview: https://weeth-p6nkh2tsu-weethsite-4975s-projects.vercel.app

@github-actions
Copy link
Copy Markdown

PR 검증 결과

TypeScript: 통과
ESLint: 통과
Prettier: 통과
Build: 통과

🎉 모든 검증을 통과했습니다!

@dalzzy dalzzy merged commit ae78a6e into develop Apr 29, 2026
5 checks passed
@dalzzy dalzzy deleted the fix/WTH-admin-clubInfo-page-반응형 branch April 30, 2026 04:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐞 BugFix Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants