Merge pull request #28 from team1-booklog/dev

main으로 변경사항 반영

src/Routers.tsx

@@ -6,6 +6,7 @@ import Login from './pages/Login.tsx'
 import Register from './pages/Register.tsx'
 import Editor from './pages/Editor.tsx'
 import Book from './pages/Book.tsx'
+import Article from './pages/Article.tsx'
 
 export default function Routers() {
   const router = createBrowserRouter([
@@ -19,6 +20,7 @@ export default function Routers() {
         { path: '/login', element: <Login /> },
         { path: '/register', element: <Register /> },
         { path: '/editor', element: <Editor /> },
+        { path: '/article/:articleSlug', element: <Article /> },
       ],
     },
     {

src/components/Editor/BookReportHeader.tsx

@@ -1,15 +1,22 @@
-import { useState, useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import DefaultThubnail from '../../assets/images/DefaultThubnail.png';
 import cn from '../../libs/cn';
-import SearchBar from './BookReportHeader/SearchBar';
+import Search from './Search';
 
-export default function BookReportHeaderEditor() {
-  const [title, setTitle] = useState<string>(''); 
-  const [thumbnail, setThumbnail] = useState<string>('');
-  const [readBookTitle, setReadBookTitle] = useState<string>('');
+interface BookReportHeaderEditorProps {
+  title: string;
+  setTitle: (value: string) => void;
+  thumbnail: string;
+  setThumbnail: (value: string) => void;
+  bookIsbn: string;
+  setBookIsbn: (value: string) => void;
+}
 
-  const fileInputRef = useRef<HTMLInputElement | null>(null);
+export default function BookReportHeaderEditor(
+  {title, setTitle, thumbnail, setThumbnail, bookIsbn, setBookIsbn}: BookReportHeaderEditorProps) {
 
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
   const handleThumbnailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (file) {
@@ -18,11 +25,16 @@ export default function BookReportHeaderEditor() {
     }
   };
 
-  const handleSearch = (searchText: string) => {
-    console.log('Search Text:', searchText);
-    // 검색어 처리 로직
+  const handleThumbnailClick = () => {
+    fileInputRef.current?.click();
   };
 
+  useEffect(() => {
+    if (bookIsbn) {
+      console.log('ISBN:', bookIsbn);
+    }
+  }, [bookIsbn]);
+
   return (
     <div className={cn(
       "p-4 md:p-8 flex justify-center",
@@ -73,17 +85,13 @@ export default function BookReportHeaderEditor() {
             <img
               src={thumbnail || DefaultThubnail} 
               alt="썸네일" 
+              onClick={handleThumbnailClick}
               className="w-14 h-14 rounded-lg" 
             />
           </div>
         </div>
-
-        {/* SearchBar 컴포넌트 */}
-        <SearchBar 
-          readBookTitle={readBookTitle} // 책 이름을 props로 전달
-          setReadBookTitle={setReadBookTitle} // 책 이름 업데이트 함수 전달
-          onSearch={handleSearch} // 검색 함수 전달
-        />
+
+        <Search setBookIsbn={setBookIsbn}/>
       </div>
     </div>
   );

src/components/Editor/BookReportHeader/SearchResults.tsx

@@ -0,0 +1,42 @@
+import { useSearchBookByName } from '../../../hooks/UseSearchBookbyName';
+import { BookData } from '../../../model/BookData';
+import BookCardComponent from '../../common/BookCardComponent';
+
+interface SearchResultsProps {
+  searchText: string;
+  onResultClick: (result: string) => void;
+  setBookIsbn: (value: string) => void;
+}
+
+export default function SearchResults({ searchText, onResultClick, setBookIsbn }: SearchResultsProps) {
+  const { books, error, loading } = useSearchBookByName(searchText);
+
+  const handleBookClick = (book:any) => {
+    onResultClick(book.title);
+    setBookIsbn(book.isbn);
+  };
+
+  return (
+    <div className="p-4 relative">
+      {loading && <p className="text-center">Loading...</p>}
+      {error && <p className="text-center text-red-500">{error}</p>}
+
+      {/* 검색 결과 목록 */}
+      <div
+        className="absolute top-0 left-0 w-full bg-white shadow-lg rounded-lg z-50 mt-2"
+        style={{ zIndex: 1 }} 
+      >
+        <div className="grid grid-cols-3 xl:grid-cols-4 gap-4 max-w-4xl mx-auto px-4">
+          {!loading && !error && books.map((book: BookData, index: number) => (
+            <BookCardComponent
+              key={index}
+              title={book.title}
+              imageUrl={book.image}
+              onClick={() => handleBookClick(book)}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Editor/Footer.tsx

@@ -0,0 +1,49 @@
+import cn from '../../libs/cn';
+import Back from '../../assets/icons/Back.svg';
+
+interface FooterProps {
+  isPostOk: boolean;
+  onPost: () => void;
+  onCancel: () => void;
+}
+
+export default function Footer({isPostOk, onPost, onCancel}: FooterProps) {
+
+  const handlePostButton = () => {
+    if (isPostOk) {
+      onPost();
+    } else {
+      alert('제목과 내용을 입력해주세요.');
+    }
+  };
+
+  return (
+    <footer 
+      className={cn(
+        "bg-[#2B5877] flex justify-between p-2 md:p-5 w-full",
+        "fixed bottom-0 left-0 h-[60px] md:h-[80px]"
+      )}
+    >
+      <button 
+        onClick={onCancel}
+        className='text-white font-semibold flex items-center'
+      >
+        <img 
+          src={Back} 
+          alt="Back" 
+          className="w-4 md:w-6 h-4 md:h-6 inline mr-2"
+        />
+        작성취소
+      </button>
+      <button 
+        onClick={handlePostButton}
+        className={cn(
+          "bg-white border rounded-lg p-2",
+          `${isPostOk ? 'text-[#EC6B53] border-[#EC6B53]' : 'text-gray-400 border-gray-400'}`
+        )}
+      >
+        게시하기
+      </button>
+    </footer>
+  );
+}

src/components/Editor/Search.tsx

@@ -0,0 +1,60 @@
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import SearchBar from './BookReportHeader/SearchBar';
+import SearchResults from './BookReportHeader/SearchResults';
+
+interface SearchProps {
+  setBookIsbn: (isbn: string) => void;
+}
+
+export default function Search({setBookIsbn}: SearchProps) {
+  const [readBookTitle, setReadBookTitle] = useState<string>('');
+  const [searchText, setSearchText] = useState<string>(''); // 검색어 상태 추가
+
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const isbnFromUrl = searchParams.get('isbn');
+  const bookTitleFromUrl = searchParams.get('bookTitle');
+
+  useEffect(() => {
+    if (isbnFromUrl) {
+      setBookIsbn(isbnFromUrl);
+      console.log('isbnFromUrl : ', isbnFromUrl);
+    } else {
+      console.log('isbnFromUrl is null');
+    }
+    if (bookTitleFromUrl) {
+      setReadBookTitle(bookTitleFromUrl);
+      console.log('bookTitleFromUrl : ', bookTitleFromUrl);
+    } else {
+      console.log('bookTitleFromUrl is null');
+    }
+  }, [isbnFromUrl, bookTitleFromUrl]);
+
+  const handleSearch = (text: string) => {
+    setSearchText(text); 
+  };
+
+  const handleResultClick = (result: string) => {
+    setReadBookTitle(result); 
+    setSearchText(''); 
+  };
+
+  return (
+    <>
+    {/* SearchBar 컴포넌트 */}
+    <SearchBar 
+      readBookTitle={readBookTitle}
+      setReadBookTitle={setReadBookTitle}
+      onSearch={handleSearch}
+    />
+
+    {/* SearchResults 컴포넌트에 검색어 전달 */}
+    <SearchResults 
+      searchText={searchText}
+      onResultClick={handleResultClick}
+      setBookIsbn={setBookIsbn}
+    />
+  </>
+  );
+}

src/components/common/BookCardComponent.tsx

@@ -20,7 +20,9 @@ export default function BookCardComponent({
         src={imageUrl}
         alt="book"
         className={cn(
-          'w-32 h-40 md:w-48 md:h-60 lg:w-60 lg:h-80 object-cover mb-4 rounded-lg shadow-lg',
+          // w-32 md:w-48 lg:w-60 h-40 md:h-60 lg:h-80
+          'aspect-[3/4] relative w-full h-full',
+          'object-cover mb-4 rounded-lg shadow-lg',
           'transform transition duration-300 ease-in-out',
           // 호버 시 크기, 그림자, 위치 변경
           'hover:scale-105 hover:shadow-2xl hover:translate-y-2'