feat: 퀵메뉴 코드 리뷰

src/app/(default)/main.tsx

@@ -3,63 +3,18 @@
 import React, { FormEvent, useCallback } from "react";
 import styles from "./main.module.css";
 import Image from "next/image";
-import { 
-  Banner,  
-  MenuSchool, 
-  MenuStudent ,
-  MenuSchedule,
-  MenuWorld,
-  MenuWelfare,
-  MenuFinance,
-  MenuEmploy,
-  MenuStudy,
-  MenuGraduate
-} from "../../../public/svgs";
+import { Banner } from "../../../public/svgs";
 import { SearchBox, QuickMenu, DataBoard } from "../../components";
 import { useIncreaseCount } from "../../hooks";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
+import {
+  QUICK_MENU,
+  SERVER_PARAMS_KEY,
+} from "../../constants/dataset-search-params";
 
 const DATA_COUNT = 2379;
 
-const QUICK_MENU = [
-  {
-    src: MenuSchool,
-    title: "입학",
-  },
-  {
-    src: MenuStudent,
-    title: "학생",
-  },
-  {
-    src: MenuSchedule,
-    title: "학사",
-  },
-  {
-    src: MenuWorld,
-    title: "국제",
-  },
-  {
-    src: MenuWelfare,
-    title: "복지",
-  },
-  {
-    src: MenuFinance,
-    title: "재정",
-  },
-  {
-    src: MenuEmploy,
-    title: "취창업",
-  },
-  {
-    src: MenuStudy,
-    title: "학술",
-  },
-  {
-    src: MenuGraduate,
-    title: "장학",
-  },
-];
-
 export default function Main({ populars, news }) {
   const dataCount = useIncreaseCount(DATA_COUNT);
 
@@ -71,7 +26,7 @@ export default function Main({ populars, news }) {
       event.preventDefault();
 
       if (keyword) {
-        router.push(`search-result?keyword=${keyword}`);
+        router.push(`search-result?${SERVER_PARAMS_KEY.KEYWORD}=${keyword}`);
         return;
       }
     },
@@ -118,7 +73,9 @@ export default function Main({ populars, news }) {
           {/* 퀵메뉴 */}
           <div className={styles.menuGrid}>
             {QUICK_MENU.map((menu) => (
-              <QuickMenu image={menu.src} title={menu.title} />
+              <Link href={`search-result?${SERVER_PARAMS_KEY.THEME}=${menu.title}`}>
+                <QuickMenu image={menu.src} title={menu.title} />
+              </Link>
             ))}
           </div>
         </div>
@@ -131,7 +88,7 @@ export default function Main({ populars, news }) {
           <DataBoard
             title="인기 데이터"
             dataList={populars}
-            url={`search-result?sort=스크랩순`}
+            url={`search-result?${SERVER_PARAMS_KEY.SORT}=스크랩순`}
           />
 
           {/* 신규데이터 */}

src/components/quick-menu/quick-menu.module.css

@@ -1,23 +1,23 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 
-    width: 100px;
-    height: 130px;
+  width: 6.25rem;
+  height: 8.125rem;
 }
 
 .image {
-    width: 70%;
-    height: auto;
+  width: 70%;
+  height: auto;
 }
 
 .title {
-    width: auto;
-    height: 25px;
+  width: auto;
+  height: 1.625rem;
 
-    font-size: 16px;
+  font-size: 1rem;
 
-    margin-top: 5px;
-}
+  margin-top: 5px;
+}

src/components/quick-menu/quick-menu.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import Image from "next/image";
+import styles from "./quick-menu.module.css";
+import { CSSProperties } from "react";
+
+interface Props {
+  image: string;
+  title: string;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export function QuickMenu({ image, title, className, style }: Props) {
+  return (
+    <div className={`${styles.container} ${className}`} style={style}>
+      <Image alt={`${title}`} className={styles.image} src={image} />
+      <h3 className={styles.title}>{title}</h3>
+    </div>
+  );
+}

src/constants/dataset-search-params.ts

@@ -1,15 +1,56 @@
-export const THEME_VALUES = [
-  "입학",
-  "학생",
-  "학사",
-  "국제",
-  "복지",
-  "재정",
-  "취창업",
-  "학술",
-  "장학",
+import {
+  MenuEmploy,
+  MenuFinance,
+  MenuGraduate,
+  MenuSchedule,
+  MenuSchool,
+  MenuStudent,
+  MenuStudy,
+  MenuWelfare,
+  MenuWorld,
+} from "../../public/svgs";
+
+export const QUICK_MENU = [
+  {
+    src: MenuSchool,
+    title: "입학",
+  },
+  {
+    src: MenuStudent,
+    title: "학생",
+  },
+  {
+    src: MenuSchedule,
+    title: "학사",
+  },
+  {
+    src: MenuWorld,
+    title: "국제",
+  },
+  {
+    src: MenuWelfare,
+    title: "복지",
+  },
+  {
+    src: MenuFinance,
+    title: "재정",
+  },
+  {
+    src: MenuEmploy,
+    title: "취창업",
+  },
+  {
+    src: MenuStudy,
+    title: "학술",
+  },
+  {
+    src: MenuGraduate,
+    title: "장학",
+  },
 ] as const;
 
+export const THEME_VALUES = QUICK_MENU.map((menu) => menu.title);
+
 export const ORGANIZATION_VALUES = [
   "소프트융합대학",
   "공과대학",