chore(deps): bump glob and eslint-config-next

.github/workflows/ci.yml

@@ -28,10 +28,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      # Next.js 빌드
-      - name: Build Next.js app
-        run: npm run build
-
       # Lint 검사
       - name: Run lint
         run: npm run lint
+
+      # Next.js 빌드
+      - name: Build Next.js app
+        run: npm run build

components/dialogs/QRCodeDialog.tsx

@@ -54,6 +54,7 @@ export default function QRCodeDialog(props: {
   }
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setIsLoading(true);
 
     QRCode.toDataURL(props.pk, (error, url) => {

components/forms/RegistrationForm.tsx

@@ -20,7 +20,7 @@ export default function RegistrationForm() {
       id: "",
       password: "",
       sex: 0,
-      birthday: new Date(Date.now()).toISOString().split("T")[0],
+      birthday: new Date().toISOString().split("T")[0],
       contact: "",
     },
   });

components/selectors/ThemeSelector.tsx

@@ -1,13 +1,14 @@
 import { CircleHelp, MonitorCog, Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
-import { useEffect, useMemo, useState } from "react";
+import { useMemo } from "react";
 import Select from "@/components/selectors/Select";
+import useIsClient from "@/hooks/useIsClient";
 import { THEME_OPTIONS } from "@/constants/options";
 
 export default function ThemeSelector() {
   const { theme, setTheme } = useTheme();
 
-  const [isClient, setIsClient] = useState(false);
+  const isClient = useIsClient();
 
   const IconComponent = useMemo(() => {
     if (theme === "light") {
@@ -20,10 +21,6 @@ export default function ThemeSelector() {
     return CircleHelp;
   }, [theme]);
 
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
   return (
     <Select
       className="w-full"

eslint.config.mjs

@@ -0,0 +1,106 @@
+import pluginQuery from "@tanstack/eslint-plugin-query";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+import importPlugin from "eslint-plugin-import";
+import noRelativeImportPaths from "eslint-plugin-no-relative-import-paths";
+
+export default defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  ...pluginQuery.configs["flat/recommended"],
+  globalIgnores([".next/**", "out/**", "build/**", "next-env.d.ts"]),
+  {
+    plugins: {
+      import: importPlugin,
+      "@typescript-eslint": typescriptEslint,
+      "no-relative-import-paths": noRelativeImportPaths,
+    },
+
+    rules: {
+      "no-relative-import-paths/no-relative-import-paths": [
+        "error",
+        {
+          allowSameFolder: false,
+          rootDir: "",
+          prefix: "@",
+        },
+      ],
+
+      "import/order": [
+        "error",
+        {
+          groups: [["builtin", "external"], "internal", "type"],
+
+          pathGroups: [
+            {
+              pattern: "next",
+              group: "external",
+              position: "after",
+            },
+            {
+              pattern: "next/**",
+              group: "external",
+              position: "after",
+            },
+            {
+              pattern: "@/components",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/components/**",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/hooks",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/hooks/**",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/utils",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/utils/**",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/schema",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/schema/**",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/constants",
+              group: "internal",
+              position: "after",
+            },
+            {
+              pattern: "@/constants/**",
+              group: "internal",
+              position: "after",
+            },
+          ],
+
+          alphabetize: {
+            order: "asc",
+          },
+        },
+      ],
+    },
+  },
+]);

hooks/useCalendarQueryOptions.ts

@@ -48,6 +48,7 @@ export default function useCalendarQueryOptions<T>(option: {
   });
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setQuery({
       year: queryParams?.year ?? localQueryOption?.year ?? option.initYear,
       month: queryParams?.month ?? localQueryOption?.month ?? option.initMonth,

hooks/useIsClient.ts

@@ -0,0 +1,12 @@
+import { useState, useEffect } from "react";
+
+export default function useIsClient(): boolean {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setIsClient(true);
+  }, []);
+
+  return isClient;
+}

hooks/useListQueryOptions.ts

@@ -72,6 +72,7 @@ export default function useListQueryOptions<T>(option: API.InitListQueryOptions<
   });
 
   useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
     setQuery({
       page: queryParams?.page ?? option.initPage ?? 1,
       limit:

hooks/useMediaQuery.ts

@@ -1,17 +1,19 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 
 export function useMediaQuery(query: string): boolean {
+  const media = useMemo(() => window.matchMedia(query), [query]);
   const [matches, setMatches] = useState<boolean>(false);
 
-  useEffect(() => {
-    const media = window.matchMedia(query);
+  const listener = useCallback(() => {
     if (media.matches !== matches) {
       setMatches(media.matches);
     }
-    const listener = () => setMatches(media.matches);
+  }, [media, matches]);
+
+  useEffect(() => {
     media.addEventListener("change", listener);
     return () => media.removeEventListener("change", listener);
-  }, [query, matches]);
+  }, [media, listener]);
 
   return matches;
 }