feat: 동아리 정보 등록 페이지 추가#322
Open
ParkSungju01 wants to merge 2 commits into
Hidden character warning
The head ref may contain hidden characters: "317-feat-\ub3d9\uc544\ub9ac-\ub4f1\ub85d\uc218\uc815-\ud398\uc774\uc9c0-\ucd94\uac00"
Open
Conversation
Contributor
|
Warning Review limit reached
More reviews will be available in 48 minutes and 42 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the 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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
Walkthrough이 PR은 동아리 등록 기능의 진입점을 구현합니다. Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
apps/web/src/App.tsx (1)
7-7: ⚡ Quick win내부 모듈 import에 path alias
@/*사용을 권장합니다.상대 경로 대신
@/pages/RegisterClub을 사용하는 것이 프로젝트 컨벤션에 부합합니다. As per coding guidelines: "Use path alias@/*for internal app imports (preferred over relative paths)".♻️ 제안하는 수정
-import RegisterClub from './pages/RegisterClub'; +import RegisterClub from '`@/pages/RegisterClub`';🤖 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/App.tsx` at line 7, Change the internal import of the RegisterClub component to use the project's path alias instead of a relative path: replace the current import of RegisterClub in App.tsx with the alias form (import RegisterClub from '`@/pages/RegisterClub`') so it follows the project's convention for internal modules.apps/web/src/pages/RegisterClub/index.tsx (3)
20-20: ⚡ Quick winDesign token 사용: 임의의 색상 값 대신 디자인 토큰을 사용하세요.
bg-[#ffffff]대신bg-white또는@konect/design-tokens의 적절한 토큰을 사용해야 합니다. As per coding guidelines: "Use CSS export from@konect/design-tokensfor design tokens, prioritized over inline values".♻️ 제안하는 수정
- <div className="border-text-100 flex h-92.75 w-82.75 flex-col items-center gap-10 rounded-[20px] border bg-[`#ffffff`] px-7.5 py-10"> + <div className="border-text-100 flex h-92.75 w-82.75 flex-col items-center gap-10 rounded-[20px] border bg-white px-7.5 py-10">Also applies to: 30-30, 40-40
🤖 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 20, The component currently uses a hard-coded hex background (bg-[`#ffffff`]) in the div's className; replace that with the proper design token (e.g., bg-white or the CSS class exported from `@konect/design-tokens`) and update the import/use accordingly in RegisterClub (look for the div with className containing bg-[`#ffffff`] and the two other similar instances flagged). Ensure you remove the inline hex values and use the token-based CSS class from `@konect/design-tokens` consistently across those elements.
9-9: ⚡ Quick win시맨틱 타이포그래피 유틸리티 사용을 권장합니다.
text-[24px],text-[20px]같은 일반 유틸리티 대신text-h1,text-h2,text-body1같은 시맨틱 유틸리티를 사용하는 것이 디자인 시스템 일관성에 더 좋습니다. As per coding guidelines: "Prioritize semantic typography utilities (e.g.,text-h1,text-body1) over generic utilities".Also applies to: 15-15, 23-23, 33-33, 43-43
🤖 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 9, The JSX uses raw size utilities like "text-[24px]" in the RegisterClub component's button/header div (className containing "text-[24px]") and at the other mentioned locations (lines 15, 23, 33, 43); replace those generic typography utilities with the design-system semantic utilities (e.g., text-h1, text-h2, text-body1) to match the coding guideline—locate each JSX element in RegisterClub that contains text-[...] and swap to the appropriate semantic token while keeping other classes (colors, spacing, rounding) intact.
20-49: ⚡ Quick win코드 중복: 반복되는 카드 구조를 컴포넌트로 추출하는 것을 권장합니다.
세 개의 카드가 거의 동일한 구조로 중복되어 있습니다. 이미지, 제목, 설명, 대상을 props로 받는 재사용 가능한 컴포넌트로 추출하면 유지보수성이 향상됩니다.
♻️ 제안하는 리팩토링
interface OptionCardProps { image: string; imageAlt: string; title: string; description: string; target: string; onClick: () => void; } function OptionCard({ image, imageAlt, title, description, target, onClick }: OptionCardProps) { return ( <button type="button" className="border-text-100 hover:border-primary-500 flex h-92.75 w-82.75 flex-col items-center gap-10 rounded-[20px] border bg-white px-7.5 py-10 transition-colors" onClick={onClick} > <img src={image} alt={imageAlt} /> <div className="flex flex-col items-center"> <h1 className="text-text-700 text-[24px] font-semibold">{title}</h1> <span className="text-text-600 mt-10 text-center text-[14px] leading-4"> {description} </span> <span className="text-text-600 pt-5 text-[14px]">{target}</span> </div> </button> ); }🤖 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 20 - 49, The three repeated card divs in RegisterClub should be extracted into a reusable component; create an OptionCard component (props: image, imageAlt, title, description, target, onClick) and replace each duplicated block with <OptionCard ... /> usages (pass EditClub/NewClub/Register for image and the corresponding title/description/target and click handler), keeping the same classes and behavior (e.g., convert the outer div to a button with the existing class string and hover/transition styles) so markup and styling remain identical but duplicated JSX is removed.
🤖 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 `@apps/web/src/App.tsx`:
- Around line 19-20: Route order causes "/clubs/register" to match the dynamic
route "/clubs/:clubId" and render ClubDetail; move the specific Route with
path="/clubs/register" (element={<RegisterClub />}) so it appears before the
dynamic Route with path="/clubs/:clubId" (element={<ClubDetail />}) in App.tsx
to ensure RegisterClub is matched first.
In `@apps/web/src/pages/RegisterClub/index.tsx`:
- Line 21: The <img> elements (e.g., the JSX instance rendering EditClub in
RegisterClub component) lack alt attributes; update each <img> (including the
occurrences around lines 31 and 41) to include an appropriate alt string — use
an empty alt (alt="") if the image is purely decorative or a descriptive text if
it conveys information — so screen readers receive proper alternative text.
- Around line 20-49: The three option cards (the divs containing images
EditClub, NewClub, Register and headings "동아리 정보 수정", "신규 동아리 등록", "학교 동아리 목록
등록") are static and need click/navigation behavior; update each card to be
interactive by either wrapping the card in a Link/button or adding an onClick
handler that calls your router navigate function (e.g., react-router's navigate
or Next.js router) to go to the appropriate route (edit, new, bulk register),
ensure the element uses keyboard-accessible semantics (button or anchor) and add
pointer/cursor and hover styles so users know they are clickable.
- Line 9: There is a typo in the JSX className string in RegisterClub component:
replace the Tailwind class "itmes-center" with the correct "items-center" so the
flexbox vertical centering is applied; locate the div with className containing
"itmes-center bg-primary-100 border-primary-400 ..." and update that token to
"items-center".
---
Nitpick comments:
In `@apps/web/src/App.tsx`:
- Line 7: Change the internal import of the RegisterClub component to use the
project's path alias instead of a relative path: replace the current import of
RegisterClub in App.tsx with the alias form (import RegisterClub from
'`@/pages/RegisterClub`') so it follows the project's convention for internal
modules.
In `@apps/web/src/pages/RegisterClub/index.tsx`:
- Line 20: The component currently uses a hard-coded hex background
(bg-[`#ffffff`]) in the div's className; replace that with the proper design token
(e.g., bg-white or the CSS class exported from `@konect/design-tokens`) and update
the import/use accordingly in RegisterClub (look for the div with className
containing bg-[`#ffffff`] and the two other similar instances flagged). Ensure you
remove the inline hex values and use the token-based CSS class from
`@konect/design-tokens` consistently across those elements.
- Line 9: The JSX uses raw size utilities like "text-[24px]" in the RegisterClub
component's button/header div (className containing "text-[24px]") and at the
other mentioned locations (lines 15, 23, 33, 43); replace those generic
typography utilities with the design-system semantic utilities (e.g., text-h1,
text-h2, text-body1) to match the coding guideline—locate each JSX element in
RegisterClub that contains text-[...] and swap to the appropriate semantic token
while keeping other classes (colors, spacing, rounding) intact.
- Around line 20-49: The three repeated card divs in RegisterClub should be
extracted into a reusable component; create an OptionCard component (props:
image, imageAlt, title, description, target, onClick) and replace each
duplicated block with <OptionCard ... /> usages (pass EditClub/NewClub/Register
for image and the corresponding title/description/target and click handler),
keeping the same classes and behavior (e.g., convert the outer div to a button
with the existing class string and hover/transition styles) so markup and
styling remain identical but duplicated JSX is removed.
🪄 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: 02d97a35-51cd-4444-be8c-529238d39f3e
⛔ Files ignored due to path filters (4)
apps/web/src/assets/edit-club-detail.pngis excluded by!**/*.png,!apps/*/src/assets/**and included by**apps/web/src/assets/ellipse.svgis excluded by!**/*.svg,!apps/*/src/assets/**and included by**apps/web/src/assets/new-club.pngis excluded by!**/*.png,!apps/*/src/assets/**and included by**apps/web/src/assets/register-club.pngis excluded by!**/*.png,!apps/*/src/assets/**and included by**
📒 Files selected for processing (3)
apps/web/src/App.tsxapps/web/src/layout/Header/index.tsxapps/web/src/pages/RegisterClub/index.tsx
Comment on lines
+20
to
+49
| <div className="border-text-100 flex h-92.75 w-82.75 flex-col items-center gap-10 rounded-[20px] border bg-[#ffffff] px-7.5 py-10"> | ||
| <img src={EditClub} /> | ||
| <div className="flex flex-col items-center"> | ||
| <h1 className="text-text-700 text-[24px] font-semibold">동아리 정보 수정</h1> | ||
| <span className="text-text-600 mt-10 w-65 text-center text-[14px] leading-4"> | ||
| 이미 KONECT에 등록된 동아리의 소개, 사진, 상세정보를 추가하거나 수정할 수 있어요 | ||
| </span> | ||
| <span className="text-text-600 pt-5 text-[14px]">대상 : 동아리 회장, 임원진</span> | ||
| </div> | ||
| </div> | ||
| <div className="border-text-100 flex h-92.75 w-82.75 flex-col items-center gap-10 rounded-[20px] border bg-[#ffffff] px-7.5 py-10"> | ||
| <img src={NewClub} /> | ||
| <div className="flex flex-col items-center"> | ||
| <h1 className="text-text-700 text-[24px] font-semibold">신규 동아리 등록</h1> | ||
| <span className="text-text-600 mt-10 w-60 text-center text-[14px] leading-4"> | ||
| 아직 KONECT에 등록되지 않은 동아리의 기본 정보와 소개 정보를 제출할 수 있어요. | ||
| </span> | ||
| <span className="text-text-600 pt-5 text-[14px]">대상 : 미등록된 동아리의 관계자</span> | ||
| </div> | ||
| </div> | ||
| <div className="border-text-100 flex h-92.75 w-82.75 flex-col items-center gap-10 rounded-[20px] border bg-[#ffffff] px-7.5 py-10"> | ||
| <img src={Register} /> | ||
| <div className="flex flex-col items-center"> | ||
| <h1 className="text-text-700 text-[24px] font-semibold">학교 동아리 목록 등록</h1> | ||
| <span className="text-text-600 mt-10 w-69.5 text-center text-[14px] leading-4"> | ||
| 총동 / 학생회 담당자가 학교 단위의 동아리 목록과 기본 정보를 한 번에 전달할 수 있어요. | ||
| </span> | ||
| <span className="text-text-600 pt-5 text-[14px]">대상 : 총동아리 연합회 / 학생회 담당자</span> | ||
| </div> | ||
| </div> |
Contributor
There was a problem hiding this comment.
카드에 상호작용 기능이 없습니다.
사용자가 선택할 수 있는 옵션으로 제시되었지만, 클릭 핸들러나 네비게이션이 구현되지 않아 실제로 선택할 수 없습니다. 각 카드에 onClick 핸들러를 추가하거나 링크로 감싸서 다음 단계로 이동할 수 있도록 해야 합니다.
예시: 버튼으로 감싸기
<button
type="button"
className="border-text-100 hover:border-primary-500 flex h-92.75 w-82.75 flex-col items-center gap-10 rounded-[20px] border bg-white px-7.5 py-10 transition-colors"
onClick={() => navigate('/clubs/edit')}
>
{/* 카드 내용 */}
</button>🤖 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 20 - 49, The three
option cards (the divs containing images EditClub, NewClub, Register and
headings "동아리 정보 수정", "신규 동아리 등록", "학교 동아리 목록 등록") are static and need
click/navigation behavior; update each card to be interactive by either wrapping
the card in a Link/button or adding an onClick handler that calls your router
navigate function (e.g., react-router's navigate or Next.js router) to go to the
appropriate route (edit, new, bulk register), ensure the element uses
keyboard-accessible semantics (button or anchor) and add pointer/cursor and
hover styles so users know they are clickable.
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.
✨ 요약
😎 해결한 이슈
Summary by CodeRabbit
릴리스 노트