From 2fa152b3210a04a03df28cfcde735bddd10d8576 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Thu, 10 Oct 2024 23:31:18 +0900 Subject: [PATCH 01/16] =?UTF-8?q?[FEAT]=20-=20=EB=A7=88=EC=9D=B4=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EA=B8=80=EC=93=B0?= =?UTF-8?q?=EA=B8=B0=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=EC=97=90=EB=94=94?= =?UTF-8?q?=ED=84=B0=EC=B0=BD=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/MyPage.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx index b831cdf..7b14c22 100644 --- a/src/pages/MyPage.tsx +++ b/src/pages/MyPage.tsx @@ -2,6 +2,7 @@ import cn from "../libs/cn"; import NoBook from "../components/MyPage/NoBook"; import BookList from "../components/MyPage/BookList"; import Pen from '../assets/icons/Pen.svg'; +import { useNavigate } from 'react-router-dom' export default function MyPage() { @@ -10,6 +11,8 @@ export default function MyPage() { let bookCount = 4; const bookReportCount = 15; + const navigate = useNavigate() + return ( <>
@@ -29,7 +32,9 @@ export default function MyPage() {

내가 읽은 책

-
diff --git a/src/components/Editor/BookReportHeader/SearchResults.tsx b/src/components/Editor/BookReportHeader/SearchResults.tsx new file mode 100644 index 0000000..178640d --- /dev/null +++ b/src/components/Editor/BookReportHeader/SearchResults.tsx @@ -0,0 +1,45 @@ +import { useSearchBookByName } from '../../../hooks/UseSearchBookbyName'; +import { BookData } from '../../../model/BookData'; +import BookCardComponent from '../../common/BookCardComponent'; + +interface SearchResultsProps { + searchText: string; + onResultClick: (result: string) => void; +} + +export default function SearchResults({ searchText, onResultClick }: SearchResultsProps) { + const { books, error, loading } = useSearchBookByName(searchText); + + const handleBookClick = (bookTitle: string) => { + onResultClick(bookTitle); + }; + + return ( +
+ {loading &&

Loading...

} + {error &&

{error}

} + + {/* 검색 결과가 없을 때 */} + {!loading && !error && books.length === 0 && ( +

검색 결과가 없습니다.

+ )} + + {/* 검색 결과 목록 */} +
+
+ {!loading && !error && books.map((book: BookData, index: number) => ( + handleBookClick(book.title)} + /> + ))} +
+
+
+ ); +} From 6c985b3673576bf0feae460f451fcee7b3ed90e0 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 00:05:59 +0900 Subject: [PATCH 03/16] =?UTF-8?q?[STYLE]=20-=20=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=B1=85=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EA=B0=80=20=EC=9E=98=20=EB=B3=B4=EC=9D=B4=EA=B2=8C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 책표지 3/4 비율 준 뒤 w-full과 h-full 사용 --- src/components/common/BookCardComponent.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/common/BookCardComponent.tsx b/src/components/common/BookCardComponent.tsx index f39b7fe..463129b 100644 --- a/src/components/common/BookCardComponent.tsx +++ b/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' From 37ff9df8646c32c12d91821cdfb791f51ba4b354 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 00:24:53 +0900 Subject: [PATCH 04/16] =?UTF-8?q?Revert=20"[STYLE]=20-=20=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EC=B1=85=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EA=B0=80=20=EC=9E=98=20=EB=B3=B4=EC=9D=B4?= =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 6c985b3673576bf0feae460f451fcee7b3ed90e0. --- src/components/common/BookCardComponent.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/common/BookCardComponent.tsx b/src/components/common/BookCardComponent.tsx index 463129b..f39b7fe 100644 --- a/src/components/common/BookCardComponent.tsx +++ b/src/components/common/BookCardComponent.tsx @@ -20,9 +20,7 @@ export default function BookCardComponent({ src={imageUrl} alt="book" className={cn( - // 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', + 'w-32 h-40 md:w-48 md:h-60 lg:w-60 lg:h-80 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' From fe027e04fbbc12a46c1e4d137c4b9b4c8fc1e528 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 00:25:46 +0900 Subject: [PATCH 05/16] =?UTF-8?q?Reapply=20"[STYLE]=20-=20=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20=EC=B1=85=EC=B9=B4=EB=93=9C=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EA=B0=80=20=EC=9E=98=20=EB=B3=B4=EC=9D=B4?= =?UTF-8?q?=EA=B2=8C=20=EC=88=98=EC=A0=95"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 37ff9df8646c32c12d91821cdfb791f51ba4b354. --- src/components/common/BookCardComponent.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/common/BookCardComponent.tsx b/src/components/common/BookCardComponent.tsx index f39b7fe..463129b 100644 --- a/src/components/common/BookCardComponent.tsx +++ b/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' From 1db754027d3f4e9cd9379dcfa682dd4afec41aa6 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 00:29:58 +0900 Subject: [PATCH 06/16] =?UTF-8?q?[FEAT]=20-=20=EA=B2=80=EC=83=89=EB=90=9C?= =?UTF-8?q?=20=EC=B1=85=EC=9D=98=20ISBN=20=EC=9C=84=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=98=AC=EB=A0=A4=EC=A3=BC?= =?UTF-8?q?=EB=8A=94=20=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Editor/BookReportHeader.tsx | 10 +++++++++- .../Editor/BookReportHeader/SearchResults.tsx | 15 ++++++--------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/Editor/BookReportHeader.tsx b/src/components/Editor/BookReportHeader.tsx index 9993f60..f000457 100644 --- a/src/components/Editor/BookReportHeader.tsx +++ b/src/components/Editor/BookReportHeader.tsx @@ -1,4 +1,4 @@ -import { useState, useRef } from 'react'; +import { useState, useRef, useEffect } from 'react'; import DefaultThubnail from '../../assets/images/DefaultThubnail.png'; import cn from '../../libs/cn'; import SearchBar from './BookReportHeader/SearchBar'; @@ -9,6 +9,7 @@ export default function BookReportHeaderEditor() { const [thumbnail, setThumbnail] = useState(''); const [readBookTitle, setReadBookTitle] = useState(''); const [searchText, setSearchText] = useState(''); // 검색어 상태 추가 + const [bookIsbn, setBookIsbn] = useState(''); // 책의 ISBN 상태 추가 const fileInputRef = useRef(null); @@ -29,6 +30,12 @@ export default function BookReportHeaderEditor() { setSearchText(''); }; + useEffect(() => { + if (bookIsbn) { + console.log('ISBN:', bookIsbn); + } + }, [bookIsbn]); + return (
diff --git a/src/components/Editor/BookReportHeader/SearchResults.tsx b/src/components/Editor/BookReportHeader/SearchResults.tsx index 178640d..b0020e3 100644 --- a/src/components/Editor/BookReportHeader/SearchResults.tsx +++ b/src/components/Editor/BookReportHeader/SearchResults.tsx @@ -5,13 +5,15 @@ import BookCardComponent from '../../common/BookCardComponent'; interface SearchResultsProps { searchText: string; onResultClick: (result: string) => void; + setBookIsbn: (value: string) => void; } -export default function SearchResults({ searchText, onResultClick }: SearchResultsProps) { +export default function SearchResults({ searchText, onResultClick, setBookIsbn }: SearchResultsProps) { const { books, error, loading } = useSearchBookByName(searchText); - const handleBookClick = (bookTitle: string) => { - onResultClick(bookTitle); + const handleBookClick = (book:any) => { + onResultClick(book.title); + setBookIsbn(book.isbn); }; return ( @@ -19,11 +21,6 @@ export default function SearchResults({ searchText, onResultClick }: SearchResul {loading &&

Loading...

} {error &&

{error}

} - {/* 검색 결과가 없을 때 */} - {!loading && !error && books.length === 0 && ( -

검색 결과가 없습니다.

- )} - {/* 검색 결과 목록 */}
handleBookClick(book.title)} + onClick={() => handleBookClick(book)} /> ))}
From cd74fafd1c851a9e41084413ad9f8c3fb24c98a6 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 00:54:30 +0900 Subject: [PATCH 07/16] =?UTF-8?q?[REFACTOR]=20-=20=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=A0=84=EB=B6=80=EB=A5=BC=20Search.tsx?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Editor/BookReportHeader.tsx | 29 ++-------------- src/components/Editor/Search.tsx | 39 ++++++++++++++++++++++ 2 files changed, 42 insertions(+), 26 deletions(-) create mode 100644 src/components/Editor/Search.tsx diff --git a/src/components/Editor/BookReportHeader.tsx b/src/components/Editor/BookReportHeader.tsx index f000457..f187c59 100644 --- a/src/components/Editor/BookReportHeader.tsx +++ b/src/components/Editor/BookReportHeader.tsx @@ -1,14 +1,11 @@ import { useState, useRef, useEffect } from 'react'; import DefaultThubnail from '../../assets/images/DefaultThubnail.png'; import cn from '../../libs/cn'; -import SearchBar from './BookReportHeader/SearchBar'; -import SearchResults from './BookReportHeader/SearchResults'; +import Search from './Search'; export default function BookReportHeaderEditor() { const [title, setTitle] = useState(''); const [thumbnail, setThumbnail] = useState(''); - const [readBookTitle, setReadBookTitle] = useState(''); - const [searchText, setSearchText] = useState(''); // 검색어 상태 추가 const [bookIsbn, setBookIsbn] = useState(''); // 책의 ISBN 상태 추가 const fileInputRef = useRef(null); @@ -21,15 +18,6 @@ export default function BookReportHeaderEditor() { } }; - const handleSearch = (text: string) => { - setSearchText(text); - }; - - const handleResultClick = (result: string) => { - setReadBookTitle(result); - setSearchText(''); - }; - useEffect(() => { if (bookIsbn) { console.log('ISBN:', bookIsbn); @@ -90,20 +78,9 @@ export default function BookReportHeaderEditor() { /> - - {/* SearchBar 컴포넌트 */} - - {/* SearchResults 컴포넌트에 검색어 전달 */} - + + ); diff --git a/src/components/Editor/Search.tsx b/src/components/Editor/Search.tsx new file mode 100644 index 0000000..3f5f0e8 --- /dev/null +++ b/src/components/Editor/Search.tsx @@ -0,0 +1,39 @@ +import { useState } from 'react'; +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(''); + const [searchText, setSearchText] = useState(''); // 검색어 상태 추가 + + const handleSearch = (text: string) => { + setSearchText(text); + }; + + const handleResultClick = (result: string) => { + setReadBookTitle(result); + setSearchText(''); + }; + + return ( + <> + {/* SearchBar 컴포넌트 */} + + + {/* SearchResults 컴포넌트에 검색어 전달 */} + + + ); +} \ No newline at end of file From ff66f1d98906cccc30216439554f5d4695a14da7 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 01:14:09 +0900 Subject: [PATCH 08/16] =?UTF-8?q?[REFACTOR]=20-=20=EC=83=81=ED=83=9C=20?= =?UTF-8?q?=EA=B4=80=EB=A6=AC=20=EC=A0=84=EB=B6=80=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B4=EB=8F=99=20+=20[FEAT]=20-=20=EA=B2=8C=EC=8B=9C=20?= =?UTF-8?q?=ED=97=88=EA=B0=80=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Editor/BookReportHeader.tsx | 19 ++++++---- src/components/Editor/Footer.tsx | 35 ++++++++++++++++++ src/pages/Editor.tsx | 43 ++++++++++++++++++++-- 3 files changed, 87 insertions(+), 10 deletions(-) create mode 100644 src/components/Editor/Footer.tsx diff --git a/src/components/Editor/BookReportHeader.tsx b/src/components/Editor/BookReportHeader.tsx index f187c59..6c29c04 100644 --- a/src/components/Editor/BookReportHeader.tsx +++ b/src/components/Editor/BookReportHeader.tsx @@ -1,15 +1,21 @@ -import { useState, useRef, useEffect } from 'react'; +import { useRef, useEffect } from 'react'; import DefaultThubnail from '../../assets/images/DefaultThubnail.png'; import cn from '../../libs/cn'; import Search from './Search'; -export default function BookReportHeaderEditor() { - const [title, setTitle] = useState(''); - const [thumbnail, setThumbnail] = useState(''); - const [bookIsbn, setBookIsbn] = useState(''); // 책의 ISBN 상태 추가 +interface BookReportHeaderEditorProps { + title: string; + setTitle: (value: string) => void; + thumbnail: string; + setThumbnail: (value: string) => void; + bookIsbn: string; + setBookIsbn: (value: string) => void; +} - const fileInputRef = useRef(null); +export default function BookReportHeaderEditor( + {title, setTitle, thumbnail, setThumbnail, bookIsbn, setBookIsbn}: BookReportHeaderEditorProps) { + const fileInputRef = useRef(null); const handleThumbnailChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { @@ -80,7 +86,6 @@ export default function BookReportHeaderEditor() { - ); diff --git a/src/components/Editor/Footer.tsx b/src/components/Editor/Footer.tsx new file mode 100644 index 0000000..27c7209 --- /dev/null +++ b/src/components/Editor/Footer.tsx @@ -0,0 +1,35 @@ +import cn from '../../libs/cn'; + +interface FooterProps { + isPostOk: boolean; + onPost: () => void; + onCancel: () => void; +} + +export default function Footer({isPostOk, onPost, onCancel}: FooterProps) { + + const handlePostButton = () => { + if (isPostOk) { + onPost(); + } else { + alert('제목과 내용을 입력해주세요.'); + } + }; + + return ( +
+ + +
+ ); +} \ No newline at end of file diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx index 8b35c0a..3896850 100644 --- a/src/pages/Editor.tsx +++ b/src/pages/Editor.tsx @@ -1,14 +1,51 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import BookReportHeader from "../components/Editor/BookReportHeader" import TextFiled from "../components/Editor/TextFiled" +import Footer from "../components/Editor/Footer" export default function Editor() { const [context, setContext] = useState(''); + const [title, setTitle] = useState(''); + const [thumbnail, setThumbnail] = useState(''); + const [bookIsbn, setBookIsbn] = useState(''); + const [isPostOk, setIsPostOk] = useState(false); + + const onPost = () => { + // 게시하기 버튼 클릭 시 처리 + } + + const onCancel = () => { + // 작성취소 버튼 클릭 시 처리 + } + + useEffect(() => { + if (title && context && bookIsbn) { + setIsPostOk(true); + } else { + setIsPostOk(false); + } + } + , [title, context, bookIsbn]); return (
- - + + +
) }; \ No newline at end of file From 3b98040396e666d94e93c388532bec263d71614a Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 01:48:18 +0900 Subject: [PATCH 09/16] =?UTF-8?q?[STYLE]=20-=20=ED=91=B8=ED=84=B0=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EA=B3=A0=EC=A0=95=20+=20=EB=92=A4?= =?UTF-8?q?=EB=A1=9C=EA=B0=80=EA=B8=B0=20=EB=B2=84=ED=8A=BC=EC=97=90=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=84=A3=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/Back.svg | 2 +- src/components/Editor/Footer.tsx | 18 ++++++++++++++++-- src/pages/Editor.tsx | 28 +++++++++++++++------------- 3 files changed, 32 insertions(+), 16 deletions(-) diff --git a/src/assets/icons/Back.svg b/src/assets/icons/Back.svg index 3126ba4..ce3efee 100644 --- a/src/assets/icons/Back.svg +++ b/src/assets/icons/Back.svg @@ -1,6 +1,6 @@ - + diff --git a/src/components/Editor/Footer.tsx b/src/components/Editor/Footer.tsx index 27c7209..073cb06 100644 --- a/src/components/Editor/Footer.tsx +++ b/src/components/Editor/Footer.tsx @@ -1,4 +1,5 @@ import cn from '../../libs/cn'; +import Back from '../../assets/icons/Back.svg'; interface FooterProps { isPostOk: boolean; @@ -17,8 +18,21 @@ export default function Footer({isPostOk, onPost, onCancel}: FooterProps) { }; return ( -
-
Back 작성취소 + + + + + + {/* 게시글 내용 */} +
+ {/* 선 만드려고 넣은 div */} +
+

{context}

+
+
); } From cb07f81f29fe2376baac272e985d5064f77183a6 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 18:48:51 +0900 Subject: [PATCH 15/16] =?UTF-8?q?[FEAT]=20-=20=EB=B2=84=ED=8A=BC=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20+=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=B2=84=ED=8A=BC=20=ED=94=8C=EB=A1=9C?= =?UTF-8?q?=ED=8C=85=EC=B0=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/TrashCan.svg | 2 +- src/pages/Article.tsx | 124 ++++++++++++++++++++++++---------- 2 files changed, 91 insertions(+), 35 deletions(-) diff --git a/src/assets/icons/TrashCan.svg b/src/assets/icons/TrashCan.svg index 3fdadcf..dba29e2 100644 --- a/src/assets/icons/TrashCan.svg +++ b/src/assets/icons/TrashCan.svg @@ -1,3 +1,3 @@ - + diff --git a/src/pages/Article.tsx b/src/pages/Article.tsx index ceee406..d1822dc 100644 --- a/src/pages/Article.tsx +++ b/src/pages/Article.tsx @@ -1,21 +1,23 @@ -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import { useParams } from 'react-router-dom'; import { fetchBookData as fetchBookDetails } from '../services/BookService'; import { HiDotsVertical } from "react-icons/hi"; import cn from '../libs/cn'; +import Pen from '../assets/icons/Pen.svg'; +import TrashCan from '../assets/icons/TrashCan.svg'; import DefaultThumbnail from '../assets/images/DefaultThubnail.png'; import axios from 'axios'; interface ArticleData { title: string; - thumbnail?: string; // 타입을 string 또는 undefined로 변경 + thumbnail?: string; context: string; bookIsbn: string; date: string; } interface ArticleBookData { - title: string; // 책 이름 + title: string; } export default function Article() { @@ -23,57 +25,59 @@ export default function Article() { const [articleData, setArticleData] = useState(null); const [bookData, setBookData] = useState(null); const [error, setError] = useState(null); + const [isMenuOpen, setIsMenuOpen] = useState(false); + const menuRef = useRef(null); - // 게시글 데이터 가져오기 useEffect(() => { - console.log('articleSlug : ', articleSlug); + if (!articleSlug) return; + if (articleSlug === 'test') { - console.log('Using test data'); setArticleData({ title: '스벨트는 우주 최강 프레임워크인 것 같다.', - context: - '아무래도 리액트를 다 스벨트로 갈아엎어 버리고 싶다. 나는 스벨트를 할 줄 모른다.', + context: '아무래도 리액트를 다 스벨트로 갈아엎어 버리고 싶다. 나는 스벨트를 할 줄 모른다.', bookIsbn: '9791193926161', date: '2021-01-01', - thumbnail: undefined, // 테스트 데이터에서 thumbnail을 undefined로 설정 + thumbnail: undefined, }); - return; } else { const fetchArticleData = async () => { try { const response = await axios.get(`/api/article/${articleSlug}`); setArticleData(response.data); } catch (error) { - console.error('Error fetching article data:', error); setError('게시글 데이터를 가져오는 중 오류가 발생했습니다.'); } }; - fetchArticleData(); } }, [articleSlug]); - // 책 데이터 가져오기 useEffect(() => { - if (articleData?.bookIsbn) { - const getBookDetails = async () => { - try { - const data = await fetchBookDetails(articleData.bookIsbn); - setBookData(data); - } catch (err) { - console.error('Error fetching book data:', err); - setError( - err instanceof Error - ? err.message - : '책 정보를 가져오는 중 오류가 발생했습니다.' - ); - } - }; + if (!articleData?.bookIsbn) return; - getBookDetails(); - } + const getBookDetails = async () => { + try { + const data = await fetchBookDetails(articleData.bookIsbn); + setBookData(data); + } catch (err) { + setError('책 정보를 가져오는 중 오류가 발생했습니다.'); + } + }; + getBookDetails(); }, [articleData?.bookIsbn]); + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if (menuRef.current && !menuRef.current.contains(event.target as Node)) { + setIsMenuOpen(false); + } + }; + document.addEventListener('mousedown', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, []); + if (error) { return
에러가 발생했습니다: {error}
; } @@ -85,9 +89,17 @@ export default function Article() { const { title: articleTitle, context, thumbnail } = articleData; const { title: bookTitle } = bookData; + const onEdit = () => { + alert('수정하기'); + }; + + const onDelete = () => { + alert('삭제하기'); + }; + return (
-
+
- - - + + + setIsMenuOpen(!isMenuOpen)} + className='w-6 h-6 md:hidden' + /> + + {/* 메뉴 창 */} + {isMenuOpen && ( +
+ + +
+ )}
@@ -124,4 +180,4 @@ export default function Article() {
); -} +} \ No newline at end of file From 66bd7e8191f3d518058e9ecbbaa48985aeb98ed5 Mon Sep 17 00:00:00 2001 From: Yunseok Date: Fri, 11 Oct 2024 19:22:30 +0900 Subject: [PATCH 16/16] =?UTF-8?q?[FEAT]=20-=20=EB=AA=A8=EB=B0=94=EC=9D=BC?= =?UTF-8?q?=EC=97=90=EC=84=9C=EB=A7=8C=20=EB=B3=B4=EC=9D=B4=EB=8A=94=20?= =?UTF-8?q?=EB=92=A4=EB=A1=9C=EA=B0=80=EA=B8=B0=20=ED=91=B8=ED=84=B0=20?= =?UTF-8?q?=EB=A7=8C=EB=93=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/GoBack.svg | 2 +- src/pages/Article.tsx | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/assets/icons/GoBack.svg b/src/assets/icons/GoBack.svg index 47a8fb5..dff988d 100644 --- a/src/assets/icons/GoBack.svg +++ b/src/assets/icons/GoBack.svg @@ -1,3 +1,3 @@ - + diff --git a/src/pages/Article.tsx b/src/pages/Article.tsx index d1822dc..47a89f4 100644 --- a/src/pages/Article.tsx +++ b/src/pages/Article.tsx @@ -1,11 +1,12 @@ import { useEffect, useState, useRef } from 'react'; -import { useParams } from 'react-router-dom'; +import { useParams, useNavigate } from 'react-router-dom'; import { fetchBookData as fetchBookDetails } from '../services/BookService'; import { HiDotsVertical } from "react-icons/hi"; import cn from '../libs/cn'; import Pen from '../assets/icons/Pen.svg'; import TrashCan from '../assets/icons/TrashCan.svg'; import DefaultThumbnail from '../assets/images/DefaultThubnail.png'; +import GoBack from '../assets/icons/GoBack.svg'; import axios from 'axios'; interface ArticleData { @@ -26,7 +27,9 @@ export default function Article() { const [bookData, setBookData] = useState(null); const [error, setError] = useState(null); const [isMenuOpen, setIsMenuOpen] = useState(false); + const menuRef = useRef(null); + const navigate = useNavigate(); useEffect(() => { if (!articleSlug) return; @@ -178,6 +181,16 @@ export default function Article() {

{context}

+ + {/* 모바일 전용 푸터 */} +
+ 뒤로가기 navigate(-1)} + /> +
); } \ No newline at end of file