diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 3a55bfbfe..d03358830 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,16 +2,13 @@ import { css } from '@emotion/react';
 
 import MainPage from '@pages/MainPage';
 
+import Footer from '@components/Footer';
 import Header from '@components/Header';
 import Wrapper from '@components/Wrapper';
 
 const App = () => {
   return (
-    <div
-      css={css`
-        padding-top: 120px;
-      `}
-    >
+    <div>
       <Header
         css={css`
           position: fixed;
@@ -21,11 +18,17 @@ const App = () => {
           z-index: 2;
         `}
       />
-      <main>
+      <main
+        css={css`
+          padding: 120px 0 80px;
+          min-height: calc(100vh - 80px);
+        `}
+      >
         <Wrapper>
           <MainPage />
         </Wrapper>
       </main>
+      <Footer />
     </div>
   );
 };
diff --git a/frontend/src/components/Card/style.ts b/frontend/src/components/Card/style.ts
index 61d5b82df..27df45a03 100644
--- a/frontend/src/components/Card/style.ts
+++ b/frontend/src/components/Card/style.ts
@@ -42,25 +42,31 @@ export const Contents = styled.div`
   background-color: ${({ theme }) => theme.colors.secondary.light};
 `;
 
+const onelineEllipsis = css`
+  overflow: clip;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  word-break: break-all;
+`;
+
 export const Title = styled.h4`
-  padding-bottom: 20px;
+  margin-bottom: 20px;
 
   font-size: 24px;
   font-weight: 700;
+  line-height: 24px;
+  ${onelineEllipsis};
 `;
 
 export const Description = styled.p`
   width: 100%;
-  font-size: 20px;
   margin-bottom: 20px;
 
-  overflow: clip;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-  word-break: break-all;
+  font-size: 20px;
   line-height: 20px;
+  ${onelineEllipsis};
 `;
 
 export const Extra = styled.div`
diff --git a/frontend/src/components/Footer/Footer.stories.tsx b/frontend/src/components/Footer/Footer.stories.tsx
new file mode 100644
index 000000000..39d412dd4
--- /dev/null
+++ b/frontend/src/components/Footer/Footer.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from '@storybook/react';
+
+import Footer from '@components/Footer';
+
+export default {
+  title: 'Components/Footer',
+  component: Footer,
+};
+
+const Template: Story = () => <Footer />;
+
+export const Default = Template.bind({});
+Default.args = {};
diff --git a/frontend/src/components/Footer/index.tsx b/frontend/src/components/Footer/index.tsx
new file mode 100644
index 000000000..d603c016e
--- /dev/null
+++ b/frontend/src/components/Footer/index.tsx
@@ -0,0 +1,7 @@
+import * as S from './style';
+
+const Footer: React.FC = () => {
+  return <S.Footer>그린론 디우 베루스 병민 짱구 태태</S.Footer>;
+};
+
+export default Footer;
diff --git a/frontend/src/components/Footer/style.ts b/frontend/src/components/Footer/style.ts
new file mode 100644
index 000000000..fb7def37a
--- /dev/null
+++ b/frontend/src/components/Footer/style.ts
@@ -0,0 +1,12 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+export const Footer = styled.footer`
+  ${({ theme }) => css`
+    padding: 24px 0;
+
+    text-align: center;
+    color: ${theme.colors.secondary.dark};
+    border-top: 1px solid ${theme.colors.secondary.dark};
+  `}
+`;
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index 3fb62c247..3d3df19a8 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -30,7 +30,9 @@ const Header: React.FC<HeaderProps> = ({ className }) => {
 
   return (
     <S.Row className={className}>
-      <Logo />
+      <a href="/">
+        <Logo />
+      </a>
       <S.SearchBarContainer>
         <SearchBar onSubmit={handleKeywordSubmit} />
       </S.SearchBarContainer>
diff --git a/frontend/src/components/SearchBar/index.tsx b/frontend/src/components/SearchBar/index.tsx
index 37f16ce9a..f4e020b86 100644
--- a/frontend/src/components/SearchBar/index.tsx
+++ b/frontend/src/components/SearchBar/index.tsx
@@ -12,7 +12,11 @@ const SearchBar: React.FC<SearchBarProps> = ({ onSubmit, inputName = 'keyword' }
   return (
     <S.Container>
       <form onSubmit={e => onSubmit(e, inputName)}>
+<<<<<<< HEAD
+        <S.Input name={inputName} maxLength={20} placeholder="스터디 제목 검색" />
+=======
         <S.Input name={inputName} maxLength={20} placeholder="스터디 검색" />
+>>>>>>> 1cddf47d74e317571a4325c73eae56521eaeea7c
         <S.Button>
           <FiSearch />
         </S.Button>
diff --git a/frontend/src/components/StudyCard/index.tsx b/frontend/src/components/StudyCard/index.tsx
index 076356157..704213e64 100644
--- a/frontend/src/components/StudyCard/index.tsx
+++ b/frontend/src/components/StudyCard/index.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import Card from '@components/Card';
 import type { CardProps } from '@components/Card';
 import StudyChip from '@components/StudyChip';
@@ -18,4 +20,4 @@ const StudyCard: React.FC<StudyCardProps> = ({ thumbnailUrl, thumbnailAlt, title
   );
 };
 
-export default StudyCard;
+export default React.memo(StudyCard);
diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts
index e59935ba7..de26d2e68 100644
--- a/frontend/src/constants.ts
+++ b/frontend/src/constants.ts
@@ -1,6 +1,6 @@
 export const DEFAULT_STUDY_CARD_QUERY_PARAM = {
   PAGE: 0,
-  SIZE: 5,
+  SIZE: 12,
 };
 
 // export const API_BASE_URL = API_URL;
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index bd2c92697..4ccb88c5b 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -50,8 +50,11 @@ export const handlers = [
 
     const searchedStudies = studyJSON.studies.filter(study => study.title.includes(title));
 
+<<<<<<< HEAD
+=======
     console.log('searchedStudies', searchedStudies);
 
+>>>>>>> 1cddf47d74e317571a4325c73eae56521eaeea7c
     if (page === null && size === null) {
       return res(
         ctx.status(200),
diff --git a/frontend/src/mocks/studies.json b/frontend/src/mocks/studies.json
index 6178677be..2d21a86f8 100644
--- a/frontend/src/mocks/studies.json
+++ b/frontend/src/mocks/studies.json
@@ -125,6 +125,268 @@
       "description": "This is Study Description - 1",
       "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
       "status": "open"
+<<<<<<< HEAD
+    },
+    {
+      "id": 19,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 20,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 21,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 22,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 23,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 24,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 25,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 26,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 27,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 28,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 29,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 30,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 31,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 32,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 33,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 34,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 35,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 36,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 37,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 38,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 39,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 40,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 41,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 42,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 43,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 44,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 45,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 46,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 47,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 48,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 49,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 50,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 51,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 52,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 53,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 54,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+    },
+    {
+      "id": 55,
+      "title": "Study Title - 1",
+      "description": "This is Study Description - 1",
+      "thumbnail": "https://images.unsplash.com/photo-1510070112810-d4e9a46d9e91?ixlib=rb-1.2.1&ixid=MnwxM[…]HN0dWR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
+      "status": "open"
+=======
+>>>>>>> 1cddf47d74e317571a4325c73eae56521eaeea7c
     }
   ]
 }
diff --git a/frontend/src/pages/MainPage/index.tsx b/frontend/src/pages/MainPage/index.tsx
index 9e5e1e5c6..eb337b283 100644
--- a/frontend/src/pages/MainPage/index.tsx
+++ b/frontend/src/pages/MainPage/index.tsx
@@ -1,5 +1,11 @@
+<<<<<<< HEAD
+import { DEFAULT_STUDY_CARD_QUERY_PARAM } from '@constants';
+import { useContext, useEffect, useRef } from 'react';
+import { useInfiniteQuery, useQuery } from 'react-query';
+=======
 import { useContext } from 'react';
 import { useQuery } from 'react-query';
+>>>>>>> 1cddf47d74e317571a4325c73eae56521eaeea7c
 
 import type { Study, StudyListQueryData } from '@custom-types/index';
 
@@ -12,6 +18,57 @@ import StudyCard from '@components/StudyCard';
 
 import * as S from './style';
 
+<<<<<<< HEAD
+type PageParam = {
+  page: number;
+  size: number;
+  keyword?: string;
+};
+
+const defaultParam = {
+  page: DEFAULT_STUDY_CARD_QUERY_PARAM.PAGE,
+  size: DEFAULT_STUDY_CARD_QUERY_PARAM.SIZE,
+};
+
+const MainPage: React.FC = () => {
+  const { keyword } = useContext(SearchContext);
+
+  const getStudyListWithPage = async ({ pageParam = defaultParam }: { pageParam?: PageParam }) => {
+    const { page, size } = pageParam;
+    const data = await getStudyList(page, size);
+    return { ...data, page: page + 1 };
+  };
+
+  const getStudyListSearchedByTitleWithPage = async ({ pageParam = defaultParam }: { pageParam?: PageParam }) => {
+    const { page, size } = pageParam;
+    const data = await getStudyListSearchedByTitle(page, size, keyword!);
+    return { ...data, page: page + 1, keyword };
+  };
+
+  const endRef = useRef<HTMLDivElement>(null);
+
+  const studyListQueryResult = useInfiniteQuery<any, StudyListQueryData>(
+    'infinite-scroll-study-list',
+    getStudyListWithPage,
+    {
+      getNextPageParam: lastPage => {
+        if (!lastPage) return;
+        if (!lastPage.hasNext) return;
+        return { page: lastPage.page };
+      },
+    },
+  );
+
+  const searchedStudyListQueryResult = useInfiniteQuery<any, StudyListQueryData>(
+    ['infinite-scroll-searched-study-list', keyword],
+    getStudyListSearchedByTitleWithPage,
+    {
+      getNextPageParam: lastPage => {
+        if (!lastPage) return;
+        if (!lastPage.hasNext) return;
+        return { page: lastPage.page };
+      },
+=======
 const MainPage: React.FC = () => {
   const { keyword } = useContext(SearchContext);
   const { data, status: dataStatus } = useQuery<unknown, unknown, StudyListQueryData>('study-list', () =>
@@ -21,10 +78,40 @@ const MainPage: React.FC = () => {
     ['searched-study-card-list', keyword],
     () => getStudyListSearchedByTitle(0, 12, keyword),
     {
+>>>>>>> 1cddf47d74e317571a4325c73eae56521eaeea7c
       enabled: !!keyword,
     },
   );
 
+<<<<<<< HEAD
+  const noSearchResult = !!(keyword.length > 0 && searchedStudyListQueryResult.data?.pages[0].studies.length === 0);
+  const hasSearchResult = !!(
+    keyword.length > 0 &&
+    searchedStudyListQueryResult.data &&
+    searchedStudyListQueryResult.data.pages[0].studies.length > 0
+  );
+  const hasBaseStudyList = !!(studyListQueryResult?.data && studyListQueryResult.data.pages[0].studies.length > 0);
+  const shouldDisplayBaseStudyList = !!(keyword.length === 0 && hasBaseStudyList);
+
+  useEffect(() => {
+    if (!endRef.current) return;
+
+    const observer = new IntersectionObserver(entries => {
+      if (entries[0].isIntersecting) {
+        if (hasSearchResult) {
+          searchedStudyListQueryResult.fetchNextPage();
+        }
+        if (shouldDisplayBaseStudyList) {
+          studyListQueryResult.fetchNextPage();
+        }
+      }
+    });
+    observer.observe(endRef.current);
+    return () => observer.disconnect();
+  }, [hasSearchResult, shouldDisplayBaseStudyList]);
+
+=======
+>>>>>>> 1cddf47d74e317571a4325c73eae56521eaeea7c
   const renderStudyCardList = (data: Array<Study>) => {
     return (
       <S.CardList>
@@ -44,6 +131,24 @@ const MainPage: React.FC = () => {
   };
 
   const renderList = () => {
+<<<<<<< HEAD
+    if (noSearchResult) {
+      return <div>검색결과가 없습니다</div>;
+    }
+    if (hasSearchResult) {
+      const searchedStudies = searchedStudyListQueryResult.data.pages.reduce((acc, cur) => {
+        return [...acc, ...cur.studies];
+      }, []);
+      return renderStudyCardList(searchedStudies);
+    }
+
+    if (hasBaseStudyList && shouldDisplayBaseStudyList) {
+      const studies = studyListQueryResult.data.pages.reduce((acc, cur) => {
+        return [...acc, ...cur.studies];
+      }, []);
+      return renderStudyCardList(studies);
+    }
+=======
     if (keyword.length > 0) {
       if (!searchedStudyListQueryData) return;
       if (searchedStudyListQueryData.studies.length === 0) {
@@ -52,13 +157,22 @@ const MainPage: React.FC = () => {
       return renderStudyCardList(searchedStudyListQueryData.studies);
     }
     return data && renderStudyCardList(data.studies);
+>>>>>>> 1cddf47d74e317571a4325c73eae56521eaeea7c
   };
 
   return (
     <S.Page>
       <div className="filters"></div>
+<<<<<<< HEAD
+      {(studyListQueryResult.status === 'loading' || searchedStudyListQueryResult.status === 'loading') && (
+        <div>Loading...</div>
+      )}
+      {renderList()}
+      <div ref={endRef} />
+=======
       {(dataStatus === 'loading' || searchStatus === 'loading') && <div>Loading...</div>}
       {renderList()}
+>>>>>>> 1cddf47d74e317571a4325c73eae56521eaeea7c
     </S.Page>
   );
 };