Merge branch 'main' into feat/#486

Author: gxxrxn

next.config.js

@@ -1,4 +1,6 @@
 const baseURL = process.env.NEXT_PUBLIC_API_URL;
+const aladinURL = process.env.ALADIN_OPEN_API_URI;
+const ALADIN_API_KEY = process.env.ALADIN_OPEN_API_TTBKEY;
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -15,6 +17,11 @@ const nextConfig = {
         source: '/service-api/:url*',
         destination: `${baseURL}/api/:url*`,
       },
+      {
+        source: '/aladin-api',
+        has: [{ type: 'query', key: 'QueryType', value: '(?<QueryType>.*)' }],
+        destination: `${aladinURL}/api/ItemList.aspx?ttbkey=${ALADIN_API_KEY}&QueryType=:QueryType&MaxResults=10&start=1&SearchTarget=Book&output=JS&Version=20131101`,
+      },
     ];
   },
   async redirects() {
@@ -46,6 +53,12 @@ const nextConfig = {
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'image.aladin.co.kr',
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
 };

public/icons/search.svg

@@ -8,6 +8,7 @@ import type {
   APISearchedBook,
   APISearchedBookPagination,
   APIRecentSearches,
+  APIBestSellerRes,
 } from '@/types/book';
 import bookshelfAPI from '../bookshelf';
 import { publicApi } from '../core/axios';
@@ -94,6 +95,11 @@ const bookAPI = {
           `/service-api/bookshelves/${bookshelfId}/books/${bookId}`
         )
       ),
+
+  getBestSellers: () =>
+    publicApi.get<APIBestSellerRes>(
+      `/aladin-api?QueryType=Bestseller&Cover=Big`
+    ),
 };
 
 export default bookAPI;

src/apis/book/index.ts

@@ -1,23 +1,93 @@
 'use client';
 
-import { VStack, Text } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 
-import BookSearch from '@/ui/BookSearch';
+import useBookSearchQuery from '@/queries/book/useBookSearchQuery';
+import useRecentSearchesQuery from '@/queries/book/useRecentSearchesQuery';
+
+import useDebounceValue from '@/hooks/useDebounce';
+import { isAuthed } from '@/utils/helpers/auth';
+
+import TopHeader from '@/v1/base/TopHeader';
+import BookSearchInput from '@/v1/bookSearch/BookSearchInput';
+import BestSellers from '@/v1/bookSearch/BestSellers';
+import RecentSearch from '@/v1/bookSearch/RecentSearch';
+import BookSearchResults from '@/v1/bookSearch/SearchResult';
+
+/**
+ * @todo
+ * recentSearchedInfo 계속해서 refetch되는 현상 고치기
+ */
+
+const BookSearch = () => {
+  const [inputSearchValue, setInputSearchValue] = useState<string>('');
+
+  const queryKeyword = useDebounceValue(inputSearchValue, 1000);
+
+  const { ref: inViewRef, inView } = useInView();
+
+  const bookSearchInfo = useBookSearchQuery({
+    query: queryKeyword,
+    page: 1,
+    pageSize: 12,
+  });
+  const recentSearchesInfo = useRecentSearchesQuery({ enabled: isAuthed() });
+
+  const searchedBooks = bookSearchInfo.isSuccess
+    ? bookSearchInfo.data.pages.flatMap(page => page.searchBookResponseList)
+    : [];
+  const recentSearches = recentSearchesInfo.isSuccess
+    ? recentSearchesInfo.data.bookRecentSearchResponses
+    : undefined;
+
+  const handleInputValueChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    if (!event.target) return;
+
+    const inputValue = event.target.value;
+
+    setInputSearchValue(inputValue.trim());
+  };
+
+  useEffect(() => {
+    if (inView && bookSearchInfo.hasNextPage) {
+      bookSearchInfo.fetchNextPage();
+    }
+  }, [
+    bookSearchInfo.fetchNextPage,
+    inView,
+    bookSearchInfo.hasNextPage,
+    queryKeyword,
+    bookSearchInfo,
+  ]);
 
-const BookPage = () => {
   return (
-    <VStack gap="1rem">
-      <Text
-        alignSelf="flex-start"
-        fontSize="2rem"
-        fontWeight="800"
-        color="main"
-      >
-        Discover
-      </Text>
-      <BookSearch />
-    </VStack>
+    <>
+      <TopHeader text={'Discover'} />
+      <article className="flex h-full w-full flex-col gap-[3.8rem]">
+        <BookSearchInput
+          value={inputSearchValue}
+          onChange={handleInputValueChange}
+        />
+        {inputSearchValue ? (
+          <>
+            <BookSearchResults searchedBooks={searchedBooks} />
+            <div ref={inViewRef} />
+          </>
+        ) : (
+          <>
+            <RecentSearch
+              recentSearches={recentSearches}
+              setInputSearchValue={setInputSearchValue}
+            />
+            <BestSellers />
+          </>
+        )}
+      </article>
+    </>
   );
 };
 
