From d443b8c739f0204094a4377a3f8b85803363b6af Mon Sep 17 00:00:00 2001
From: f0ever0 <thddndud0830@gmail.com>
Date: Sat, 28 Oct 2023 18:33:38 +0900
Subject: [PATCH] =?UTF-8?q?feat=20:=20BlogPostList=20=EC=97=86=EC=9D=84?=
 =?UTF-8?q?=EB=95=8C=20=ED=99=94=EB=A9=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/BlogPage/BlogPage.tsx               |  7 ++-
 .../components/BlogPostList/index.tsx         | 28 ++++++++++-
 .../BlogPage/components/BlogPostList/style.ts | 48 +++++++++++++++++++
 3 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/src/views/BlogPage/BlogPage.tsx b/src/views/BlogPage/BlogPage.tsx
index b5b0afde..c7681012 100644
--- a/src/views/BlogPage/BlogPage.tsx
+++ b/src/views/BlogPage/BlogPage.tsx
@@ -48,7 +48,12 @@ export default function BlogPage() {
         selectedSubCategory={selectedSubCategory}
         setSubCategory={setSubCategory}
       />
-      <BlogPostList selectedTap={selectedTab} blogPostList={response.data} />
+      <BlogPostList
+        selectedTap={selectedTab}
+        setMajorCategory={setMajorCategory}
+        setSubCategory={setSubCategory}
+        blogPostList={response.data}
+      />
       {(canGetMoreResponse || response._TAG === 'LOADING') && (
         <S.SpinnerWrapper ref={canGetMoreResponse ? ref : undefined}>
           <OvalSpinner />
diff --git a/src/views/BlogPage/components/BlogPostList/index.tsx b/src/views/BlogPage/components/BlogPostList/index.tsx
index 20a9ced7..c627f016 100644
--- a/src/views/BlogPage/components/BlogPostList/index.tsx
+++ b/src/views/BlogPage/components/BlogPostList/index.tsx
@@ -1,13 +1,27 @@
+import { activeGenerationCategoryList } from '@src/lib/constants/tabs';
 import type { BlogPostType } from '@src/lib/types/blog';
+import { PartCategoryType } from '@src/lib/types/blog';
 import BlogPost from '@src/views/BlogPage/components/BlogPost';
 import * as S from './style';
 
 interface BlogPostListProps {
-  selectedTap: string; // REVIEW || ARTICLE
+  selectedTap: string; // review || article
+
   blogPostList: BlogPostType[];
+  setMajorCategory: (newValue: number) => void;
+  setSubCategory: (newValue: PartCategoryType) => void;
 }
 
-export default function BlogPostList({ selectedTap, blogPostList }: BlogPostListProps) {
+export default function BlogPostList({
+  selectedTap,
+  blogPostList,
+  setMajorCategory,
+  setSubCategory,
+}: BlogPostListProps) {
+  const showTotalPostList = () => {
+    setMajorCategory(activeGenerationCategoryList[0]);
+    setSubCategory(PartCategoryType.ALL);
+  };
   return (
     <S.BlogPostListWrapper>
       <S.BlogPostList>
@@ -15,6 +29,16 @@ export default function BlogPostList({ selectedTap, blogPostList }: BlogPostList
           <BlogPost key={blogPost.id} blogPost={blogPost} selectedTap={selectedTap} />
         ))}
       </S.BlogPostList>
+      {blogPostList.length === 0 && (
+        <>
+          <S.EmptyBlogPostList>
+            {`아직 올라온 ${selectedTap === 'article' ? '아티클이' : '활동후기가'} 없어요`}
+          </S.EmptyBlogPostList>
+          <S.Total onClick={showTotalPostList}>{`${
+            selectedTap === 'article' ? '아티클' : '활동후기'
+          } 전체 보기`}</S.Total>
+        </>
+      )}
     </S.BlogPostListWrapper>
   );
 }
diff --git a/src/views/BlogPage/components/BlogPostList/style.ts b/src/views/BlogPage/components/BlogPostList/style.ts
index 961ee924..31a8eadf 100644
--- a/src/views/BlogPage/components/BlogPostList/style.ts
+++ b/src/views/BlogPage/components/BlogPostList/style.ts
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 
 export const BlogPostListWrapper = styled.div`
   display: flex;
@@ -27,3 +28,50 @@ export const BlogPostList = styled.div`
     gap: 36px;
   }
 `;
+
+export const EmptyBlogPostList = styled.section`
+  color: ${colors.white};
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 48px; /* 150% */
+  letter-spacing: -0.64px;
+  margin-top: 78px;
+  margin-bottom: 24px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {
+    font-size: 18px;
+    line-height: 28px; /* 155.556% */
+    letter-spacing: -0.36px;
+    margin-top: 60px;
+    margin-bottom: 16px;
+  }
+`;
+
+export const Total = styled.button`
+  background-color: ${colors.gray10};
+
+  height: 42px;
+  padding: 0px 24px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 8px;
+  color: ${colors.gray950};
+  font-family: SUIT;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 22px; /* 137.5% */
+  letter-spacing: -0.32px;
+
+  cursor: pointer;
+
+  /* 모바일 뷰 */
+  @media (max-width: 767px) {
+    height: 36px;
+    padding: 8px 14px;
+    font-size: 14px;
+    line-height: 18px; /* 128.571% */
+    letter-spacing: -0.28px;
+  }
+`;