[6주차] Team Buldog 김다희 & 이지인 미션 제출합니다.

.github/workflows/main.yml

@@ -0,0 +1,34 @@
+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@v3  
+      - name: Install mustache (to update the date)
+        run: apk add ruby && gem install mustache
+         - name: Setup Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20.x'  # Ensuring compatibility with Node.js 20
+      - 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.DEPLOY_TOKEN }}
+        with:
+          source-directory: 'output'
+          destination-github-username: jinnyleeis
+          destination-repository-name: next-netflix-19th-deploy
+          user-email: ${{ secrets.OFFICIAL_ACCOUNT_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

next-netflix/.next/server/app-paths-manifest.json

@@ -0,0 +1 @@
+{}

next-netflix/.next/server/interception-route-rewrite-manifest.js

@@ -0,0 +1 @@
+self.__INTERCEPTION_ROUTE_REWRITE_MANIFEST="[]"

next-netflix/.next/server/middleware-manifest.json

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "middleware": {},
+  "functions": {},
+  "sortedMiddleware": []
+}

next-netflix/.next/server/pages-manifest.json

@@ -0,0 +1 @@
+{}

next-netflix/.next/server/server-reference-manifest.json

@@ -0,0 +1,5 @@
+{
+  "node": {},
+  "edge": {},
+  "encryptionKey": "qMpyjAhXxmdrHK1j19c0PV7I790xFLpFV8ADrmH4K6o="
+}

next-netflix/.next/types/package.json

@@ -0,0 +1 @@
+{"type": "module"}

src/.env

@@ -0,0 +1 @@
+TMDB_API_KEY=306b2f5b5d2eec206b28b7a4018fef5d

src/.eslintrc.json

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

src/.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

src/.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+  plugins: ['prettier-plugin-tailwindcss'],
+};

src/README.md

@@ -0,0 +1,36 @@
+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
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## 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.

src/app/api/route.ts

@@ -0,0 +1,32 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { fetchAllCategories } from '../utils/movieAPI';
+
+
+
+export async function GET(request: NextRequest) {
+  try {
+    const movies = await fetchAllCategories();
+    return new NextResponse(JSON.stringify(movies), {
+
+      status: 200,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching movies:', error);
+    return new NextResponse(
+      JSON.stringify({
+        message: `Failed to fetch data from TMDB.`,
+        error: (error as Error).message,
+      }),
+      {
+        status: 500,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      },
+    );
+  }
+}
+

src/app/commingSoon/page.tsx

@@ -0,0 +1,16 @@
+function CommingSoon() {
+  return (
+    <div>
+      <main>
+        <h1 className="mt-[300px]  flex justify-center text-[150px]">🎁</h1>
+        <h1 className=" mt-[5px] flex justify-center text-[40.92px] font-bold">
+          Comming Soon!
+        </h1>
+      </main>
+    </div>
+  );
+}
+
+export default CommingSoon;
+
+

src/app/components/Carousel.tsx

@@ -0,0 +1,52 @@
+'use client';
+import React from 'react';
+import Image from 'next/image';
+import { Movie } from '../types/movies';
+
+interface CarouselProps {
+  movies: Movie[];
+  currentMovieIndex: number;
+}
+
+function Carousel({ movies, currentMovieIndex }:  CarouselProps) {
+  return (
+    <div className="relative mb-[20px] h-[395px] w-[375px] ">
+    <div className="w-[375px] h-[415px] overflow-hidden relative">
+          {movies.length > 0 && (
+          <>
+          <Image
+            src={`https://image.tmdb.org/t/p/original${movies[currentMovieIndex].backdrop_path}`}
+            alt={movies[currentMovieIndex].title}
+            fill
+            sizes="100vw"
+            className="object-cover"
+          />
+         { /* 그라데이션 */}
+          <div
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: '40%',
+              backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent)',
+            }}
+          ></div>
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              height: '40%',
+              backgroundImage: 'linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent)',
+            }}
+          ></div>
+        </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;

src/app/components/Controller.tsx

@@ -0,0 +1,52 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+import Top10 from '../../public/icons/top10.svg';
+import Plus from '../../public/icons/plus.svg';
+import Info from '../../public/icons/info.svg';
+import Play from '../../public/icons/play.svg';
+import { Movie } from '../types/movies';
+
+interface ControllerProps {
+  movies: Movie[];
+  currentMovieIndex: number;
+}
+
+function Controller({ movies, currentMovieIndex }: ControllerProps) {
+  const [rank, setRank] = useState((currentMovieIndex % 10) + 1);
+
+  useEffect(() => {
+    setRank((currentMovieIndex % 10) + 1);
+  }, [currentMovieIndex]);
+
+  const currentMovie = movies[currentMovieIndex];
+
+  return (
+    <div className="mb-[43px] flex w-[375px] flex-col items-center">
+      <div className="mb-[11px] flex space-x-[5px]">
+        <Image src={Top10} alt="top10" width={15} height={15} />
+        {currentMovie && (
+          <span className="text-cont1 font-bold">
+            #{rank} {currentMovie.title}
+          </span>
+        )}
+      </div>
+      <div className="flex space-x-[42px]">
+        <button className="flex flex-col items-center">
+          <Image src={Plus} alt="plus" width={24} height={24} />
+          <span className="text-cont2 font-normal">My List</span>
+        </button>
+        <button className="flex h-11 w-28 cursor-pointer items-center justify-center gap-2.5 rounded-md border-none bg-[#C4C4C4]">
+          <Image src={Play} alt="play" width={18} height={21.6} />
+          <span className="text-play font-semibold text-[#000000]">Play</span>
+        </button>
+        <button className="flex flex-col items-center">
+          <Image src={Info} alt="info" width={24} height={24} />
+          <span className="text-cont2 font-normal">Info</span>
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Controller;

src/app/components/Header.tsx

@@ -0,0 +1,32 @@
+import Image from 'next/image';
+import logo from '../../public/icons/logos_netflix-icon.svg'
+
+function Header() {
+const Menu = ['Tv Shows' ,'Movies', 'My List']
+  return (
+    <div className='fixed top-[24px] flex justify-center items-center w-[375px] h-[57px] z-50'>
+        <div className='mr-[25px]'>
+            <Image
+            src = {logo}
+            alt='logo'
+            width={56.67}
+            height={57}
+            />
+        </div>
+        <div className='flex space-x-[25px]'>
+            {
+                Menu.map((menu) => {
+                    return(
+                        <span className='font-normal text-header'key={menu}>
+                            {menu}
+                        </span>
+                    )
+                }
+                )
+            }
+        </div>
+    </div>
+  )
+}
+
+export default Header

src/app/components/LandingLogo.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import Lottie from "react-lottie-player";
+import netflix from "../../public/icons/netflix-landing.json";
+
+const LandingLogo = () => {
+  const router = useRouter();
+  return (
+    <Lottie
+      animationData={netflix}
+      style={{ width: "60%" }}
+      play
+      loop={false}
+      onComplete={() => router.push("/main")}
+    />
+  );
+};
+
+export default LandingLogo;