-export default BookPage;
+export default BookSearch;

src/app/book/search/page.tsx

@@ -14,7 +14,7 @@ const RootLayout = ({ children }: { children: ReactNode }) => {
       </head>
       <body className="app-layout">
         <ContextProvider>
-          <main className={`${LineSeedKR.variable} font-lineseed `}>
+          <main className={`${LineSeedKR.variable} font-lineseed`}>
             {children}
           </main>
         </ContextProvider>

src/app/layout.tsx

@@ -5,6 +5,7 @@ const bookKeys = {
   details: () => [...bookKeys.all, 'detail'] as const,
   detail: (bookId: APIBook['bookId']) =>
     [...bookKeys.details(), bookId] as const,
+  bestSeller: () => [...bookKeys.all, 'bestSeller'],
   bookmark: (bookId: APIBook['bookId']) =>
     [...bookKeys.detail(bookId), 'bookmark'] as const,
   comments: (bookId: APIBook['bookId']) =>

src/queries/book/key.ts

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import type { QueryOptions } from '@/types/query';
+
+import bookAPI from '@/apis/book';
+import type { APIBestSellerRes } from '@/types/book';
+
+import bookKeys from './key';
+
+const useBestSellersQuery = (options?: QueryOptions<APIBestSellerRes>) =>
+  useQuery(
+    bookKeys.bestSeller(),
+    () => bookAPI.getBestSellers().then(({ data }) => data),
+    options
+  );
+
+export default useBestSellersQuery;

src/queries/book/useBestSellersQuery.ts

@@ -0,0 +1,52 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BestSellers from '@/v1/bookSearch/BestSellers';
+
+const meta: Meta<typeof BestSellers> = {
+  title: 'bookSearch/BestSellers',
+  component: BestSellers,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BestSellers>;
+
+type BestSellerProps = {
+  isbn: string;
+  title: string;
+  author: string;
+  cover: string;
+  bestRank: number;
+  link: string;
+};
+
+const BESTSELLER: BestSellerProps = {
+  isbn: '9791162242742',
+  title: '리팩터링',
+  author: '마틴 파울러',
+  cover:
+    'https://search1.kakaocdn.net/thumb/R120x174.q85/?fname=http%3A%2F%2Ft1.daumcdn.net%2Flbook%2Fimage%2F5326912%3Ftimestamp%3D20231207165435',
+  bestRank: 1,
+  link: 'https://search.daum.net/search?w=bookpage&bookId=5326912&q=%EB%A6%AC%ED%8C%A9%ED%84%B0%EB%A7%81',
+};
+
+export const Default: Story = {
+  args: {
+    bestSellers: [BESTSELLER, BESTSELLER, BESTSELLER],
+    searchRange: 'WEEKLY',
+  },
+};
+
+export const MonthlyBestSeller: Story = {
+  args: {
+    bestSellers: [],
+    searchRange: 'MONTHLY',
+  },
+};
+
+export const YearlyBestSeller: Story = {
+  args: {
+    bestSellers: [],
+    searchRange: 'YEARLY',
+  },
+};

src/stories/bookSearch/BestSellers.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+import BookSearchInput from '@/v1/bookSearch/BookSearchInput';
+
+const meta: Meta<typeof BookSearchInput> = {
+  title: 'bookSearch/BookSearchInput',
+  component: BookSearchInput,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BookSearchInput>;
+
+export const Default: Story = {
+  args: {
+    value: '',
+  },
+};

src/stories/bookSearch/BookSearchInput.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import RecentSearch from '@/v1/bookSearch/RecentSearch';
+
+const meta: Meta<typeof RecentSearch> = {
+  title: 'bookSearch/RecentSearch',
+  component: RecentSearch,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RecentSearch>;
+
+export const Default: Story = {
+  args: {
+    recentSearches: undefined,
+    setInputSearchValue: () => alert('선택한 검색어 검색!'),
+  },
+};
+
+export const RecentSearches: Story = {
+  args: {
+    recentSearches: [
+      { keyword: '21', modifiedAt: 'now' },
+      { keyword: 'I Love It', modifiedAt: 'now' },
+      { keyword: 'D (Half Moon)', modifiedAt: 'now' },
+      { keyword: 'What 2 Do', modifiedAt: 'now' },
+      { keyword: 'Bonnie & Clyde', modifiedAt: 'now' },
+      { keyword: '풀어', modifiedAt: 'now' },
+      { keyword: '어때', modifiedAt: 'now' },
+    ],
+    setInputSearchValue: () => alert('선택한 검색어 검색!'),
+  },
+};