[5주차] ForgetMeNot 미션 제출합니다

.babelrc

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

README.md

@@ -1,3 +1,36 @@
+### 실행방법
+npm run dev
+
+## Key Questions
+
+### 1. Server Side Rendering과 Client Side Rendering의 차이
+
+#### Server Side Rendering
+SSR은 클라이언트가 웹 페이지를 렌더링하는 것이 아니라 서버에서 웹 페이지를 생성해서 클라이언트는 이를 가져와서 띄우는 방법이다.
+서버에서 웹 페이지 정보를 모두 가지고 있기 떄문에 서버가 무거워지고 서버 비용이 증가한다는 단점이 있으나
+서버가 가지고 있는 웹 페이지 정보를 검색엔진이 인식할 수 있기 때문에 SEO를 통해 네이버, 구글 등에 웹 페이지가 쉽게 노출될 수 있다는 장점이 있다.
+
+#### Client Side Rendering
+서버는 클라이언트에게 HTML, JS 정보만 보내주고 클라이언트가 이를 받아 브라우저에서 직접 페이지를 렌더링하는 방법이다.
+서버가 가벼워지고 서버의 성능에 신경쓰지 않고 페이지를 개발할 수 있다는 장점이 있으나
+클라이언트가 직접 페이지를 렌더링하기 때문에 페이지의 초기 로딩 시간이 길고 SEO가 잘 되지 않는다는 단점이 있다.
+
+### 2. SEO란
+SEO란 검색 엔진 최적화를 
+이 SEO를 위해 개발자는 구글, 네이버 등에 자신의 페이지가 상위에 노출되기 위해
+태그, 링크 구조를 개선하여 검색 엔진이 자신의 페이지를 잘 검색할 수 있도록 해야한다.
+
+#### SEO를 위한 작업들
+1. <title> 태그 안에 너무 긴 텍스트를 넣지 않고 모든 웹페이지의 title에 단일한 제목을 사용하지 않아야 한다.
+2. <description> 태그 안의 요소는 자신의 웹페이지가 노출되었을 때 제목 바로 밑에 뜨는 한 두줄 정도의 요약 문장을 의미한다.
+  가독성을 고려해서 작성하자.
+3. Open Graph 태그 안의 요소는 웹 페이지가 공유될 때 어떻게 노출될지를 알려준다. 
+  이 요소를 잘 정의해놓아야 트래픽이 증가하고 이런 트래픽 증가는 검색 상위 노출을 위한 평가에 영향을 준다.
+
+### 3. 전반적인 협업 과정
+이번 협업에서는 깃허브에서 organization을 생성한 후 레포 안에서 각자 브랜치를 생성해 각자 맡은 부분을 개발한 후 주기적으로 머지하는 방식으로 진행하였다. 
+
+
 # 5주차 미션: Next-Netflix
 
 ## 서론

app/.eslintrc.json

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

app/.gitignore

@@ -0,0 +1,36 @@
+# 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
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

app/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/asset/api-info.tsx

@@ -0,0 +1,3 @@
+export const api = "https://api.themoviedb.org/3/movie";
+export const apiKey = 'dfc5ce9cefd9cafb067049fffa0be4e3';
+export const imgPath = "https://image.tmdb.org/t/p/w500";

app/component/hooks/useInput.tsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+
+function useInput(initialText: string) {
+  const [text, setText] = useState(initialText);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    setText(e.target.value);
+  };
+
+  const resetText = (): void => {
+    setText("");
+  };
+
+  return { text, handleChange, resetText };
+}
+
+export default useInput;

app/component/navigation/footer.tsx

