[SP2] 블로그 페이지 스켈레톤 UI, scrollToTop, react-query

src/lib/api/remote/review.ts

@@ -1,27 +1,27 @@
 import { BASE_URL, DEFAULT_TIMEOUT } from '@src/lib/constants/client';
-import { PartCategoryType } from '@src/lib/types/blog';
+import { BlogResponse, PartCategoryType } from '@src/lib/types/blog';
 import axios from 'axios';
 import qs from 'qs';
-import { GetReviewsResponse, GetSampleReviewsResponse, ReviewAPI } from '../../types/review';
+import { GetSampleReviewsResponse, ReviewAPI } from '../../types/review';
 
 const client = axios.create({
   baseURL: BASE_URL,
   timeout: DEFAULT_TIMEOUT,
 });
 
-const getResponse = async (
+export const getResponse = async (
   majorTab: number,
   subTab: PartCategoryType,
   pageNo = 1,
-): Promise<GetReviewsResponse> => {
+): Promise<BlogResponse> => {
   const generationParameter = majorTab === 0 ? {} : { generation: majorTab };
   const partParameter = subTab === PartCategoryType.ALL ? {} : { part: subTab };
   const pageParameter = { pageNo, limit: 6 };
   const parameter = qs.stringify({ ...partParameter, ...pageParameter, ...generationParameter });
 
   const { data } = await client.get(`/reviews?${parameter}`);
 
-  return { hasNextPage: data.hasNextPage, response: data.data };
+  return { hasNextPage: data.hasNextPage, response: data.data, currentPage: data.currentPage };
 };
 
 const getSampleReviews = async (): Promise<GetSampleReviewsResponse> => {

src/lib/api/remote/sopticle.ts

@@ -1,11 +1,6 @@
 import { BASE_URL, DEFAULT_TIMEOUT } from '@src/lib/constants/client';
-import { BlogPostType } from '@src/lib/types/blog';
-import { PartCategoryType } from '@src/lib/types/blog';
-import {
-  GetSopticlesResponse,
-  PostSopticleLikeResponse,
-  SopticleAPI,
-} from '@src/lib/types/sopticle';
+import { BlogPostType, BlogResponse, PartCategoryType } from '@src/lib/types/blog';
+import { PostSopticleLikeResponse, SopticleAPI } from '@src/lib/types/sopticle';
 import { getStorageHandler } from '@src/lib/utils/storageHandler';
 import axios from 'axios';
 import { nanoid } from 'nanoid';
@@ -16,26 +11,28 @@ const client = axios.create({
   timeout: DEFAULT_TIMEOUT,
 });
 
-const getResponse = async (
+export const getResponse = async (
   majorTab: number,
   subTab: PartCategoryType,
   pageNo = 1,
-): Promise<GetSopticlesResponse> => {
+): Promise<BlogResponse> => {
   const generationParameter = majorTab === 0 ? {} : { generation: majorTab };
   const partParameter = subTab === PartCategoryType.ALL ? {} : { part: subTab };
   const pageParameter = { pageNo, limit: 6 };
   const sessionStorageHandler = getStorageHandler('sessionStorage');
   const sessionId = sessionStorageHandler.getItemOrGenerate('session-id', nanoid);
   const parameter = qs.stringify({ ...partParameter, ...pageParameter, ...generationParameter });
 
-  const { data } = await client.get<{ hasNextPage: boolean; data: BlogPostType[] }>(
-    `/sopticle?${parameter}`,
-    { headers: { 'session-id': sessionId } },
-  );
+  const { data } = await client.get<{
+    hasNextPage: boolean;
+    data: BlogPostType[];
+    currentPage: number;
+  }>(`/sopticle?${parameter}`, { headers: { 'session-id': sessionId } });
 
   return {
     hasNextPage: data.hasNextPage,
     response: data.data,
+    currentPage: data.currentPage,
   };
 };
 

src/lib/types/blog.ts

@@ -37,3 +37,9 @@ export enum PartCategoryType {
   WEB = 'WEB',
   SERVER = 'SERVER',
 }
+
+export type BlogResponse = {
+  hasNextPage: boolean;
+  response: BlogPostType[];
+  currentPage: number;
+};

src/lib/types/review.ts

@@ -1,20 +1,11 @@
 import { PartCategoryType } from '@src/lib/types/blog';
-import { BlogPostType } from './blog';
+import { BlogPostType, BlogResponse } from './blog';
 
 export type GetSampleReviewsResponse = {
   reviews: BlogPostType[];
 };
 
-export type GetReviewsResponse = {
-  response: BlogPostType[];
-  hasNextPage: boolean;
-};
-
 export interface ReviewAPI {
-  getResponse(
-    majorTab: number,
-    subTab: PartCategoryType,
-    page: number,
-  ): Promise<GetReviewsResponse>;
+  getResponse(majorTab: number, subTab: PartCategoryType, page: number): Promise<BlogResponse>;
   getSampleReviews(): Promise<GetSampleReviewsResponse>;
 }

src/lib/types/sopticle.ts

@@ -1,20 +1,11 @@
 import { PartCategoryType } from '@src/lib/types/blog';
-import { BlogPostType } from './blog';
-
-export type GetSopticlesResponse = {
-  hasNextPage: boolean;
-  response: BlogPostType[];
-};
+import { BlogResponse } from './blog';
 
 export type PostSopticleLikeResponse = {
   currentLike: boolean;
   likeChanged: boolean;
 };
 export interface SopticleAPI {
-  getResponse(
-    majorTab: number,
-    subTab: PartCategoryType,
-    page: number,
-  ): Promise<GetSopticlesResponse>;
+  getResponse(majorTab: number, subTab: PartCategoryType, page: number): Promise<BlogResponse>;
   postSopticleLike(sopticleId: number, prevLike: boolean): Promise<PostSopticleLikeResponse>;
 }

src/views/BlogPage/BlogPage.tsx

@@ -1,12 +1,15 @@
+import { css } from '@emotion/react';
 import PageLayout from '@src/components/common/PageLayout';
 import useStorage from '@src/hooks/useStorage';
 import { activeGenerationCategoryList } from '@src/lib/constants/tabs';
 import { PartCategoryType } from '@src/lib/types/blog';
+import BlogPostSkeletonUI from '@src/views/BlogPage/components/BlogPostSkeletonUI';
 import { OvalSpinner } from '@src/views/ProjectPage/components';
 import BlogPostList from './components/BlogPostList';
 import BlogTab from './components/BlogTab';
 import { BlogTabType } from './components/BlogTab/types';
-import useFetch from './hooks/useFetch';
+import { useGetResponse } from './hooks/queries/useGetResponse';
+import useInfiniteScroll from './hooks/useInfiniteScroll';
 import * as S from './style';
 
 export default function BlogPage() {
@@ -26,20 +29,26 @@ export default function BlogPage() {
     PartCategoryType.ALL,
   );
 
-  const {
-    state: response,
-    ref,
-    canGetMoreResponse,
-  } = useFetch({
+  const { response, hasNextPage, fetchNextPage, isFetching } = useGetResponse(
     selectedTab,
     selectedMajorCategory,
     selectedSubCategory,
-  });
+  );
+  const { ref } = useInfiniteScroll(fetchNextPage);
 
-  if (!(response._TAG === 'OK' || response._TAG === 'LOADING')) return null;
+  const showTotalPostList = () => {
+    setMajorCategory(activeGenerationCategoryList[0]);
+    setSubCategory(PartCategoryType.ALL);
+  };
 
   return (
-    <PageLayout>
+    <PageLayout
+      showScrollTopButton
+      moreStyle={css`
+        justify-content: space-between;
+        height: 100vh;
+      `}
+    >
       <BlogTab
         selectedTab={selectedTab}
         setSelectedTab={setSelectedTab}
@@ -48,16 +57,30 @@ export default function BlogPage() {
         selectedSubCategory={selectedSubCategory}
         setSubCategory={setSubCategory}
       />
-      <BlogPostList
-        selectedTap={selectedTab}
-        setMajorCategory={setMajorCategory}
-        setSubCategory={setSubCategory}
-        blogPostList={response.data}
-      />
-      {(canGetMoreResponse || response._TAG === 'LOADING') && (
-        <S.SpinnerWrapper ref={canGetMoreResponse ? ref : undefined}>
-          <OvalSpinner />
-        </S.SpinnerWrapper>
+      {!response ? (
+        <BlogPostSkeletonUI />
+      ) : (
+        <>
+          {response.length === 0 ? (
+            <S.EmptyBlogPostListWrapper>
+              <S.EmptyBlogPostList>
+                {`아직 올라온 ${selectedTab === 'article' ? '아티클이' : '활동후기가'} 없어요`}
+              </S.EmptyBlogPostList>
+              <S.Total onClick={showTotalPostList}>{`${
+                selectedTab === 'article' ? '아티클' : '활동후기'
+              } 전체 보기`}</S.Total>
+            </S.EmptyBlogPostListWrapper>
+          ) : (
+            <>
+              <BlogPostList selectedTap={selectedTab} blogPostList={response} />
+              {(hasNextPage || isFetching) && (
+                <S.SpinnerWrapper ref={hasNextPage ? ref : undefined}>
+                  <OvalSpinner />
+                </S.SpinnerWrapper>
+              )}
+            </>
+          )}
+        </>
       )}
     </PageLayout>
   );

src/views/BlogPage/components/BlogPost/style.ts

@@ -5,18 +5,20 @@ import Image from 'next/image';
 export const BlogPost = styled.section`
   display: flex;
   justify-content: space-between;
+  max-width: 900px;
   width: 100%;
   gap: 36px;
 
   cursor: pointer;
   transition: opacity 0.2s linear;
   &:hover {
-    opacity: 0.8;
+    opacity: 0.7;
   }
 
   /* 모바일 뷰 */
   @media (max-width: 767px) {
     gap: 16px;
+    width: 100%;
   }
 `;
 

src/views/BlogPage/components/BlogPostList/index.tsx

@@ -1,45 +1,18 @@
-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
-
   blogPostList: BlogPostType[];
-  setMajorCategory: (newValue: number) => void;
-  setSubCategory: (newValue: PartCategoryType) => void;
 }
 
-export default function BlogPostList({
-  selectedTap,
-  blogPostList,
-  setMajorCategory,
-  setSubCategory,
-}: BlogPostListProps) {
-  const showTotalPostList = () => {
-    setMajorCategory(activeGenerationCategoryList[0]);
-    setSubCategory(PartCategoryType.ALL);
-  };
+export default function BlogPostList({ selectedTap, blogPostList }: BlogPostListProps) {
   return (
-    <S.BlogPostListWrapper>
-      {blogPostList.length === 0 ? (
-        <>
-          <S.EmptyBlogPostList>
-            {`아직 올라온 ${selectedTap === 'article' ? '아티클이' : '활동후기가'} 없어요`}
-          </S.EmptyBlogPostList>
-          <S.Total onClick={showTotalPostList}>{`${
-            selectedTap === 'article' ? '아티클' : '활동후기'
-          } 전체 보기`}</S.Total>
-        </>
-      ) : (
-        <S.BlogPostList>
-          {blogPostList?.map((blogPost) => (
-            <BlogPost key={blogPost.id} blogPost={blogPost} selectedTap={selectedTap} />
-          ))}
-        </S.BlogPostList>
-      )}
-    </S.BlogPostListWrapper>
+    <S.BlogPostList>
+      {blogPostList?.map((blogPost) => (
+        <BlogPost key={blogPost.id} blogPost={blogPost} selectedTap={selectedTap} />
+      ))}
+    </S.BlogPostList>
   );
 }

src/views/BlogPage/components/BlogPostList/style.ts

@@ -1,7 +1,6 @@
 import styled from '@emotion/styled';
-import { colors } from '@sopt-makers/colors';
 
-export const BlogPostListWrapper = styled.div`
+export const BlogPostList = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -10,68 +9,13 @@ export const BlogPostListWrapper = styled.div`
   padding-left: 20px;
   padding-right: 20px;
   margin-bottom: 108px;
-`;
-export const BlogPostList = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 80px;
-  max-width: 900px;
-  width: 100%;
 
   margin-top: 30px;
+  gap: 80px;
 
   /* 모바일 뷰 */
   @media (max-width: 767px) {
-    width: 100%;
     margin-top: 24px;
     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: 108px;
-  margin-bottom: 24px;
-
-  /* 모바일 뷰 */
-  @media (max-width: 767px) {
-    font-size: 18px;
-    line-height: 28px; /* 155.556% */
-    letter-spacing: -0.36px;
-    margin-top: 90px;
-    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;
-  }
-`;