From 74598ac382a066f1439dbafd623a7484e3743dc1 Mon Sep 17 00:00:00 2001
From: Hyejun Lee <solar3070@naver.com>
Date: Mon, 6 Nov 2023 16:52:36 +0900
Subject: [PATCH] =?UTF-8?q?[SP2]=20=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20useQuery=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=95=84=ED=84=B0=EB=A7=81=20=EA=B0=92=20=EC=9C=A0=EC=A7=80?=
 =?UTF-8?q?=20(#256)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: queryClient 기본값 설정

* feat: 프로젝트 리스트 API 반환 타입 수정

* feat: 프로젝트 리스트 API useQuery 적용

* feat: 서스펜스 Fallback UI 컴포넌트 생성

* style: 프로젝트 카드 스타일 코드 수정

* style: 프로젝트 개수 스타일 코드 수정

* style: 프로젝트 목록 스타일 코드 수정

* feat: 프로젝트 필터값 세션 스토리지 저장

* feat: 최근 출시한 프로젝트 캐싱 데이터 사용

* feat: 프로젝트 목록 staleTime 지정

* feat: 세션 스토리지 훅 타입 지정

* style: Fallback UI 수정

* fix: 최근 출시한 프로젝트 useQuery 적용

* style: 필요없는 스타일 코드 제거

* feat : 프로젝트 캐러셀 SkeletonUI (#258)

* fix: 블로그 썸네일 옵셔널 체이닝 적용

---------

Co-authored-by: solar3070 <>
Co-authored-by: wooyoung <62867581+f0rever0@users.noreply.github.com>
---
 src/lib/api/remote/project.ts                 |  13 +-
 src/lib/types/project.ts                      |   6 +-
 src/pages/_app.tsx                            |  17 +-
 .../BlogPage/components/BlogPost/index.tsx    |   2 +-
 src/views/ProjectPage/ProjectPage.tsx         |  29 ++-
 .../RecentProjectList/Item/style.ts           |   7 +-
 .../RecentProjectListSkeletonUI/index.tsx     |  40 ++++
 .../RecentProjectListSkeletonUI/style.ts      | 178 ++++++++++++++++++
 .../components/RecentProjectList/index.tsx    |  40 ++--
 .../components/project/ProjectCard/index.tsx  |  60 +++---
 .../components/project/ProjectCard/style.ts   |  30 +--
 .../project/ProjectCardList/index.tsx         |  21 +--
 .../project/ProjectCardList/style.ts          |   6 -
 .../components/project/ProjectList.tsx        |  55 ++----
 .../project/ProjectListCount/index.tsx        |   5 +-
 .../project/ProjectListCount/style.ts         |   6 +
 .../ProjectCardSkeletonUI/index.tsx           |   0
 .../ProjectCardSkeletonUI/style.ts            |  10 +-
 .../project/ProjectListFallback/index.tsx     |  13 ++
 .../project/ProjectListFallback/style.ts      |  27 +++
 .../ProjectPage/components/project/style.ts   |   8 -
 src/views/ProjectPage/hooks/queries/index.ts  |  16 ++
 src/views/ProjectPage/hooks/useFetch.ts       |  22 ---
 .../ProjectPage/hooks/useInfiniteScroll.ts    |  23 ---
 src/views/ProjectPage/styles.ts               |   4 +
 25 files changed, 413 insertions(+), 225 deletions(-)
 create mode 100644 src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/index.tsx
 create mode 100644 src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/style.ts
 rename src/views/ProjectPage/components/project/{ => ProjectListFallback}/ProjectCardSkeletonUI/index.tsx (100%)
 rename src/views/ProjectPage/components/project/{ => ProjectListFallback}/ProjectCardSkeletonUI/style.ts (90%)
 create mode 100644 src/views/ProjectPage/components/project/ProjectListFallback/index.tsx
 create mode 100644 src/views/ProjectPage/components/project/ProjectListFallback/style.ts
 create mode 100644 src/views/ProjectPage/hooks/queries/index.ts
 delete mode 100644 src/views/ProjectPage/hooks/useFetch.ts
 delete mode 100644 src/views/ProjectPage/hooks/useInfiniteScroll.ts

diff --git a/src/lib/api/remote/project.ts b/src/lib/api/remote/project.ts
index 0cc85914..9782c6cd 100644
--- a/src/lib/api/remote/project.ts
+++ b/src/lib/api/remote/project.ts
@@ -1,18 +1,15 @@
-import { BASE_URL, DEFAULT_TIMEOUT } from '@src/lib/constants/client';
+import { BASE_URL } from '@src/lib/constants/client';
 import axios from 'axios';
 import qs from 'qs';
 import {
   GetProjectDetailResponse,
-  GetProjectListResponse,
   ProjectAPI,
   ProjectCategoryType,
   ProjectPlatformType,
+  ProjectType,
 } from '../../types/project';
 
-const client = axios.create({
-  baseURL: BASE_URL,
-  timeout: DEFAULT_TIMEOUT,
-});
+const client = axios.create({ baseURL: BASE_URL });
 
 const getProjectDetail = async (projectId: number): Promise<GetProjectDetailResponse> => {
   const { data } = await client.get(`/projects/${projectId}`);
@@ -26,12 +23,12 @@ const getProjectDetail = async (projectId: number): Promise<GetProjectDetailResp
 const getProjectList = async (
   category: ProjectCategoryType,
   platform: ProjectPlatformType,
-): Promise<GetProjectListResponse> => {
+): Promise<ProjectType[]> => {
   const categoryParameter = category === ProjectCategoryType.ALL ? {} : { filter: category };
   const platformParameter = platform === ProjectPlatformType.ALL ? {} : { platform };
   const parameter = qs.stringify({ ...categoryParameter, ...platformParameter });
   const { data } = await client.get(`/projects?${parameter}`);
-  return { projects: data };
+  return data;
 };
 
 export const remoteProjectAPI: ProjectAPI = {
diff --git a/src/lib/types/project.ts b/src/lib/types/project.ts
index 1e2360bc..e276a387 100644
--- a/src/lib/types/project.ts
+++ b/src/lib/types/project.ts
@@ -56,14 +56,10 @@ export interface GetProjectDetailResponse {
   project: ProjectType;
 }
 
-export interface GetProjectListResponse {
-  projects: ProjectType[];
-}
-
 export interface ProjectAPI {
   getProjectDetail(projectId: number): Promise<GetProjectDetailResponse>;
   getProjectList(
     category: ProjectCategoryType,
     platform: ProjectPlatformType,
-  ): Promise<GetProjectListResponse>;
+  ): Promise<ProjectType[]>;
 }
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 841da6a6..be5a26a9 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -4,8 +4,8 @@ import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { Global } from '@emotion/react';
 import { useEffect } from 'react';
-import { useState } from 'react';
 import { QueryClient, QueryClientProvider } from 'react-query';
+import { ReactQueryDevtools } from 'react-query/devtools';
 import SEO from '@src/components/common/SEO';
 import GoogleTagManagerNoscript from '@src/components/googleTagManager/Noscript';
 import GoogleTagManagerScript from '@src/components/googleTagManager/Script';
@@ -14,6 +14,18 @@ import { AMPLITUDE_API_KEY } from '@src/lib/constants/client';
 import { global } from '@src/lib/styles/global';
 import { pageViewTrackingEnrichment } from '@src/lib/utils/pageViewTrackingEnrichment';
 
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 0,
+      suspense: true,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
 amplitude.add(pageViewTrackingEnrichment());
 amplitude.init(AMPLITUDE_API_KEY, {
   logLevel: amplitude.Types.LogLevel.Warn,
@@ -21,8 +33,6 @@ amplitude.init(AMPLITUDE_API_KEY, {
 });
 
 function MyApp({ Component, pageProps }: AppProps) {
-  const [queryClient] = useState(() => new QueryClient());
-
   const router = useRouter();
   useEffect(() => {
     router.events.on('routeChangeComplete', gtm.pageview);
@@ -76,6 +86,7 @@ function MyApp({ Component, pageProps }: AppProps) {
       <Global styles={global} />
       <QueryClientProvider client={queryClient}>
         <Component {...pageProps} />
+        <ReactQueryDevtools initialIsOpen={false} />
       </QueryClientProvider>
       <GoogleTagManagerNoscript />
     </>
diff --git a/src/views/BlogPage/components/BlogPost/index.tsx b/src/views/BlogPage/components/BlogPost/index.tsx
index 760db823..88ff0e77 100644
--- a/src/views/BlogPage/components/BlogPost/index.tsx
+++ b/src/views/BlogPage/components/BlogPost/index.tsx
@@ -51,7 +51,7 @@ export default function BlogPost({ selectedTap, blogPost }: BlogPostProps) {
       <S.ThumbnailWrapper>
         <S.Thumbnail
           src={
-            blogPost.thumbnailUrl.charAt(0) !== 'h'
+            blogPost.thumbnailUrl?.charAt(0) !== 'h'
               ? `https:${blogPost.thumbnailUrl}`
               : error
               ? img_blog_default
diff --git a/src/views/ProjectPage/ProjectPage.tsx b/src/views/ProjectPage/ProjectPage.tsx
index 907c41fc..f19f5c87 100644
--- a/src/views/ProjectPage/ProjectPage.tsx
+++ b/src/views/ProjectPage/ProjectPage.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
-import { useState } from 'react';
+import { Suspense } from 'react';
 import PageLayout from '@src/components/common/PageLayout';
 import Select from '@src/components/common/Select';
-import { useIsMobile } from '@src/hooks/useDevice';
+import useStorage from '@src/hooks/useStorage';
 import {
   activeProjectCategoryList,
   activeProjectPlatformList,
@@ -11,16 +11,21 @@ import {
 } from '@src/lib/constants/project';
 import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
 import { ProjectList } from '@src/views/ProjectPage/components/project/ProjectList';
+import ProjectListFallback from '@src/views/ProjectPage/components/project/ProjectListFallback';
 import RecentProjectList from './components/RecentProjectList';
-import useFetch from './hooks/useFetch';
 import S from './styles';
 
 function Projects() {
-  const [selectedCategory, setCategory] = useState<ProjectCategoryType>(ProjectCategoryType.ALL);
-  const [selectedPlatform, setPlatform] = useState<ProjectPlatformType>(ProjectPlatformType.ALL);
-
-  const state = useFetch(selectedCategory, selectedPlatform);
-  const isMobile = useIsMobile('899px');
+  const [selectedCategory, setCategory] = useStorage<ProjectCategoryType>(
+    'projectCategory',
+    'sessionStorage',
+    ProjectCategoryType.ALL,
+  );
+  const [selectedPlatform, setPlatform] = useStorage<ProjectPlatformType>(
+    'projectPlatform',
+    'sessionStorage',
+    ProjectPlatformType.ALL,
+  );
 
   return (
     <PageLayout
@@ -33,7 +38,9 @@ function Projects() {
         <S.ContentWrapper>
           <RecentProjectList />
           <S.Spacing />
-          <S.SectionTitle>SOPT{!isMobile && '에서 진행된'} 프로젝트 둘러보기</S.SectionTitle>
+          <S.SectionTitle>
+            SOPT<span>에서 진행된</span> 프로젝트 둘러보기
+          </S.SectionTitle>
           <S.FilterWrapper>
             <Select
               options={activeProjectCategoryList}
@@ -52,7 +59,9 @@ function Projects() {
               baseValue={ProjectPlatformType.ALL}
             />
           </S.FilterWrapper>
-          <ProjectList state={state} selectedCategory={selectedCategory} />
+          <Suspense fallback={<ProjectListFallback />}>
+            <ProjectList selectedCategory={selectedCategory} selectedPlatform={selectedPlatform} />
+          </Suspense>
         </S.ContentWrapper>
       </S.Root>
     </PageLayout>
diff --git a/src/views/ProjectPage/components/RecentProjectList/Item/style.ts b/src/views/ProjectPage/components/RecentProjectList/Item/style.ts
index cf9283ab..50a72bc9 100644
--- a/src/views/ProjectPage/components/RecentProjectList/Item/style.ts
+++ b/src/views/ProjectPage/components/RecentProjectList/Item/style.ts
@@ -18,10 +18,11 @@ const GridWrapper = styled.div`
   /* 모바일 뷰 */
   @media (max-width: 899px) {
     width: 325px;
-    grid-template-areas: 'img detail' 'footer footer';
+    grid-template-areas:
+      'img detail'
+      'footer footer';
     grid-template-columns: 48px auto;
-    column-gap: 10px;
-    row-gap: 16px;
+    gap: 16px 10px;
     padding: 16px;
   }
 `;
diff --git a/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/index.tsx b/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/index.tsx
new file mode 100644
index 00000000..b58fc257
--- /dev/null
+++ b/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/index.tsx
@@ -0,0 +1,40 @@
+import * as S from './style';
+
+interface CarouselProps {
+  itemWidth: number;
+  stride: number;
+}
+
+export default function RecentProjectListSkeletonUI({ itemWidth }: CarouselProps) {
+  const recentProjectListDummyArray = [1, 2, 3];
+
+  return (
+    <S.Wrapper>
+      <S.RightBlur />
+      <S.CarouselViewport>
+        <S.CarouselWrapper itemWidth={itemWidth} itemCount={3}>
+          {recentProjectListDummyArray.map((index) => (
+            <S.MarginWrapper key={index}>
+              <S.GridWrapper>
+                <S.ThumbnailImage />
+                <S.DetailWrapper>
+                  <S.Title />
+                  <S.Description />
+                </S.DetailWrapper>
+                <S.DetailFooterWrapper>
+                  <S.Chip />
+                </S.DetailFooterWrapper>
+              </S.GridWrapper>
+            </S.MarginWrapper>
+          ))}
+        </S.CarouselWrapper>
+      </S.CarouselViewport>
+      <S.RightArrow />
+      <S.DotWrapper>
+        {recentProjectListDummyArray.map((index) => (
+          <S.Dot key={index} />
+        ))}
+      </S.DotWrapper>
+    </S.Wrapper>
+  );
+}
diff --git a/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/style.ts b/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/style.ts
new file mode 100644
index 00000000..494187d4
--- /dev/null
+++ b/src/views/ProjectPage/components/RecentProjectList/RecentProjectListSkeletonUI/style.ts
@@ -0,0 +1,178 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import arrowRight from '@src/assets/icons/arrow_right_28x28.svg';
+import { HideScrollbar } from '@src/lib/styles/scrollbar';
+
+export const Wrapper = styled(HideScrollbar)`
+  width: 100%;
+  position: relative;
+`;
+
+export const RightArrow = styled.div`
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  border-radius: 20px;
+  background-color: ${colors.gray600};
+  color: white;
+  z-index: 2;
+  top: 50%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  background-repeat: no-repeat;
+  background-position: center;
+  right: -50px;
+  background-image: url(${arrowRight});
+`;
+
+export const CarouselWrapper = styled.div<{
+  itemWidth: number;
+  itemCount: number;
+}>`
+  width: ${({ itemWidth, itemCount }) => itemWidth * itemCount}px;
+  display: grid;
+  grid-template-columns: ${({ itemWidth, itemCount }) => `repeat(${itemCount}, ${itemWidth}px)`};
+`;
+
+export const CarouselViewport = styled.div`
+  width: 100%;
+`;
+
+export const Blur = styled.div`
+  z-index: 2;
+  position: absolute;
+  height: 100%;
+  width: calc(50vw - 50%);
+  top: 0;
+  background: linear-gradient(
+    to right,
+    transparent 10px,
+    ${colors.background} 50px,
+    ${colors.background}
+  );
+`;
+
+export const RightBlur = styled(Blur)`
+  right: calc(50% - 50vw);
+`;
+
+export const DotWrapper = styled.div`
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+`;
+
+export const Dot = styled.div`
+  position: relative;
+  width: 8px;
+  height: 8px;
+  background-color: ${colors.gray900};
+
+  border-radius: 50%;
+  cursor: pointer;
+
+  ::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    border-radius: 50%;
+  }
+`;
+
+export const GridWrapper = styled.div`
+  width: 568px;
+  height: 164px;
+  display: grid;
+  grid-template-areas: 'img detail' 'img footer';
+  grid-template-columns: 116px auto;
+  column-gap: 16px;
+  background-color: ${colors.gray800};
+  border-radius: 12px;
+  padding: 24px;
+  margin-right: 20px;
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    width: 325px;
+    height: 122px;
+    grid-template-areas:
+      'img detail'
+      'footer footer';
+    grid-template-columns: 48px auto;
+    gap: 16px 10px;
+    padding: 16px;
+  }
+`;
+
+export const MarginWrapper = styled.div`
+  padding-right: 20px;
+`;
+
+export const Title = styled.div`
+  border-radius: 10px;
+  width: 100px;
+  height: 36px;
+  margin-bottom: 6px;
+  background-color: ${colors.gray900};
+
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    height: 24px;
+  }
+`;
+
+export const Description = styled.div`
+  border-radius: 10px;
+  width: 150px;
+  height: 21px;
+  background-color: ${colors.gray900};
+
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    height: 19.5px;
+  }
+`;
+
+export const DetailWrapper = styled.div`
+  grid-area: detail;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`;
+
+export const ThumbnailImage = styled.div`
+  grid-area: img;
+  border-radius: 10px;
+  background-color: ${colors.gray900};
+
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    width: 48px;
+    height: 48px;
+  }
+`;
+
+export const DetailFooterWrapper = styled.div`
+  grid-area: footer;
+  display: flex;
+  justify-content: space-between;
+  flex: 1;
+  align-items: flex-end;
+`;
+
+export const Chip = styled.div`
+  width: 40px;
+  height: 28px;
+  padding: 5px 8px;
+  border-radius: 6px;
+  background-color: ${colors.gray900};
+
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    height: 26px;
+    padding: 5px 8px;
+  }
+`;
diff --git a/src/views/ProjectPage/components/RecentProjectList/index.tsx b/src/views/ProjectPage/components/RecentProjectList/index.tsx
index 1722fc38..671ea2af 100644
--- a/src/views/ProjectPage/components/RecentProjectList/index.tsx
+++ b/src/views/ProjectPage/components/RecentProjectList/index.tsx
@@ -1,30 +1,36 @@
-import { ProjectCategoryType, ProjectPlatformType } from '@src/lib/types/project';
-import useFetch from '../../hooks/useFetch';
+import { Suspense } from 'react';
+import { useIsDesktop, useIsMobile } from '@src/hooks/useDevice';
+import { ProjectCategoryType, ProjectPlatformType, ProjectType } from '@src/lib/types/project';
+import { useGetProjectList } from '@src/views/ProjectPage/hooks/queries';
 import S from '../../styles';
 import RecentProjectListCarousel from './Carousel';
 import RecentProjectListItem from './Item';
+import RecentProjectListSkeletonUI from './RecentProjectListSkeletonUI';
 
 export default function RecentProjectList() {
-  const state = useFetch(ProjectCategoryType.ALL, ProjectPlatformType.ALL, 'updatedAt');
+  const { data } = useGetProjectList(ProjectCategoryType.ALL, ProjectPlatformType.ALL, 'updatedAt');
+  const recentProjectList = data as ProjectType[];
 
-  if (state._TAG !== 'OK') return null;
-
-  if (state.data.length === 0) return null;
+  const isDesktopSize = useIsDesktop('1920px');
+  const isMobileSize = useIsMobile('899px');
 
   return (
     <>
       <S.SectionTitle>최근 출시한 프로젝트</S.SectionTitle>
-      <S.PlaygroundLinkWrapper>
-        <span>SOPT에서 출시한 프로젝트가 있으신가요?</span>
-        <S.PlaygroundLink href="https://playground.sopt.org" target="_blank">
-          릴리즈 소식 알리기
-        </S.PlaygroundLink>
-      </S.PlaygroundLinkWrapper>
-      <RecentProjectListCarousel>
-        {state.data.slice(0, 6).map((d) => (
-          <RecentProjectListItem key={d.id} {...d} />
-        ))}
-      </RecentProjectListCarousel>
+      <Suspense
+        fallback={
+          <RecentProjectListSkeletonUI
+            stride={isDesktopSize ? 2 : 1}
+            itemWidth={isMobileSize ? 345 : 588}
+          />
+        }
+      >
+        <RecentProjectListCarousel>
+          {recentProjectList.slice(0, 6).map((project) => (
+            <RecentProjectListItem key={project.id} {...project} />
+          ))}
+        </RecentProjectListCarousel>
+      </Suspense>
     </>
   );
 }
diff --git a/src/views/ProjectPage/components/project/ProjectCard/index.tsx b/src/views/ProjectPage/components/project/ProjectCard/index.tsx
index 7466e29a..0b5c942b 100644
--- a/src/views/ProjectPage/components/project/ProjectCard/index.tsx
+++ b/src/views/ProjectPage/components/project/ProjectCard/index.tsx
@@ -1,50 +1,32 @@
 import { track } from '@amplitude/analytics-browser';
-import { useMediaQuery } from 'react-responsive';
 import { ProjectType } from '@src/lib/types/project';
 import ServiceInfo from '@src/views/ProjectPage/components/project/ProjectCard/ServiceInfo';
 import * as S from './style';
 
 export default function ProjectCard({ project }: { project: ProjectType }) {
-  const isMobile = useMediaQuery({ query: '(max-width: 899px)' });
-
   return (
     <S.ProjectCard href={`/project/${project.id}`} onClick={() => track('click_project_detail')}>
-      {!isMobile && (
-        <S.ProjectThumbnail
-          src={project.thumbnailImage ?? project.logoImage}
-          alt="프로젝트 썸네일"
-          width={324}
-          height={192}
-          loading="lazy"
-          placeholder="blur"
-          blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU0zOtBwACNQES9P3nGQAAAABJRU5ErkJggg=="
-        />
-      )}
-      <S.ProjectContent>
-        <S.ProjectHeader>
-          {isMobile && (
-            <S.ProjectThumbnail
-              src={project.logoImage}
-              alt="프로젝트 로고"
-              width={40}
-              height={40}
-              loading="lazy"
-              placeholder="blur"
-              blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU0zOtBwACNQES9P3nGQAAAABJRU5ErkJggg=="
-            />
-          )}
-          <S.ProjectText>
-            <S.ProjectTitle>{project.name}</S.ProjectTitle>
-            {project.serviceType.map((type, index) => (
-              <S.ProjectType key={type}>
-                <span>{type}</span>
-                {project.serviceType.length - 1 !== index && <S.Divider>∙</S.Divider>}
-              </S.ProjectType>
-            ))}
-          </S.ProjectText>
-        </S.ProjectHeader>
-        <S.ProjectSummary>{project.summary}</S.ProjectSummary>
-      </S.ProjectContent>
+      <S.ProjectThumbnail
+        src={project.thumbnailImage ?? project.logoImage}
+        alt="프로젝트 썸네일"
+        width={324}
+        height={192}
+        loading="lazy"
+        placeholder="blur"
+        blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mPU0zOtBwACNQES9P3nGQAAAABJRU5ErkJggg=="
+      />
+      <S.ProjectHeader>
+        <S.ProjectText>
+          <S.ProjectTitle>{project.name}</S.ProjectTitle>
+          {project.serviceType.map((type, index) => (
+            <S.ProjectType key={type}>
+              <span>{type}</span>
+              {project.serviceType.length - 1 !== index && <S.Divider>∙</S.Divider>}
+            </S.ProjectType>
+          ))}
+        </S.ProjectText>
+      </S.ProjectHeader>
+      <S.ProjectSummary>{project.summary}</S.ProjectSummary>
       <S.ProjectDetail>
         <S.ServiceDetail>
           {project.isAvailable && <ServiceInfo text="서비스 이용 가능" />}
diff --git a/src/views/ProjectPage/components/project/ProjectCard/style.ts b/src/views/ProjectPage/components/project/ProjectCard/style.ts
index 3907b394..9717c0a5 100644
--- a/src/views/ProjectPage/components/project/ProjectCard/style.ts
+++ b/src/views/ProjectPage/components/project/ProjectCard/style.ts
@@ -4,9 +4,12 @@ import Image from 'next/image';
 import Link from 'next/link';
 
 export const ProjectCard = styled(Link)`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+  display: grid;
+  grid-template-areas:
+    'thumbnail'
+    'header'
+    'summary';
+  grid-template-rows: 202px 32px 44px;
 
   width: 352px;
   height: 345px;
@@ -17,7 +20,13 @@ export const ProjectCard = styled(Link)`
   cursor: pointer;
 
   @media (max-width: 899px) {
-    gap: 6px;
+    grid-template-areas:
+      'thumbnail header'
+      'summary summary';
+    grid-template-rows: none;
+    grid-template-columns: auto 1fr;
+    grid-gap: 12px;
+    
     width: 100%;
     height: auto;
     padding: 0 0 10px 0;
@@ -28,22 +37,18 @@ export const ProjectCard = styled(Link)`
 `;
 
 export const ProjectThumbnail = styled(Image)`
+  grid-area: thumbnail;
   border-radius: 8px;
-
   object-fit: cover;
-`;
-
-export const ProjectContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
 
   @media (max-width: 899px) {
-    gap: 12px;
+    width: 40px;
+    height: 40px;
   }
 `;
 
 export const ProjectHeader = styled.div`
+  grid-area: header;
   display: flex;
   gap: 12px;
 `;
@@ -83,6 +88,7 @@ export const Divider = styled.span`
 `;
 
 export const ProjectSummary = styled.div`
+  grid-area: summary;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
diff --git a/src/views/ProjectPage/components/project/ProjectCardList/index.tsx b/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
index 3f5a1c04..2eb3d1c4 100644
--- a/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
+++ b/src/views/ProjectPage/components/project/ProjectCardList/index.tsx
@@ -1,7 +1,5 @@
 import { ProjectType } from '@src/lib/types/project';
-import { OvalSpinner } from '@src/views/ProjectPage/components/common/OvalSpinner';
 import ProjectCard from '@src/views/ProjectPage/components/project/ProjectCard';
-import { useInfiniteScroll } from '@src/views/ProjectPage/hooks/useInfiniteScroll';
 import * as S from './style';
 
 interface ProjectCardList {
@@ -9,20 +7,11 @@ interface ProjectCardList {
 }
 
 export default function ProjectCardList({ projectList }: ProjectCardList) {
-  const { data, isNextPage, ref } = useInfiniteScroll(projectList);
-
   return (
-    <S.ProjectFeed>
-      <S.CardList>
-        {data.map((project) => (
-          <ProjectCard key={project.id} project={project} />
-        ))}
-      </S.CardList>
-      {isNextPage && (
-        <S.SpinnerWrapper ref={ref}>
-          <OvalSpinner />
-        </S.SpinnerWrapper>
-      )}
-    </S.ProjectFeed>
+    <S.CardList>
+      {projectList.map((project) => (
+        <ProjectCard key={project.id} project={project} />
+      ))}
+    </S.CardList>
   );
 }
diff --git a/src/views/ProjectPage/components/project/ProjectCardList/style.ts b/src/views/ProjectPage/components/project/ProjectCardList/style.ts
index b464cdac..5ab3de8f 100644
--- a/src/views/ProjectPage/components/project/ProjectCardList/style.ts
+++ b/src/views/ProjectPage/components/project/ProjectCardList/style.ts
@@ -1,11 +1,5 @@
 import styled from '@emotion/styled';
 
-export const ProjectFeed = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 50px;
-`;
-
 export const CardList = styled.div`
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
diff --git a/src/views/ProjectPage/components/project/ProjectList.tsx b/src/views/ProjectPage/components/project/ProjectList.tsx
index 96e45a1c..905343fb 100644
--- a/src/views/ProjectPage/components/project/ProjectList.tsx
+++ b/src/views/ProjectPage/components/project/ProjectList.tsx
@@ -1,57 +1,26 @@
-import { Condition } from '@src/components/common/Condition';
-import { State } from '@src/hooks/useFetchBase/types';
-import { ProjectCategoryType, ProjectType } from '@src/lib/types/project';
+import { ProjectCategoryType, ProjectPlatformType, ProjectType } from '@src/lib/types/project';
 import ProjectCardList from '@src/views/ProjectPage/components/project/ProjectCardList';
-import ProjectCardSkeletonUI from '@src/views/ProjectPage/components/project/ProjectCardSkeletonUI';
 import ProjectCategoryDescription from '@src/views/ProjectPage/components/project/ProjectCategoryDescription';
 import ProjectListCount from '@src/views/ProjectPage/components/project/ProjectListCount';
-import { EmptyContent } from '../common/EmptyContent';
+import { useGetProjectList } from '@src/views/ProjectPage/hooks/queries';
 import * as S from './style';
 
 interface ProjectListProp {
-  state: State<ProjectType[]>;
   selectedCategory: ProjectCategoryType;
+  selectedPlatform: ProjectPlatformType;
 }
 
-export function ProjectList({ selectedCategory, state }: ProjectListProp) {
+export function ProjectList({ selectedCategory, selectedPlatform }: ProjectListProp) {
+  const { data } = useGetProjectList(selectedCategory, selectedPlatform);
+  const projectList = data as ProjectType[];
+
   return (
     <>
-      {(() => {
-        switch (state._TAG) {
-          case 'IDLE':
-          case 'LOADING':
-            return (
-              <>
-                <S.ProjectListHeader selectedCategory={selectedCategory}>
-                  <ProjectCategoryDescription selectedCategory={selectedCategory} />
-                  <S.ProjectListCountSkeletonUI />
-                </S.ProjectListHeader>
-                <ProjectCardSkeletonUI />
-              </>
-            );
-          case 'ERROR':
-            return <p>ERROR</p>;
-          case 'OK': {
-            const { data: projectList } = state;
-            const listLength = projectList.length;
-            return (
-              <>
-                <Condition statement={listLength > 0}>
-                  <S.ProjectListHeader selectedCategory={selectedCategory}>
-                    <ProjectCategoryDescription selectedCategory={selectedCategory} />
-                    <ProjectListCount count={listLength} />
-                  </S.ProjectListHeader>
-                  <ProjectCardList projectList={projectList} />
-                </Condition>
-                <Condition statement={listLength === 0}>
-                  <ProjectCategoryDescription selectedCategory={selectedCategory} />
-                  <EmptyContent />
-                </Condition>
-              </>
-            );
-          }
-        }
-      })()}
+      <S.ProjectListHeader selectedCategory={selectedCategory}>
+        <ProjectCategoryDescription selectedCategory={selectedCategory} />
+        <ProjectListCount count={projectList?.length ?? 0} />
+      </S.ProjectListHeader>
+      <ProjectCardList projectList={projectList} />
     </>
   );
 }
diff --git a/src/views/ProjectPage/components/project/ProjectListCount/index.tsx b/src/views/ProjectPage/components/project/ProjectListCount/index.tsx
index 95385416..33258d94 100644
--- a/src/views/ProjectPage/components/project/ProjectListCount/index.tsx
+++ b/src/views/ProjectPage/components/project/ProjectListCount/index.tsx
@@ -1,4 +1,3 @@
-import { useMediaQuery } from 'react-responsive';
 import * as S from './style';
 
 interface ProjectListCountProps {
@@ -6,11 +5,9 @@ interface ProjectListCountProps {
 }
 
 export default function ProjectListCount({ count }: ProjectListCountProps) {
-  const isTablet = useMediaQuery({ query: '(min-width: 900px) and (max-width: 1279px)' });
-
   return (
     <S.Count>
-      {count}개{!isTablet && '의 프로젝트'}
+      {count}개<span>의 프로젝트</span>
     </S.Count>
   );
 }
diff --git a/src/views/ProjectPage/components/project/ProjectListCount/style.ts b/src/views/ProjectPage/components/project/ProjectListCount/style.ts
index 62c8b632..7e47aa88 100644
--- a/src/views/ProjectPage/components/project/ProjectListCount/style.ts
+++ b/src/views/ProjectPage/components/project/ProjectListCount/style.ts
@@ -12,6 +12,12 @@ export const Count = styled.div`
   line-height: 165%; /* 29.7px */
   letter-spacing: -0.27px;
 
+  @media (max-width: 1279px) and (min-width: 900px) {
+    & > span {
+      display: none;
+    }
+  }
+
   /* 모바일 뷰 */
   @media (max-width: 899px) {
     /* Body/3_Medium_14 */
diff --git a/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/index.tsx b/src/views/ProjectPage/components/project/ProjectListFallback/ProjectCardSkeletonUI/index.tsx
similarity index 100%
rename from src/views/ProjectPage/components/project/ProjectCardSkeletonUI/index.tsx
rename to src/views/ProjectPage/components/project/ProjectListFallback/ProjectCardSkeletonUI/index.tsx
diff --git a/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/style.ts b/src/views/ProjectPage/components/project/ProjectListFallback/ProjectCardSkeletonUI/style.ts
similarity index 90%
rename from src/views/ProjectPage/components/project/ProjectCardSkeletonUI/style.ts
rename to src/views/ProjectPage/components/project/ProjectListFallback/ProjectCardSkeletonUI/style.ts
index e50bab35..f11fb95f 100644
--- a/src/views/ProjectPage/components/project/ProjectCardSkeletonUI/style.ts
+++ b/src/views/ProjectPage/components/project/ProjectListFallback/ProjectCardSkeletonUI/style.ts
@@ -53,7 +53,7 @@ export const ProjectContent = styled.div`
 export const ProjectThumbnail = styled.div`
   width: 324px;
   height: 192px;
-  background-color: ${colors.gray800};
+  background-color: ${colors.gray900};
   border-radius: 8px;
 
   @media (max-width: 899px) {
@@ -64,7 +64,7 @@ export const ProjectThumbnail = styled.div`
 export const ProjectLogo = styled.div`
   width: 40px;
   height: 40px;
-  background-color: ${colors.gray800};
+  background-color: ${colors.gray900};
   border-radius: 8px;
 
   @media (min-width: 900px) {
@@ -86,21 +86,21 @@ export const ProjectText = styled.div`
 export const ProjectTitle = styled.div`
   width: 100px;
   height: 28px;
-  background-color: ${colors.gray800};
+  background-color: ${colors.gray900};
   border-radius: 8px;
 `;
 
 export const ProjectType = styled.div`
   width: 39px;
   height: 28px;
-  background-color: ${colors.gray800};
+  background-color: ${colors.gray900};
   border-radius: 8px;
 `;
 
 export const ProjectSummary = styled.div`
   width: 270px;
   height: 22px;
-  background-color: ${colors.gray800};
+  background-color: ${colors.gray900};
   border-radius: 8px;
 
   @media (max-width: 899px) {
diff --git a/src/views/ProjectPage/components/project/ProjectListFallback/index.tsx b/src/views/ProjectPage/components/project/ProjectListFallback/index.tsx
new file mode 100644
index 00000000..b297260e
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectListFallback/index.tsx
@@ -0,0 +1,13 @@
+import ProjectCardSkeletonUI from '@src/views/ProjectPage/components/project/ProjectListFallback/ProjectCardSkeletonUI';
+import * as S from './style';
+
+export default function ProjectListFallback() {
+  return (
+    <>
+      <S.ProjectListHeader>
+        <S.ProjectListCountSkeletonUI />
+      </S.ProjectListHeader>
+      <ProjectCardSkeletonUI />
+    </>
+  );
+}
diff --git a/src/views/ProjectPage/components/project/ProjectListFallback/style.ts b/src/views/ProjectPage/components/project/ProjectListFallback/style.ts
new file mode 100644
index 00000000..3ab2ae69
--- /dev/null
+++ b/src/views/ProjectPage/components/project/ProjectListFallback/style.ts
@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+
+export const ProjectListHeader = styled.div`
+  display: flex;
+  justify-content: end;
+  align-items: center;
+  margin-bottom: 30px;
+
+  /* 모바일 뷰 */
+  @media (max-width: 899px) {
+    flex-direction: column;
+    gap: 20px;
+    margin-bottom: 28px;
+  }
+`;
+
+export const ProjectListCountSkeletonUI = styled.div`
+  width: 89px;
+  height: 23px;
+  background-color: ${colors.gray900};
+  border-radius: 8px;
+
+  @media (max-width: 1279px) and (min-width: 900px) {
+    width: 33px;
+  }
+`;
diff --git a/src/views/ProjectPage/components/project/style.ts b/src/views/ProjectPage/components/project/style.ts
index cd92b9c7..7ab6a419 100644
--- a/src/views/ProjectPage/components/project/style.ts
+++ b/src/views/ProjectPage/components/project/style.ts
@@ -1,5 +1,4 @@
 import styled from '@emotion/styled';
-import { colors } from '@sopt-makers/colors';
 import { ProjectCategoryType } from '@src/lib/types/project';
 
 export const ProjectListHeader = styled.div<{ selectedCategory: ProjectCategoryType }>`
@@ -15,10 +14,3 @@ export const ProjectListHeader = styled.div<{ selectedCategory: ProjectCategoryT
     margin-bottom: 28px;
   }
 `;
-
-export const ProjectListCountSkeletonUI = styled.div`
-  width: 89px;
-  height: 23px;
-  background-color: ${colors.gray800};
-  border-radius: 8px;
-`;
diff --git a/src/views/ProjectPage/hooks/queries/index.ts b/src/views/ProjectPage/hooks/queries/index.ts
new file mode 100644
index 00000000..e0b54f2a
--- /dev/null
+++ b/src/views/ProjectPage/hooks/queries/index.ts
@@ -0,0 +1,16 @@
+import { useQuery } from 'react-query';
+import { api } from '@src/lib/api';
+import { ProjectCategoryType, ProjectPlatformType, ProjectType } from '@src/lib/types/project';
+import { sortBy } from '@src/lib/utils/array';
+
+export const useGetProjectList = (
+  category: ProjectCategoryType,
+  platform: ProjectPlatformType,
+  sortType?: string,
+) => {
+  const queryKey = ['getProjectList', category, platform];
+  return useQuery(queryKey, () => api.projectAPI.getProjectList(category, platform), {
+    select: (data) => (sortType ? sortBy<ProjectType>(data, 'updatedAt') : data),
+    staleTime: 30000,
+  });
+};
diff --git a/src/views/ProjectPage/hooks/useFetch.ts b/src/views/ProjectPage/hooks/useFetch.ts
deleted file mode 100644
index 38a49250..00000000
--- a/src/views/ProjectPage/hooks/useFetch.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useCallback } from 'react';
-import useFetchBase from '@src/hooks/useFetchBase';
-import { api } from '@src/lib/api';
-import { ProjectCategoryType, ProjectPlatformType, ProjectType } from '@src/lib/types/project';
-import { sortBy } from '@src/lib/utils/array';
-
-const useFetch = (
-  selectedCategory: ProjectCategoryType,
-  selectedPlatform: ProjectPlatformType = ProjectPlatformType.ALL,
-  sortProp?: keyof ProjectType,
-) => {
-  const willFetch = useCallback(async () => {
-    const response = await api.projectAPI.getProjectList(selectedCategory, selectedPlatform);
-    if (sortProp) return sortBy<ProjectType>(response.projects, sortProp);
-    return response.projects;
-  }, [selectedCategory, selectedPlatform, sortProp]);
-
-  const state = useFetchBase(willFetch);
-  return state;
-};
-
-export default useFetch;
diff --git a/src/views/ProjectPage/hooks/useInfiniteScroll.ts b/src/views/ProjectPage/hooks/useInfiniteScroll.ts
deleted file mode 100644
index 3a141681..00000000
--- a/src/views/ProjectPage/hooks/useInfiniteScroll.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useState } from 'react';
-import useIntersectionObserver from '@src/hooks/useIntersectionObserver';
-
-export function useInfiniteScroll<T>(totalData: T[]) {
-  const [count, setCount] = useState(1);
-  const [data, setData] = useState(totalData.slice(0, 15));
-  const isNextPage = totalData.length > 15 && count <= Math.ceil(totalData.length / 15);
-
-  const ref = useIntersectionObserver(
-    async (entry, observer) => {
-      if (isNextPage) {
-        setTimeout(() => {
-          setCount(count + 1);
-          setData(totalData.slice(0, count * 15));
-        }, 600);
-      }
-      observer.unobserve(entry.target);
-    },
-    { threshold: 0.25, rootMargin: '80px' },
-  );
-
-  return { data, isNextPage, ref };
-}
diff --git a/src/views/ProjectPage/styles.ts b/src/views/ProjectPage/styles.ts
index a94b2af6..e5b4f0ab 100644
--- a/src/views/ProjectPage/styles.ts
+++ b/src/views/ProjectPage/styles.ts
@@ -14,6 +14,10 @@ const SectionTitle = styled.div`
     font-weight: 700;
     letter-spacing: -0.36px;
     margin-bottom: 20px;
+
+    & > span {
+      display: none;
+    }
   }
 `;