코드 리팩토링

Author: soilSpoon

apps/front/src/containers/home/search/autocomplete.tsx

@@ -3,7 +3,7 @@ import { useAtomValue } from "jotai/utils";
 import Image from "next/image";
 import Link from "next/link";
 
-import { AutocompleteList } from "pages/api/autocomplete";
+import type { AutocompleteList } from "lib/autocomplete";
 
 import {
   isOpenAutocompleteAtom,

apps/front/src/containers/home/search/form.tsx

@@ -12,7 +12,7 @@ export default function Form() {
   return (
     <form
       onSubmit={() => router.push(`/search/${keyword}`)}
-      className="center flex-1 py-[2rem]"
+      className="center flex-1"
     >
       <Input />
       <button

apps/front/src/containers/home/search/hooks.ts

@@ -2,7 +2,7 @@ import { useAtom } from "jotai";
 import { useAtomCallback, useAtomValue, useUpdateAtom } from "jotai/utils";
 import { useCallback, useState } from "react";
 
-import { AutocompleteList } from "pages/api/autocomplete";
+import type { AutocompleteList } from "lib/autocomplete";
 
 import {
   autocompleteAtom,

apps/front/src/containers/home/search/input.tsx

@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { useDebounce } from "rooks";
 
-import { AutocompleteList } from "pages/api/autocomplete";
+import type { AutocompleteList } from "lib/autocomplete";
 import { Keys } from "utils/keyboard";
 
 import { useIsOpenAutocomplete, useSelectedIndex } from "./hooks";
@@ -77,7 +77,7 @@ export default function Input() {
       type="text"
       spellCheck="false"
       autoComplete="off"
-      className="flex-1 ml-[1rem] bg-transparent font-light text-almost-black"
+      className="flex-1 h-[9rem] pl-[2rem] py-[2rem] bg-transparent font-light text-almost-black"
       placeholder="소환사 검색"
       value={items[selectedIndex]?.name ?? keyword}
       onPaste={onPaste}

apps/front/src/containers/home/search/store.ts

@@ -2,7 +2,7 @@ import { atom } from "jotai";
 import { atomWithQuery } from "jotai/query";
 import ky from "ky-universal";
 
-import { AutocompleteList } from "pages/api/autocomplete";
+import type { AutocompleteList } from "lib/autocomplete";
 
 const initialData: AutocompleteList = [];
 

apps/front/src/lib/autocomplete.ts

@@ -0,0 +1,64 @@
+import ky from "ky";
+
+type OPGGAutocompleteResponse = {
+  sections: {
+    groups: {
+      type: string;
+      items: {
+        level: number;
+        name: string;
+        profileIconUrl: string;
+        tierRank: { tierRank: string; lp: number };
+      }[];
+    }[];
+  }[];
+};
+
+export type AutocompleteItem = {
+  level: number;
+  name: string;
+  profileIconUrl: string;
+  tierRank: string | null;
+  lp: number | null;
+  winningPercentate?: number;
+};
+
+export type AutocompleteList = AutocompleteItem[];
+
+export async function getAutoCompleteList(keyword: string) {
+  const { sections } = await ky(
+    `https://www.op.gg/ajax/autocomplete.json/keyword=${encodeURI(keyword)}`,
+    { searchParams: { api_key: process.env.RIOT_API_KEY as string } }
+  ).json<OPGGAutocompleteResponse>();
+
+  const data: AutocompleteList = sections
+    .map(({ groups }) =>
+      groups
+        .filter((group) => group.type === "SUMMONER")
+        .map(({ items }) =>
+          items
+            .filter(({ name }) => name.replaceAll(" ", "").length > 1)
+            .map(
+              ({
+                level,
+                name,
+                profileIconUrl,
+                tierRank: { tierRank, lp } = {
+                  tierRank: null,
+                  lp: null,
+                },
+              }) => ({
+                level,
+                name,
+                profileIconUrl,
+                tierRank,
+                lp,
+              })
+            )
+        )
+        .flat()
+    )
+    .flat();
+
+  return data;
+}

apps/front/src/pages/api/_middleware.ts

@@ -1,10 +1,10 @@
-import { NextRequest } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 
 import { IS_PRODUCTION, IS_USING_RATE_LIMIT } from "utils";
 import ipRateLimit from "utils/ip-rate-limit";
 
-export async function middleware(req: NextRequest) {
-  if (IS_PRODUCTION && IS_USING_RATE_LIMIT) {
-    return await ipRateLimit(req);
-  }
-}
+export const middleware = async (req: NextRequest) => {
+  return IS_PRODUCTION && IS_USING_RATE_LIMIT
+    ? await ipRateLimit(req)
+    : NextResponse.next();
+};

apps/front/src/pages/api/autocomplete/index.ts

@@ -1,63 +1,43 @@
-import ky from "ky-universal";
+import { type AutocompleteList, getAutoCompleteList } from "lib/autocomplete";
 import type { NextApiRequest, NextApiResponse } from "next";
-
-type OPGGAutocompleteResponse = {
-  sections: {
-    groups: {
-      type: string;
-      items: {
-        level: number;
-        name: string;
-        profileIconUrl: string;
-        tierRank: { tierRank: string; lp: number };
-      }[];
-    }[];
-  }[];
-};
-
-export type AutocompleteList = {
-  level: number;
-  name: string;
-  profileIconUrl: string;
-  tierRank: string | null;
-  lp: number | null;
-}[];
+import { prisma } from "utils/prisma";
 
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse<AutocompleteList>
 ) {
   const keyword = req.query.keyword as string;
 
-  const { sections } = await ky(
-    `https://www.op.gg/ajax/autocomplete.json/keyword=${encodeURI(keyword)}`
-  ).json<OPGGAutocompleteResponse>();
-  const data = sections
-    .map(({ groups }) =>
-      groups
-        .filter((group) => group.type === "SUMMONER")
-        .map(({ items }) =>
-          items.map(
-            ({
-              level,
-              name,
-              profileIconUrl,
-              tierRank: { tierRank, lp } = {
-                tierRank: null,
-                lp: null,
-              },
-            }) => ({
-              level,
-              name,
-              profileIconUrl,
-              tierRank,
-              lp,
-            })
-          )
-        )
-        .flat()
-    )
-    .flat();
-
-  res.status(200).json(data);
+  const data = await getAutoCompleteList(keyword);
+
+  if (data.length === 0) return;
+
+  const names = data.map(({ name }) => name);
+
+  const summoners = await prisma.summoner.findMany({
+    where: {
+      name: { in: names },
+      leagues: { some: { queueType: "RANKED_SOLO_5x5" } },
+    },
+    include: {
+      leagues: true,
+    },
+  });
+
+  const result: AutocompleteList = data.map((item) => {
+    const summoner = summoners.find((summoner) => summoner.name === item.name);
+
+    if (summoner !== undefined && summoner.leagues.length > 0) {
+      const { wins, losses } = summoner.leagues[0];
+      const total = wins + losses;
+      return {
+        ...item,
+        winningPercentage: ((wins / total) * 100).toFixed(2),
+      };
+    } else {
+      return item;
+    }
+  });
+
+  return res.json(result);
 }