[6주차]레시피지 과제 제출합니다

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true
+}

nextjs-intro/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "styled-components",
+      { "ssr": true, "displayName": true, "preprocess": false }
+    ]
+  ]
+}

nextjs-intro/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/babel", "next/core-web-vitals"]
+}

nextjs-intro/.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+.env
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

nextjs-intro/README.md

@@ -0,0 +1 @@
+# NextJS Introduction

nextjs-intro/components/Header.js

@@ -0,0 +1,52 @@
+import React from 'react';
+
+import styled from 'styled-components';
+import Link from 'next/link';
+
+const Header = () => {
+  return (
+    <HeaderWrapper>
+      <Link href={'/home'}>
+        <BannerImg src={`/netflix.png`}></BannerImg>
+      </Link>
+      <Link href={'/tv-shows'}>
+        <BannerTag>TV Shows</BannerTag>
+      </Link>
+      <Link href={'/movies'}>
+        <BannerTag>Movies</BannerTag>
+      </Link>
+      <Link href={'/my-list'}>
+        <BannerTag>My List</BannerTag>
+      </Link>
+    </HeaderWrapper>
+  );
+};
+
+const HeaderWrapper = styled.div`
+  width: 375px;
+  padding: 1.5rem;
+
+  position: relative;
+
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+
+  color: white;
+
+  position: fixed;
+`;
+
+const BannerTag = styled.div`
+  color: white;
+  font-size: 17.2px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+`;
+
+const BannerImg = styled.img`
+  width: 2.5rem;
+`;
+
+export default React.memo(Header);

nextjs-intro/components/Layout.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import NavBar from './NavBar';
+
+export default function Layout({ children }) {
+  return (
+    <Container>
+      <Content>{children}</Content>
+      <NavBar />
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  width: 375px;
+`;
+
+const Content = styled.div`
+  width: 100%;
+  height: calc(100vh - 48px);
+`;

nextjs-intro/components/Modal.js

@@ -0,0 +1,100 @@
+import styled from 'styled-components';
+
+export default function MovieModal({
+  backdrop_path,
+  title,
+  overview,
+  name,
+  release_date,
+  first_air_date,
+  vote_average,
+  setModalOpen,
+}) {
+  return (
+    <Presentation>
+      <Wrapper_modal>
+        <Modal>
+          <Modal_close onClick={() => setModalOpen(false)}>X</Modal_close>
+          <Modal_poster
+            src={`https://image.tmdb.org/t/p/original/${backdrop_path}`}
+            alt="modal__poster-img"
+          />
+
+          <Modal__content>
+            <Modal__details>
+              {release_date ? release_date : first_air_date}
+            </Modal__details>
+            <Modal_title>{title ? title : name}</Modal_title>
+            <Modal_overview>Rating:{vote_average}</Modal_overview>
+            <Modal_overview>{overview}</Modal_overview>
+          </Modal__content>
+        </Modal>
+      </Wrapper_modal>
+    </Presentation>
+  );
+}
+
+const Modal = styled.div`
+  position: relative;
+  max-width: 500px;
+  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+    0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
+  background: #111;
+  overflow: hidden;
+  border-radius: 8px;
+  transition: all 400ms ease-in-out 2s;
+  animation: fadeIn 400ms;
+  ::-webkit-scrollbar {
+    display: none;
+    visibility: hidden;
+  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none;
+`;
+const Modal_poster = styled.img`
+  width: 100%;
+  height: auto;
+`;
+
+const Modal__content = styled.div`
+  padding: 40px;
+  color: white;
+`;
+const Modal_title = styled.h2`
+  padding: 0;
+  font-size: 40px;
+  margin: 16px 0;
+`;
+
+const Modal__details = styled.p`
+  font-weight: 600;
+  font-size: 18px;
+`;
+
+const Modal_overview = styled.p`
+  font-size: 20px;
+  line-height: 1.5;
+`;
+
+const Modal_close = styled.span`
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  cursor: pointer;
+  z-index: 1000;
+  color: white;
+`;
+
+const Presentation = styled.div`
+  z-index: 500;
+  position: absolute;
+`;
+
+const Wrapper_modal = styled.div`
+  position: fixed;
+  inset: 0px;
+  background-color: rgb(0 0 0 / 71%);
+  -webkit-tap-highlight-color: transparent;
+  display: flex;
+  justify-content: center;
+`;

