fix: 도서등록 카테고리 제대로 적용되지 않던 문제 수정

jiphyeonjeon-42 · Nov 29, 2023 · 4366aa2 · 4366aa2
1 parent dc2e985
commit 4366aa2
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 101 deletions.
diff --git a/src/api/books/useGetBooksCreate.ts b/src/api/books/useGetBooksCreate.ts
@@ -1,38 +1,16 @@
-import { useState, useEffect } from "react";
-import { useApi } from "../../hook/useApi";
-import { compareExpect } from "../../util/typeCheck";
-import getErrorMessage from "../../constant/error";
-import { Book } from "../../type";
+import { useState } from "react";
+import { useApi } from "~/hook/useApi";
+import getErrorMessage from "~/constant/error";
+import { type BookInfo } from "~/type";
 
-export const useGetBooksCreate = (defalutBook: Book) => {
-  const [isbnQuery, setIsbnQuery] = useState("");
+export const useGetBooksCreate = (defalutBook: Omit<BookInfo, "id">) => {
   const [bookInfo, setBookInfo] = useState(defalutBook);
   const [errorMessage, setErrorMessage] = useState("");
 
-  const { request } = useApi("get", "books/create", {
-    isbnQuery,
-  });
-
-  const expectedItem = [
-    { key: "title", type: "string", isNullable: false },
-    { key: "author", type: "string", isNullable: false },
-    { key: "publisher", type: "string", isNullable: false },
-    { key: "pubdate", type: "string", isNullable: false },
-    { key: "category", type: "string", isNullable: false },
-    { key: "image", type: "string", isNullable: true },
-  ];
+  const { requestWithUrl } = useApi();
 
   const refineResponse = (response: any) => {
-    const books = compareExpect(
-      "books/create",
-      [response.data.bookInfo],
-      expectedItem,
-    );
-    setBookInfo({
-      ...books[0],
-      isbn: isbnQuery,
-      koreanDemicalClassification: books[0].category,
-    });
+    setBookInfo(response.data.bookInfo);
     setErrorMessage("");
   };
 
@@ -46,11 +24,14 @@ export const useGetBooksCreate = (defalutBook: Book) => {
     setBookInfo(defalutBook);
   };
 
-  useEffect(() => {
-    if (isbnQuery && isbnQuery.length) {
-      request(refineResponse, displayError);
-    }
-  }, [isbnQuery]);
+  const fetchData = (isbnQuery: string) => {
+    if (!isbnQuery) return;
+    requestWithUrl("get", "books/create", {
+      data: { isbnQuery },
+      onSuccess: refineResponse,
+      onError: displayError,
+    });
+  };
 
-  return { bookInfo, errorMessage, fetchData: setIsbnQuery, setBookInfo };
+  return { bookInfo, errorMessage, fetchData, setBookInfo };
 };
diff --git a/src/api/books/usePostBooksCreate.ts b/src/api/books/usePostBooksCreate.ts
@@ -1,29 +1,17 @@
-import { useState, useEffect } from "react";
-import { useApi } from "../../hook/useApi";
-import getErrorMessage from "../../constant/error";
-import { compareExpect } from "../../util/typeCheck";
-import { BookInfo } from "../../type";
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useApi } from "~/hook/useApi";
+import getErrorMessage from "~/constant/error";
+import { type BookInfo } from "~/type";
 
 export const usePostBooksCreate = () => {
-  const [newBookInfo, setNewBookInfo] = useState<BookInfo | null>(null);
   const [message, setMessage] = useState("");
-
-  const { request } = useApi("post", "books/create", newBookInfo);
-
-  const expectedItem = [
-    { key: "title", type: "string", isNullable: false },
-    { key: "isbn", type: "string", isNullable: true },
-    { key: "author", type: "string", isNullable: false },
-    { key: "publisher", type: "string", isNullable: false },
-    { key: "pubdate", type: "string", isNullable: false },
-    { key: "categoryId", type: "string", isNullable: false },
-    { key: "image", type: "string", isNullable: true },
-    { key: "donator", type: "string", isNullable: true },
-  ];
+  const navigate = useNavigate();
+  const { requestWithUrl } = useApi();
 
   const displaySuccess = () => {
     setMessage("등록되었습니다!");
-    window.location.reload();
+    navigate(0);
   };
 
   const displayError = (error: any) => {
@@ -32,19 +20,13 @@ export const usePostBooksCreate = () => {
     setMessage(`실패했습니다. ${errorMessage} `);
   };
 
-  const registerBook = (newBook: BookInfo) => {
-    const [book] = compareExpect("books/create", [newBook], expectedItem);
-    setNewBookInfo(book);
+  const registerBook = (newBook: Omit<BookInfo, "id">) => {
+    requestWithUrl("post", "books/create", {
+      data: newBook,
+      onSuccess: displaySuccess,
+      onError: displayError,
+    });
   };
 
-  useEffect(() => {
-    if (newBookInfo) {
-      request(displaySuccess, displayError);
-    }
-  }, [newBookInfo]);
-
-  return {
-    message,
-    registerBook,
-  };
+  return { message, registerBook };
 };
diff --git a/src/component/addbook/AddBook.tsx b/src/component/addbook/AddBook.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useGetBooksCreate } from "../../api/books/useGetBooksCreate";
+import { useGetBooksCreate } from "~/api/books/useGetBooksCreate";
 
 import RegisterBookWithUsersExtraInput from "./AddBookRegisterBookWithUsersExtraInput";
 import DisplayBasicBookInfo from "./AddBookDisplayBasicBookInfo";
@@ -9,9 +9,9 @@ import Banner from "../utils/Banner";
 import BarcodeReader from "../utils/BarcodeReader";
 import InquireBoxTitle from "../utils/InquireBoxTitle";
 
-import { bookManagementTabList } from "../../constant/tablist";
-import Book from "../../asset/img/admin_icon.svg";
-import "../../asset/css/AddBook.css";
+import { bookManagementTabList } from "~/constant/tablist";
+import Book from "~/asset/img/admin_icon.svg";
+import "~/asset/css/AddBook.css";
 
 const AddBook = () => {
   const [isUsingBarcodeReader, setUsingBarcodeReader] = useState(true);
@@ -22,7 +22,7 @@ const AddBook = () => {
     author: "",
     publisher: "",
     pubdate: "",
-    koreanDemicalClassification: "",
+    category: "",
   };
 
   const { bookInfo, errorMessage, fetchData, setBookInfo } =

diff --git a/src/component/addbook/AddBookDisplayBasicBookInfo.tsx b/src/component/addbook/AddBookDisplayBasicBookInfo.tsx
@@ -1,5 +1,5 @@
 import { ChangeEventHandler, useState } from "react";
-import { BookInfo } from "../../type";
+import { BookInfo } from "~/type";
 
 const labelText: {
   [key: string]: string;
@@ -10,8 +10,8 @@ const labelText: {
 };
 
 type Props = {
-  bookInfo: BookInfo & { [key: string]: string };
-  setBookInfo: (bookinfo: BookInfo) => void;
+  bookInfo: Omit<BookInfo, "id" | "books">;
+  setBookInfo: (bookinfo: Omit<BookInfo, "id" | "books">) => void;
 };
 
 const DisplayBasicBookInfo = ({ bookInfo, setBookInfo }: Props) => {
@@ -48,6 +48,7 @@ const DisplayBasicBookInfo = ({ bookInfo, setBookInfo }: Props) => {
         />
       </label>
       {Object.keys(labelText).map(key => {
+        const bookInfoKey = key as keyof Omit<BookInfo, "id" | "books">;
         return (
           <label htmlFor={key} className="add-book__book-info__text">
             <span className="font-16-bold add-book__book-info__text-key">
@@ -57,7 +58,7 @@ const DisplayBasicBookInfo = ({ bookInfo, setBookInfo }: Props) => {
               className="add-book__basic-info__input "
               type="text"
               id={key}
-              value={bookInfo[key]}
+              value={bookInfo[bookInfoKey]}
               onChange={onChangeInput}
               required
             />

diff --git a/src/component/addbook/AddBookRegisterBookWithUsersExtraInput.tsx b/src/component/addbook/AddBookRegisterBookWithUsersExtraInput.tsx
@@ -5,30 +5,30 @@ import {
   ChangeEventHandler,
   FormEventHandler,
 } from "react";
-import { category, koreanDemicalClassification } from "../../constant/category";
-import { usePostBooksCreate } from "../../api/books/usePostBooksCreate";
-import { BookInfo } from "../../type";
+import {
+  category,
+  koreanDemicalClassification as 중앙도서관도서분류,
+} from "~/constant/category";
+import { usePostBooksCreate } from "~/api/books/usePostBooksCreate";
+import { BookInfo } from "~/type";
 
 type Props = {
-  bookInfo: BookInfo;
+  bookInfo: Omit<BookInfo, "id">;
 };
 
 const RegisterBookWithUsersExtraInput = ({ bookInfo }: Props) => {
-  const [isDevBook, setIsDevBook] = useState(false);
+  const [isDevBook, setIsDevBook] = useState<"" | "true" | "false">("");
   const [categoryId, setCategoryId] = useState("");
   const donator = useRef<HTMLInputElement>(null);
+  const isReadyToPost = categoryId && bookInfo.title && bookInfo.author;
 
   useEffect(() => {
-    setIsDevBook(false);
+    setIsDevBook("");
     setCategoryId("");
   }, [bookInfo]);
 
   const { message, registerBook } = usePostBooksCreate();
 
-  const onChangeCategory: ChangeEventHandler<HTMLSelectElement> = e => {
-    setCategoryId(e.currentTarget.value);
-  };
-
   const onSubmit: FormEventHandler = e => {
     e.preventDefault();
     registerBook({
@@ -38,17 +38,11 @@ const RegisterBookWithUsersExtraInput = ({ bookInfo }: Props) => {
     });
   };
 
-  const isReadyToPost = () => {
-    return categoryId && bookInfo.title && bookInfo.author;
-  };
-
   const setDev: ChangeEventHandler<HTMLSelectElement> = e => {
-    const value = e.currentTarget.value === "true";
-    if (!value && bookInfo?.koreanDemicalClassification) {
-      const id = koreanDemicalClassification.find(
-        i => i.id === bookInfo.koreanDemicalClassification,
-      )?.categoryId;
-      id && setCategoryId(id);
+    const { value } = e.currentTarget;
+    if (value === "true" || value === "false") {
+      const id = 중앙도서관도서분류.find(i => i.id === bookInfo.category);
+      if (id) setCategoryId(id.categoryId);
       setIsDevBook(value);
     }
   };
@@ -75,11 +69,11 @@ const RegisterBookWithUsersExtraInput = ({ bookInfo }: Props) => {
           name="category"
           id="category-select"
           value={categoryId}
-          onChange={onChangeCategory}
+          onChange={e => setCategoryId(e.currentTarget.value)}
         >
           <option value="">카테고리를 선택하세요</option>
           {category
-            ?.filter(items => items.isDev === isDevBook)
+            ?.filter(items => `${items.isDev}` === isDevBook)
             ?.map(element => {
               return (
                 <option value={element.id} key={element.id}>
@@ -92,7 +86,7 @@ const RegisterBookWithUsersExtraInput = ({ bookInfo }: Props) => {
       <p className="color-red">기부자 정보</p>
       <input type="text" id="donator" ref={donator} />
       <p className="add-book__create-form__errror-Message">{message}</p>
-      <button type="submit" className={isReadyToPost() && "red"}>
+      <button type="submit" className={isReadyToPost && "red"}>
         등록하기
       </button>
     </form>

diff --git a/src/type/BookInfo.ts b/src/type/BookInfo.ts
@@ -10,7 +10,6 @@ export type BookInfo = {
   publisher: string;
   publishedAt?: string;
   image?: string;
-  koreanDemicalClassification?: string;
   donator?: string;
   books?: Book[];
 };