// src/schemas/bookSchema.ts
import { z } from 'zod'
 
export const bookSchema = z.object({
  title: z.string().min(1, '제목을 입력하세요').max(100, '제목은 100자 이하로 입력하세요'),
  author: z.string().min(1, '저자를 입력하세요'),
  pages: z.coerce.number().int('정수로 입력하세요').min(0, '0 이상이어야 합니다'),
  status: z.enum(['wish', 'reading', 'done']),
  memo: z.string().max(500, '메모는 500자 이하로 입력하세요').optional(),
})
 
export type BookFormValues = z.infer<typeof bookSchema>

// src/components/BookForm.tsx
import { useState, type ChangeEvent } from 'react'
import { useForm, type UseFormSetError } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { bookSchema, type BookFormValues } from '../schemas/bookSchema'
 
const COVER_COLORS = ['#2563eb', '#16a34a', '#f59e0b', '#db2777', '#7c3aed', '#0891b2']
const MEMO_MAX_LENGTH = 500
 
export type BookCreatePayload = BookFormValues & { coverColor: string }
 
export interface BookFormSubmitHelpers {
  setError: UseFormSetError<BookFormValues>
}
 
interface BookFormProps {
  defaultValues?: BookFormValues
  onSubmitBook: (values: BookCreatePayload, helpers: BookFormSubmitHelpers) => Promise<void>
  submitLabel?: string
}
 
function BookForm({ defaultValues, onSubmitBook, submitLabel = '저장' }: BookFormProps) {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors, isSubmitting },
  } = useForm<BookFormValues>({
    resolver: zodResolver(bookSchema),
    defaultValues: defaultValues ?? { title: '', author: '', pages: 0, status: 'wish', memo: '' },
  })
 
  const memoField = register('memo')
  const [memoLength, setMemoLength] = useState(defaultValues?.memo?.length ?? 0)
 
  function handleMemoChange(event: ChangeEvent<HTMLTextAreaElement>) {
    setMemoLength(event.target.value.length)
    memoField.onChange(event)
  }
 
  async function onValid(values: BookFormValues) {
    const coverColor = COVER_COLORS[Math.floor(Math.random() * COVER_COLORS.length)]
    try {
      await onSubmitBook({ ...values, coverColor }, { setError })
    } catch {
      // onSubmitBook 쪽에서 setError로 이미 처리한다
    }
  }
 
  return (
    <form className="book-form" onSubmit={handleSubmit(onValid)} noValidate>
      <label htmlFor="book-title">제목</label>
      <input id="book-title" type="text" {...register('title')} />
      {errors.title && <p className="field-error">{errors.title.message}</p>}
 
      <label htmlFor="book-author">저자</label>
      <input id="book-author" type="text" {...register('author')} />
      {errors.author && <p className="field-error">{errors.author.message}</p>}
 
      <label htmlFor="book-pages">쪽수</label>
      <input id="book-pages" type="number" {...register('pages')} />
      {errors.pages && <p className="field-error">{errors.pages.message}</p>}
 
      <label htmlFor="book-status">상태</label>
      <select id="book-status" {...register('status')}>
        <option value="wish">읽고 싶어요</option>
        <option value="reading">읽는 중</option>
        <option value="done">다 읽음</option>
      </select>
 
      <label htmlFor="book-memo">메모</label>
      <textarea id="book-memo" {...memoField} onChange={handleMemoChange} maxLength={MEMO_MAX_LENGTH} />
      <p className="field-hint">
        {memoLength} / {MEMO_MAX_LENGTH}자
      </p>
      {errors.memo && <p className="field-error">{errors.memo.message}</p>}
 
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '저장 중...' : submitLabel}
      </button>
    </form>
  )
}
 
export default BookForm

// src/pages/NewBookPage.tsx
import { useNavigate } from 'react-router'
import BookForm, { type BookCreatePayload, type BookFormSubmitHelpers } from '../components/BookForm'
import { useCreateBook } from '../hooks/useBookMutations'
import type { BookFormValues } from '../schemas/bookSchema'
 
interface ServerFieldError {
  fieldErrors?: Partial<Record<keyof BookFormValues, string>>
}
 
function NewBookPage() {
  const navigate = useNavigate()
  const createBook = useCreateBook()
 
  async function handleSubmitBook(values: BookCreatePayload, { setError }: BookFormSubmitHelpers) {
    try {
      await createBook.mutateAsync(values)
      navigate('/')
    } catch (error) {
      const fieldErrors = (error as ServerFieldError).fieldErrors ?? {}
      const fields = Object.keys(fieldErrors) as (keyof BookFormValues)[]
 
      if (fields.length === 0) {
        setError('root', { message: '저장에 실패했습니다. 잠시 후 다시 시도하세요.' })
        return
      }
 
      fields.forEach((field) => {
        const message = fieldErrors[field]
        if (message) {
          setError(field, { type: 'server', message })
        }
      })
    }
  }
 
  return (
    <section>
      <h2>책 등록</h2>
      <BookForm onSubmitBook={handleSubmitBook} submitLabel="등록" />
    </section>
  )
}
 
export default NewBookPage

npm run dev