Refactor/#101 맛집 생성 페이지(PlaceNewPage) FormProvider 도입

[leeleeleeleejun]

#️⃣연관된 이슈

• [Refactor] 맛집 생성 페이지(PlaceNewPage) FormProvider 도입 #101

📝작업 내용

맛집 생성 페이지(PlaceNewPage)의 코드 구조를 개선하기 위해 react-hook-form의 **FormProvider**를 도입했습니다.

1. FormProvider 도입

기존 문제
최상위 컴포넌트에서 useForm을 호출하고, 반환된 객체들(control, setValue, getValues, trigger 등)을 모든 하위 단계(Step) 컴포넌트에 일일이 Props로 전달해야 하는 번거로움이 있었습니다.
해결
FormProvider로 폼 컨텍스트를 주입하고, 하위 컴포넌트에서는 useFormContext 훅을 사용하여 필요한 메서드를 직접 가져다 쓰도록 변경했습니다.
결과
PlaceNewPage의 코드가 훨씬 간결해졌으며, 불필요한 Props 전달이 사라졌습니다.

2. 검증 로직의 위치 이동 (응집도 향상)

기존
Description의 유효성 검사(trigger) 로직이 부모 컴포넌트(PlaceNewPage)의 nextStep 함수 내부에 섞여 있었습니다.
변경
Description 등 각 단계 컴포넌트 내부로 검증 로직을 이동시켰습니다.
효과
부모는 **"페이지의 흐름(Flow)"**만 관리하고, 자식은 **"자신의 데이터 검증(Validation)"**을 스스로 책임지도록 하여 관심사를 명확히 분리했습니다.

스크린샷 (선택)

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

Summary by CodeRabbit

릴리즈 노트

• Refactor

  • 장소 등록 폼 처리 구조를 개선했습니다. 여러 단계의 폼 컴포넌트들이 props 대신 form context를 활용하도록 변경되었습니다.
  • 설명 단계에 클라이언트 측 검증을 추가하여 사용자 입력 검증이 강화되었습니다.

• New Features

  • 환경 변수 기반 원격 이미지 호스트에서 이미지 로딩을 지원합니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

개요

FormProvider를 도입하여 react-hook-form 컨텍스트를 노출하고, 여러 스텝 컴포넌트에서 prop 기반의 form 제어를 제거하여 useFormContext로 대체합니다. next.config.ts에 원격 이미지 패턴을 추가합니다.

변경 사항

Cohort / File(s)	요약
스텝 컴포넌트 리팩토링 apps/web/app/places/new/_components/Step/Campus/Campus.tsx, apps/web/app/places/new/_components/Step/Category/Category.tsx, apps/web/app/places/new/_components/Step/Description/Description.tsx, apps/web/app/places/new/_components/Step/PlacePreview/PlacePreview.tsx, apps/web/app/places/new/_components/Step/PlaceSearch/PlaceSearch.tsx, apps/web/app/places/new/_components/Step/RecommendedMenu/RecommendedMenu.tsx	control, setValue, getValues 등 form 관련 props를 제거하고 useFormContext를 통해 내부적으로 form 데이터에 접근하도록 리팩토링. 모든 컴포넌트의 Props 타입을 단순화하고 nextStep만 남김. Description 컴포넌트에는 handleNext 함수를 추가하여 클라이언트 측 검증 기능 구현.
메인 페이지 구조 변경 apps/web/app/places/new/page.tsx	FormProvider로 form을 감싸서 중첩 컴포넌트에 form 컨텍스트 노출. SUCCESS, FAIL 스텝 타입 제거 및 STEP_ORDER에서 해당 항목 삭제. useForm 반환값을 methods 객체로 단순화.
이미지 설정 확장 apps/web/next.config.ts	NEXT_PUBLIC_API_URL_HOST 환경 변수를 기반으로 원격 이미지 로딩을 허용하는 새로운 패턴 추가.

예상 코드 리뷰 시간

🎯 3 (Moderate) | ⏱️ ~25 minutes

관련 이슈

• [Refactor] 맛집 생성 페이지(PlaceNewPage) FormProvider 도입 #101: FormProvider와 useFormContext를 활용하여 PlaceNewPage 스텝 컴포넌트들 전체에서 control/setValue/trigger를 prop으로 전달하지 않도록 변경하는 내용으로 이 PR과 직접적으로 관련됨.

관련 PR

• Fix/#71 #72: RecommendedMenu 컴포넌트의 form 값 처리 방식을 수정—검색된 PR에서는 stale 상태를 피하기 위해 getValues prop을 도입했지만, 이 PR에서는 getValues를 react-hook-form 컨텍스트로 이동하고 prop에서 제거.
• Refactor/#54 API 응답 형식 수정 및 연결 테스트, 로직 수정 #55: 동일한 places/new 스텝 컴포넌트와 page.tsx를 수정하여 컴포넌트 서명과 form 핸들링 방식을 변경(Campus, Category, Description, PlacePreview, RecommendedMenu 등).
• Feat/#48 admin 관련 메인 페이지 및 등록 조회 상세 페이지 UI 작업 #49: 동일한 PlacePreview 컴포넌트를 수정—이 PR에서는 useFormContext를 통한 form 접근 방식을 변경하고, 검색된 PR에서는 Banner import를 변경.

제안 레이블

🔨 Refactor

제안 리뷰어

• jcw1031
• gihhyeon

토끼의 시

🐰✨ form 컨텍스트 속에, props의 무거움을 벗고
깔끔한 서명으로 거듭난 컴포넌트들,
FormProvider의 품 안에서 데이터 춤을 춘다네!
검증도 추가하며 한 발 더 나아가고,
여섯 개의 발걸음, 이제 한마음으로! 🌟

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor/#101

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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