@@ -0,0 +1,81 @@
+import styled from "styled-components";
+import Link from "next/link";
+import Image from "next/image";
+import { useRouter } from "next/router";
+
+const naviList = [
+  { id: 0, src: "navi1", text: "Home", link: "/home" },
+  { id: 1, src: "navi2", text: "Search", link: "/search" },
+  { id: 2, src: "navi3", text: "Coming Soon", link: "" },
+  { id: 3, src: "navi4", text: "Downloads", link: "" },
+  { id: 4, src: "navi5", text: "More", link: "" },
+];
+
+const Navigator = () => {
+  const pathName = useRouter();
+
+  return (
+    <Container>
+      <>
+        {naviList.map((item, idx) => (
+          <NaviContainer>
+            <Link href={item.link} key={idx}>
+              {pathName.pathname === item.link ? (
+                <>
+                  <Image
+                    src={`/img/navigator/select_${item.src}.svg`}
+                    alt="navi"
+                    width={20}
+                    height={20}
+                    key={idx}
+                  />
+                  <NaviText color="#fffff" key={idx}>
+                    {" "}
+                    {item.text}{" "}
+                  </NaviText>
+                </>
+              ) : (
+                <>
+                  <Image
+                    src={`/img/navigator/${item.src}.svg`}
+                    alt="navi"
+                    width={20}
+                    height={20}
+                    key={idx}
+                  />
+                  <NaviText key={idx}> {item.text} </NaviText>
+                </>
+              )}
+            </Link>
+          </NaviContainer>
+        ))}
+      </>
+    </Container>
+  );
+};
+
+export default Navigator;
+
+const Container = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 400px;
+  height: 4rem;
+  background-color: #121212;
+  position: fixed;
+  bottom: 0;
+`;
+const NaviContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 1rem;
+`;
+
+const NaviText = styled.div<{ color?: string }>`
+  font-size: 0.7rem;
+  margin-top: 0.2rem;
+  color: ${(props) => props.color || "#878787"};
+`;

app/component/navigation/header.tsx

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+const Header = () => {
+  return (
+    <HeaderWrap>
+      <Logo src="/img/home/logo.png" />
+      <HeaderText href="#"> TV shows </HeaderText>
+      <HeaderText href="#"> Movies </HeaderText>
+      <HeaderText href="#"> My List </HeaderText>
+    </HeaderWrap>
+  );
+};
+
+export default Header;
+
+const HeaderWrap = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 380px;
+  height: 5rem;
+  z-index: 99;
+  padding: 1rem 1rem 0 0;
+`;
+const Logo = styled.img`
+  height: 3.5rem;
+  width: 3.5rem;
+`;
+const HeaderText = styled.a`
+  font-size: 1.1rem;
+  font-weight: 400;
+`;

app/component/playBtn.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import styled from "styled-components";
+
+const PlayBtn = ({ width }: { width: number }) => {
+  return (
+    <Play width={width}>
+      <PlayImg src="/img/icons/play.svg" alt="playbtn" width={18} height={21} />
+      <div>Play</div>
+    </Play>
+  );
+};
+
+export default PlayBtn;
+
+const Play = styled.button<{ width?: number }>`
+  width: ${(props) => props.width || 320}px;
+  height: 45px;
+  border: none;
+  border-radius: 0.4rem;
+  background: rgb(196, 196, 196);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  font-weight: 600;
+`;
+const PlayImg = styled(Image)`
+  margin-right: 0.7rem;
+`;

app/component/search/searchItem.tsx

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import Image from "next/image";
+import {imgPath} from "../../asset/api-info";
+
+const SearchItem = ({ imgSrc, name }: { imgSrc: string; name: string }) => {
+  return (
+    <ItemWrap>
+      <img src={`${imgPath}/${imgSrc}`} style={{ width: "146px" }} />
+      <ItemTitle>{name}</ItemTitle>
+      <Image src="/img/icons/play2.svg" alt="close" width={24} height={24} />
+    </ItemWrap>
+  );
+};
+
+export default SearchItem;
+
+const ItemWrap = styled.div`
+  width: 400px;
+  height: 76px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  background: rgb(66, 66, 66);
+  margin: 2.5px 0;
+`;
+
+const ItemTitle = styled.div`
+  width: 215px;
+  padding-left: 20px;
+  font-size: 15px;
+`;

app/next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+};
+
+module.exports = nextConfig;