From ae3e8a8f35a13f82d54be5de709d13b0389a14b1 Mon Sep 17 00:00:00 2001 From: kyuran kim <57716832+gxxrxn@users.noreply.github.com> Date: Tue, 20 Aug 2024 16:15:43 +0900 Subject: [PATCH] =?UTF-8?q?Revert=20"[#591]=203D=20=EC=B1=85=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8,=20=EC=B1=85=EC=9E=A5=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B0=9C=EC=84=A0=20(#594)"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 2beb0f2eed25dd7076288d75765be890e0eca2fb. --- src/app/bookshelf/[bookshelfId]/page.tsx | 165 ++++++++---------- .../bookshelf/useBookShelfInfoQuery.ts | 23 +-- src/styles/global.css | 5 - src/v1/bookShelf/BookShelf.tsx | 58 +++--- src/v1/bookShelf/BookShelfCard.tsx | 2 +- src/v1/bookShelf/BookShelfRow.tsx | 2 +- 6 files changed, 99 insertions(+), 156 deletions(-) diff --git a/src/app/bookshelf/[bookshelfId]/page.tsx b/src/app/bookshelf/[bookshelfId]/page.tsx index fbd85b00..0d4c693f 100644 --- a/src/app/bookshelf/[bookshelfId]/page.tsx +++ b/src/app/bookshelf/[bookshelfId]/page.tsx @@ -1,26 +1,23 @@ 'use client'; import { useEffect } from 'react'; -import Link from 'next/link'; import { useInView } from 'react-intersection-observer'; - -import type { APIBookshelf } from '@/types/bookshelf'; - +import Link from 'next/link'; import useBookShelfBooksQuery from '@/queries/bookshelf/useBookShelfBookListQuery'; import useBookShelfInfoQuery from '@/queries/bookshelf/useBookShelfInfoQuery'; import useMutateBookshelfLikeQuery from '@/queries/bookshelf/useMutateBookshelfLikeQuery'; -import { useMyProfileId } from '@/queries/user/useMyProfileQuery'; +import useToast from '@/v1/base/Toast/useToast'; import { checkAuthentication } from '@/utils/helpers'; import { IconKakao } from '@public/icons'; -import { KAKAO_LOGIN_URL } from '@/constants/url'; - -import useToast from '@/v1/base/Toast/useToast'; import TopNavigation from '@/v1/base/TopNavigation'; import BookShelfRow from '@/v1/bookShelf/BookShelfRow'; import Button from '@/v1/base/Button'; import LikeButton from '@/v1/base/LikeButton'; import BackButton from '@/v1/base/BackButton'; import ShareButton from '@/v1/base/ShareButton'; +import type { APIBookshelf, APIBookshelfInfo } from '@/types/bookshelf'; + +const KAKAO_OAUTH_LOGIN_URL = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_REDIRECT_URI}`; export default function UserBookShelfPage({ params: { bookshelfId }, @@ -29,34 +26,13 @@ export default function UserBookShelfPage({ bookshelfId: APIBookshelf['bookshelfId']; }; }) { - return ( -
- - - - - - - - - - - -
- ); -} - -const BookShelfInfo = ({ bookshelfId }: { bookshelfId: number }) => { const isAuthenticated = checkAuthentication(); - const { show: showToast } = useToast(); - - const { data } = useBookShelfInfoQuery(bookshelfId); - const { isLiked, likeCount, userId, userNickname, job } = data; - + const { data, isSuccess } = useBookShelfInfoQuery({ bookshelfId }); const { mutate: mutateBookshelfLike } = useMutateBookshelfLikeQuery(bookshelfId); + const { show: showToast } = useToast(); - const { data: myId } = useMyProfileId({ enabled: isAuthenticated }); + if (!isSuccess) return null; const handleClickLikeButton = () => { if (!isAuthenticated) { @@ -64,41 +40,50 @@ const BookShelfInfo = ({ bookshelfId }: { bookshelfId: number }) => { return; } - if (userId === myId) { - showToast({ - message: '내 책장에는 좋아요를 누를 수 없어요.', - type: 'normal', - }); - return; - } - - mutateBookshelfLike(isLiked); + mutateBookshelfLike(data.isLiked); }; return ( -
-

- {userNickname} - 님의 책장 -

-
- - {`${job.jobGroupKoreanName} • ${job.jobNameKoreanName}`} - - +
+ + + + + + + + +
+

+ {data.userNickname} + 님의 책장 +

+
+ + {`${data.job.jobGroupKoreanName} • ${data.job.jobNameKoreanName}`} + + +
+ +
); -}; +} const BookShelfContent = ({ bookshelfId, + userNickname, }: { bookshelfId: APIBookshelf['bookshelfId']; + userNickname: APIBookshelfInfo['userNickname']; }) => { const isAuthenticated = checkAuthentication(); const { ref, inView } = useInView(); @@ -108,6 +93,7 @@ const BookShelfContent = ({ fetchNextPage, hasNextPage, isSuccess, + isFetching, isFetchingNextPage, } = useBookShelfBooksQuery({ bookshelfId }); @@ -127,54 +113,39 @@ const BookShelfContent = ({ )) )} - {!isFetchingNextPage &&
} + + {isFetching && !isFetchingNextPage ? null :
} ) : ( <> - - +
+ +
+
+

+ 지금 로그인하면 +
+ 책장에 담긴 모든 책을 볼 수 있어요! +

+

+ {userNickname}님의 책장에서 + 다양한 +
+ 인사이트를 얻을 수 있어요. +

+ + + +
); }; -const DummyBookShelfRow = () => ( -
- -
-); - -const BookShelfLoginBox = ({ - bookshelfId, -}: { - bookshelfId: APIBookshelf['bookshelfId']; -}) => { - const { data } = useBookShelfInfoQuery(bookshelfId); - const { userNickname } = data; - - return ( -
-

- 지금 로그인하면 -
- 책장에 담긴 모든 책을 볼 수 있어요! -

-

- {userNickname}님의 책장에서 - 다양한 -
- 인사이트를 얻을 수 있어요. -

- - - -
- ); -}; const initialBookImageUrl = [ { bookId: 1, title: 'book1', imageUrl: '/images/book-cover/book1.jpeg' }, diff --git a/src/queries/bookshelf/useBookShelfInfoQuery.ts b/src/queries/bookshelf/useBookShelfInfoQuery.ts index c6230a80..80b151b6 100644 --- a/src/queries/bookshelf/useBookShelfInfoQuery.ts +++ b/src/queries/bookshelf/useBookShelfInfoQuery.ts @@ -1,20 +1,15 @@ -import { UseQueryOptions } from '@tanstack/react-query'; -import { APIBookshelfInfo } from '@/types/bookshelf'; -import useQueryWithSuspense from '@/hooks/useQueryWithSuspense'; import bookshelfAPI from '@/apis/bookshelf'; +import { APIBookshelfInfo } from '@/types/bookshelf'; +import { useQuery } from '@tanstack/react-query'; import bookShelfKeys from './key'; -const useBookShelfInfoQuery = ( - bookshelfId: APIBookshelfInfo['bookshelfId'], - options?: UseQueryOptions -) => - useQueryWithSuspense( - bookShelfKeys.info(bookshelfId), - () => - bookshelfAPI - .getBookshelfInfo(bookshelfId) - .then(response => response.data), - options +const useBookShelfInfoQuery = ({ + bookshelfId, +}: { + bookshelfId: APIBookshelfInfo['bookshelfId']; +}) => + useQuery(bookShelfKeys.info(bookshelfId), () => + bookshelfAPI.getBookshelfInfo(bookshelfId).then(response => response.data) ); export default useBookShelfInfoQuery; diff --git a/src/styles/global.css b/src/styles/global.css index 5241fac0..87d0472b 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -75,9 +75,4 @@ .w-app { @apply relative -left-[2rem] w-[calc(100%+4rem)]; } - - .bg-blur { - box-shadow: inset 0 0 3rem #dddddd; - @apply bg-placeholder; - } } diff --git a/src/v1/bookShelf/BookShelf.tsx b/src/v1/bookShelf/BookShelf.tsx index 1f1bc0ff..f628108d 100644 --- a/src/v1/bookShelf/BookShelf.tsx +++ b/src/v1/bookShelf/BookShelf.tsx @@ -1,16 +1,11 @@ -'use client'; - -import { ReactNode, useState } from 'react'; -import Link from 'next/link'; -import Image from 'next/image'; - -import ColorThief from 'colorthief'; - -import { APIBook } from '@/types/book'; import { APIBookshelf } from '@/types/bookshelf'; import { IconArrowRight, IconHeart } from '@public/icons'; - +import Link from 'next/link'; import Badge from '@/v1/base/Badge'; +import Image from 'next/image'; +import { APIBook } from '@/types/book'; +import { ReactNode, useState } from 'react'; +import ColorThief from 'colorthief'; const BookShelf = ({ children }: { children: ReactNode }) => { return <>{children}; @@ -29,7 +24,7 @@ type InfoProps = Omit; const Info = ({ bookshelfName, bookshelfId, likeCount }: InfoProps) => { return ( -
+
{bookshelfName}
@@ -50,7 +45,7 @@ type BooksProps = Pick; const Books = ({ books }: BooksProps) => { return ( -
    +
      {books.map(book => (
    • @@ -63,10 +58,8 @@ const Books = ({ books }: BooksProps) => { const Book = ({ imageUrl, bookId, - title, }: Pick) => { const [bookSpineColor, setBookSpineColor] = useState(); - const placeholderClassName = bookSpineColor ? '' : 'bg-blur'; const handleOnLoadImage = (image: HTMLImageElement) => { const colorThief = new ColorThief(); @@ -78,55 +71,44 @@ const Book = ({ }; return ( - - {/** 책 옆면 (책등) */}
      - {/** 옆면과 표지 사이 여백을 메꾸기 위해 추가 */} -
      -
      - - {/** 책 하단 그림자 */} + />
      - - {/** 책 표지 */} -
      {title} -
      - + +
      ); }; diff --git a/src/v1/bookShelf/BookShelfCard.tsx b/src/v1/bookShelf/BookShelfCard.tsx index 88f58efa..a60d197e 100644 --- a/src/v1/bookShelf/BookShelfCard.tsx +++ b/src/v1/bookShelf/BookShelfCard.tsx @@ -11,7 +11,7 @@ const BookShelfCard = ({
      -
      +
      ) => { return ( -
      +