[FE] issue27: 무한 스크롤 기능 추가

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>
   );
 };

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`

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 = {};

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;

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

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>

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>

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);

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;

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),