diff --git a/src/components/Editor/BookReportHeader.tsx b/src/components/Editor/BookReportHeader.tsx index 039eca8..3695e78 100644 --- a/src/components/Editor/BookReportHeader.tsx +++ b/src/components/Editor/BookReportHeader.tsx @@ -92,7 +92,10 @@ export default function BookReportHeaderEditor( - + ); diff --git a/src/components/Editor/BookReportHeader/SearchBar.tsx b/src/components/Editor/BookReportHeader/SearchBar.tsx index aeb2ea0..163890e 100644 --- a/src/components/Editor/BookReportHeader/SearchBar.tsx +++ b/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(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 ( diff --git a/src/components/Editor/Search.tsx b/src/components/Editor/Search.tsx index 93329c4..2c8f798 100644 --- a/src/components/Editor/Search.tsx +++ b/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(''); const [searchText, setSearchText] = useState(''); // 검색어 상태 추가 - + const [presetReadBookTitle, setPresetReadBookTitle] = useState(''); + const [isSearchOk, setIsSearchOk] = useState(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 컴포넌트에 검색어 전달 */} diff --git a/src/model/ReviewResponse.ts b/src/model/ReviewResponse.ts index 5e7547a..24ab36d 100644 --- a/src/model/ReviewResponse.ts +++ b/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 } \ No newline at end of file diff --git a/src/pages/Article.tsx b/src/pages/Article.tsx index d49c054..93a1928 100644 --- a/src/pages/Article.tsx +++ b/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, }; diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx index fe64823..2e81de2 100644 --- a/src/pages/Editor.tsx +++ b/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); }