Merge pull request #15 from meet-in-ssafy/feature/footer

페이지 맨 하단에 붙는 footer 구성

Author: miro-ring

FE/components/organisms/Footer/Footer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '@atoms';
+
+const Wrapper = styled.footer`
+  margin-top: auto;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  ${({ theme: { flexRow } }) => flexRow()};
+  background: #262626;
+  color: #666;
+  font-size: 5em;
+  text-transform: uppercase;
+`;
+
+export default function Footer() {
+  return (
+    <Wrapper>
+      <Text text="copyright 2020 SSAFY 5th" />
+    </Wrapper>
+  );
+}

FE/components/organisms/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from './Footer';

FE/components/organisms/index.ts

@@ -1,7 +1,15 @@
 import Modal from './Modal';
 import Navbar from './Navbar';
+import Footer from './Footer';
 import LineBackground from './LineBackground';
 import LoginComponent from './LoginComponent';
 import RegisterComponent from './RegisterComponent';
 
-export { Modal, Navbar, LineBackground, LoginComponent, RegisterComponent };
+export {
+  Modal,
+  Navbar,
+  Footer,
+  LineBackground,
+  LoginComponent,
+  RegisterComponent,
+};

FE/pages/_app.tsx

@@ -1,25 +1,30 @@
 import { Provider } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
-
 import type { AppProps } from 'next/app';
 
-import { Modal, Navbar } from '@organisms';
+import { Modal, Navbar, Footer } from '@organisms';
 import { Spinner } from '@molecules';
 import { MODALS } from '@utils/constants';
+import styled from 'styled-components';
 import GlobalStyle from '@styles/globalStyles';
-
 import store from '@store';
 import theme from '@styles/theme';
 
+const Wrapper = styled.section`
+  min-height: calc(100vh - 150px);
+  margin-top: 100px;
+`;
+
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <Provider store={store}>
       <ThemeProvider theme={theme}>
         <GlobalStyle />
         <Navbar />
-        <section style={{ marginTop: '83px' }}>
+        <Wrapper>
           <Component {...pageProps} />
-        </section>
+        </Wrapper>
+        <Footer />
         <Modal modalName={MODALS.ALERT_MODAL} />
         <Spinner />
       </ThemeProvider>

FE/pages/index.style.ts

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 import { respondTo } from '@styles/respondTo';
 
 export const Wrapper = styled.div`
+  min-height: 8400px;
   max-width: ${({
     theme: {
       layout: { pageMaxWidth },
@@ -20,6 +21,7 @@ export const Wrapper = styled.div`
   }
 
   ${respondTo.mobile`
+    min-height: 10100px;
     margin: ${({
       theme: {
         layout: { mobileHeaderHeight },