[오현택 : NextJS] Good-Night-Hackathon-Frontend 제출

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=http://localhost:8080/api/v1

.gitignore

@@ -0,0 +1,5 @@
+.idea
+.next
+.vscode
+/node_modules
+```

README.md

@@ -29,6 +29,12 @@
 <br>
 
 ## 기능
+- [X] 영화 등록 페이지
+- [X] 영화 목록
+- [X] 영화 수정
+- [X] 영화 상세 정보
+  - [X] 리뷰 등록
+- [X] 어드민 페이지 (추가기능)
 
 ### 영화 등록 페이지
 > **영화 정보 입력**: 사용자는 영화 정보를 입력할 수 있습니다.

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -0,0 +1,19 @@
+/** @type {import('next').NextConfig} */
+
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+  basePath: "",
+  images: {
+    unoptimized: true,
+  },
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ["@svgr/webpack"],
+    });
+    return config;
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,91 @@
+{
+  "name": "goodnight",
+  "author": {
+    "email": "[email protected]",
+    "name": "Dylan Oh"
+  },
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "prebuild": "rimraf .next",
+    "build": "next build",
+    "preexport": "rimraf out",
+    "export": "next export",
+    "touch": "touch out/.nojekyll",
+    "posttouch": "touch out/_next/.nojekyll",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "eslint --fix ./src",
+    "format": "prettier --check --ignore-path .gitignore .",
+    "format:fix": "prettier --write --ignore-path .gitignore .",
+    "prepare": "husky install"
+  },
+  "dependencies": {
+    "@lottiefiles/react-lottie-player": "^3.5.2",
+    "@next/font": "13.1.1",
+    "@nextui-org/react": "^2.1.7",
+    "@tailwindcss/forms": "^0.5.5",
+    "@tailwindcss/ui": "^0.7.2",
+    "@toss/utils": "^1.3.1",
+    "@types/node": "18.11.18",
+    "@types/react": "18.0.26",
+    "@types/react-datepicker": "^4.15.0",
+    "@types/react-dom": "18.0.10",
+    "autoprefixer": "^10.4.13",
+    "axios": "^1.5.0",
+    "date-fns": "^2.29.3",
+    "framer-motion": "^10.16.1",
+    "husky": "^8.0.3",
+    "lodash": "^4.17.21",
+    "next": "^13.3.0",
+    "next-compose-plugins": "^2.2.1",
+    "next-images": "^1.8.4",
+    "postcss": "^8.4.21",
+    "react": "18.2.0",
+    "react-datepicker": "^4.16.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.45.4",
+    "react-query": "^3.39.3",
+    "react-toastify": "^9.1.1",
+    "rimraf": "^4.4.1",
+    "sb": "^6.5.16",
+    "tailwindcss": "^3.2.4",
+    "typescript": "4.9.4",
+    "util": "^0.12.5",
+    "zustand": "^4.4.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@svgr/webpack": "^6.5.1",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "babel-loader": "^8.3.0",
+    "eslint": "8.31.0",
+    "eslint-config-next": "13.1.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-simple-import-sort": "^8.0.0",
+    "eslint-plugin-unused-imports": "^2.0.0",
+    "prettier": "^2.6.2",
+    "prettier-plugin-tailwindcss": "^0.1.10"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "resolutions": {
+    "webpack": "^5"
+  },
+  "volta": {
+    "node": "16.14.2",
+    "npm": "8.5.5",
+    "yarn": "1.22.17"
+  }
+}

pages/404.tsx

@@ -0,0 +1,51 @@
+import { Controls, Player } from '@lottiefiles/react-lottie-player';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import Layout from '../src/layouts/Layout';
+
+function Error404() {
+  const router = useRouter();
+
+  return (
+    <section className='py-8 px-4 text-center'>
+      <div className='max-w-auto md:max-w-4xl mx-auto'>
+        <div className='flex flex-col items-center my-12 md:my-20'>
+          {/** asset 주소: https://lottiefiles.com/search?q=404&category=animations&animations-sort=popular */}
+          <Player
+            autoplay
+            loop
+            src='https://assets9.lottiefiles.com/packages/lf20_zyu0ctqb.json'
+            className='max-w-[500px]'
+          >
+            <Controls
+              visible={false}
+              buttons={['play', 'repeat', 'frame', 'debug']}
+            />
+          </Player>
+          <div className='font-bold text-3xl xl:text-7xl lg:text-6xl md:text-5xl'>
+            존재하지 않는 페이지입니다.
+          </div>
+          <div className='text-main-1 font-medium text-sm md:text-xl lg:text-2xl mt-8'>
+            The page you are looking for does not exist.
+          </div>
+          <button
+            type='button'
+            className='flex items-center rounded-lg bg-main-1 px-4 py-2 text-white mt-8'
+            onClick={() => router.replace('/')}
+          >
+            <span className='font-medium'>
+              Back To Homepage
+            </span>
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Error404;
+
+Error404.getLayout = function getLayout(page: React.ReactElement) {
+  return <Layout>{page}</Layout>;
+};

pages/_app.tsx

@@ -0,0 +1,38 @@
+import "tailwindcss/tailwind.css";
+import "../styles/globals.css";
+
+import { NextPage } from "next";
+import type { AppProps } from "next/app";
+import Head from "next/head";
+import { NextUIProvider } from "@nextui-org/react";
+import React, { ReactElement, ReactNode } from "react";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+type Page<P = Record<string, never>> = NextPage<P> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+type Props = AppProps<{ dehydratedState: unknown }> & {
+  Component: Page<{ dehydratedState: unknown }>;
+};
+
+function App({ Component, pageProps }: Props) {
+  const getLayout = Component.getLayout ?? ((page) => page);
+
+  const queryClient = new QueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <NextUIProvider>
+        <div className="flex min-h-screen flex-1 flex-col bg-white font-montserrat text-main-1 tablet:px-10">
+          <Head>
+            <title>테커 굿나잇 2nd 해커톤</title>
+          </Head>
+          {getLayout(<Component {...pageProps} />)}
+        </div>
+      </NextUIProvider>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

pages/_document.tsx

@@ -0,0 +1,25 @@
+import { Head, Html, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html lang='en'>
+      <Head>
+        <link
+          href='https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css'
+          rel='stylesheet'
+          type='text/css'
+        />
+        <link
+          href='https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap'
+          rel='stylesheet' />
+        <link
+          href='https://fonts.googleapis.com/css2?family=Tinos:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap'
+          rel='stylesheet' />
+      </Head>
+      <body id='app'>
+      <Main />
+      <NextScript />
+      </body>
+    </Html>
+  );
+}

pages/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Layout from "../src/layouts/Layout";
+import MovieListSection from "../src/components/Section/MovieListSection";
+
+function Home() {
+  return (
+    <>
+      <main className="mx-10 mt-10 flex flex-col justify-center">
+        <MovieListSection />
+      </main>
+    </>
+  );
+}
+
+export default Home;
+
+Home.getLayout = function getLayout(page: React.ReactElement) {
+  return <Layout>{page}</Layout>;
+};