code review hawnbinyoo

.eslintrc 2.json

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

.eslintrc.json

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

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+.env
+
+# 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

next-env.d 2.ts

@@ -0,0 +1,7 @@
+/// <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.
+
+export {};

next.config.js

@@ -0,0 +1,47 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "www.notion.so",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "s3.us-west-2.amazonaws.com",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "w.namu.la",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "i.namu.wiki",
+        pathname: "**",
+      },
+      {
+        protocol: "https",
+        hostname: "prod-files-secure.s3.us-west-2.amazonaws.com",
+        pathname: "**",
+      },
+    ],
+  },
+  format: ["image/png", "images/webp", "image/jpeg"],
+  reactStrictMode: true,
+  plugins: {
+    autoprefixer: {},
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+};
+
+module.exports = nextConfig;

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "q",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/css": "^11.11.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "axios": "^1.6.1",
+    "emotion": "^11.0.0",
+    "hoist-non-react-statics": "^3.3.2",
+    "next": "^14.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-youtube": "^10.1.0",
+    "recoil": "^0.7.7",
+    "sharp": "^0.32.6"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.2",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  },
+  "resolutions": {
+    "react-countup/countup.js": "2.5.0"
+  }
+}

src/api/list.ts

@@ -0,0 +1,97 @@
+import CustomAxios from "@/utils/lib/CustomAxios";
+
+export const getAllList = async () => {
+  let objectArray: object[] = [];
+  objectArray.push({
+    property: "Tag",
+    select: {
+      equals: "",
+    },
+  });
+  try {
+    const { data } = await CustomAxios.post("", {
+      filter: {
+        and: objectArray,
+      },
+    });
+    const list = data.results;
+
+    return list;
+  } catch (e) {
+    console.log(e);
+    return {};
+  }
+};
+
+export const getFilterList = async (names: string) => {
+  const ArrayNames = names.split(" ");
+  let objectArray: object[] = [];
+  ArrayNames.map((i) => {
+    if (i === "영화" || i === "드라마") {
+      objectArray.push({
+        property: "Tag",
+        select: {
+          equals: i,
+        },
+      });
+    } else {
+      objectArray.push({
+        property: "Category",
+        multi_select: {
+          contains: i,
+        },
+      });
+    }
+  });
+
+  try {
+    const { data } = await CustomAxios.post("", {
+      filter: {
+        and: objectArray,
+      },
+    });
+    const list = data.results;
+
+    return list;
+  } catch (e) {
+    console.log(e);
+    return {};
+  }
+};
+
+export const getSerchList = async (name: string) => {
+  try {
+    const { data } = await CustomAxios.post("", {
+      filter: {
+        property: "Name",
+        title: {
+          contains: name,
+        },
+      },
+    });
+    const list = data.results;
+
+    return list;
+  } catch (e) {
+    console.log(e);
+    return {};
+  }
+};
+
+export const getDetailData = async (name: string) => {
+  try {
+    const { data } = await CustomAxios.post("", {
+      filter: {
+        property: "Name",
+        title: {
+          equals: name,
+        },
+      },
+    });
+    const detailData = data.results[0];
+    return detailData;
+  } catch (e) {
+    console.log(e);
+    return;
+  }
+};

src/app/(home)/page.tsx

@@ -0,0 +1,19 @@
+import { getAllList } from "@/api/list";
+import Home from "@/components/Home";
+import { listProps } from "@/types";
+import { legnthRn } from "@/utils/lengthRn";
+
+export default async function HomePage() {
+  const list: listProps[] = await getAllList();
+  const rn = legnthRn(list);
+
+  return (
+    <Home
+      list={list}
+      coverImgUrl={
+        list[rn]?.cover?.external?.url ?? list[rn]?.cover?.file?.url ?? ""
+      }
+      coverImgTitle={list[rn]?.properties.Name.title[0].text.content}
+    />
+  );
+}

src/app/detail/[name]/page.tsx

@@ -0,0 +1,25 @@
+import HomeDetail from "@/components/HomeDetail";
+import { Props } from "@/types/common";
+import { decodeParams } from "@/utils/decodeParams";
+import { Metadata } from "next";
+import { getDetailData } from "@/api/list";
+
+export const metadata: Metadata = {
+  title: "Detail",
+};
+
+export const DetailPage = async ({ params: { name } }: Props) => {
+  const detailData = await getDetailData(decodeParams(name));
+  return <HomeDetail data={detailData} />;
+};
+
+// 베포하면 notion img 유효기간때문에 정적인 데이터를 받아오면 유효기간끝나고 에러뜸
+// export async function generateStaticParams() {
+//   const { data } = await CustomAxios.post("");
+//   const list: listProps[] = data.results;
+//   return list.map((i) => ({
+//     name: i.properties.Name.title[0].text.content,
+//   }));
+// }
+
+export default DetailPage;

src/app/filter/[name]/page.tsx

@@ -0,0 +1,28 @@
+import Home from "@/components/Home";
+import { listProps } from "@/types";
+import { Props } from "@/types/common";
+import { decodeParams } from "@/utils/decodeParams";
+import { Metadata } from "next";
+import { legnthRn } from "@/utils/lengthRn";
+import { getFilterList } from "@/api/list";
+
+export const metadata: Metadata = {
+  title: "Filter",
+};
+
+export const FilterPage = async ({ params: { name } }: Props) => {
+  const list: listProps[] = await getFilterList(decodeParams(name));
+  const rn = legnthRn(list);
+
+  return (
+    <Home
+      list={list}
+      coverImgUrl={
+        list[rn]?.cover?.external?.url ?? list[rn]?.cover?.file?.url ?? ""
+      }
+      coverImgTitle={list[rn]?.properties.Name.title[0].text.content}
+    />
+  );
+};
+
+export default FilterPage;