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;
+ }
+`;