Revert "[#559] BookInfoCard 컴포넌트 수정 및 goToBookSelectStep 이벤트 추가 (#572)"

This reverts commit f1c6a3c.

src/stories/bookGroup/create/steps/SetUpDetailStep.stories.tsx

@@ -61,10 +61,7 @@ const SetUpDetailForm = () => {
   return (
     <FormProvider {...methods}>
       <form>
-        <SetUpDetailStep
-          goToSelectBookStep={() => alert('goToSelectBookStep')}
-          onNextStep={onNextStep}
-        />
+        <SetUpDetailStep onNextStep={onNextStep} />
       </form>
     </FormProvider>
   );

src/v1/bookGroup/BookInfoCard.tsx

@@ -3,43 +3,39 @@
 import { Suspense, useEffect, useState } from 'react';
 import Link from 'next/link';
 
-import type { APIBook } from '@/types/book';
 import useBookInfoQuery from '@/queries/book/useBookInfoQuery';
 
-import { IconArrowLeft, IconDelete } from '@public/icons';
+import { IconArrowLeft, IconBookPlus, IconDelete } from '@public/icons';
 import BookCover from '@/v1/book/BookCover';
+import { APIBook } from '@/types/book';
 
 const BookInfoCard = ({
   bookId,
   removable = false,
   onBookIdChange: _onBookIdChange,
-  onBookRemove,
 }: {
   bookId?: number;
   removable?: boolean;
   onBookIdChange?: (id: APIBook['bookId']) => void;
-  onBookRemove?: () => void;
 }) => {
   const [id, setId] = useState<typeof bookId | null>(bookId);
 
   useEffect(() => {
     setId(bookId);
   }, [bookId]);
 
-  // TODO: 추후 EmptyBookInfoCard 컴포넌트를 쓰게되면 활용
-  // const handleBookSelect = () => {
-  //   TODO: 도서 선택 UI 제공 후 선택된 도서로 id 변경
-  //   setId(23);
-  //   onBookIdChange?.(23);
-  // };
+  const handleBookSelect = () => {
+    // TODO: 도서 선택 UI 제공 후 선택된 도서로 id 변경
+    // setId(23);
+    // onBookIdChange?.(23);
+  };
 
   const handleBookInfoRemove = () => {
-    onBookRemove?.();
     setId(null);
   };
 
   if (!id) {
-    return <BookInfoCardSkeleton />;
+    return <EmptyBookInfoCard onBookSelect={handleBookSelect} />;
   }
 
   return (
@@ -87,20 +83,19 @@ const BookInfoContent = ({
   );
 };
 
-// TODO: 이후 퍼널 Step의 이동 로직이 변경되면 활용될 컴포넌트
-// const EmptyBookInfoCard = ({ onBookSelect }: { onBookSelect?: () => void }) => {
-//   return (
-//     <div
-//       className="flex min-h-[12.8rem] w-full cursor-pointer flex-col items-center justify-center gap-[1rem] rounded-[0.5rem] border-[0.05rem] border-cancel shadow-bookcard"
-//       onClick={onBookSelect}
-//     >
-//       <IconBookPlus className="h-[2rem] w-[2rem] fill-placeholder" />
-//       <p className="text-xs text-placeholder">
-//         독서모임에 사용할 책을 선택해주세요
-//       </p>
-//     </div>
-//   );
-// };
+const EmptyBookInfoCard = ({ onBookSelect }: { onBookSelect?: () => void }) => {
+  return (
+    <div
+      className="flex min-h-[12.8rem] w-full cursor-pointer flex-col items-center justify-center gap-[1rem] rounded-[0.5rem] border-[0.05rem] border-cancel shadow-bookcard"
+      onClick={onBookSelect}
+    >
+      <IconBookPlus className="h-[2rem] w-[2rem] fill-placeholder" />
+      <p className="text-xs text-placeholder">
+        독서모임에 사용할 책을 선택해주세요
+      </p>
+    </div>
+  );
+};
 
 const BookInfoCardSkeleton = () => {
   return (

src/v1/bookGroup/create/funnel/SelectBookStep.tsx

@@ -30,12 +30,6 @@ const SelectBookStep = ({ onNextStep }: MoveFunnelStepProps) => {
   const [keyword, setKeyword] = useState(keywordValue || '');
   const debouncedSetKeyword = debounce(setKeyword, 500);
 
-  const handleEnterKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.code === 'Enter') e.preventDefault();
-
-    return;
-  };
-
   return (
     <article className="relative flex w-full flex-col gap-[1rem]">
       <h2 className="text-lg font-bold">어떤 책으로 독서모임을 시작할까요?</h2>
@@ -47,7 +41,6 @@ const SelectBookStep = ({ onNextStep }: MoveFunnelStepProps) => {
         className="mb-[1rem]"
         defaultValue={keyword}
         onChange={event => debouncedSetKeyword(event.target.value)}
-        onKeyDown={handleEnterKeyDown}
       />
 
       <Suspense fallback={<Loading fullpage />}>

src/v1/bookGroup/create/steps/SetUpDetailStep/SetUpDetailStep.tsx

@@ -22,13 +22,10 @@ interface MoveFunnelStepProps {
   onSubmit?: () => void;
 }
 
-interface SetUpDetailStepProps extends MoveFunnelStepProps {
-  goToSelectBookStep?: () => void;
-}
-
 /**
  * @todo
  * Field 컴포넌트 분리
+ * goToSelectBookStep 받도록 수정
  */
 
 export interface SetUpDetailStepValues
@@ -42,18 +39,15 @@ export interface SetUpDetailStepValues
 }
 
 const SetUpDetailStep = ({
-  goToSelectBookStep,
+  // goToSelectBookStep,
   onNextStep,
-}: SetUpDetailStepProps) => {
+}: MoveFunnelStepProps) => {
   const { handleSubmit, getValues } = useFormContext<SetUpDetailStepValues>();
 
   return (
     <article className="flex flex-col gap-[3.2rem] overflow-y-scroll pb-[7rem]">
       <TitleField name={'title'} />
-      <SelectedBookInfoField
-        bookId={getValues('book.bookId')}
-        onRemoveButtonClick={goToSelectBookStep}
-      />
+      <SelectedBookInfoField bookId={getValues('book')?.bookId} />
       <IntroduceField name={'introduce'} />
 
       <section className="flex flex-col gap-[1.6rem]">
@@ -118,29 +112,10 @@ const TitleField = ({ name }: SetUpDetailFieldProps) => {
   );
 };
 
-const SelectedBookInfoField = ({
-  bookId,
-  onRemoveButtonClick,
-}: {
-  bookId?: number;
-  onRemoveButtonClick?: () => void;
-}) => {
-  const { reset } = useFormContext<SetUpDetailStepValues>();
-
-  const handleBookRemove = () => {
-    onRemoveButtonClick?.();
-    reset({ book: undefined });
-
-    return;
-  };
-
+const SelectedBookInfoField = ({ bookId }: { bookId?: number }) => {
   return (
     <section>
-      <BookInfoCard
-        bookId={bookId}
-        onBookRemove={handleBookRemove}
-        removable={true}
-      />
+      <BookInfoCard bookId={bookId} removable={true} />
     </section>
   );
 };