// bookshelf-ts/src/schemas/book.ts
import { z } from 'zod'
 
export const bookStatusValues = ['wish', 'reading', 'done'] as const
 
export const bookInputSchema = z.object({
  title: z.string().min(1, '제목을 입력하세요'),
  author: z.string().min(1, '저자를 입력하세요'),
  pages: z.coerce.number().int().positive('쪽수는 1 이상이어야 합니다'),
  status: z.enum(bookStatusValues),
  memo: z.string().optional().default(''),
  coverUrl: z.string().optional(),
})
 
export const bookSchema = bookInputSchema.extend({
  id: z.string(),
})
 
export const bookListSchema = z.array(bookSchema)
 
export type BookStatus = (typeof bookStatusValues)[number]
export type BookInput = z.infer<typeof bookInputSchema>
export type Book = z.infer<typeof bookSchema>

// bookshelf-ts/src/services/books.ts
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { bookListSchema, bookSchema, type Book, type BookInput } from '../schemas/book'
 
const API_BASE = '/api/books'
 
export const bookKeys = {
  all: ['books'] as const,
  detail: (id: string) => ['books', id] as const,
}
 
async function requestBook(url: string, init?: RequestInit): Promise<Book> {
  const response = await fetch(url, init)
  if (!response.ok) throw new Error('요청이 실패했습니다')
  return bookSchema.parse(await response.json())
}
 
async function fetchBooks(): Promise<Book[]> {
  const response = await fetch(API_BASE)
  if (!response.ok) throw new Error('책 목록을 불러오지 못했습니다')
  return bookListSchema.parse(await response.json())
}
 
async function fetchBook(id: string): Promise<Book> {
  return requestBook(`${API_BASE}/${id}`)
}
 
async function createBook(input: BookInput): Promise<Book> {
  return requestBook(API_BASE, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(input),
  })
}
 
async function updateBook(id: string, input: BookInput): Promise<Book> {
  return requestBook(`${API_BASE}/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(input),
  })
}
 
async function deleteBook(id: string): Promise<void> {
  await fetch(`${API_BASE}/${id}`, { method: 'DELETE' })
}
 
export function useBooksQuery() {
  return useQuery({ queryKey: bookKeys.all, queryFn: fetchBooks })
}
 
export function useBookQuery(id: string) {
  return useQuery({ queryKey: bookKeys.detail(id), queryFn: () => fetchBook(id) })
}
 
export function useCreateBookMutation() {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: createBook,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: bookKeys.all })
    },
  })
}
 
export function useUpdateBookMutation(id: string) {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: (input: BookInput) => updateBook(id, input),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: bookKeys.all })
      queryClient.invalidateQueries({ queryKey: bookKeys.detail(id) })
    },
  })
}
 
export function useDeleteBookMutation() {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: deleteBook,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: bookKeys.all })
    },
  })
}

// bookshelf-ts/src/routes/BookFormPage.tsx
import { useNavigate, useParams } from 'react-router'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { bookInputSchema, bookStatusValues, type BookInput } from '../schemas/book'
import { useBookQuery, useCreateBookMutation, useUpdateBookMutation } from '../services/books'
 
export default function BookFormPage() {
  const { bookId } = useParams()
  const navigate = useNavigate()
  const isEditMode = bookId !== undefined
  const bookQuery = useBookQuery(bookId ?? '')
  const createMutation = useCreateBookMutation()
  const updateMutation = useUpdateBookMutation(bookId ?? '')
 
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
  } = useForm<BookInput>({
    resolver: zodResolver(bookInputSchema),
    values: isEditMode && bookQuery.data ? bookQuery.data : undefined,
  })
 
  async function onSubmit(values: BookInput) {
    if (isEditMode) {
      await updateMutation.mutateAsync(values)
    } else {
      await createMutation.mutateAsync(values)
    }
    navigate('/books')
  }
 
  if (isEditMode && bookQuery.isLoading) {
    return <p>불러오는 중입니다...</p>
  }
 
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="title">제목</label>
      <input id="title" {...register('title')} />
      {errors.title && <p role="alert">{errors.title.message}</p>}
 
      <label htmlFor="author">저자</label>
      <input id="author" {...register('author')} />
      {errors.author && <p role="alert">{errors.author.message}</p>}
 
      <label htmlFor="pages">쪽수</label>
      <input id="pages" type="number" {...register('pages')} />
      {errors.pages && <p role="alert">{errors.pages.message}</p>}
 
      <label htmlFor="status">상태</label>
      <select id="status" {...register('status')}>
        {bookStatusValues.map((status) => (
          <option key={status} value={status}>
            {status}
          </option>
        ))}
      </select>
 
      <label htmlFor="memo">메모</label>
      <textarea id="memo" {...register('memo')} />
 
      <button type="submit" disabled={isSubmitting}>
        {isEditMode ? '수정 저장' : '등록'}
      </button>
    </form>
  )
}

npm run dev