feat : BlogPostList 없을때 화면

sopt-makers · Oct 28, 2023 · d443b8c · d443b8c
1 parent 09d9ff3
commit d443b8c
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 3 deletions.
diff --git 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
@@ -1,20 +1,44 @@
+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>
         {blogPostList?.map((blogPost) => (
           <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
@@ -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;
+  }
+`;