feat(web): 조직 생성/수정 화면 API 연결 - #80
Conversation
|
Warning Review limit reached
More reviews will be available in 11 minutes and 45 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?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 credits. 🚦 How do rate 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 see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (6)
Walkthrough조직 생성·수정 화면이 공통 OrganizationForm과 폼 유틸로 분리되었습니다. 조직 조회·생성·수정 API와 API 오류 메시지 헬퍼가 추가됐고, 생성 화면은 생성 제출, 수정 화면은 초기값 로딩 후 수정 제출로 바뀌었습니다. Changes조직 생성·수정 흐름
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 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/features/organization/components/mvp-organization-edit-page.tsx`:
- Around line 74-85: The organization update flow in mvp-organization-edit-page
should be moved to TanStack Query mutation handling instead of calling
updateOrganization directly in the onSubmit handler. Reuse the same mutation
pattern as the create screen: define/use a useMutation for the update action,
handle success in onSuccess by navigating to /dashboard, and invalidate the
organization query so the cache stays fresh after edits. Keep the existing
submit error handling by surfacing mutation failures through getApiErrorMessage.
- Around line 19-50: 조직 정보 조회 로직이 useEffect/useState/ignore 플래그로 수동 관리되고 있으므로,
mvp-organization-edit-page의 getOrganization 호출을 TanStack Query의 useQuery로 옮기세요.
조직 서버 데이터는 queryKey와 queryFn으로 가져오고, isLoading/error는 Query 상태를 사용하며,
createOrganizationFormValuesFromDetail 변환은 select 또는 렌더 시점에서 처리하세요.
setLoadError, setIsLoading, ignore 패턴은 제거하고 useQuery 기반으로 formValues와
submitError 흐름만 남기면 됩니다.
In `@apps/web/src/features/organization/components/mvp-organization-form.tsx`:
- Around line 21-32: `MvpOrganizationForm` is calling `createOrganization`
directly inside `onSubmit` and manually managing `submitError`, which should be
moved to TanStack Query. Refactor the submit flow to use a `useMutation`-based
mutation for `createOrganization`, move API error handling into the mutation’s
`onError`, and keep the success redirect in the mutation success path. Also wire
the mutation’s pending state (`isPending`) into the form submit button so the UI
reflects the in-flight request consistently.
In `@apps/web/src/features/organization/components/organization-form.tsx`:
- Line 161: The className on the organization form grid uses an arbitrary pixel
value in md:grid-cols-[120px_1fr], which should be replaced with a token or
Tailwind default scale. Update the layout in organization-form.tsx to use an
existing design token from globals.css or a standard Tailwind grid column value,
keeping the same structure in the component that renders the form rows.
- Around line 36-86: OrganizationForm is managing fields with useState and
validating via validateOrganizationForm, which should be replaced with the
standard React Hook Form + Zod approach. Refactor the OrganizationForm component
to use useForm with zodResolver and the shared organization schema, and update
handleSubmit to rely on RHF submission state/errors instead of manual
submitted/hasErrors checks. Remove the local field state and the
formValues/errors useMemo logic, and wire toggleWeeklyClosedDay and
updateBusinessHour through RHF field setters or controller-based inputs so
createOrganizationRequestFromForm still receives the final form data.
- Around line 174-191: In organization-form.tsx, the two time inputs for
business hours currently allow 1-minute granularity even though the shared
schedule boundary uses 30-minute intervals. Update the `<Input type="time" />`
fields in the business-hours section to enforce 30-minute steps by adding the
appropriate step setting, keeping the UI aligned with the
`isThirtyMinuteBoundary` convention and the availability timetable.
In `@apps/web/src/features/organization/utils/organization-form-utils.ts`:
- Around line 62-100: validateOrganizationForm is re-implementing business-hour
rules instead of using the shared Zod source of truth, so update this helper to
import and reuse packages/shared’s
organizationBusinessHourInputSchema/createOrganizationRequestSchema logic rather
than hand-coding the checks. Keep the organization-form utility as a thin
adapter around the shared schema, and make sure the validation path covers the
shared constraints for 30-minute boundaries, next-day closing via closesNextDay,
and closed-day handling using the existing ORGANIZATION_DAYS/businessHours
structure.
🪄 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: 7d20b005-1015-4477-9b1b-6ad0f5faaa26
📒 Files selected for processing (6)
apps/web/src/features/organization/api/organization-api.tsapps/web/src/features/organization/components/mvp-organization-edit-page.tsxapps/web/src/features/organization/components/mvp-organization-form.tsxapps/web/src/features/organization/components/organization-form.tsxapps/web/src/features/organization/utils/organization-form-utils.tsapps/web/src/lib/api-error-message.ts
| onSubmit={async (request) => { | ||
| setSubmitError(null); | ||
|
|
||
| try { | ||
| await createOrganization(request); | ||
| router.push("/dashboard"); | ||
| } catch (error) { | ||
| setSubmitError( | ||
| getApiErrorMessage(error, "조직 생성 중 오류가 발생했습니다. 다시 시도해 주세요."), | ||
| ); | ||
| } | ||
|
|
||
| setIsSubmitting(true); | ||
| router.push("/dashboard"); | ||
| }} |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
서버 mutation은 TanStack Query로 처리하세요.
createOrganization을 onSubmit에서 직접 호출하고 submitError를 수동 관리하고 있습니다. 규칙상 서버 데이터 변경은 TanStack Query(useMutation)로 처리하고, 에러는 onError에서 다루는 것이 일관됩니다. pending 상태(isPending)를 폼 제출 버튼과도 연결할 수 있습니다.
As per path instructions: "서버 데이터 캐시/Mutation 로직은 TanStack Query 패턴을 따를 것", "API 에러는 TanStack Query onError 또는 error boundary에서 처리".
🤖 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/features/organization/components/mvp-organization-form.tsx`
around lines 21 - 32, `MvpOrganizationForm` is calling `createOrganization`
directly inside `onSubmit` and manually managing `submitError`, which should be
moved to TanStack Query. Refactor the submit flow to use a `useMutation`-based
mutation for `createOrganization`, move API error handling into the mutation’s
`onError`, and keep the success redirect in the mutation success path. Also wire
the mutation’s pending state (`isPending`) into the form submit button so the UI
reflects the in-flight request consistently.
Source: Path instructions
|
리뷰 반영 완료했습니다.
|
2 participants
개요
조직 생성/수정 화면을 실제 조직 API와 연결합니다.
Closes #79
변경 사항
GET/POST/PATCH /organization요청용 web API client 추가OrganizationForm사용POST /organization연동GET/PATCH /organization연동DAY_OF_WEEK_VALUES는 shared 값을 기준으로 사용하고,DAY_LABELS는 web UI 표시용 매핑으로 유지변경 유형
feat— 새로운 기능fix— 버그 수정refactor— 리팩터링 (기능 변경 없음)test— 테스트 코드perf— 성능 개선docs— 문서 수정chore— 빌드·설정 변경영향 범위
web—apps/webapi—apps/apidb—packages/databaseshared—packages/sharedrepo— 루트 설정·CI/CD·문서테스트 방법
pnpm --filter @fragment/web typecheck체크리스트
packages/shared) 업데이트 (타입 변경 시)스크린샷 / 영상
없음
리뷰 포인트
OrganizationForm공통화 범위loadError)와 저장 실패(submitError) 분리