feat: Digest탭의 빈 페이지 구현

YAPP-Github · Sep 8, 2024 · 1b6ee1b · 1b6ee1b
1 parent 71398fc
commit 1b6ee1b
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 2 deletions.
diff --git a/src/app/main/DigestTab/index.tsx b/src/app/main/DigestTab/index.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import ArticleCard from '@/components/Article/ArticleCard';
 import RecommendArea from '../TodayTab/RecommendArea';
 import { useUnreadQuery } from '@/api/hooks/useFetchMailQuery';
+import EmptyMailView from '@/components/EmptyMailView';
 
 const DigestTab = () => {
   const [selectedTab, setSelectedTab] = useState<'all' | 'unread'>('unread');
@@ -14,9 +15,16 @@ const DigestTab = () => {
 
   return isFetched ? (
     <div className='flex flex-row w-full h-full gap-16'>
-      <div className='flex flex-col gap-3 pt-3'>
+      <div className='flex flex-col h-full gap-3 pt-3'>
         <TopSection selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
-        {data?.map(article => <ArticleCard key={article.mailId} {...article} />)}
+
+        {data?.length === 0 ? (
+          <div className='h-[calc(100vh-8.5rem-94px)] overflow-visible w-articleCard'>
+            <EmptyMailView />
+          </div>
+        ) : (
+          data?.map(article => <ArticleCard key={article.mailId} {...article} />)
+        )}
       </div>
       <div className='sticky top-0 pt-9 h-fit'>
         <RecommendArea />

diff --git a/src/components/EmptyMailView.tsx b/src/components/EmptyMailView.tsx
@@ -0,0 +1,30 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import EmptyView from '@/assets/images/EmptyView.png';
+
+const EmptyMailView = () => {
+  return (
+    <div className='flex flex-col items-center justify-start w-full h-full bg-background_grey rounded-xl pt-25'>
+      <div className='flex flex-col items-center gap-3'>
+        <Image src={EmptyView} alt='EmptyView' width={120} height={106} />
+        <div className='flex flex-col items-center gap-1'>
+          <span className='text-h2 text-darkgrey'>뉴스레터를 모두 읽었어요</span>
+          <span className='flex flex-row gap-1 text-btn1'>
+            <span className='text-darkgrey'>더 많은 뉴스레터를 읽고 싶다면</span>
+            <Link
+              className='underline text-blue underline-offset-2'
+              href={{
+                pathname: '/main',
+                query: { tab: 'search' },
+              }}
+            >
+              탐색 탭으로 이동
+            </Link>
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EmptyMailView;