nextjs-intro/components/MyHead.js

@@ -0,0 +1,9 @@
+import Head from 'next/head';
+
+export default function MyHead({ title }) {
+  return (
+    <Head>
+      <title>{title} | Next Movies</title>
+    </Head>
+  );
+}

nextjs-intro/components/NavBar.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {
+  faHouse,
+  faMagnifyingGlass,
+  faPlay,
+  faArrowDown,
+  faBars,
+} from '@fortawesome/free-solid-svg-icons';
+
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+
+const NavBar = () => {
+  const router = useRouter();
+  return (
+    <Nav>
+      <Container>
+        <Link href="/home">
+          <NavItem current={router.pathname === '/home'}>
+            <FontAwesomeIcon icon={faHouse} size={'1x'} />
+            <NavText>Home</NavText>
+          </NavItem>
+        </Link>
+        <Link href="/search">
+          <NavItem current={router.pathname === '/search'}>
+            <FontAwesomeIcon icon={faMagnifyingGlass} size={'1x'} />
+            <NavText>Search</NavText>
+          </NavItem>
+        </Link>
+        <Link href="/comming-soon">
+          <NavItem current={router.pathname === '/comming-soon'}>
+            <FontAwesomeIcon icon={faPlay} size={'1x'} />
+            <NavText>Comming Soon</NavText>
+          </NavItem>
+        </Link>
+        <Link href="/downloads">
+          <NavItem current={router.pathname === '/downloads'}>
+            <FontAwesomeIcon icon={faArrowDown} size={'1x'} />
+            <NavText>Downloads</NavText>
+          </NavItem>
+        </Link>
+        <Link href="/menu">
+          <NavItem current={router.pathname === '/menu'}>
+            <FontAwesomeIcon icon={faBars} size={'1x'} />
+            <NavText>More</NavText>
+          </NavItem>
+        </Link>
+      </Container>
+    </Nav>
+  );
+};
+
+const Nav = styled.nav`
+  width: 375px;
+  height: 48px;
+
+  position: fixed;
+  bottom: 0;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 2.5rem;
+
+  background: #121212;
+`;
+
+const NavItem = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 5px;
+  color: ${(props) => props.current && 'white'};
+`;
+
+const NavText = styled.div`
+  font-family: 'SF Pro Display';
+  font-style: normal;
+  font-weight: 500;
+  font-size: 8.2px;
+`;
+
+export default NavBar;

nextjs-intro/components/Wrapper.js

@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+export default function Wrapper({ children }) {
+  return <Container>{children}</Container>;
+}
+
+const Container = styled.div`
+  width: 375px;
+  height: 100vh;
+  margin-right: 30rem;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media screen and (max-width: 767px) {
+    margin-right: 5.5rem;    
+  }
+
+`;

nextjs-intro/hooks/useInput.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+
+export default function useInput() {
+  const [search, setSearchValue] = useState('');
+  const [searches, setSearchResults] = useState('');
+  const NEXT_PUBLIC_API_KEY = process.env.NEXT_PUBLIC_API_KEY;
+
+  const handleChange = (e) => {
+    if (!e.target.value) {
+      resetChat();
+    } else {
+      setSearchValue(e.target.value);
+      tryOut(e);
+    }
+  };
+
+  const resetChat = () => {
+    setSearchValue('');
+    setSearchResults('');
+  };
+
+  const tryOut = async (e) => {
+    e.preventDefault();
+
+    const movies = await (
+      await fetch(
+        `https://api.themoviedb.org/3/search/movie?api_key=${NEXT_PUBLIC_API_KEY}&language=en-US&query=${e.target.value}&include_adult=false`
+      )
+    ).json();
+    setSearchResults(movies);
+  };
+
+  return { search, handleChange, resetChat, searches, tryOut };
+}