#20 react-netflix: footer with styled component

react/netflix-app/src/App.js

@@ -1,6 +1,7 @@
 import requests from "./api/requests";
 import "./App.css";
 import Banner from "./components/Banner";
+import Footer from "./components/Footer";
 import Nav from "./components/Nav";
 import Row from "./components/Row";
 
@@ -28,6 +29,8 @@ const App = () => {
         id="=CM"
         fetchUrl={requests.fetchComedyMovies}
       />
+
+      <Footer />
     </div>
   );
 };

react/netflix-app/src/components/Footer.js

@@ -0,0 +1,107 @@
+import React from "react";
+import styled from "styled-components";
+
+const Footer = () => {
+  return (
+    <FooterContainer>
+      <FooterContent>
+        <FooterLinkContainer>
+          <FooterLinkTitle>넷플릭스 대한민국</FooterLinkTitle>
+
+          <FooterLinkContent>
+            <FooterLink href="https://help.netflix.com/ko/node/412">
+              넷플릭스 소개
+            </FooterLink>
+            <FooterLink href="https://help.netflix.com/ko/node/412">
+              고객 센터
+            </FooterLink>
+            <FooterLink href="https://help.netflix.com/ko/node/412">
+              미디어 센터
+            </FooterLink>
+            <FooterLink href="https://help.netflix.com/ko/node/412">
+              이용 약관
+            </FooterLink>
+          </FooterLinkContent>
+
+          <FooterDescContainer>
+            <FooterDescRights>@ Netflix Rights Reserved.</FooterDescRights>
+          </FooterDescContainer>
+        </FooterLinkContainer>
+      </FooterContent>
+    </FooterContainer>
+  );
+};
+
+const FooterContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 40px 0;
+  border-top: 1px solid rgb(25, 25, 25);
+  width: 100%;
+  position: relative;
+  z-index: 100;
+
+  @media (max-width: 768px) {
+    padding: 20px 20px;
+    padding-bottom: 30px;
+  }
+`;
+
+const FooterContent = styled.div``;
+
+const FooterLinkContainer = styled.div`
+  width: 500px;
+
+  @media (max-width: 768px) {
+    width: 100%;
+  }
+`;
+
+const FooterLinkTitle = styled.h1`
+  color: gray;
+  font-size: 17px;
+`;
+
+const FooterLinkContent = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-top: 35px;
+
+  @media (max-width: 768px) {
+    margin-top: 26px;
+  }
+`;
+
+const FooterLink = styled.a`
+  color: gray;
+  font-size: 14px;
+  width: 110px;
+  margin-bottom: 21px;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  @media (max-width: 768px) {
+    margin-bottom: 16px;
+  }
+`;
+
+const FooterDescContainer = styled.div`
+  margin-top: 30px;
+
+  @media (max-width: 768px) {
+    margin-top: 20px;
+  }
+`;
+
+const FooterDescRights = styled.h2`
+  color: white;
+  font-size: 14px;
+  text-align: center;
+`;
+
+export default Footer;