[6주차] SNIFF 미션 제출합니다.

.env.local

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_KEY="e76f188b77121ac1189879f8d38c1314"

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  }
+}

.github/pull_request_template.md

@@ -0,0 +1,7 @@
+## PR 요약
+
+> summary
+
+## 변경된 점
+
+> changes

.github/workflows/deploy.yml

@@ -0,0 +1,30 @@
+name: git push into another repo to deploy to vercel
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container: pandoc/latex
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install mustache (to update the date)
+        run: apk add ruby && gem install mustache
+      - name: creates output
+        run: sh ./build.sh
+      - name: Pushes to another repository
+        id: push_directory
+        uses: cpina/github-action-push-to-another-repository@master
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.DAEGYUN_GITHUB_SECRET }}
+        with:
+          source-directory: 'output'
+          destination-github-username: oooppq
+          destination-repository-name: next-netflix-18th
+          user-email: ${{ secrets.DAEGYUN_GITHUB_EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: master
+      - name: Test get variable exported by push-to-another-repository
+        run: echo $DESTINATION_CLONED_DIRECTORY

.gitignore

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

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "singleQuote": true,
+  "useTabs": false,
+  "trailingComma": "all",
+  "semi": true,
+  "printWidth": 80,
+  "tabWidth": 2
+}

README.md

@@ -1,50 +1,45 @@
-# 5주차 미션: Next-Netflix
+## 패키지 매니저
 
-## 서론
+> yarn
 
-안녕하세요, 프론트 운영진 **노수진**입니다 😸
+### 이유
 
-이번주부터는 새 프로젝트인 **Netflix 클론코딩**을 진행합니다. 이번 미션은 Next.js를 사용해 보며 SSR을 학습하고 Figma로 주어지는 디자인을 활용해 스타일링 하는 방법을 이해하는 것을 목표로 합니다.
+- 딱히 없음. yarn berry나 pnpm 등의 신상 패키지 매니저를 쓰면서까지 빌드 시간을 단축시킬 프로젝트가 아님.
+- npm에 비해 cli가 깔끔하고, 안내 log가 친절함.
 
-또한 이번주부터는 프론트 페어와 함께하는 과제인 만큼 각 팀별로 미리 호흡을 맞춰 보는 좋은 기회가 될 것 같습니다. 모두 화이팅입니다🔥
+### 설치
 
-## 미션
+- node 설치(아마 되어있을 듯)
+- npm -g install yarn
 
-### 미션 목표
+### 기본 동작
 
-- Next.js 사용법을 공부해봅니다.
-- Figma로 주어지는 디자인으로 스타일링 하는 방식에 익숙해집니다.
-- Git을 이용한 협업 방식에 익숙해집니다.
+- yarn add( = npm install ~ )
+- yarn create( = npx ~ )
+- 프로젝트 cli(yarn dev, build, start, lint 등, = npm run ~ )
 
-### 기한
+## 프로젝트 시작
 
-- 2023년 11월 10일 (기한 엄수)
+- 이 repo를 자신의 repo에 fork
+- git clone https://github.com/[your_id]/next-netflix-18th.git
+- 프로젝트 디렉토리에서 yarn install
 
-### 필수 요건
+## branch 전략
 
-- [결과화면](https://next-netflix-17th-sepia.vercel.app/)의 랜딩 페이지와 메인 페이지를 구현합니다.
-- [Figma](https://www.figma.com/file/UqdXDovIczt1Gl0IjknHQf/Netflix?node-id=0%3A1)의 디자인을 그대로 구현합니다.
-- Open api를 사용해서 데이터 패칭을 진행합니다. (ex. [themoviedb API](https://developers.themoviedb.org/3/getting-started/introduction))
-- `yarn`, `yarn berry`, `npm`, `pnpm`등 패키지 매니저를 직접 선택해 Next.js를 세팅해 봅니다.
+- 기능을 구현하기 전 team repo에서 최신 버전의 master 상태를 pull한 후 개발 진행
+- 큼지막한 기능 별로 feature/기능이름 과 같은 형태로 branch 생성 후 코드 작성
+- 작성이 완료되면 바로 merge 하는게 아니라 pr 생성(new pull request 버튼 누르면 자동으로 pr template이 적용되어 있음)
+- 상대방이 approve 하면 merge 하는 것을 원칙으로 하나 서로 얘기해보고 괜찮다 싶으면 스스로 master에 merge(무튼 merge 하기 전에 상대방에게 확인받기는 해야 함)
 
-### 선택 사항
+## 배포
 
-- SSR(Server Side Rendering)을 적용해서 구현합니다.
-- 웹 폰트를 사용합니다.
-- 반응형을 고려합니다.
+- 팀 repo 그대로 vercel에 배포하려면 요금을 지불해야 함
+- 따라서, 팀 repo를 오대균 github에 fork 하여, 오대균 repo에서 배포 함
+- 수동으로 배포하면 번거로우니 다음과 같은 flow로 배포되도록 설정함
+  > 1. team repo master branch에 push 발생
+  > 2. 오대균 repo의 master branch에 변경사항 자동으로 적용
+  > 3. vercel이 이를 인식하고 자동으로 배포 반영
 
-## **Key Question**
+## 궁금한 점이 있다면
 
-- Server Side Rendering과 Client Side Rendering의 차이
-- SEO란
-- 전반적인 협업 과정
-
-## 링크 및 참고자료
-
-- [랜딩페이지 영상](https://lottiefiles.com/kr/)
-- [Next.js Docs](https://beta.nextjs.org/docs)
-- [Next.js 13에서 변한 것들](https://velog.io/@hang_kem_0531/Next.js-13%EC%9D%B4-%EB%82%98%EC%99%80%EB%B2%84%EB%A0%B8%EB%8B%A4)
-- [Next.js 14에서 변한 것들](https://velog.io/@lee_1124/Next.js-14-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8)
-- [Git 협업 가이드](https://velog.io/@jinuku/Git-%ED%98%91%EC%97%85-%EA%B0%80%EC%9D%B4%EB%93%9C)
-- [디자이너와 개발자가 협업하기 위한 피그마 기본 기능](https://chingguhl.tistory.com/entry/%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%EA%BC%AD-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-%ED%94%BC%EA%B7%B8%EB%A7%88-10%EA%B0%80%EC%A7%80-%EA%B8%B0%EB%8A%A5-%EB%94%94%EC%9E%90%EC%9D%B4%EB%84%88%EC%99%80-%EA%B0%9C%EB%B0%9C%EC%9E%90%EA%B0%80-%ED%98%91%EC%97%85%ED%95%98%EA%B8%B0-%EC%9C%84%ED%95%9C-%ED%94%BC%EA%B7%B8%EB%A7%88-%EA%B8%B0%EB%B3%B8-%EA%B8%B0%EB%8A%A5)
-- [React에서 무한 스크롤 구현하기](https://tech.kakaoenterprise.com/149)
+- 아무 때나 말하세요

app/browse/page.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import ContentsSlider from '@/components/browse/ContentsSlider';
+import HomeNavBar from '@/components/browse/HomeNavBar';
+import HomeTop from '@/components/browse/HomeTop';
+import { TContent } from '@/types';
+import { getMovies } from '@/utils/Api';
+
+interface BrowseProps {
+  searchParams: { [key: string]: string | undefined };
+}
+
+const Browse = async ({ searchParams }: BrowseProps) => {
+  const Top = await getMovies('top_rated');
+  const Popular = await getMovies('popular');
+  const Upcoming = await getMovies('upcoming');
+  const Nowplaying = await getMovies('now_playing');
+
+  const defaultData = {
+    rank: 1,
+    category: 'Top Rate',
+    posterPath: Top[0].poster_path,
+  };
+
+  return (
+    <div className="bg-black w-full min-h-full pb-12 relative">
+      <HomeNavBar />
+      <HomeTop
+        posterPath={searchParams.posterPath || defaultData.posterPath}
+        rank={
+          searchParams.rank
+            ? Number(searchParams.rank)
+            : searchParams.posterPath
+            ? null
+            : defaultData.rank
+        }
+        category={searchParams.category || defaultData.category}
+      />
+      <ContentsSlider
+        title="Preview"
+        isRanking={false}
+        isPreview={true}
+        contents={Nowplaying}
+      />
+      <ContentsSlider title="Nigeria Today" isRanking={true} contents={Top} />
+      <ContentsSlider title="Popular" isRanking={false} contents={Popular} />
+      <ContentsSlider title="Upcoming" isRanking={false} contents={Upcoming} />
+    </div>
+  );
+};
+
+export default Browse;

app/globals.css

@@ -0,0 +1,17 @@
+@import url('https://fonts.cdnfonts.com/css/sf-pro-display');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: 'SF Pro Display', sans-serif;
+  background-color: black;
+  width: 100%;
+  height: 100%;
+}
+

app/layout.tsx

@@ -0,0 +1,25 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import NavBar from '@/components/common/NavBar';
+
+export const metadata: Metadata = {
+  title: 'sniff-netflix',
+  description: 'netflix clone project',
+  viewport:
+    'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+        <NavBar />
+      </body>
+    </html>
+  );
+}

app/movies/[id]/page.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import DetailTop from '@/components/detail/DetailTop';
+import DetailOverview from '@/components/detail/DetailOverview';
+import { getMovieDetails } from '@/utils/Api';
+import { TContent } from '@/types';
+
+interface DetailPageProps {
+  params: { id: string };
+}
+const Page = async ({ params }: DetailPageProps) => {
+  const movie: TContent = await getMovieDetails(params.id);
+
+  return (
+    <div className="min-h-screen bg-black">
+      <DetailTop posterPath={movie.poster_path} />
+      <DetailOverview title={movie.title} overview={movie.overview} />
+    </div>
+  );
+};
+
+export default Page;

app/page.tsx

@@ -0,0 +1,15 @@
+import dynamic from 'next/dynamic';
+
+const page = () => {
+  const Logo = dynamic(() => import('@/components/LandingLogo'), {
+    ssr: false,
+  });
+
+  return (
+    <div className="w-full h-full bg-black flex align-middle">
+      <Logo />
+    </div>
+  );
+};
+
+export default page;

app/search/page.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import SearchBar from '@/components/search/SearchBar';
+import SearchResultList from '@/components/search/SearchResultList';
+import { useDebounce } from '@/hooks/useDebounce';
+import { TContent } from '@/types';
+import { getMovies, getSearchedMovies } from '@/utils/Api';
+import { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+const SearchPage = () => {
+  const [movies, setMovies] = useState<TContent[]>([]);
+  const [keyword, setKeyword] = useState<string>('');
+  const [init, setInit] = useState<boolean>(true);
+  const [ref, inview] = useInView();
+  const [pageNum, setPageNum] = useState<number>(1);
+  const [totalPageNum, setTotalPageNum] = useState<number>(1);
+
+  useEffect(() => {
+    if (!keyword) {
+      (async () => {
+        // next의 fetch는 같은 요청에 대해 caching을 진행하므로,
+        // 첫 요청 이후에는 caching된 데이터를 가져올 것(?)
+        const defaultMovies = await getMovies('popular');
+        setMovies(defaultMovies);
+        setPageNum(1);
+        setTotalPageNum(1);
+        setInit(false);
+      })();
+    }
+  }, [keyword]);
+
+  useEffect(() => {
+    if (pageNum > 1) {
+      (async () => {
+        const data = await getSearchedMovies(keyword, pageNum);
+        setMovies([...movies, ...data.results]);
+      })();
+    }
+  }, [pageNum]);
+
+  useEffect(() => {
+    if (inview && pageNum < totalPageNum) {
+      setPageNum(pageNum + 1);
+    }
+  }, [inview]);
+
+  const handleOnChangeQuery = async (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const query = e.target.value.trim();
+    if (query) {
+      const data = await getSearchedMovies(query);
+      setMovies(data.results);
+      setPageNum(data.page);
+      setTotalPageNum(data.total_pages);
+    }
+    setKeyword(query);
+    if (!query) setInit(true);
+  };
+
+  return (
+    <div>
+      <SearchBar
+        keyword={keyword}
+        setKeyword={setKeyword}
+        setInit={setInit}
+        handleOnChangeQuery={useDebounce(handleOnChangeQuery, 500)}
+      />
+      <h2 className="text-white text-[27px] ml-2.5 mt-5 mb-4 font-bold">
+        {keyword.length === 0 ? 'Polular' : 'Top Searches'}
+      </h2>
+      {movies.length || init ? (
+        <SearchResultList movies={movies} />
+      ) : (
+        <div className="text-white text-center mt-20 px-3 break-words">{`There are no movies that matched "${keyword}".
+        `}</div>
+      )}
+      <div className="" ref={ref}></div>
+    </div>
+  );
+};
+
+export default SearchPage;