Merge pull request #51 from wafflestudio/50-feature-api-test-page

api 연결 테스트 페이지 생성

Author: kimnamheeee

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

src/app/providers/Providers.tsx

@@ -4,12 +4,17 @@ import { ThemeProvider } from 'next-themes'
 
 import { SidebarProvider } from '@/shared/ui/sidebar'
 import { Toaster } from '@/shared/ui/sonner'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
 
 export function Providers({ children }: PropsWithChildren) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-      <SidebarProvider>{children}</SidebarProvider>
-      <Toaster duration={1500} className="text-center" />
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <SidebarProvider>{children}</SidebarProvider>
+        <Toaster duration={1500} className="text-center" />
+      </ThemeProvider>
+    </QueryClientProvider>
   )
 }

src/main.tsx

@@ -8,7 +8,7 @@ async function enableMocking() {
   if (import.meta.env.DEV) {
     const { worker } = await import('./mocks/browser')
     return worker.start({
-      onUnhandledRequest: 'bypass',
+      onUnhandledRequest: 'warn',
     })
   }
 }

src/mocks/handlers.ts

@@ -1,3 +1,4 @@
 import { postHandlers } from './handlers/post'
+import { testHandlers } from './handlers/test'
 
-export const handlers = [...postHandlers]
+export const handlers = [...postHandlers, ...testHandlers]

src/mocks/handlers/test.ts

@@ -0,0 +1,7 @@
+import { http, HttpResponse } from 'msw'
+
+export const testHandlers = [
+  http.get('*/actuator/health', () => {
+    return HttpResponse.json({ status: 'ok' })
+  }),
+]

src/routeTree.gen.ts

@@ -14,6 +14,7 @@ import { Route as AppRouteImport } from './routes/_app'
 import { Route as AppIndexRouteImport } from './routes/_app/index'
 import { Route as PasswordResetRouteImport } from './routes/password/reset'
 import { Route as AccountsEmailsignupRouteImport } from './routes/accounts/emailsignup'
+import { Route as AppTestRouteImport } from './routes/_app/test'
 import { Route as AppExploreRouteImport } from './routes/_app/explore'
 import { Route as AppProfile_nameRouteImport } from './routes/_app/$profile_name'
 import { Route as AppProfile_nameIndexRouteImport } from './routes/_app/$profile_name/index'
@@ -45,6 +46,11 @@ const AccountsEmailsignupRoute = AccountsEmailsignupRouteImport.update({
   path: '/accounts/emailsignup',
   getParentRoute: () => rootRouteImport,
 } as any)
+const AppTestRoute = AppTestRouteImport.update({
+  id: '/test',
+  path: '/test',
+  getParentRoute: () => AppRoute,
+} as any)
 const AppExploreRoute = AppExploreRouteImport.update({
   id: '/explore',
   path: '/explore',
@@ -81,6 +87,7 @@ export interface FileRoutesByFullPath {
   '/login': typeof LoginRoute
   '/$profile_name': typeof AppProfile_nameRouteWithChildren
   '/explore': typeof AppExploreRoute
+  '/test': typeof AppTestRoute
   '/accounts/emailsignup': typeof AccountsEmailsignupRoute
   '/password/reset': typeof PasswordResetRoute
   '/': typeof AppIndexRoute
@@ -92,6 +99,7 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '/login': typeof LoginRoute
   '/explore': typeof AppExploreRoute
+  '/test': typeof AppTestRoute
   '/accounts/emailsignup': typeof AccountsEmailsignupRoute
   '/password/reset': typeof PasswordResetRoute
   '/': typeof AppIndexRoute
@@ -106,6 +114,7 @@ export interface FileRoutesById {
   '/login': typeof LoginRoute
   '/_app/$profile_name': typeof AppProfile_nameRouteWithChildren
   '/_app/explore': typeof AppExploreRoute
+  '/_app/test': typeof AppTestRoute
   '/accounts/emailsignup': typeof AccountsEmailsignupRoute
   '/password/reset': typeof PasswordResetRoute
   '/_app/': typeof AppIndexRoute
@@ -120,6 +129,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/$profile_name'
     | '/explore'
+    | '/test'
     | '/accounts/emailsignup'
     | '/password/reset'
     | '/'
@@ -131,6 +141,7 @@ export interface FileRouteTypes {
   to:
     | '/login'
     | '/explore'
+    | '/test'
     | '/accounts/emailsignup'
     | '/password/reset'
     | '/'
@@ -144,6 +155,7 @@ export interface FileRouteTypes {
     | '/login'
     | '/_app/$profile_name'
     | '/_app/explore'
+    | '/_app/test'
     | '/accounts/emailsignup'
     | '/password/reset'
     | '/_app/'
@@ -198,6 +210,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AccountsEmailsignupRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/_app/test': {
+      id: '/_app/test'
+      path: '/test'
+      fullPath: '/test'
+      preLoaderRoute: typeof AppTestRouteImport
+      parentRoute: typeof AppRoute
+    }
     '/_app/explore': {
       id: '/_app/explore'
       path: '/explore'
@@ -254,19 +273,21 @@ const AppProfile_nameRouteChildren: AppProfile_nameRouteChildren = {
 }
 
 const AppProfile_nameRouteWithChildren = AppProfile_nameRoute._addFileChildren(
-  AppProfile_nameRouteChildren,
+  AppProfile_nameRouteChildren
 )
 
 interface AppRouteChildren {
   AppProfile_nameRoute: typeof AppProfile_nameRouteWithChildren
   AppExploreRoute: typeof AppExploreRoute
+  AppTestRoute: typeof AppTestRoute
   AppIndexRoute: typeof AppIndexRoute
   AppPProfile_nameRoute: typeof AppPProfile_nameRoute
 }
 
 const AppRouteChildren: AppRouteChildren = {
   AppProfile_nameRoute: AppProfile_nameRouteWithChildren,
   AppExploreRoute: AppExploreRoute,
+  AppTestRoute: AppTestRoute,
   AppIndexRoute: AppIndexRoute,
   AppPProfile_nameRoute: AppPProfile_nameRoute,
 }

src/routes/_app/test.tsx

@@ -0,0 +1,20 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { useQuery } from '@tanstack/react-query'
+import { getTest } from '@/shared/api/test'
+
+export const Route = createFileRoute('/_app/test')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['test'],
+    queryFn: getTest,
+    retry: false,
+  })
+
+  if (isLoading) return <div>Loading...</div>
+  if (error) return <div>Error: {error.message}</div>
+  return <div>Data: {JSON.stringify(data)}</div>
+}

src/shared/api/test.ts

@@ -0,0 +1,6 @@
+import { instance } from './ky'
+
+export const getTest = async () => {
+  const response = await instance.get('actuator/health')
+  return response.json()
+}

vite.config.ts

@@ -6,7 +6,14 @@ import { tanstackRouter } from '@tanstack/router-plugin/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [tanstackRouter(), react(), tailwindcss()],
+  plugins: [
+    tanstackRouter({
+      routesDirectory: './src/routes',
+      generatedRouteTree: './src/routeTree.gen.ts',
+    }),
+    react(),
+    tailwindcss(),
+  ],
   test: {
     globals: true,
     environment: 'jsdom',