Develop

eslint.config.mjs

@@ -1,25 +1,9 @@
-// /eslint.config.mjs
-import globals from "globals";
 import pluginJs from "@eslint/js";
 import tseslint from "typescript-eslint";
-import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
-import nextPlugin from "@next/eslint-plugin-next";
 
-export default [
+export const sharedConfig = [
   {
-    rules: {
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          argsIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
-          caughtErrorsIgnorePattern: "^_",
-        },
-      ],
-    },
-  },
-  {
-    // 전체 프로젝트에 적용될 기본 설정
+    // 공통 무시 파일들
     ignores: [
       "**/node_modules/**",
       "**/dist/**",
@@ -30,45 +14,20 @@ export default [
       "packages/front/next-env.d.ts",
     ],
   },
-  // JavaScript 파일 기본 규칙
   pluginJs.configs.recommended,
-  // TypeScript 파일 기본 규칙
   ...tseslint.configs.recommended,
-
-  // React/Next.js (front) 패키지 설정
   {
-    files: ["packages/front/**/*.{js,jsx,ts,tsx}"],
-    ...pluginReactConfig,
-    plugins: {
-      "@next/next": nextPlugin,
-    },
     rules: {
-      ...nextPlugin.configs.recommended.rules,
-      ...nextPlugin.configs["core-web-vitals"].rules,
-      "react/react-in-jsx-scope": "off",
-    },
-    settings: {
-      next: {
-        rootDir: "packages/front/",
-      },
-      react: {
-        version: "detect",
-      },
-    },
-    languageOptions: {
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
-    },
-  },
-  // Node.js (back) 패키지 설정
-  {
-    files: ["packages/back/**/*.{js,ts}"],
-    languageOptions: {
-      globals: {
-        ...globals.node,
-      },
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
     },
   },
 ];
+
+export default sharedConfig;

packages/back/eslint.config.mjs

@@ -1,35 +1,14 @@
-// @ts-check
-import eslint from '@eslint/js';
-import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import { sharedConfig } from '../../eslint.config.mjs';
 import globals from 'globals';
-import tseslint from 'typescript-eslint';
 
-export default tseslint.config(
-  {
-    ignores: ['eslint.config.mjs'],
-  },
-  eslint.configs.recommended,
-  ...tseslint.configs.recommendedTypeChecked,
-  eslintPluginPrettierRecommended,
+export default [
+  ...sharedConfig,
+
   {
     languageOptions: {
       globals: {
         ...globals.node,
-        ...globals.jest,
-      },
-      sourceType: 'commonjs',
-      parserOptions: {
-        projectService: true,
-        tsconfigRootDir: import.meta.dirname,
       },
     },
   },
-  {
-    rules: {
-      '@typescript-eslint/no-explicit-any': 'off',
-      '@typescript-eslint/no-floating-promises': 'warn',
-      '@typescript-eslint/no-unsafe-argument': 'warn',
-      "prettier/prettier": ["error", { endOfLine: "auto" }],
-    },
-  },
-);
+];

packages/back/src/chat/chat.gateway.ts

