Merge pull request #22 from TEAM-COMFIT/init/#17/api-initial-setting

[Init] swagger-typescript-api 및 axios 초기 세팅

Author: odukong

.prettierignore

@@ -37,4 +37,9 @@ package-lock.json
 # OS
 .DS_Store
 Thumbs.db 
+
+# swagger-typescript-api templates
+src/shared/api/generate/templates/**
+*.ejs
+
 README.md

eslint.config.js

@@ -12,7 +12,16 @@ import eslintConfigPrettier from "eslint-config-prettier";
 import react from "eslint-plugin-react";
 
 export default defineConfig([
-  { ignores: ["dist", "node_modules", "build", "*.config.js", "*.config.ts"] },
+  {
+    ignores: [
+      "dist",
+      "node_modules",
+      "build",
+      "*.config.js",
+      "*.config.ts",
+      "**/*.ejs",
+    ],
+  },
 
   importPlugin.flatConfigs.recommended,
   importPlugin.flatConfigs.typescript,

package.json

@@ -10,7 +10,8 @@
     "preview": "vite preview",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "gen:swagger-ts-api": "dotenv -f .env cross-var -- swagger-typescript-api generate -p %SWAGGER_URL% -o ./src/shared/api/generate -n http-client.ts --extract-request-body --extract-response-body --axios -t ./src/shared/api/generate/templates --module-name-index 2"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [
@@ -22,6 +23,7 @@
     ]
   },
   "dependencies": {
+    "axios": "^1.13.2",
     "@tanstack/react-query": "^5.90.16",
     "@vanilla-extract/css": "^1.18.0",
     "@vanilla-extract/vite-plugin": "^5.1.4",
@@ -44,6 +46,8 @@
     "@typescript-eslint/eslint-plugin": "^8.51.0",
     "@typescript-eslint/parser": "^8.51.0",
     "@vitejs/plugin-react-swc": "^4.2.2",
+    "cross-var": "^1.1.0",
+    "dotenv-cli": "^11.0.0",
     "eslint": "^9.39.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
@@ -57,7 +61,6 @@
     "lint-staged": "^16.2.7",
     "storybook": "^10.1.11",
     "prettier": "3.7.4",
-    "storybook": "^10.1.11",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",

pnpm-lock.yaml

@@ -1,14 +1,9 @@
 import { RouterProvider } from "react-router-dom";
 
-import ThemeProvider from "./providers";
 import { router } from "./routes/app-router";
 
 const App = () => {
-  return (
-    <ThemeProvider>
-      <RouterProvider router={router} />
-    </ThemeProvider>
-  );
+  return <RouterProvider router={router} />;
 };
 
 export default App;

src/app/App.tsx

@@ -2,7 +2,7 @@ import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
 import App from "@app/App";
-import AppProviders from "@app/providers";
+import { AppProviders } from "@app/providers";
 
 import "@app/styles/global.css";
 

src/app/main.tsx

@@ -1,7 +1,22 @@
-import type { PropsWithChildren } from "react";
+import { QueryProvider } from "./query-provider";
+import ThemeProvider from "./theme-provider";
 
-import QueryProvider from "./query-provider";
+import type { ReactNode } from "react";
 
-export default function AppProviders({ children }: PropsWithChildren) {
-  return <QueryProvider>{children}</QueryProvider>;
-}
+export const AppProviders = ({
+  theme,
+  className,
+  children,
+}: {
+  children: ReactNode;
+  theme?: string;
+  className?: string;
+}) => {
+  return (
+    <QueryProvider>
+      <ThemeProvider theme={theme} className={className}>
+        {children}
+      </ThemeProvider>
+    </QueryProvider>
+  );
+};

src/app/providers/index.ts

@@ -1,17 +1,18 @@
-import type { PropsWithChildren } from "react";
-import { Suspense, lazy } from "react";
 import { QueryClientProvider } from "@tanstack/react-query";
+import { Suspense, lazy } from "react";
 
 import { queryClient } from "@/shared/api";
 
+import type { PropsWithChildren } from "react";
+
 const ReactQueryDevtools = import.meta.env.DEV
   ? lazy(async () => {
       const mod = await import("@tanstack/react-query-devtools");
       return { default: mod.ReactQueryDevtools };
     })
   : null;
 
-export default function QueryProvider({ children }: PropsWithChildren) {
+export const QueryProvider = ({ children }: PropsWithChildren) => {
   return (
     <QueryClientProvider client={queryClient}>
       {children}
@@ -23,4 +24,4 @@ export default function QueryProvider({ children }: PropsWithChildren) {
       ) : null}
     </QueryClientProvider>
   );
-}
+};

src/app/providers/index.tsx

@@ -1 +1 @@
-export { useAuthStore } from '@shared/model/auth';
+export { useAuthStore } from "@shared/model/auth";