Merge pull request #54 from team1-booklog/fix/change-bookisbn-code-in…

…-article-page

[Fix] - 백엔드에서 주는 bookIsbn 맞춰서 화면 수정하기

src/components/Editor/BookReportHeader.tsx

@@ -92,7 +92,10 @@ export default function BookReportHeaderEditor(
           </div>
         </div>
 
-        <Search setBookIsbn={setBookIsbn}/>
+        <Search 
+          bookIsbn={bookIsbn}
+          setBookIsbn={setBookIsbn}
+        />
       </div>
     </div>
   );

src/components/Editor/BookReportHeader/SearchBar.tsx

@@ -3,12 +3,13 @@ import MagnifyingGlass from '../../../assets/icons/MagnifyingGlass.svg';
 import { searchBooks } from '../../../services/BackendBookApi';
 
 interface SearchBarProps {
-  readBookTitle: string;
+  readBookTitle: string ;
   onSearch: (searchText: string) => void;
   setReadBookTitle: (value: string) => void;
+  isSearchOk: boolean;
 }
 
-export default function SearchBar({ readBookTitle, onSearch, setReadBookTitle }: SearchBarProps) {
+export default function SearchBar({ readBookTitle, onSearch, setReadBookTitle, isSearchOk }: SearchBarProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
   const handleButtonClick = () => {
@@ -28,7 +29,8 @@ export default function SearchBar({ readBookTitle, onSearch, setReadBookTitle }:
       return;
     }
     e.preventDefault();
-
+
+    if (isSearchOk) {
     // 검색어를 부모 컴포넌트에 전달
     onSearch(readBookTitle);
 
@@ -42,6 +44,9 @@ export default function SearchBar({ readBookTitle, onSearch, setReadBookTitle }:
       }
     }
     searchBookFromBackend();
+    } else {
+      alert('검색할 수 없습니다.')
+    }
   };
 
   return (

src/components/Editor/Search.tsx

@@ -1,20 +1,52 @@
 import { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
+import { fetchBookId } from '../../services/IsbnBookIdService';
 import SearchBar from './BookReportHeader/SearchBar';
 import SearchResults from './BookReportHeader/SearchResults';
 
 interface SearchProps {
+  bookIsbn: string;
   setBookIsbn: (isbn: string) => void;
 }
 
-export default function Search({setBookIsbn}: SearchProps) {
+export default function Search({bookIsbn, setBookIsbn}: SearchProps) {
   const [readBookTitle, setReadBookTitle] = useState<string>('');
   const [searchText, setSearchText] = useState<string>(''); // 검색어 상태 추가
-
+  const [presetReadBookTitle, setPresetReadBookTitle] = useState<string | undefined>('');
+  const [isSearchOk, setIsSearchOk] = useState<boolean>(true);
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
   const isbnFromUrl = searchParams.get('isbn');
   const bookTitleFromUrl = searchParams.get('bookTitle');
+
+  useEffect(() => {
+    if (bookIsbn) {
+      setTimeout(() => {
+        const fetchBookId1 = async () => {
+          const bookData = await fetchBookId(bookIsbn);
+          const responseBookId = bookData?.id;
+          const responseBookTitle = bookData?.title;
+          if (responseBookId !== undefined) {
+            setPresetReadBookTitle(responseBookTitle);
+            console.log('책 제목:', responseBookTitle);
+            setIsSearchOk(false);
+          } else {
+            console.error('책 ID를 가져오는 중 오류가 발생했습니다.');
+          }
+        };
+        fetchBookId1();
+      }, 1000);
+    }
+  }, [bookIsbn]);
+
+  useEffect(() => {
+    if (presetReadBookTitle) {  
+      setReadBookTitle(presetReadBookTitle);
+      console.log('사전 설정된 책제목 : ', presetReadBookTitle);
+    } else {
+      console.log('사전 설정된 책제목이 null');
+    }
+  }, [presetReadBookTitle]);
 
   useEffect(() => {
     if (isbnFromUrl) {
@@ -47,6 +79,7 @@ export default function Search({setBookIsbn}: SearchProps) {
       readBookTitle={readBookTitle}
       setReadBookTitle={setReadBookTitle}
       onSearch={handleSearch}
+      isSearchOk={isSearchOk}
     />
 
     {/* SearchResults 컴포넌트에 검색어 전달 */}

src/model/ReviewResponse.ts

@@ -17,6 +17,7 @@ export interface FileInfo {
 // 책 정보 인터페이스
 export interface BookInfo {
   id: number
+  isbn: string
   title: string
   author: string
   description: string
@@ -30,7 +31,7 @@ export interface ReviewDetailResponse {
   content: string
   name: string
   file: FileInfo
-  book: BookInfo[]
+  book: BookInfo
   createdAt: string
   updatedAt: string
 }

src/pages/Article.tsx

@@ -13,6 +13,7 @@ interface ArticleData {
   title: string;
   thumbnail?: string;
   context: string;
+  bookId: number;
   bookIsbn: string;
   date: string;
 }
@@ -38,6 +39,7 @@ useEffect(() => {
     setArticleData({
       title: '스벨트는 우주 최강 프레임워크인 것 같다.',
       context: '아무래도 리액트를 다 스벨트로 갈아엎어 버리고 싶다. 나는 스벨트를 할 줄 모른다.',
+      bookId: 64,
       bookIsbn: '9791193926161',
       date: '2021-01-01',
       thumbnail: undefined,
@@ -56,7 +58,8 @@ useEffect(() => {
           const tempData = {
             title: response.title,
             context: response.content,
-            bookIsbn: response.id.toString(),
+            bookId: response.id,
+            bookIsbn: response.book.isbn,
             date: response.createdAt,
             thumbnail: response.file?.physicalPath,
           };

src/pages/Editor.tsx

@@ -54,7 +54,7 @@ export default function Editor() {
           } else {
             setTitle(response.title);
             setContext(response.content);
-            setBookIsbn(response.id.toString());
+            setBookIsbn(response.book.isbn);
             setThumbnail(response.file.physicalPath); // 수정: 썸네일이 URL로 제공될 경우 처리
             setIsPostOk(true);
           }