[Feat] 밋업 프로젝트 페이지 ui 구현 - #32
Merged
Merged
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthrough밋업 프로젝트 페이지를 추가했습니다. 기수별 필터, 프로젝트 생성·삭제, 팀원 관리, 빈 상태를 구현했습니다. 폼 검증과 Blob URL 정리를 추가하고 Changes밋업 프로젝트 페이지
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1📝 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 |
CI 결과
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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/hooks/projects/useMeetupProjectForm.ts`:
- Around line 114-117: Separate blob URL ownership between the form and
committed project cards: in src/hooks/projects/useMeetupProjectForm.ts lines
114-117, ensure resetForm only revokes URLs still owned by the form; in
src/pages/projects/MeetupProjectsPage.tsx lines 31-44, update handleSave to
assign a separately created URL to the saved card instead of persisting
values.posterUrl directly, so resetting the form cannot revoke the card
thumbnail URL.
- Around line 20-36: The meetupProjectFormResolver currently stores nested Zod
issue paths as dotted top-level keys, so React Hook Form cannot map deep field
errors correctly. Update its error reduction logic to build the errors object
according to each issue.path segment, creating nested objects or array entries
as needed, and preserve the existing first-error type/message behavior.
🪄 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: ASSERTIVE
Plan: Pro Plus
Run ID: 0033446b-37b4-4cba-829f-6c121f2383f0
📒 Files selected for processing (10)
.claude/references/domain/projects.mdsrc/components/common/SegmentedControl/SegmentedControl.tsxsrc/hooks/index.tssrc/hooks/projects/index.tssrc/hooks/projects/useMeetupProjectForm.tssrc/pages/projects/MeetupProjectsPage.mock.tssrc/pages/projects/MeetupProjectsPage.test.tsxsrc/pages/projects/MeetupProjectsPage.tsxsrc/routes.tssrc/routes/(main)/meetup.tsx
Comment on lines
+114
to
+117
| function resetForm() { | ||
| revokeIfBlobUrl(values.posterUrl) | ||
| reset(createDefaultValues()) | ||
| } |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🔴 Critical | 🏗️ Heavy lift
저장된 포스터 blob URL이 다음 프로젝트 등록 시 취소됩니다. 두 파일이 blob URL 소유권을 공유하는 것이 근본 원인입니다: resetForm은 현재 폼 값의 posterUrl을 무조건 revokeObjectURL하고, 페이지는 그 동일한 blob URL을 저장된 카드의 imageUrl로 영속화하면서 저장 후 폼을 리셋하지 않습니다.
src/hooks/projects/useMeetupProjectForm.ts#L114-L117:resetForm이 revoke하기 전에 해당 URL이 이미 저장된 프로젝트에 사용 중인지 알 수 없습니다. blob URL 소유권을 폼과 커밋된 데이터 간에 분리하세요(예: 저장 시점에 별도 URL을 발급하거나, 폼이 커밋된 URL을 더 이상 추적하지 않도록 상태를 이전).src/pages/projects/MeetupProjectsPage.tsx#L31-L44:handleSave가values.posterUrl을 그대로imageUrl에 저장하는 대신, 저장 시점에 폼과 독립적인 URL을 생성해 카드에 할당하세요.
재현 순서: 포스터를 올려 프로젝트를 저장 → "추가하기"를 다시 클릭(내부적으로 form.reset() 호출) → 방금 저장한 카드의 썸네일이 깨집니다. 이 시나리오를 커버하는 회귀 테스트 추가도 권장합니다.
📍 Affects 2 files
src/hooks/projects/useMeetupProjectForm.ts#L114-L117(this comment)src/pages/projects/MeetupProjectsPage.tsx#L31-L44
🤖 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/hooks/projects/useMeetupProjectForm.ts` around lines 114 - 117, Separate
blob URL ownership between the form and committed project cards: in
src/hooks/projects/useMeetupProjectForm.ts lines 114-117, ensure resetForm only
revokes URLs still owned by the form; in
src/pages/projects/MeetupProjectsPage.tsx lines 31-44, update handleSave to
assign a separately created URL to the saved card instead of persisting
values.posterUrl directly, so resetting the form cannot revoke the card
thumbnail URL.
CI 결과
|
There was a problem hiding this comment.
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 (1)
src/pages/projects/MeetupProjectsPage.tsx (1)
17-17: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
MeetupProjectsPage를export const로 선언하세요.현재 선언은 컴포넌트 선언 규칙과 다릅니다.
수정 예시
-export function MeetupProjectsPage() { +export const MeetupProjectsPage = () => { // ... }As per coding guidelines, "컴포넌트 함수명은 PascalCase를 사용하고, 컴포넌트를
export const로 선언합니다."🤖 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/pages/projects/MeetupProjectsPage.tsx` at line 17, Update the MeetupProjectsPage component declaration to use an exported const while preserving its PascalCase name and existing implementation.Source: Coding guidelines
🤖 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/pages/projects/MeetupProjectsPage.tsx`:
- Line 42: MeetupProjectsPage의 저장된 poster Blob URL 정리를 페이지가 소유하도록 수정하세요.
form.resetAfterSave() 이후 생성·저장된 imageUrl을 추적하고, handleDelete에서 해당 카드의 URL을
URL.revokeObjectURL로 해제한 뒤 카드를 제거하며, 페이지 언마운트 시 남아 있는 모든 페이지 소유 URL도 해제하세요.
MeetupProjectsPage.test.tsx에 저장 후 삭제 흐름에서 URL.revokeObjectURL 호출을 검증하는 회귀 테스트를
추가하세요.
---
Outside diff comments:
In `@src/pages/projects/MeetupProjectsPage.tsx`:
- Line 17: Update the MeetupProjectsPage component declaration to use an
exported const while preserving its PascalCase name and existing implementation.
🪄 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: ASSERTIVE
Plan: Pro Plus
Run ID: 60935a01-6c30-4319-936f-4d51d6d40199
📒 Files selected for processing (3)
src/hooks/projects/useMeetupProjectForm.test.tssrc/hooks/projects/useMeetupProjectForm.tssrc/pages/projects/MeetupProjectsPage.tsx
CI 결과
|
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/pages/projects/MeetupProjectsPage.test.tsx`:
- Around line 142-149: Update the deletion test around the project card lookup
to stop using the `.border-line-neutral` style class. Add or use an accessible
role and name for the ProjectThumbnailCard, then locate the card through that
semantic query before hovering and clicking the existing “삭제하기” button.
🪄 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: ASSERTIVE
Plan: Pro Plus
Run ID: 986a2cc2-421b-40db-96d2-b35b67e3d660
📒 Files selected for processing (2)
src/pages/projects/MeetupProjectsPage.test.tsxsrc/pages/projects/MeetupProjectsPage.tsx
CI 결과
|
CI 결과
|
CI 결과
|
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
2 participants
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.
#️⃣ 연관된 이슈
Close #31
🚧 Work in Progress
📌 주요 변경사항
/meetup)를 Figma 시안에 맞춰 신규 구현useMeetupProjectForm훅으로 상태·검증 분리📝 작업 내용
MeetupProjectModal/ProjectThumbnailCard/SegmentedControl컴포넌트를 조합해 목록 페이지 구성useMeetupProjectForm훅에서 RHFwatch/setValue로 값을 연결해 zod 스키마로 필수 필드 검증MeetupProjectsPage.mock.ts) 기반으로 구성, 실제 API 연동은 이번 범위에서 제외/meetup라우트를src/routes.ts와src/routes/(main)/meetup.tsx에 등록SegmentedControl공통 컴포넌트에 전체 폭 밑줄을 추가해 Figma 탭 디자인에 맞춤(다른 화면에서 아직 사용하지 않아 영향 범위 없음).claude/references/domain/projects.md주요 위치 문서를 실제 구현 경로로 갱신pnpm exec tsc -b,pnpm lint,pnpm exec vitest run(178개 전부 통과),pnpm build전부 통과📸 스크린샷 (선택)
💬 리뷰 요구사항(선택)
admin-projects.md기준 API 연동은 이번 PR 범위가 아니며, 기존 학회 소개/후기 페이지와 동일하게 mock 데이터로만 구현했습니다.Summary by CodeRabbit
새 기능
UI 개선
테스트