[6주차] azito 조유담 & 이나현 미션 제출합니다.

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  // 어떤 규칙들과 설정으로 eslint를 사용할지 명시
+  "extends": [
+    "next",
+    "prettier",
+    "eslint:recommended",
+    "plugin:react/recommended", //ESLint의 내장되어있는 추천 설정을 사용
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended" //  타입스크립트 전용 규칙을 추가적으로 사용할 수 있음
+  ],
+  "parser": "@typescript-eslint/parser", // 타입스크립트용 eslint parser
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/react-in-jsx-scope": "off", // JSX를 사용할 때 React가 일일이 import되지 않으면 에러(리액트 17 이후부터는 안해줘도 됨)-> off
+    "no-unused-vars": "off", // 사용하지 않는 변수가 있을 때 에러 -> off
+    "@typescript-eslint/no-unused-vars": "warn"
+    // "react/prop-types": "warn" // prop의 타입을 정의해주지 않으면 에러 -> warn
+    // "@typescript-eslint/no-explicit-any": "warn"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.github/ISSUE_TEMPLATE/feature.yml

@@ -0,0 +1,19 @@
+name: '💡 Feat'
+description: '새로운 기능 추가 템플릿'
+title: '[Feat] '
+labels: 'feat'
+body:
+  - type: textarea
+    attributes:
+      label: 📝 설명
+      description: 새로운 기능에 대해 설명해주세요.
+      placeholder: 기능에 대해서 적어주세요.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: ✅ 체크사항
+      description: 주어진 기능에 대해서 체크박스를 만들어주세요.
+      placeholder: 기능에 대해서 나열해주세요.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/fix.yml

@@ -0,0 +1,18 @@
+name: "🛠️ Fix"
+description: "Fix 템플릿"
+title: "[Fix] "
+labels: "fix"
+body:
+  - type: textarea
+    attributes:
+      label: 🐞 버그 설명
+      description: 버그에 대한 설명을 작성해 주세요.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: 🧾 로그
+      description: 로그가 있으면 복붙해 주세요.
+      render: shell
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/refactor.yml

@@ -0,0 +1,17 @@
+name: "♻️ Refactor"
+description: "리팩토링 템플릿"
+title: "[Refactor] "
+labels: "refactor"
+body:
+  - type: textarea
+    attributes:
+      label: ❓ 이유
+      description: 리팩토링을 진행한 이유를 설명해주세요.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: ✅ 수정
+      description: 수정한 부분을 적어주세요.
+    validations:
+      required: true

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,14 @@
+## 🕹️ 작업 내용
+
+- [ ]
+- [ ]
+
+## 📋 리뷰 포인트
+
+-
+-
+
+## 🔮 기타 사항
+
+-
+-

.github/auto_assign.yml

@@ -0,0 +1,2 @@
+addReviewers: false
+addAssignees: author

.github/workflows/deploy.yml

@@ -0,0 +1,34 @@
+name: Deploy
+
+on:
+  push:
+    branches: ['main']
+
+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@main
+        env:
+          API_TOKEN_GITHUB: ${{ secrets.AUTO_ACTIONS }}
+        with:
+          source-directory: 'output'
+          destination-github-username: CSE-pebble
+          destination-repository-name: next-netflix-19th
+          user-email: ${{ secrets.EMAIL }}
+          commit-message: ${{ github.event.commits[0].message }}
+          target-branch: main
+
+      - 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

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+echo "Azito FrontEnd 화이팅! (*ૂ❛ᴗ❛*ૂ)"

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "semi": true,
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

README.md

@@ -1,50 +1,36 @@
-# 5주차 미션: Next-Netflix
+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:
 
-이번주부터는 새 프로젝트인 **Netflix 클론코딩**을 진행합니다. 이번 미션은 Next.js를 사용해 보며 SSR을 학습하고 Figma로 주어지는 디자인을 활용해 스타일링 하는 방법을 이해하는 것을 목표로 합니다.
+```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.
 
-- Next.js 사용법을 공부해봅니다.
-- Figma로 주어지는 디자인으로 스타일링 하는 방식에 익숙해집니다.
-- Git을 이용한 협업 방식에 익숙해집니다.
+## Learn More
 
-### 기한
+To learn more about Next.js, take a look at the following resources:
 
-- 2024년 5월 10일 (기한 엄수)
+- [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!
 
-- [결과화면](https://next-netflix-18th-2.vercel.app/home)의 랜딩 페이지와 메인 페이지를 구현합니다.
-- [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를 세팅해 봅니다.
+## 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.
 
-- SSR(Server Side Rendering)을 적용해서 구현합니다.
-- 웹 폰트를 사용합니다.
-- 반응형을 고려합니다.
-
-## **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)
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

build.sh

@@ -0,0 +1,5 @@
+#!/bin/sh
+cd ../
+mkdir output
+cp -R ./next-netflix-19th/* ./output
+cp -R ./output ./next-netflix-19th/

next.config.mjs

@@ -0,0 +1,25 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+
+    return config;
+  },
+  images: {
+    formats: ["image/avif", "image/webp"],
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "image.tmdb.org",
+        port: "",
+        pathname: "/t/p/**/*",
+      },
+    ],
+  },
+};
+
+export default nextConfig;