@@ -164,7 +164,6 @@ export class ChatGateway {
 
   async handleDisconnect(@ConnectedSocket() socket: Socket) {
     const roomId = socket.data.roomId;
-    console.log(socket.data.user);
     if (roomId) {
       await this.chatService.removeActiveUser(Number(roomId), socket.id);
 

packages/front/eslint.config.mjs

@@ -0,0 +1,36 @@
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+import nextPlugin from "@next/eslint-plugin-next";
+import globals from "globals";
+import { sharedConfig } from "../../eslint.config.mjs";
+import suspensePlugin from "eslint-plugin-react-suspense-check";
+
+export default [
+  ...sharedConfig,
+  suspensePlugin.configs.recommended,
+  {
+    ...pluginReactConfig,
+    plugins: {
+      "@next/next": nextPlugin,
+    },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs["core-web-vitals"].rules,
+      "react/react-in-jsx-scope": "off",
+      "react-suspense-check/detect-suspense-hook": ["warn", { language: "kr" }],
+    },
+    settings: {
+      next: {
+        rootDir: ".",
+      },
+      react: {
+        version: "detect",
+      },
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+];

packages/front/package.json

@@ -31,6 +31,7 @@
     "@types/react-dom": "^19",
     "eslint": "^9",
     "eslint-config-next": "15.5.2",
+    "eslint-plugin-react-suspense-check": "^1.0.2",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

packages/front/src/app/_hooks/index.ts

@@ -1,4 +1,4 @@
-export { useAuth } from "./useAuth";
+export { useSuspenseAuth } from "./useSuspenseAuth";
 export { useLocalStorage } from "./useLocalStorage";
 export { useSession } from "./useSession";
 export { useUnmount } from "./useUnmount";

packages/front/src/app/_hooks/useAuth.ts → packages/front/src/app/_hooks/useSuspenseAuth.ts

@@ -1,7 +1,7 @@
 import { userQueries } from "@/app/_queries";
 import { useSuspenseQuery } from "@tanstack/react-query";
 
-export const useAuth = () => {
+export const useSuspenseAuth = () => {
   const userQueryOption = userQueries.me();
   const { data: user } = useSuspenseQuery(userQueryOption);
 

packages/front/src/app/chat-rooms/_components/ChatHeader.tsx

@@ -2,11 +2,14 @@
 
 import { Suspense } from "react";
 import Image from "next/image";
-import { ChatRoomTab, HeaderProfileMenu } from "@/app/chat-rooms/_components";
+import {
+  ChatRoomTab,
+  SuspenseHeaderProfileMenu,
+} from "@/app/chat-rooms/_components";
 
 export default function ChatHeader() {
   return (
-    <header className="flex flex-col items-center w-full bg-gray-50 justify-center">
+    <header className="flex flex-col items-center w-full bg-gray-50 justify-center dark:bg-gray-800">
       <div className="w-full flex justify-between mt-5 px-5 lg:px-15">
         <Image src="/logo.webp" alt="로고" width={60} height={60} />
         <div className="justify-end ">
@@ -15,7 +18,7 @@ export default function ChatHeader() {
               <div className="w-10 h-10 rounded-full bg-gray-300 animate-pulse" />
             }
           >
-            <HeaderProfileMenu />
+            <SuspenseHeaderProfileMenu />
           </Suspense>
         </div>
       </div>

packages/front/src/app/chat-rooms/_components/ChatRoomCard.tsx

@@ -9,7 +9,7 @@ export default function ChatRoomCard({ id, persona }: ChatRoom) {
       <Link href={`/chat/${id}`} passHref>
         <div
           className="p-4 rounded-xl shadow-lg transition duration-300
-                      bg-white dark:bg-gray-800
+                      bg-white dark:bg-gray-700
                       hover:ring-2 hover:ring-indigo-500 dark:hover:ring-indigo-400
                       flex items-center cursor-pointer"
         >

packages/front/src/app/chat-rooms/_components/ChatRoomTab.tsx

@@ -23,13 +23,13 @@ export default function ChatRoomTab() {
   };
 
   return (
-    <div className="min-w-full px-4 bg-gray-100 p-1.5 rounded-full flex items-center relative lg:min-w-lg">
+    <div className="min-w-full px-4 bg-gray-100 p-1.5 rounded-full flex items-center relative lg:min-w-lg mb-5 dark:bg-gray-700">
       <button
         onClick={() => handleTabChange("private")}
         className={`flex-1 flex cursor-pointer items-center justify-center gap-2 py-2.5 rounded-full text-sm font-bold transition-all duration-200 ${
           currentTab === "private"
-            ? "bg-white text-[#584BF2] shadow-sm"
-            : "text-gray-500 hover:text-gray-700 hover:bg-gray-300"
+            ? "bg-white text-[#584BF2] shadow-sm dark:bg-gray-400"
+            : "text-gray-500 hover:text-gray-700 hover:bg-gray-300 dark:hover:bg-gray-500"
         }`}
       >
         <FiMessageSquare size={18} />
@@ -40,8 +40,8 @@ export default function ChatRoomTab() {
         onClick={() => handleTabChange("public")}
         className={`flex-1 flex items-center cursor-pointer justify-center gap-2 py-2.5 rounded-full text-sm font-bold transition-all duration-200 ${
           currentTab === "public"
-            ? "bg-white text-[#584BF2] shadow-sm"
-            : "text-gray-500 hover:text-gray-700 hover:bg-gray-300"
+            ? "bg-white text-[#584BF2] shadow-sm dark:bg-gray-400"
+            : "text-gray-500 hover:text-gray-700 hover:bg-gray-300 dark:hover:bg-gray-500"
         }`}
       >
         <FiUsers size={18} />

packages/front/src/app/chat-rooms/_components/PublicChatRoomCard.tsx

@@ -6,7 +6,7 @@ import Image from "next/image";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { chatRoomQueries } from "@/app/_queries";
 
-export default function PublicChatRoomCard({ id, persona }: ChatRoom) {
+export default function SuspensePublicChatRoomCard({ id, persona }: ChatRoom) {
   const { data: active } = useSuspenseQuery(chatRoomQueries.active(id));
   return (
     <li>