feat: 어드민 서비스 TanstackQuery 설정 및 입장 확인, 어드민 로그인 API 연결

apps/admin/api/auth.ts

@@ -0,0 +1,31 @@
+import {
+  LoginRequestParams,
+  LoginResponse,
+  SignupRequestParams,
+  SignupResponse,
+} from "@/types/authType";
+
+import { instance } from "./instance";
+
+export const login = async ({ email, password }: LoginRequestParams) => {
+  const { data } = await instance.post<LoginResponse>(`/auth/login`, {
+    email,
+    password,
+  });
+
+  return data;
+};
+
+export const signup = async ({
+  email,
+  password,
+  name,
+}: SignupRequestParams) => {
+  const { data } = await instance.post<SignupResponse>(`/auth/signup`, {
+    email,
+    password,
+    name,
+  });
+
+  return data;
+};

apps/admin/api/instance.ts

@@ -0,0 +1,44 @@
+import axios from "axios";
+
+import { getAccessToken } from "@/utils/handleToken";
+
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+const SERVER_VERSION = "/admin/v1";
+
+const AUTH_REQUIRED_PATH: string[] = [];
+const DYNAMIC_AUTH_REQUIRED_PATH = [/\/ticket\/[^/]+\/enter/];
+
+const isDynamicUrlMatched = (url: string): boolean => {
+  return DYNAMIC_AUTH_REQUIRED_PATH.some(path => path.test(url));
+};
+
+export const instance = axios.create({
+  baseURL: `${BASE_URL}${SERVER_VERSION}`,
+  headers: {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+  },
+});
+
+instance.interceptors.request.use(async config => {
+  if (
+    config.url &&
+    (AUTH_REQUIRED_PATH.includes(config.url) || isDynamicUrlMatched(config.url))
+  ) {
+    const accessToken = await getAccessToken();
+
+    config.headers.Authorization = `Bearer ${accessToken}`;
+  }
+
+  return config;
+});
+
+// TODO: interceptor 에러 발생 시 처리 로직 추가
+instance.interceptors.response.use(
+  async response => {
+    return response;
+  },
+  async error => {
+    return Promise.reject(error);
+  },
+);

apps/admin/api/ticket.ts

@@ -0,0 +1,11 @@
+import { TicketQrCodeResponse } from "@/types/ticketType";
+
+import { instance } from "./instance";
+
+export const scanQrCode = async (token: string | null) => {
+  const { data } = await instance.get<TicketQrCodeResponse>(
+    `/ticket/${token}/enter`,
+  );
+
+  return data;
+};

apps/admin/app/(auth)/_components/AuthSection.tsx

@@ -1,32 +1,76 @@
+"use client";
+
 import React from "react";
-import { Label } from "@ui/components/ui/label";
 import { Input } from "@ui/components/ui/input";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+} from "@ui/components/ui/form";
 import { Button } from "@ui/components/ui/button";
 
+import { useLoginForm } from "@/hooks/useLoginForm";
+
 function AuthSection() {
+  const { form, onSubmit, error } = useLoginForm();
+
   return (
-    <section className="flex grow flex-col justify-center gap-11">
+    <section className="mt-16 flex grow flex-col gap-11">
       <header>
         <h1 className="text-2xl font-black">관리자 로그인</h1>
       </header>
       <main className="flex flex-col gap-10">
-        <div className="flex flex-col gap-3">
-          <div className="grid w-full max-w-sm items-center gap-1.5">
-            <Label htmlFor="id" className="text-[#5E5E6E]">
-              ID
-            </Label>
-            <Input id="id" placeholder="아이디" />
-          </div>
-          <div className="grid w-full max-w-sm items-center gap-1.5">
-            <Label htmlFor="pw" className="text-[#5E5E6E]">
-              PW
-            </Label>
-            <Input id="pw" type="password" placeholder="비밀번호" />
-          </div>
-        </div>
-        <Button className="bg-brand hover:bg-brandHover w-full rounded-lg py-6 text-base md:max-w-24">
-          로그인
-        </Button>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(onSubmit)}
+            className="flex flex-col gap-5"
+          >
+            <div className="flex flex-col gap-3">
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem className="grid w-full items-center gap-1.5 sm:max-w-xs">
+                    <FormLabel className="text-[#5E5E6E]">ID</FormLabel>
+                    <FormControl>
+                      <Input id="id" placeholder="아이디" {...field} />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem className="grid w-full items-center gap-1.5 sm:max-w-xs">
+                    <FormLabel className="text-[#5E5E6E]">PW</FormLabel>
+                    <FormControl>
+                      <Input
+                        id="pw"
+                        type="password"
+                        placeholder="비밀번호"
+                        {...field}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+            <div className="space-y-4">
+              <p className="h-5 text-center text-sm text-[#FD7250] sm:text-left">
+                {error && error}
+              </p>
+              <Button
+                type="submit"
+                className="bg-brand hover:bg-brandHover w-full rounded-lg py-6 text-base md:max-w-24"
+              >
+                로그인
+              </Button>
+            </div>
+          </form>
+        </Form>
       </main>
     </section>
   );

