[Refactor] 프로젝트 구조, 코드 품질 및 인증 시스템 개선 (FSD, SonarQube, Socket.IO)

apps/chat/src/auth/jwt-auth.guard.ts

@@ -8,10 +8,11 @@ import { ErrorStatus } from 'src/common/responses/exceptions/errorStatus';
 export class JWTAuthGuard extends AuthGuard('jwt') {
   getRequest(context: ExecutionContext) {
     const client = context.switchToWs().getClient<Socket>();
+    const authorization = client.handshake.auth.accessToken || client.handshake.headers.accesstoken;
 
     return {
       headers: {
-        authorization: client.handshake.auth.accessToken,
+        authorization,
       },
     };
   }

apps/client/.eslintignore

@@ -0,0 +1,9 @@
+# shadcn/ui 컴포넌트 폴더 무시
+src/shared/ui/shadcn/*
+
+# node_modules는 기본적으로 무시되지만, 명시적으로 추가할 수도 있습니다
+node_modules/
+
+# 다른 무시하고 싶은 파일/폴더들
+dist/
+build/

apps/client/.eslintrc

@@ -1,35 +1,45 @@
 {
   "parser": "@typescript-eslint/parser",
+
   "parserOptions": {
-    "project": ["./apps/client/tsconfig.json"],
+    "project": ["./tsconfig.json"],
     "ecmaVersion": 12,
     "sourceType": "module",
     "ecmaFeatures": {
       "jsx": true
     }
   },
+
   "env": {
     "browser": true,
     "es2021": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:react-hooks/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
+
+  "extends": ["airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "prettier"],
+
   "settings": {
     "react": {
       "version": "detect"
     }
   },
+
   "plugins": ["prettier"],
+
   "rules": {
+    // React 관련 규칙
     "react/react-in-jsx-scope": "off",
     "react/no-unescaped-entities": "off",
     "react/prop-types": "off",
-    "react-hooks/exhaustive-deps": "warn",
+    "react/jsx-filename-extension": [
+      "warn",
+      {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    ],
+    "react/require-default-props": "off",
+    "react/jsx-props-no-spreading": "off",
+
+    // TypeScript 관련 규칙
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-unused-vars": [
       "error",
@@ -38,6 +48,23 @@
         "varsIgnorePattern": "^_", // _ 로 시작하는 변수는 무시
         "ignoreRestSiblings": true
       }
+    ],
+
+    // Import/Export 관련 규칙
+    "import/no-unresolved": "off",
+    "import/extensions": ["off"],
+    "import/prefer-default-export": "off",
+    "no-restricted-exports": "warn",
+
+    // 접근성 관련 규칙
+    "jsx-a11y/media-has-caption": "off",
+
+    // 기타 규칙
+    "no-param-reassign": [
+      "warn",
+      {
+        "props": false
+      }
     ]
   }
 }

apps/client/.gitignore

@@ -22,3 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Sonar
+.sonar/
+.scannerwork/

apps/client/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "sonar": "sonar-scanner"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.1",
@@ -33,17 +34,25 @@
     "@types/node": "^20.3.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "autoprefixer": "^10.4.20",
     "eslint": "*",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "*",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "*",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "postcss": "^8.4.47",
     "prettier": "*",
+    "sonarqube-scanner": "^4.2.6",
     "tailwindcss": "^3.4.14",
+    "typescript": "*",
     "vite": "^5.4.10"
   }
 }

apps/client/sonar-project.properties

@@ -0,0 +1,3 @@
+sonar.projectKey=CamOn
+sonar.sources=.
+sonar.host.url=http://localhost:9000

apps/client/src/app/layouts/Layout.tsx

@@ -0,0 +1,18 @@
+import { Outlet } from 'react-router-dom';
+import { Toaster } from '@/shared/ui/shadcn/toaster';
+import { Header } from '@/widgets';
+import { FloatingButton } from '@/shared/ui';
+import { Providers } from '../providers';
+
+export function Layout() {
+  return (
+    <Providers>
+      <Header />
+      <main className="pt-[74px] h-full">
+        <Outlet />
+      </main>
+      <Toaster />
+      <FloatingButton />
+    </Providers>
+  );
+}

apps/client/src/app/layouts/index.ts

@@ -0,0 +1 @@
+export { Layout } from './Layout';

apps/client/src/app/providers/AuthProvider.tsx

@@ -0,0 +1,9 @@
+import { useMemo, useState } from 'react';
+import { AuthContext } from '@/shared/contexts';
+import { ProviderProps } from './types';
+
+export function AuthProvider({ children }: ProviderProps) {
+  const [isLoggedIn, setIsLoggedIn] = useState(() => !!localStorage.getItem('accessToken'));
+  const value = useMemo(() => ({ isLoggedIn, setIsLoggedIn }), [isLoggedIn, setIsLoggedIn]);
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

apps/client/src/app/providers/Providers.tsx

@@ -0,0 +1,11 @@
+import { ThemeProvider } from '@/app/providers/ThemeProvider';
+import { AuthProvider } from '@/app/providers/AuthProvider';
+import { ProviderProps } from './types';
+
+export function Providers({ children }: ProviderProps) {
+  return (
+    <AuthProvider>
+      <ThemeProvider>{children}</ThemeProvider>
+    </AuthProvider>
+  );
+}

apps/client/src/app/providers/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+import { useMemo, useState } from 'react';
+import { ThemeContext } from '@/shared/contexts';
+import { ProviderProps } from './types';
+
+type Theme = 'light' | 'dark' | null;
+
+export function ThemeProvider({ children }: ProviderProps) {
+  const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem('theme') as Theme) ?? null);
+  const value = useMemo(() => ({ theme, setTheme }), [theme, setTheme]);
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
+}

apps/client/src/app/providers/index.ts

@@ -0,0 +1 @@
+export { Providers } from './Providers';

apps/client/src/app/providers/types.ts

@@ -0,0 +1 @@
+export type ProviderProps = Readonly<{ children: React.ReactNode }>;

apps/client/src/ProtectedRoute.tsx → apps/client/src/app/routes/ProtectedRoute.tsx

@@ -1,6 +1,6 @@
 import { useContext } from 'react';
-import { AuthContext } from '@contexts/AuthContext';
 import { Navigate, Outlet } from 'react-router-dom';
+import { AuthContext } from '@/features/auth/model/AuthContext';
 
 function ProtectedRoute() {
   const { isLoggedIn } = useContext(AuthContext);

apps/client/src/app/routes/config/index.ts

@@ -0,0 +1 @@
+export { routerOptions } from './options';

apps/client/src/app/routes/config/options.ts

@@ -0,0 +1,10 @@
+export const routerOptions = {
+  future: {
+    v7_startTransition: true,
+    v7_relativeSplatPath: true,
+    v7_fetcherPersist: true,
+    v7_normalizeFormMethod: true,
+    v7_partialHydration: true,
+    v7_skipActionErrorRevalidation: true,
+  },
+};

apps/client/src/app/routes/index.ts

@@ -0,0 +1 @@
+export { router } from './router';