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} /> - + {(canGetMoreResponse || response._TAG === 'LOADING') && ( 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 ( @@ -15,6 +29,16 @@ export default function BlogPostList({ selectedTap, blogPostList }: BlogPostList ))} + {blogPostList.length === 0 && ( + <> + + {`아직 올라온 ${selectedTap === 'article' ? '아티클이' : '활동후기가'} 없어요`} + + {`${ + selectedTap === 'article' ? '아티클' : '활동후기' + } 전체 보기`} + + )} ); } 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; + } +`;