apps/admin/app/(auth)/layout.tsx

@@ -1,32 +1,17 @@
-import type { Metadata } from "next";
-
-import { Inter } from "next/font/google";
-
 import "@uket/ui/globals.css";
 import Nav from "@/components/Nav";
 
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
+export default function WithoutNavLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <main className="flex h-dvh flex-col">
-          <header className="container sticky top-0">
-            <Nav />
-          </header>
-          <main className="grow">{children}</main>
-        </main>
-      </body>
-    </html>
+    <main className="flex h-dvh flex-col">
+      <header className="container sticky top-0">
+        <Nav />
+      </header>
+      <main className="grow">{children}</main>
+    </main>
   );
 }

apps/admin/app/(main)/layout.tsx

@@ -1,36 +1,21 @@
-import type { Metadata } from "next";
-
-import { Inter } from "next/font/google";
-
 import "@uket/ui/globals.css";
 import Nav from "@/components/Nav";
 import Footer from "@/components/Footer";
 
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
+export default function WithNavLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <main className="flex h-dvh flex-col">
-          <header className="container sticky top-0">
-            <Nav />
-          </header>
-          <main className="grow">{children}</main>
-          <footer>
-            <Footer />
-          </footer>
-        </main>
-      </body>
-    </html>
+    <main className="flex h-dvh flex-col">
+      <header className="container sticky top-0">
+        <Nav />
+      </header>
+      <main className="grow">{children}</main>
+      <footer>
+        <Footer />
+      </footer>
+    </main>
   );
 }

apps/admin/app/(main)/qr-scan/_components/QRScanner.tsx

@@ -3,18 +3,22 @@
 import React from "react";
 import { Scanner } from "@yudiel/react-qr-scanner";
 
+import { useScan } from "@/hooks/useScan";
+
 import QRFinderIcon from "./QRFinderIcon";
 
-// TODO: onScan에 실제 스캔 후 동작할 함수 연결
 const QRScanner = () => {
+  const { handleQRScan } = useScan();
+
   return (
     <div className="relative h-full">
       <Scanner
         formats={["qr_code"]}
-        onScan={result => result}
+        onScan={handleQRScan}
         classNames={{ video: "object-cover" }}
         styles={{ finderBorder: 1 }}
         components={{ finder: false }}
+        allowMultiple
       >
         <QRFinderIcon />
         <h1 className="absolute left-0 top-6 w-full text-2xl font-bold text-white sm:text-3xl">

apps/admin/app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+
+import { Inter } from "next/font/google";
+import "@uket/ui/globals.css";
+import { Toaster } from "@ui/components/ui/toaster";
+
+import Providers from "./providers";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Providers>{children}</Providers>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

apps/admin/app/providers.tsx

@@ -0,0 +1,62 @@
+// In Next.js, this file would be called: app/providers.jsx
+"use client";
+
+// Since QueryClientProvider relies on useContext under the hood, we have to put 'use client' on top
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import {
+  isServer,
+  HydrationBoundary,
+  QueryClient,
+  QueryClientProvider,
+  dehydrate,
+} from "@tanstack/react-query";
+
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        // With SSR, we usually want to set some default staleTime
+        // above 0 to avoid refetching immediately on the client
+        throwOnError: true,
+        retry: false,
+        staleTime: 60 * 1000,
+      },
+      mutations: {
+        throwOnError: true,
+      },
+    },
+  });
+}
+
+let browserQueryClient: QueryClient | undefined = undefined;
+
+function getQueryClient() {
+  if (isServer) {
+    // Server: always make a new query client
+    return makeQueryClient();
+  } else {
+    // Browser: make a new query client if we don't already have one
+    // This is very important, so we don't re-make a new client if React
+    // suspends during the initial render. This may not be needed if we
+    // have a suspense boundary BELOW the creation of the query client
+    if (!browserQueryClient) browserQueryClient = makeQueryClient();
+    return browserQueryClient;
+  }
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  // NOTE: Avoid useState when initializing the query client if you don't
+  //       have a suspense boundary between this and the code that may
+  //       suspend because React will throw away the client on the initial
+  //       render if it suspends and there is no boundary
+  const queryClient = getQueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        {children}
+      </HydrationBoundary>
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
+}