Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#9] 독서 노트 작성 화면 개발 #10

Merged
merged 18 commits into from
Feb 25, 2025
Merged

[#9] 독서 노트 작성 화면 개발 #10

merged 18 commits into from
Feb 25, 2025

Conversation

2scent
Copy link
Collaborator

@2scent 2scent commented Feb 19, 2025

#9

작업사항

  • 독서 노트 생성 페이지 추가
    • 도서 목록에서 카드를 클릭하면 이동
  • 도서 상세 조회 API 연동 및 쿼리 추가
  • 독서 노트 생성 폼 컴포넌트 BookNoteForm 구현 중

고민되는 점

  • 폼을 독서 정보 - 책 평가 - 독후감 - 인용구 - 공개 여부, 5스텝으로 나눴다.
  • <form />을 어디에 둬야 할까?
    • 모든 스텝을 감싸는 상위 컴포넌트에 <form />을 하나만 둔다.
    • 각 스텝 별로 <form />을 둔다.
  • 폼 상태는 어떻게 관리해야 할까?
    • 모든 스텝을 감싸는 상위 컴포넌트에 rhf의 useForm을 호출하고, <FormProvider />로 전달한 후에, 각 스텝에서는 useFormContext를 호출한다.
    • 각 스텝 별로 useForm을 호출하고, 전체적인 상태는 따로(?) 관리한다.

note-form

@2scent 2scent self-assigned this Feb 19, 2025
@2scent 2scent changed the title [#9] 도서 노트 작성 화면 개발 [#9] 독서 노트 작성 화면 개발 Feb 19, 2025
Comment on lines +24 to +50
{match(step)
.with(BookNoteFormStep.READING_INFO, () => (
<ReadingInfoStep
book={book}
onNext={() => setStep(BookNoteFormStep.RATING)}
/>
))
.with(BookNoteFormStep.RATING, () => (
<RatingStep
onPrevious={() => setStep(BookNoteFormStep.READING_INFO)}
onNext={() => setStep(BookNoteFormStep.REVIEW)}
/>
))
.with(BookNoteFormStep.REVIEW, () => (
<ReviewStep
onPrevious={() => setStep(BookNoteFormStep.RATING)}
onNext={() => setStep(BookNoteFormStep.QUOTES)}
/>
))
.with(BookNoteFormStep.QUOTES, () => (
<QuotesStep
onPrevious={() => setStep(BookNoteFormStep.REVIEW)}
onNext={() => setStep(BookNoteFormStep.VISIBILITY)}
/>
))
.with(BookNoteFormStep.VISIBILITY, () => <VisibilityStep onPrevious={() => setStep(BookNoteFormStep.QUOTES)} />)
.exhaustive()}
Copy link

Choose a reason for hiding this comment

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

<Switch
  value={step}
  cases={{
    [BookNoteFormStep.READING_INFO]: <ReadingInfoStep
            book={book}
            onNext={() => setStep(BookNoteFormStep.RATING)}
          />,
  }}
/>

@2scent 2scent merged commit f696363 into main Feb 25, 2025
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants