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

app/notes/create/[isbn]/page.ts

@@ -0,0 +1 @@
+export { BookNoteCreatePage as default } from '@/pages/book-note-create';

package.json

@@ -39,9 +39,11 @@
     "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^5.0.0",
+    "react-hook-form": "^7.54.2",
     "react-intersection-observer": "^9.15.1",
     "tailwind-merge": "^2.6.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "ts-pattern": "^5.6.2"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

src/entities/book/api/book-queries.ts

@@ -1,5 +1,6 @@
-import { infiniteQueryOptions } from '@tanstack/react-query';
+import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query';
 import { fetchBooks, FetchBooksParams } from './fetch-books';
+import { fetchBook } from './fetch-book';
 
 export const bookQueries = {
   all: () => ['books'],
@@ -19,4 +20,9 @@ export const bookQueries = {
       },
       select: (data) => data.pages.flatMap((page) => page.books),
     }),
+  detail: (isbn: string) =>
+    queryOptions({
+      queryKey: [...bookQueries.all(), isbn],
+      queryFn: () => fetchBook(isbn),
+    }),
 };

src/entities/book/api/fetch-book.ts

@@ -6,13 +6,13 @@ function isBookDetailSuccessResponse(response: BookDetailResponse): response is
   return 'version' in response;
 }
 
-export async function fetchBook(itemId: string) {
+export async function fetchBook(isbn: string) {
   const searchParams = new URLSearchParams({
     itemIdType: 'ISBN13',
     cover: 'big',
     output: 'js',
     version: '20131101',
-    itemId: itemId,
+    itemId: isbn,
   });
 
   const response = aladinApi.get('ItemLookUp.aspx', { searchParams });

src/entities/book/api/mapper.ts

@@ -5,7 +5,7 @@ import { BookDetailSuccessResponse, BookListSuccessResponse } from './response';
 
 function adaptBookDTO(dto: BookDTO): Book {
   return {
-    id: dto.itemId,
+    isbn: dto.isbn13,
     title: dto.title,
     author: dto.author,
     publisher: dto.publisher,
@@ -28,6 +28,7 @@ export function adaptBookDetailSuccessResponse(response: BookDetailSuccessRespon
 
   return {
     ...adaptBookDTO(book),
+    description: book.description,
     pageCount: book.subInfo.itemPage,
   };
 }

src/entities/book/index.ts

@@ -1,5 +1,5 @@
 export { default as BookCard } from './ui/BookCard';
 export { default as BookList } from './ui/BookList';
-export type { Book } from './model/book';
+export type { Book, BookDetail } from './model/book';
 export { BookListTab } from './model/book-list-tab';
 export { bookQueries } from './api/book-queries';

src/entities/book/model/book.ts

@@ -1,5 +1,5 @@
 export interface Book {
-  id: number;
+  isbn: string;
   title: string;
   author: string;
   publisher: string;
@@ -8,5 +8,6 @@ export interface Book {
 }
 
 export interface BookDetail extends Book {
+  description: string;
   pageCount: number;
 }

src/entities/book/ui/BookCard.tsx

@@ -1,5 +1,6 @@
 import { memo } from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 import { Card, CardContent } from '@/shared/ui/card';
 import { Book } from '../model/book';
 
@@ -8,28 +9,30 @@ interface BookCardProps {
 }
 
 function BookCard({ book }: BookCardProps) {
-  const { coverImage, title, author, publisher, publishDate } = book;
+  const { isbn, coverImage, title, author, publisher, publishDate } = book;
 
   return (
-    <Card className="overflow-hidden">
-      <div className="flex flex-row sm:flex-col">
-        <div className="w-1/3 sm:w-full">
-          <Image
-            src={coverImage}
-            alt={`${title} 표지`}
-            width={200}
-            height={300}
-            className="size-full object-contain sm:h-64 sm:object-cover"
-          />
+    <Link href={`/notes/create/${isbn}`}>
+      <Card className="overflow-hidden">
+        <div className="flex flex-row sm:flex-col">
+          <div className="w-1/3 sm:w-full">
+            <Image
+              src={coverImage}
+              alt={`${title} 표지`}
+              width={200}
+              height={300}
+              className="size-full object-contain sm:h-64 sm:object-cover"
+            />
+          </div>
+          <CardContent className="w-2/3 p-4 sm:w-full">
+            <h3 className="mb-1 text-sm font-bold sm:mb-2 sm:text-lg">{title}</h3>
+            <p className="mb-1 text-xs text-gray-600 sm:text-sm">{author}</p>
+            <p className="mb-1 text-xs text-gray-600 sm:text-sm">{publisher}</p>
+            <p className="text-xs text-gray-600 sm:text-sm">{publishDate}</p>
+          </CardContent>
         </div>
-        <CardContent className="w-2/3 p-4 sm:w-full">
-          <h3 className="mb-1 text-sm font-bold sm:mb-2 sm:text-lg">{title}</h3>
-          <p className="mb-1 text-xs text-gray-600 sm:text-sm">{author}</p>
-          <p className="mb-1 text-xs text-gray-600 sm:text-sm">{publisher}</p>
-          <p className="text-xs text-gray-600 sm:text-sm">{publishDate}</p>
-        </CardContent>
-      </div>
-    </Card>
+      </Card>
+    </Link>
   );
 }
 

src/entities/book/ui/BookList.tsx

@@ -29,7 +29,7 @@ export default function BookList() {
         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
           {books.map((book) => (
             <BookCard
-              key={book.id}
+              key={book.isbn}
               book={book}
             />
           ))}

src/features/book-note/index.ts

@@ -1 +1 @@
-export { default as BookNoteForm } from './ui/book-note-form';
+export { default as BookNoteForm } from './ui/BookNoteForm/BookNoteForm';

src/features/book-note/model/book-note-form-step.ts

@@ -0,0 +1,9 @@
+export const BookNoteFormStep = {
+  READING_INFO: 'READING_INFO',
+  RATING: 'RATING',
+  REVIEW: 'REVIEW',
+  QUOTES: 'QUOTES',
+  VISIBILITY: 'VISIBILITY',
+} as const;
+
+export type BookNoteFormStep = (typeof BookNoteFormStep)[keyof typeof BookNoteFormStep];

src/features/book-note/model/book-note-form-values.ts

@@ -0,0 +1,12 @@
+import { ReadingStatus } from './reading-status';
+
+export interface BookNoteFormValues {
+  readingStatus: ReadingStatus;
+  startDate: Date;
+  endDate: Date;
+  recommended: boolean | null;
+  overallRating: number;
+  content: string;
+  quotes: { text: string; page: string }[];
+  visibility: boolean;
+}

src/features/book-note/model/reading-status.ts

@@ -0,0 +1,9 @@
+export const ReadingStatus = {
+  WANT_TO_READ: 'WANT_TO_READ',
+  READING: 'READING',
+  READ: 'READ',
+  ON_HOLD: 'ON_HOLD',
+  DROPPED: 'DROPPED',
+} as const;
+
+export type ReadingStatus = (typeof ReadingStatus)[keyof typeof ReadingStatus];

src/features/book-note/ui/BookNoteForm/BookNoteForm.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useState } from 'react';
+import { useParams } from 'next/navigation';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { match } from 'ts-pattern';
+import { bookQueries } from '@/entities/book';
+import { BookNoteFormStep } from '../../model/book-note-form-step';
+import ReadingInfoStep from './step/ReadingInfoStep';
+import RatingStep from './step/RatingStep';
+import ReviewStep from './step/ReviewStep';
+import QuotesStep from './step/QuotesStep';
+import VisibilityStep from './step/VisibilityStep';
+
+export default function BookNoteForm() {
+  const [step, setStep] = useState<BookNoteFormStep>(BookNoteFormStep.READING_INFO);
+
+  const { isbn } = useParams<{ isbn: string }>()!;
+
+  const { data: book } = useSuspenseQuery(bookQueries.detail(isbn));
+
+  return (
+    <div className="mx-auto w-full max-w-4xl space-y-8 p-4 md:p-6">
+      {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()}
+    </div>
+  );
+}

src/features/book-note/ui/BookNoteForm/BookNoteFormActions.tsx

@@ -0,0 +1,39 @@
+import { Button } from '@/shared/ui/button';
+
+interface BookNoteFormActionsProps {
+  previousLabel?: string;
+  nextLabel?: string;
+  previousDisabled?: boolean;
+  nextDisabled?: boolean;
+  onPrevious?: () => void;
+  onNext?: () => void;
+}
+
+export default function BookNoteFormActions({
+  previousLabel = '이전',
+  nextLabel = '다음',
+  previousDisabled,
+  nextDisabled,
+  onPrevious,
+  onNext,
+}: BookNoteFormActionsProps) {
+  return (
+    <div className="flex justify-between pt-6">
+      <Button
+        type="button"
+        onClick={onPrevious}
+        variant="outline"
+        disabled={previousDisabled}
+      >
+        {previousLabel}
+      </Button>
+      <Button
+        type="button"
+        disabled={nextDisabled}
+        onClick={onNext}
+      >
+        {nextLabel}
+      </Button>
+    </div>
+  );
+}

src/features/book-note/ui/BookNoteForm/index.ts

@@ -0,0 +1 @@
+export { default } from './BookNoteForm';