Merge pull request #74 from Prography-9th-3team/feat/feed

feat: feed 구현
Prography-9th-3team · Jul 26, 2024 · f7a7e4b · f7a7e4b
2 parents d141397 + 4d80c63
commit f7a7e4b
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 23 deletions.
diff --git a/next.config.js b/next.config.js
@@ -21,6 +21,10 @@ const nextConfig = {
       source: '/file/:path*',
       destination: 'http://3.39.102.104/file',
     },
+    {
+      source: '/recommend/:path*',
+      destination: 'http://3.39.102.104/recommend/:path*',
+    },
   ],
 };
 

diff --git a/src/apis/api.ts b/src/apis/api.ts
@@ -39,6 +39,9 @@ const apis = {
     file: '/file',
     thumbnail: (uuid: string) => `/file/thumb/original/${uuid}`,
   },
+  recommend: {
+    recommend_bookmarks: '/recommend/book-mark/list',
+  },
 };
 
 export default apis;
diff --git a/src/apis/bookmark.ts b/src/apis/bookmark.ts
@@ -14,7 +14,7 @@ interface IBookmarkParamDataType {
   isFavorite?: boolean;
 }
 
-interface IBookmarkListResponseDataType {
+export interface IBookmarkListResponseDataType {
   pageInfo: {
     pageNumber: number;
     size: number;

diff --git a/src/apis/recommend.ts b/src/apis/recommend.ts
@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import useAuthStore from '@/stores/authStore';
+import { InfiniteData, useInfiniteQuery } from '@tanstack/react-query';
+import { fetchData } from '.';
+import { default as apis } from './api';
+import { IBookmarkListResponseDataType } from './bookmark';
+
+export const useRecommendBookmarkList = () => {
+  const url = apis.recommend.recommend_bookmarks;
+  const authStore = useAuthStore();
+
+  return useInfiniteQuery<any, unknown, IBookmarkListResponseDataType, any>({
+    queryKey: [apis.bookmark.bookmark_list],
+    queryFn: async ({ pageParam }) => {
+      const res = await fetchData.get(url, {
+        params: { pageNumber: pageParam, size: 8 },
+      });
+
+      return res.data;
+    },
+    initialPageParam: 0,
+    getNextPageParam: (page: any) => {
+      const { lastPage, pageNumber } = page.result.pageInfo;
+
+      return !lastPage ? pageNumber + 1 : null;
+    },
+    select: (res: InfiniteData<{ result: IBookmarkListResponseDataType }>) => {
+      const content = res.pages.reduce((prev: any, cur: any) => {
+        return [...prev, ...cur.result.content];
+      }, []);
+
+      return {
+        content,
+        pageInfo: res.pages[0].result.pageInfo,
+      };
+    },
+    staleTime: 1000 * 60 * 10,
+    gcTime: 1000 * 60 * 10,
+    enabled: authStore.isLogin(),
+  });
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,3 +1,4 @@
+import Feed from '@/components/Feed';
 import Footer from '@/components/Footer';
 import Sidebar from '@/components/Sidebar';
 import ToastArea from '@/components/common/Toast/ToastArea';
@@ -8,7 +9,8 @@ import RouteGuard from './RouteGuard';
 
 export const metadata: Metadata = {
   title: '패킷',
-  description: 'Generated by create next app',
+  description:
+    '성장하는 사람들을 위한 올인원 툴, 패킷으로 쉽고 간편하게 나만의 인사이트를 관리하세요.',
   icons: '/logo.svg',
 };
 
@@ -29,6 +31,7 @@ export default function RootLayout({
             <div className='flex-1'>{children}</div>
             <Footer />
           </div>
+          <Feed />
           <ToastArea />
           <div id='modal' className='styled-scroll'></div>
         </Provider>

diff --git a/src/components/BookmarkCard/index.tsx b/src/components/BookmarkCard/index.tsx
@@ -2,6 +2,7 @@
 
 import { useBookmarkLike } from '@/apis/bookmark';
 import { bookmarkValidateSiteName } from '@/constants/data';
+import { isValidUrl } from '@/lib/url';
 import { cn } from '@/lib/utils';
 import useToastStore from '@/stores/toastStore';
 import { MouseEvent, useState } from 'react';
@@ -18,6 +19,7 @@ export interface IBookmarkCard {
   imageUUID?: string;
   isFavorite: boolean;
   onClick: () => void;
+  isRecommendCard?: boolean;
 }
 
 const BookmarkCard = ({
@@ -32,6 +34,7 @@ const BookmarkCard = ({
   imageUUID,
   isFavorite,
   onClick,
+  isRecommendCard = false,
 }: IBookmarkCard) => {
   const { addToast } = useToastStore();
 
@@ -85,7 +88,9 @@ const BookmarkCard = ({
             alt='썸네일'
             width={650}
           />
-        ) : representImageUrl && !bookmarkValidateSiteName.includes(siteName) ? (
+        ) : representImageUrl &&
+          !bookmarkValidateSiteName.includes(siteName) &&
+          isValidUrl(representImageUrl) ? (
           // url 썸네일 이미지
           <img
             className='aspect-[296/180] object-cover'
@@ -124,26 +129,28 @@ const BookmarkCard = ({
           </picture>
           <span className='body-md text-text truncate'>{bookmarkSiteName}</span>
         </div>
-        <div
-          className={cn([
-            'hidden items-center gap-12 *:text-icon-minimal group-hover:flex',
-            isLike && 'flex',
-          ])}
-        >
-          <button onClick={handleToggleLike}>
-            {isLike ? (
-              <Icon name='heart_fill' className='w-20 h-20 text-primary' />
-            ) : (
-              <Icon name='heart' className='w-20 h-20' />
-            )}
-          </button>
-          <button onClick={handleCopyUrl}>
-            <Icon name='link_03' className='w-20 h-20' />
-          </button>
-          <button onClick={(e) => e.stopPropagation()}>
-            <Icon name='dotsVertical' className='w-20 h-20' />
-          </button>
-        </div>
+        {!isRecommendCard && (
+          <div
+            className={cn([
+              'hidden items-center gap-12 *:text-icon-minimal group-hover:flex',
+              isLike && 'flex',
+            ])}
+          >
+            <button onClick={handleToggleLike}>
+              {isLike ? (
+                <Icon name='heart_fill' className='w-20 h-20 text-primary' />
+              ) : (
+                <Icon name='heart' className='w-20 h-20' />
+              )}
+            </button>
+            <button onClick={handleCopyUrl}>
+              <Icon name='link_03' className='w-20 h-20' />
+            </button>
+            <button onClick={(e) => e.stopPropagation()}>
+              <Icon name='dotsVertical' className='w-20 h-20' />
+            </button>
+          </div>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/Feed/index.tsx b/src/components/Feed/index.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useRecommendBookmarkList } from '@/apis/recommend';
+import { cn } from '@/lib/utils';
+import { usePathname } from 'next/navigation';
+import BookmarkCard from '../BookmarkCard';
+
+const Feed = () => {
+  const pathName = usePathname();
+
+  const pathList = ['/login', '/onboarding', '/oauth2/redirect'];
+
+  const { data: bookmarkData } = useRecommendBookmarkList();
+
+  const handleOpenBlank = ({ url }: { url: string }) => {
+    window.open(url, '_blank');
+  };
+
+  return (
+    <>
+      {!pathList.includes(pathName) && (
+        <div
+          className={cn(
+            'overflow-scroll h-full w-[260px] right-0 flex px-12 pt-40 gap-[14px] flex-col bg-surface',
+            'border-l border-[#E9E9EA] styled-scroll',
+          )}
+        >
+          <h1 className='heading-lg-bd'>이런 사이트는 어때요?</h1>
+          <div className='flex flex-col gap-24'>
+            {bookmarkData?.content.map((item) => (
+              <BookmarkCard
+                key={item.bookMarkId}
+                {...item}
+                imageUUID={item.userInsertRepresentImage?.uuid}
+                onClick={() => handleOpenBlank({ url: item.url })}
+                isRecommendCard={true}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Feed;
diff --git a/src/lib/url.ts b/src/lib/url.ts
@@ -0,0 +1,8 @@
+export const isValidUrl = (url: string) => {
+  try {
+    new URL(url);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};