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

src/components/Layout/Layout.tsx

@@ -12,4 +12,6 @@ export function Layout({
 const Main = styled.div<{ moreStyle?: SerializedStyles }>`
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  height: 100vh;
 `;

src/lib/api/remote/review.ts

@@ -9,7 +9,7 @@ const client = axios.create({
   timeout: DEFAULT_TIMEOUT,
 });
 
-const getResponse = async (
+export const getResponse = async (
   majorTab: number,
   subTab: PartCategoryType,
   pageNo = 1,
@@ -21,7 +21,7 @@ const getResponse = async (
 
   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

@@ -16,7 +16,7 @@ const client = axios.create({
   timeout: DEFAULT_TIMEOUT,
 });
 
-const getResponse = async (
+export const getResponse = async (
   majorTab: number,
   subTab: PartCategoryType,
   pageNo = 1,
@@ -28,14 +28,16 @@ const getResponse = async (
   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/review.ts

@@ -8,6 +8,7 @@ export type GetSampleReviewsResponse = {
 export type GetReviewsResponse = {
   response: BlogPostType[];
   hasNextPage: boolean;
+  currentPage: number;
 };
 
 export interface ReviewAPI {

src/lib/types/sopticle.ts

@@ -4,6 +4,7 @@ import { BlogPostType } from './blog';
 export type GetSopticlesResponse = {
   hasNextPage: boolean;
   response: BlogPostType[];
+  currentPage: number;
 };
 
 export type PostSopticleLikeResponse = {

src/views/BlogPage/BlogPage.tsx

@@ -2,11 +2,13 @@ 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,17 +28,19 @@ 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);
+
+  const showTotalPostList = () => {
+    setMajorCategory(activeGenerationCategoryList[0]);
+    setSubCategory(PartCategoryType.ALL);
+  };
 
-  if (!(response._TAG === 'OK' || response._TAG === 'LOADING')) return null;
+  if (!response) return null;
 
   return (
     <PageLayout>
@@ -48,16 +52,29 @@ 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.length === 0 ? (
+        isFetching ? (
+          <BlogPostSkeletonUI />
+        ) : (
+          <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

@@ -11,7 +11,7 @@ export const BlogPost = styled.section`
   cursor: pointer;
   transition: opacity 0.2s linear;
   &:hover {
-    opacity: 0.8;
+    opacity: 0.7;
   }
 
   /* 모바일 뷰 */

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

@@ -1,45 +1,20 @@
-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.BlogPostList>
+        {blogPostList?.map((blogPost) => (
+          <BlogPost key={blogPost.id} blogPost={blogPost} selectedTap={selectedTap} />
+        ))}
+      </S.BlogPostList>
     </S.BlogPostListWrapper>
   );
 }

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

@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { colors } from '@sopt-makers/colors';
 
 export const BlogPostListWrapper = styled.div`
   display: flex;
@@ -28,50 +27,3 @@ 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: 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;
-  }
-`;

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

@@ -0,0 +1,30 @@
+import * as S from './style';
+
+export default function BlogPostSkeletonUI() {
+  const BlogPostSkeletonUIList = [0, 1, 2];
+
+  return (
+    <S.BlogPostListWrapper>
+      <S.BlogPostList>
+        {BlogPostSkeletonUIList.map((value) => (
+          <S.BlogPost key={value}>
+            <S.HeaderWrapper>
+              <S.Header></S.Header>
+              <S.Body>
+                <S.Title />
+                <S.Description />
+              </S.Body>
+              <S.TagList>
+                <S.Tag />
+                <S.Tag />
+              </S.TagList>
+            </S.HeaderWrapper>
+            <S.ThumbnailWrapper>
+              <S.Thumbnail />
+            </S.ThumbnailWrapper>
+          </S.BlogPost>
+        ))}
+      </S.BlogPostList>
+    </S.BlogPostListWrapper>
+  );
+}