+
{
const nav = useNavigate();
@@ -9,7 +10,7 @@ const WriteButton = () => {
diff --git a/src/components/Common/MenuBar.tsx b/src/components/Common/MenuBar.tsx
index f223b89..cd4f2cd 100644
--- a/src/components/Common/MenuBar.tsx
+++ b/src/components/Common/MenuBar.tsx
@@ -12,6 +12,7 @@ const MenuBar = () => {
const nav = useNavigate();
const location = useLocation();
const [currentMenu, setCurrentMenu] = useState('home');
+ const isLogin = localStorage.getItem('accessToken');
useEffect(() => {
const pathname = location.pathname;
@@ -48,8 +49,8 @@ const MenuBar = () => {
active: ([]);
+
+ useEffect(() => {
+ getReview('trend', 1).then((data) => {
+ setReview(data.data.booksnapPreview.slice(0, 3)); // 배열의 첫 3개만 저장
+ });
+ }, []);
+
return (
nav('create/1')}
+ onClick={() => protectedNavigate(nav, 'create/1')}
>
diff --git a/src/components/Common/Header.tsx b/src/components/Common/Header.tsx
index 1352d59..4054065 100644
--- a/src/components/Common/Header.tsx
+++ b/src/components/Common/Header.tsx
@@ -31,18 +31,22 @@ const Header = ({ title }: HeaderProps) => {
'/booksnap/create/2',
'/booksnap/create/indi/2',
'/booksnap/create/book',
+ '/mypage/book',
];
const showBackButton = showBackButtonPaths.includes(location.pathname);
const showCloseButtonPaths = ['/bookie', '/booksnap/create/indi/1', '/booksnap/create/1'];
const showCloseButton = showCloseButtonPaths.includes(location.pathname);
+ // 마이페이지만 헤더 글씨, 아이콘 흰색
+ const myPage = location.pathname.startsWith('/mypage');
+
return (
{showBackButton && (
)}
-
-
)}
{showCloseButton && (
@@ -50,7 +54,11 @@ const Header = ({ title }: HeaderProps) => {
{title}
+
+ {title}
+
{showBackButton || showCloseButton ? : ''}
@@ -11,9 +22,9 @@ const BookReview = () => {
{/* 가로 스크롤 가능한 영역 */}
diff --git a/src/components/Home/BookieBox.tsx b/src/components/Home/BookieBox.tsx
index 6c2ab1a..d85ebf6 100644
--- a/src/components/Home/BookieBox.tsx
+++ b/src/components/Home/BookieBox.tsx
@@ -1,9 +1,15 @@
import MenuBookIcon from '@mui/icons-material/MenuBook';
import Bookie from '../../../public/icons/home/bookie.png';
+import { protectedNavigate } from '../../utils/ProtectedNavigate';
+import { useNavigate } from 'react-router-dom';
const BookieBox = () => {
+ const nav = useNavigate();
return (
-
-
+
protectedNavigate(nav, '/bookie')}
+ >
도서 추천 메이트
diff --git a/src/components/Home/MadeBy.tsx b/src/components/Home/MadeBy.tsx
index 27068d5..d81608f 100644
--- a/src/components/Home/MadeBy.tsx
+++ b/src/components/Home/MadeBy.tsx
@@ -14,7 +14,7 @@ const MadeBy = () => {
@yongaricode
-용가리 먹방 시작~
+용가리가 코드를 짠다~
@hyuna
diff --git a/src/components/Home/PopularBox.tsx b/src/components/Home/PopularBox.tsx index 4721a3e..4938778 100644 --- a/src/components/Home/PopularBox.tsx +++ b/src/components/Home/PopularBox.tsx @@ -1,15 +1,18 @@ -import MenuBookIcon from '@mui/icons-material/MenuBook'; -import Bookie from '../../../public/icons/home/bookie.png'; +import { useNavigate } from 'react-router-dom'; import Marker from '../../../public/icons/zip/markerHome.svg?react'; const PopularBox = () => { + const nav = useNavigate(); return ( -
+
nav('/zip?search=우주소년')}
+ >
);
diff --git a/src/components/Home/Ranking.tsx b/src/components/Home/Ranking.tsx
index 87a4775..9acd273 100644
--- a/src/components/Home/Ranking.tsx
+++ b/src/components/Home/Ranking.tsx
@@ -1,7 +1,9 @@
import { useEffect, useState } from 'react';
import { getTrendZip } from '../../api/zip.api';
+import { useNavigate } from 'react-router-dom';
const Ranking = () => {
+ const nav = useNavigate();
const [bookstores, setBookstores] = useState([
'게으른 정원',
'고요서사',
@@ -30,7 +32,7 @@ const Ranking = () => {
{/* 왼쪽 열 */}
ZIPZIP이들이 PICK한
이달의 인기 서점
- “고요서사” + "우주소년"
- “고요서사” + "우주소년"
{left.map((bookstore, i) => (
-
+
nav(`/zip?search=${bookstore}`)}> {i + 1}. {bookstore}
))} @@ -39,7 +41,7 @@ const Ranking = () => { {/* 오른쪽 열 */}
{right.map((bookstore, i) => (
-
+
nav(`/zip?search=${bookstore}`)}> {i + 6}. {bookstore}
// 6부터 시작 ))} diff --git a/src/components/Home/RegionBox.tsx b/src/components/Home/RegionBox.tsx index 9e0baf0..0c9cc98 100644 --- a/src/components/Home/RegionBox.tsx +++ b/src/components/Home/RegionBox.tsx @@ -1,13 +1,16 @@ import LocationSearchingIcon from '@mui/icons-material/LocationSearching'; +import { useNavigate } from 'react-router-dom'; interface RegionBoxProps { text: string; } const RegionBox = ({ text }: RegionBoxProps) => { + const nav = useNavigate(); return ( nav(`/zip?search=${text}`)}
>
{text}
diff --git a/src/components/Home/ReportBookstore.tsx b/src/components/Home/ReportBookstore.tsx index 68c6bc7..c588d6b 100644 --- a/src/components/Home/ReportBookstore.tsx +++ b/src/components/Home/ReportBookstore.tsx @@ -1,9 +1,13 @@ import sunglass from '../../../public/icons/home/sunglass.png'; import hand from '../../../public/icons/home/hand.png'; +import toast from 'react-hot-toast'; const ReportBookstore = () => { return ( -
+
toast.error('아직 준비중인 서비스입니다')}
+ >
To. zipzip이들
diff --git a/src/components/Home/ReportStore.tsx b/src/components/Home/ReportStore.tsx index 0d3d92f..0245aca 100644 --- a/src/components/Home/ReportStore.tsx +++ b/src/components/Home/ReportStore.tsx @@ -1,17 +1,22 @@ import Vector from '../../../public/icons/home/Vector.svg?react'; -const ReportStore = () => { +interface ReportStore { + onClick: () => void; +} + +const ReportStore = ({ onClick }: ReportStore) => { + const name = localStorage.getItem('nickname'); return ( -
+
-
서점ZIP에 없는 독립서점
을
- 제보해주세요!
독서광시온님의 제보가 서점ZIP을 살려요!
+{name}님의 제보가 서점ZIP을 살려요!
+
더 나은 서점ZIP 서비스를 위해
독립 서점 제보하러 가기
{/* 상단 텍스트 */}
-
{
+ const nav = useNavigate();
+
+ const handleLogout = async () => {
+ const token = localStorage.getItem('refreshToken');
+ logOut(token!).then(() => {
+ toast.success('로그아웃 되었습니다.');
+ nav('/');
+ localStorage.clear();
+ });
+ };
+
+ const nickname = localStorage.getItem('nickname');
+ return (
+
독서왕용가리
+ {reviews.userName}
{/* 배경 이미지 영역 */}
@@ -10,7 +16,7 @@ const ReviewBox = () => {
@@ -21,12 +27,12 @@ const ReviewBox = () => {
diff --git a/src/components/Modal/AddBookstoreModal.tsx b/src/components/Modal/AddBookstoreModal.tsx
index a3ca9c1..cfa8ec7 100644
--- a/src/components/Modal/AddBookstoreModal.tsx
+++ b/src/components/Modal/AddBookstoreModal.tsx
@@ -14,12 +14,13 @@ const AddBookstoreModal = ({ setModalOpen, name }: ModalProps) => {
const [closeTime, setCloseTime] = useState('');
const [feature, setFeature] = useState('');
const [detail, setDetail] = useState('');
+ const nickname = localStorage.getItem('nickname');
return (
“
- 사이키쿠스오가 될래...
+ {reviews.review.length > 15 ? `${reviews.review.slice(0, 15)}...` : reviews.review}
”
- 수레바퀴 아래서
- ★ 4
+ {reviews.bookInfo.title}
+ ★ {reviews.rating}
독립서점 제보하기
-용가리님만 알고있는 독립서점을 제보해주세요!
+{nickname}님만 알고있는 독립서점을 제보해주세요!
+
+ );
+};
+
+export default LoginBox;
diff --git a/src/components/ProtectedRoute.tsx b/src/components/ProtectedRoute.tsx
deleted file mode 100644
index 31498c2..0000000
--- a/src/components/ProtectedRoute.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-import { Navigate } from 'react-router-dom';
-
-interface ProtectedRouteProps {
- children: ReactNode;
-}
-
-const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
- const isAuthenticated = !!localStorage.getItem('accessToken');
- // 모달 띄울수없나?
- return isAuthenticated ? <>{children} :
+
+
+
+ 
+ 카카오 계정 회원
+
+
+
+ {nickname}
++ 로그아웃 +
+
+
+ nav('book')}
+ >
+
+
+ 나의 책장
+ toast.error('아직 준비중인 서비스입니다.')}
+ >
+
+ 리뷰 관리
+
{/* 첫 번째 박스 */}
-
-
- 나에게
-
잘 맞는
- 서점 찾아보기
+
window.open('https://sibf.or.kr/', '_blank')}>
+
{/* 두 번째 박스 - 스타일 다르게 가능 */}
-
+ 2025
+ 서울국제도서전
- ([]);
+ const [filteredBooks, setFilteredBooks] = useState([]);
+
+ useEffect(() => {
+ getMyBook().then((data) => {
+ setBooks(data.pickBooks);
+ setFilteredBooks(data.pickBooks);
+ });
+ }, []);
+
+ const handleSearch = () => {
+ const result = books.filter((book) => book.title.toLowerCase().includes(searchWord.toLowerCase()));
+ setFilteredBooks(result);
+ };
+
+ const handlePickBook = (book: BookDetailInfo) => {
+ deleteBook(book.bookId).then((data) => {
+ if (data?.success) {
+ toast.success(`${book.title}을(를) 책장에서 삭제했습니다!`);
+
+ setBooks((prev) => prev.filter((b) => b.bookId !== book.bookId));
+ setFilteredBooks((prev) => prev.filter((b) => b.bookId !== book.bookId));
+ } else {
+ toast.error(`${data?.message}`);
+ }
+ });
+ };
+
+ return (
+
-
- ),
+ element:
-
- ),
+ element:
-
- ),
+ element:
-
- ),
+ element:
-
- ),
+ element:
-
- ),
+ element:
- 유명 연예인들의
- 추천도서
-
+ window.open(
+ 'https://turquoise-dill-eee.notion.site/Pick-1fa2ab1fb8c980049788dac428d46835?pvs=4',
+ '_blank',
+ )
+ }
+ >
+
{/* 세 번째 박스 */}
-
+
+
+ )}
);
};
diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
deleted file mode 100644
index 706b622..0000000
--- a/src/pages/MyPage.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const MyPage = () => {
- return window.open('https://payge.kr/speed', '_blank')}>
setModal(true)} />
+ {modal && (
+
나의
책 읽는 속도
알아보기
diff --git a/src/components/Zip/TagBar.tsx b/src/components/Zip/TagBar.tsx
index d73ae51..4d6bae7 100644
--- a/src/components/Zip/TagBar.tsx
+++ b/src/components/Zip/TagBar.tsx
@@ -1,15 +1,22 @@
+import { useEffect, useState } from 'react';
+import { getHashTag } from '../../api/zip.api';
import FilterButton from '../../components/Button/FilterButton';
const TagBar = () => {
+ const [tags, setTag] = useState<{ tag: string }[]>([]);
+ useEffect(() => {
+ getHashTag().then((data) => {
+ setTag(data.data);
+ });
+ }, []);
+
return (
-
MyPage
;
-};
-
-export default MyPage;
diff --git a/src/pages/MyPage/MyBook.tsx b/src/pages/MyPage/MyBook.tsx
new file mode 100644
index 0000000..fea98a9
--- /dev/null
+++ b/src/pages/MyPage/MyBook.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+import Header from '../../components/Common/Header';
+import SearchBar from '../../components/Zip/SearchBar';
+import { getMyBook } from '../../api/mypage.api';
+import { BookDetailInfo } from '../../model/booksnap.model';
+import BookInfo from '../../components/Booksnap/BookInfo';
+import { deleteBook } from '../../api/booksnap.api';
+import toast from 'react-hot-toast';
+import { MdBookmarkRemove } from 'react-icons/md';
+
+const MyBook = () => {
+ const [searchWord, setSearchWord] = useState('');
+ const [books, setBooks] = useState
+ handleSearch()}
+ text="내가 담은 책을 검색해보세요!"
+ />
+
+ );
+};
+
+export default MyBook;
diff --git a/src/pages/MyPage/MyPage.tsx b/src/pages/MyPage/MyPage.tsx
new file mode 100644
index 0000000..024ab27
--- /dev/null
+++ b/src/pages/MyPage/MyPage.tsx
@@ -0,0 +1,13 @@
+import Header from '../../components/Common/Header';
+import LoginBox from '../../components/MyPage/LoginBox';
+
+const MyPage = () => {
+ return (
+
+ {filteredBooks.map((book) => (
+
+
+
+ ))}
+
+
+ );
+};
+
+export default MyPage;
diff --git a/src/pages/Zip/ZipDetail.tsx b/src/pages/Zip/ZipDetail.tsx
index a8d86e8..c76cf11 100644
--- a/src/pages/Zip/ZipDetail.tsx
+++ b/src/pages/Zip/ZipDetail.tsx
@@ -12,6 +12,7 @@ import { bookstoreReview, zipPreview } from '../../model/zip.model';
import NoBookStoreResult from '../../components/Zip/NoBookStoreResult';
import { BookDetailInfo } from '../../model/booksnap.model';
import { set } from 'lodash';
+import { protectedNavigate } from '../../utils/ProtectedNavigate';
interface ZipDetailProps {
currentState: string;
@@ -30,8 +31,9 @@ const ZipDetail = ({ currentState, id }: ZipDetailProps) => {
const [filter, setFilter] = useState<'createdAt' | 'rating'>('createdAt');
const handleWriteReview = () => {
- // setBottomSheet(({ currentState }) =>