diff --git a/biome.json b/biome.json
new file mode 100644
index 0000000..dd3e210
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,7 @@
+{
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
index a2f1e09..b191313 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,3 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import {
   createBrowserRouter,
@@ -13,8 +12,6 @@ import CustomerSupportPage from "./pages/CustomerSupportPage";
 import PublicLayout from "./layouts/PublicLayout";
 import StoreRegistrationPage from "./pages/myPage/StoreRegistrationPage";
 
-export const queryClient = new QueryClient();
-
 const routes: RouteObject[] = [
   {
     element: (
@@ -53,9 +50,9 @@ const router = createBrowserRouter(routes);
 
 export default function App() {
   return (
-    <QueryClientProvider client={queryClient}>
+    <>
       <RouterProvider router={router} />
       <ReactQueryDevtools initialIsOpen={false} />
-    </QueryClientProvider>
+    </>
   );
 }
diff --git a/src/api/axios.ts b/src/api/axios.ts
new file mode 100644
index 0000000..2afc795
--- /dev/null
+++ b/src/api/axios.ts
@@ -0,0 +1,38 @@
+import axios, { type AxiosError, type InternalAxiosRequestConfig } from "axios";
+
+export const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL as string | undefined,
+  timeout: 10000,
+});
+
+function getAccessToken() {
+  return localStorage.getItem("accessToken");
+}
+
+api.interceptors.request.use((config: InternalAxiosRequestConfig) => {
+  const token = getAccessToken();
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+api.interceptors.response.use(
+  (res) => res,
+  (err: AxiosError) => {
+    const status = err.response?.status;
+    const data = err.response?.data;
+
+    if (import.meta.env.DEV) {
+      console.error("[api error]", {
+        status,
+        data,
+        message: err.message,
+        url: err.config?.url,
+        method: err.config?.method,
+      });
+    }
+    //Todo: 401 처리(로그아웃.리다이렉트,refresh)는 스펙 확정후
+    return Promise.reject(err);
+  },
+);
diff --git a/src/components/modals/paymentAddModal.tsx b/src/components/modals/paymentAddModal.tsx
index c5441c8..8eda5a6 100644
--- a/src/components/modals/paymentAddModal.tsx
+++ b/src/components/modals/paymentAddModal.tsx
@@ -1,6 +1,6 @@
 import { X } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/cn";
+import { cn } from "@/lib/utils";
 
 interface Props {
   isOpen: boolean;
@@ -12,10 +12,10 @@ type PaymentType = "kakao" | "toss";
 export default function PaymentAddModal({ isOpen, onClose }: Props) {
   const [selectedType, setSelectedType] = useState<PaymentType>("kakao");
 
-  const handleAddSubmit = () =>{
+  const handleAddSubmit = () => {
     alert("결제수단이 성공적으로 추가되었습니다.");
     onClose();
-  }
+  };
 
   if (!isOpen) return null;
 
@@ -24,7 +24,10 @@ export default function PaymentAddModal({ isOpen, onClose }: Props) {
       <div className="w-full max-w-md rounded-2xl bg-white p-8 shadow-xl">
         <div className="mb-6 flex items-center justify-between">
           <h2 className="text-xl font-bold text-gray-900">결제수단 추가</h2>
-          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600"
+          >
             <X size={24} />
           </button>
         </div>
@@ -52,8 +55,13 @@ export default function PaymentAddModal({ isOpen, onClose }: Props) {
           {/* 하단 옵션 및 버튼 */}
           <div className="space-y-6">
             <label className="flex items-center gap-2 cursor-pointer">
-              <input type="checkbox" className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
-              <span className="text-sm font-medium text-gray-700">기본 결제수단으로 설정</span>
+              <input
+                type="checkbox"
+                className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+              />
+              <span className="text-sm font-medium text-gray-700">
+                기본 결제수단으로 설정
+              </span>
             </label>
 
             <div className="flex gap-3">
@@ -63,8 +71,10 @@ export default function PaymentAddModal({ isOpen, onClose }: Props) {
               >
                 취소
               </button>
-              <button className="flex-1 rounded-xl bg-blue-500 py-4 text-md font-bold text-white hover:bg-blue-600 transition-colors"
-              onClick={handleAddSubmit}>
+              <button
+                className="flex-1 rounded-xl bg-blue-500 py-4 text-md font-bold text-white hover:bg-blue-600 transition-colors"
+                onClick={handleAddSubmit}
+              >
                 추가하기
               </button>
             </div>
@@ -75,17 +85,36 @@ export default function PaymentAddModal({ isOpen, onClose }: Props) {
   );
 }
 
-function PaymentTypeButton({ active, onClick, label, icon }: { active: boolean; onClick: () => void; label: string; icon: React.ReactNode }) {
+function PaymentTypeButton({
+  active,
+  onClick,
+  label,
+  icon,
+}: {
+  active: boolean;
+  onClick: () => void;
+  label: string;
+  icon: React.ReactNode;
+}) {
   return (
     <button
       onClick={onClick}
       className={cn(
         "flex flex-col items-center justify-center gap-2 rounded-xl border-2 py-4 transition-all",
-        active ? "border-blue-500 bg-blue-50/50" : "border-gray-100 bg-white hover:border-gray-200"
+        active
+          ? "border-blue-500 bg-blue-50/50"
+          : "border-gray-100 bg-white hover:border-gray-200",
       )}
     >
       {icon}
-      <span className={cn("text-sm font-medium", active ? "text-blue-600" : "text-gray-600")}>{label}</span>
+      <span
+        className={cn(
+          "text-sm font-medium",
+          active ? "text-blue-600" : "text-gray-600",
+        )}
+      >
+        {label}
+      </span>
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/src/index.css b/src/index.css
index cef01c9..ef25362 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,128 +1 @@
-@import "tailwindcss";
-@import "tw-animate-css";
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --radius-2xl: calc(var(--radius) + 8px);
-  --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-:root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
-}
-
-.dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-body {
-  word-break: keep-all;
-  overflow-wrap: break-word;
-}
+@import "./styles/globals.css";
diff --git a/src/layouts/myPageLayout.tsx b/src/layouts/myPageLayout.tsx
index f1aef85..d9340d2 100644
--- a/src/layouts/myPageLayout.tsx
+++ b/src/layouts/myPageLayout.tsx
@@ -7,7 +7,7 @@ import {
   Store,
   User,
 } from "lucide-react";
-import { cn } from "../lib/cn";
+import { cn } from "@/lib/utils";
 
 const sidebarItems = [
   { to: "/mypage/info", label: "내 정보", icon: User },
@@ -56,7 +56,7 @@ export default function MyPageLayout() {
                       "relative flex h-12 items-center gap-3 px-5 py-7 text-md font-medium transition",
                       isActive
                         ? "bg-blue-50 text-blue-600"
-                        : "text-gray-700 hover:bg-gray-100"
+                        : "text-gray-700 hover:bg-gray-100",
                     )
                   }
                 >
diff --git a/src/lib/cn.ts b/src/lib/cn.ts
deleted file mode 100644
index f9816e0..0000000
--- a/src/lib/cn.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export function cn(...classes: (string | undefined | false)[]) {
-  return classes.filter(Boolean).join(" ");
-}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index a5ef193..f021764 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/src/main.tsx b/src/main.tsx
index 10ed13e..e05250d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,14 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App.tsx";
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-);
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "@/query/queryClient.ts";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </StrictMode>,
+);
diff --git a/src/pages/myPage/paymentPage.tsx b/src/pages/myPage/paymentPage.tsx
index 22ef05f..686e508 100644
--- a/src/pages/myPage/paymentPage.tsx
+++ b/src/pages/myPage/paymentPage.tsx
@@ -1,6 +1,6 @@
-import { Plus, Trash2, CreditCard } from "lucide-react";
+import { Plus, Trash2 } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/cn";
+import { cn } from "@/lib/utils";
 import PaymentAddModal from "@/components/modals/paymentAddModal";
 
 interface PaymentMethod {
@@ -34,7 +34,7 @@ export default function PaymentPage() {
       methods.map((m) => ({
         ...m,
         isDefault: m.id === id,
-      }))
+      })),
     );
   };
 
@@ -46,10 +46,14 @@ export default function PaymentPage() {
       <div className="mb-8 flex items-start justify-between">
         <div>
           <h2 className="text-lg text-gray-900">결제수단 관리</h2>
-          <p className="mt-1 text-sm text-gray-900">예약 시 사용할 결제수단을 관리하세요</p>
+          <p className="mt-1 text-sm text-gray-900">
+            예약 시 사용할 결제수단을 관리하세요
+          </p>
         </div>
-        <button className="cursor-pointer flex items-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
-        onClick={()=>setIsModalOpen(true)}>
+        <button
+          className="cursor-pointer flex items-center gap-2 rounded-lg bg-blue-500 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 transition-colors"
+          onClick={() => setIsModalOpen(true)}
+        >
           <Plus size={18} />
           결제수단 추가
         </button>
@@ -61,17 +65,16 @@ export default function PaymentPage() {
           <div
             key={method.id}
             className={cn(
-              "group relative flex items-center justify-between rounded-lg border border-2 p-3 transition-all",
-              method.isDefault 
-                ? "border-blue-500 bg-blue-50" 
-                : "border-gray-100 bg-white hover:border-gray-200"
+              "group relative flex items-center justify-between rounded-lg border-2 p-3 transition-all",
+              method.isDefault
+                ? "border-blue-500 bg-blue-50"
+                : "border-gray-100 bg-white hover:border-gray-200",
             )}
           >
             <div className="flex items-center gap-4">
               {/* 아이콘 영역 */}
               <div className="flex h-12 w-12 items-center justify-center rounded-lg">
-                  <span className="text-xl">💛</span>
-
+                <span className="text-xl">💛</span>
               </div>
 
               {/* 정보 영역 */}
@@ -85,23 +88,21 @@ export default function PaymentPage() {
                     </span>
                   )}
                 </div>
-                <p className="text-xs text-gray-600">
-                  간편결제
-                </p>
+                <p className="text-xs text-gray-600">간편결제</p>
               </div>
             </div>
 
             {/* 액션 버튼 영역 */}
             <div className="flex items-center gap-3">
               {!method.isDefault && (
-                <button 
+                <button
                   onClick={() => handleSetDefault(method.id)}
                   className="cursor-pointer rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-50 transition-colors"
                 >
                   기본으로 설정
                 </button>
               )}
-              <button 
+              <button
                 onClick={() => handleDelete(method.id)}
                 className="cursor-pointer flex h-9 w-9 items-center justify-center rounded-lg text-gray-400 hover:bg-red-50 hover:text-red-500 transition-all"
               >
@@ -112,9 +113,9 @@ export default function PaymentPage() {
         ))}
       </div>
 
-      <PaymentAddModal 
-        isOpen={isModalOpen} 
-        onClose={() => setIsModalOpen(false)} 
+      <PaymentAddModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
       />
 
       {methods.length === 0 && (
@@ -124,4 +125,4 @@ export default function PaymentPage() {
       )}
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/myPage/reservationPage.tsx b/src/pages/myPage/reservationPage.tsx
index ed8285c..2dd82dc 100644
--- a/src/pages/myPage/reservationPage.tsx
+++ b/src/pages/myPage/reservationPage.tsx
@@ -1,6 +1,6 @@
 import { Calendar, Clock, User, CreditCard, Pencil, X } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/cn";
+import { cn } from "@/lib/utils";
 
 type ReservationStatus = "전체" | "예정된 예약" | "방문 완료" | "취소된 예약";
 
@@ -71,7 +71,9 @@ export default function ReservationPage() {
     <section className="rounded-xl bg-white p-8 shadow-sm border border-gray-100">
       <div className="mb-6">
         <h2 className="text-lg text-gray-900">예약 현황</h2>
-        <p className="mt-1 text-sm text-gray-800">내 예약 내역을 확인하고 관리하세요</p>
+        <p className="mt-1 text-sm text-gray-800">
+          내 예약 내역을 확인하고 관리하세요
+        </p>
       </div>
 
       {/* 탭 메뉴 */}
@@ -82,7 +84,9 @@ export default function ReservationPage() {
             onClick={() => setActiveTab(tab as ReservationStatus)}
             className={cn(
               "cursor-pointer pb-4 text-sm font-medium transition-all relative",
-              activeTab === tab ? "text-blue-600" : "text-gray-800 hover:text-gray-600"
+              activeTab === tab
+                ? "text-blue-600"
+                : "text-gray-800 hover:text-gray-600",
             )}
           >
             {tab}
@@ -97,17 +101,25 @@ export default function ReservationPage() {
       <div className="space-y-6">
         {filteredReservations.length > 0 ? (
           filteredReservations.map((res) => (
-            <div key={res.id} className="rounded-2xl border border-gray-200 p-6 transition-hover hover:shadow-md">
+            <div
+              key={res.id}
+              className="rounded-2xl border border-gray-200 p-6 transition-hover hover:shadow-md"
+            >
               <div className="flex items-start justify-between mb-4">
                 <div>
                   <div className="flex items-center gap-3 mb-1">
                     <h3 className="text-md text-gray-900">{res.shopName}</h3>
-                    <span className={cn(
-                      "px-2 py-0.5 rounded-full text-[11px]",
-                      res.status === "예약 확정" ? "bg-blue-50 text-blue-600" : "bg-green-50 text-green-600",
-                      res.status === "방문 완료" && "bg-green-50 text-green-600",
-                      res.status === "취소됨" && "bg-gray-100 text-gray-500"
-                    )}>
+                    <span
+                      className={cn(
+                        "px-2 py-0.5 rounded-full text-[11px]",
+                        res.status === "예약 확정"
+                          ? "bg-blue-50 text-blue-600"
+                          : "bg-green-50 text-green-600",
+                        res.status === "방문 완료" &&
+                          "bg-green-50 text-green-600",
+                        res.status === "취소됨" && "bg-gray-100 text-gray-500",
+                      )}
+                    >
                       {res.status}
                     </span>
                   </div>
@@ -117,18 +129,41 @@ export default function ReservationPage() {
 
               {/* 상세 정보 그리드 */}
               <div className="grid grid-cols-2 gap-y-4 gap-x-8 pb-6 border-b border-gray-200 mb-4">
-                <InfoItem icon={<Calendar size={18} />} label="예약 날짜" value={res.date} />
-                <InfoItem icon={<Clock size={18} />} label="예약 시간" value={res.time} />
-                <InfoItem icon={<User size={18} />} label="인원" value={res.people} />
-                <InfoItem icon={<CreditCard size={18} />} label="결제 정보" value={`${res.payment}\n${res.method}`} isMultiLine />
+                <InfoItem
+                  icon={<Calendar size={18} />}
+                  label="예약 날짜"
+                  value={res.date}
+                />
+                <InfoItem
+                  icon={<Clock size={18} />}
+                  label="예약 시간"
+                  value={res.time}
+                />
+                <InfoItem
+                  icon={<User size={18} />}
+                  label="인원"
+                  value={res.people}
+                />
+                <InfoItem
+                  icon={<CreditCard size={18} />}
+                  label="결제 정보"
+                  value={`${res.payment}\n${res.method}`}
+                  isMultiLine
+                />
               </div>
 
               {/* 하단 버튼 영역 */}
               <div className="flex items-center justify-between">
-                <span className={cn(
-                  "text-sm font-medium",
-                  res.status === "취소됨" ? "text-gray-400" : "text-green-600"
-                )}>{res.step}</span>
+                <span
+                  className={cn(
+                    "text-sm font-medium",
+                    res.status === "취소됨"
+                      ? "text-gray-400"
+                      : "text-green-600",
+                  )}
+                >
+                  {res.step}
+                </span>
                 <div className="flex gap-2">
                   {res.status === "예약 확정" && (
                     <>
@@ -160,18 +195,31 @@ export default function ReservationPage() {
 }
 
 // 정보 아이템 컴포넌트
-function InfoItem({ icon, label, value, isMultiLine = false }: { icon: React.ReactNode, label: string, value: string, isMultiLine?: boolean }) {
+function InfoItem({
+  icon,
+  label,
+  value,
+  isMultiLine = false,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: string;
+  isMultiLine?: boolean;
+}) {
   return (
     <div className="flex items-start gap-3">
-      <div className="p-2 rounded-full bg-blue-100 text-blue-500">
-        {icon}
-      </div>
+      <div className="p-2 rounded-full bg-blue-100 text-blue-500">{icon}</div>
       <div>
         <p className="text-[11px] text-gray-400 mb-0.5">{label}</p>
-        <p className={cn("text-sm text-gray-900", isMultiLine ? "whitespace-pre-line" : "")}>
+        <p
+          className={cn(
+            "text-sm text-gray-900",
+            isMultiLine ? "whitespace-pre-line" : "",
+          )}
+        >
           {value}
         </p>
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/myPage/settingPage.tsx b/src/pages/myPage/settingPage.tsx
index 547432d..0db0379 100644
--- a/src/pages/myPage/settingPage.tsx
+++ b/src/pages/myPage/settingPage.tsx
@@ -1,6 +1,6 @@
 import { Lock, Bell, Trash2 } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/cn";
+import { cn } from "@/lib/utils";
 
 export default function SettingsPage() {
   // 알림 설정을 위한 상태 관리
@@ -28,8 +28,12 @@ export default function SettingsPage() {
           </div>
           <div className="space-y-3">
             <div>
-              <h3 className="text-md font-medium text-gray-900">비밀번호 변경</h3>
-              <p className="text-md text-gray-500 mt-2">정기적인 비밀번호 변경으로 계정을 안전하게 보호하세요</p>
+              <h3 className="text-md font-medium text-gray-900">
+                비밀번호 변경
+              </h3>
+              <p className="text-md text-gray-500 mt-2">
+                정기적인 비밀번호 변경으로 계정을 안전하게 보호하세요
+              </p>
             </div>
             <button className="cursor-pointer rounded-lg border border-gray-200 px-4 py-2 text-md font-medium text-gray-700 hover:bg-gray-50 transition-colors">
               비밀번호 변경하기
@@ -45,41 +49,49 @@ export default function SettingsPage() {
           <div className="flex-1 space-y-6">
             <div>
               <h3 className="text-md font-medium text-gray-900">알림 설정</h3>
-              <p className="text-md text-gray-500 mt-2 pb-3">받고 싶은 알림을 선택하세요</p>
+              <p className="text-md text-gray-500 mt-2 pb-3">
+                받고 싶은 알림을 선택하세요
+              </p>
             </div>
 
             <div className="space-y-9">
-              <ToggleButton 
-                label="예약 관련 알림" 
-                description="예약 확인, 변경, 취소 알림" 
-                enabled={notifications.reservation} 
-                onClick={() => toggleNotification('reservation')}
+              <ToggleButton
+                label="예약 관련 알림"
+                description="예약 확인, 변경, 취소 알림"
+                enabled={notifications.reservation}
+                onClick={() => toggleNotification("reservation")}
               />
-              <ToggleButton 
-                label="프로모션 알림" 
-                description="할인, 이벤트 정보" 
-                enabled={notifications.promotion} 
-                onClick={() => toggleNotification('promotion')}
+              <ToggleButton
+                label="프로모션 알림"
+                description="할인, 이벤트 정보"
+                enabled={notifications.promotion}
+                onClick={() => toggleNotification("promotion")}
               />
-              <ToggleButton 
-                label="리뷰 알림" 
-                description="내 리뷰에 대한 반응 알림" 
-                enabled={notifications.review} 
-                onClick={() => toggleNotification('review')}
+              <ToggleButton
+                label="리뷰 알림"
+                description="내 리뷰에 대한 반응 알림"
+                enabled={notifications.review}
+                onClick={() => toggleNotification("review")}
               />
             </div>
 
-
-
             <div className="border-t pt-4 space-y-4">
-              <h4 className="text-md font-medium text-gray-900">알림 수신 방법</h4>
+              <h4 className="text-md font-medium text-gray-900">
+                알림 수신 방법
+              </h4>
               <div className="flex items-center justify-between">
                 <span className="text-md text-gray-700">이메일</span>
-                <Switch enabled={notifications.email} onClick={() => toggleNotification('email')} />
+                <Switch
+                  enabled={notifications.email}
+                  onClick={() => toggleNotification("email")}
+                />
               </div>
               <div className="flex items-center justify-between">
                 <span className="text-md text-gray-700">SMS</span>
-                <Switch enabled={notifications.sms} onClick={() => toggleNotification('sms')} />
+                <Switch
+                  enabled={notifications.sms}
+                  onClick={() => toggleNotification("sms")}
+                />
               </div>
             </div>
 
@@ -97,7 +109,9 @@ export default function SettingsPage() {
           <div className="space-y-3">
             <div>
               <h3 className="text-md font-medium text-gray-900">계정 탈퇴</h3>
-              <p className="text-md text-gray-500 mt-2">계정을 삭제하면 모든 데이터가 영구적으로 삭제됩니다</p>
+              <p className="text-md text-gray-500 mt-2">
+                계정을 삭제하면 모든 데이터가 영구적으로 삭제됩니다
+              </p>
             </div>
             <button className="cursor-pointer rounded-lg border border-1 border-red-500 px-4 py-2 text-md font-medium text-red-600 hover:bg-red-50 transition-colors">
               계정 탈퇴하기
@@ -110,7 +124,17 @@ export default function SettingsPage() {
 }
 
 // 토글 아이템 컴포넌트
-function ToggleButton({ label, description, enabled, onClick }: { label: string; description: string; enabled: boolean; onClick: () => void }) {
+function ToggleButton({
+  label,
+  description,
+  enabled,
+  onClick,
+}: {
+  label: string;
+  description: string;
+  enabled: boolean;
+  onClick: () => void;
+}) {
   return (
     <div className="cursor-pointer flex items-center justify-between">
       <div className="space-y-0.5">
@@ -123,21 +147,30 @@ function ToggleButton({ label, description, enabled, onClick }: { label: string;
 }
 
 // 스위치 UI 컴포넌트
-function Switch({ enabled, onClick }: { enabled: boolean; onClick: () => void }) {
+function Switch({
+  enabled,
+  onClick,
+}: {
+  enabled: boolean;
+  onClick: () => void;
+}) {
   return (
     <button
+      type="button"
+      role="switch"
+      aria-checked={enabled}
       onClick={onClick}
       className={cn(
-        "cursor-pointer relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none",
-        enabled ? "bg-blue-600" : "bg-gray-200"
+        "cursor-pointer relative inline-flex h-6 w-11 shrink-0 rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+        enabled ? "bg-blue-600" : "bg-gray-200",
       )}
     >
       <span
         className={cn(
           "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
-          enabled ? "translate-x-5" : "translate-x-0"
+          enabled ? "translate-x-5" : "translate-x-0",
         )}
       />
     </button>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/myPage/storePage.tsx b/src/pages/myPage/storePage.tsx
index 85a0084..dc8604d 100644
--- a/src/pages/myPage/storePage.tsx
+++ b/src/pages/myPage/storePage.tsx
@@ -1,12 +1,32 @@
+
 import { Store, Calendar, Star, Plus, ChevronRight, BarChart3 } from "lucide-react";
 import { cn } from "../../lib/cn";
 import { Link } from "react-router-dom";
 
+
 export default function StorePage() {
   const stats = [
-    { label: "총 가게 수", value: "3개", icon: <Store size={20} />, bgColor: "bg-blue-50", iconColor: "text-blue-500" },
-    { label: "총 예약 수", value: "2126건", icon: <Calendar size={20} />, bgColor: "bg-indigo-50", iconColor: "text-indigo-500" },
-    { label: "평균 평점", value: "4.8", icon: <Star size={20} />, bgColor: "bg-green-50", iconColor: "text-yellow-500" },
+    {
+      label: "총 가게 수",
+      value: "3개",
+      icon: <Store size={20} />,
+      bgColor: "bg-blue-50",
+      iconColor: "text-blue-500",
+    },
+    {
+      label: "총 예약 수",
+      value: "2126건",
+      icon: <Calendar size={20} />,
+      bgColor: "bg-indigo-50",
+      iconColor: "text-indigo-500",
+    },
+    {
+      label: "평균 평점",
+      value: "4.8",
+      icon: <Star size={20} />,
+      bgColor: "bg-green-50",
+      iconColor: "text-yellow-500",
+    },
   ];
 
   const shops = [
@@ -39,7 +59,8 @@ export default function StorePage() {
       totalReservations: "-",
       rating: "-",
       reviews: "-",
-      notice: "가게 승인 대기 중입니다. 영업일 기준 1-2일 내에 승인이 완료됩니다.",
+      notice:
+        "가게 승인 대기 중입니다. 영업일 기준 1-2일 내에 승인이 완료됩니다.",
     },
   ];
 
@@ -48,7 +69,9 @@ export default function StorePage() {
       <div className="flex items-center justify-between mb-6">
         <div>
           <h2 className="text-lg text-gray-900">내 가게 관리</h2>
-          <p className="mt-1 text-sm text-gray-500">등록한 식당을 관리하고 대시보드로 이동하세요</p>
+          <p className="mt-1 text-sm text-gray-500">
+            등록한 식당을 관리하고 대시보드로 이동하세요
+          </p>
         </div>
         <Link 
           to="/mypage/store/register" 
@@ -60,7 +83,13 @@ export default function StorePage() {
       {/* 요약 통계 카드 */}
       <div className="grid grid-cols-3 gap-4 mb-8">
         {stats.map((stat, index) => (
-          <div key={index} className={cn("flex items-center justify-between p-5 rounded-xl border border-gray-50", stat.bgColor)}>
+          <div
+            key={index}
+            className={cn(
+              "flex items-center justify-between p-5 rounded-xl border border-gray-50",
+              stat.bgColor,
+            )}
+          >
             <div>
               <p className="text-sm text-gray-600 mb-1">{stat.label}</p>
               <p className="text-2xl text-gray-900">{stat.value}</p>
@@ -73,7 +102,10 @@ export default function StorePage() {
       {/* 가게 리스트 */}
       <div className="space-y-4 mb-8">
         {shops.map((shop) => (
-          <div key={shop.id} className="group relative rounded-2xl border border-gray-200 p-6 hover:shadow-md transition-all cursor-pointer">
+          <div
+            key={shop.id}
+            className="group relative rounded-2xl border border-gray-200 p-6 hover:shadow-md transition-all cursor-pointer"
+          >
             <div className="flex items-start justify-between mb-6">
               <div className="flex gap-4">
                 <div className="w-20 h-20 rounded-xl bg-gray-100 flex items-center justify-center text-gray-400">
@@ -82,10 +114,14 @@ export default function StorePage() {
                 <div>
                   <div className="flex items-center gap-2 mb-1">
                     <h3 className="text-md text-gray-900">{shop.name}</h3>
-                    <span className={cn(
-                      "px-2 py-0.5 rounded-full text-sm",
-                      shop.status === "운영중" ? "bg-green-50 text-green-600" : "bg-yellow-50 text-yellow-600"
-                    )}>
+                    <span
+                      className={cn(
+                        "px-2 py-0.5 rounded-full text-sm",
+                        shop.status === "운영중"
+                          ? "bg-green-50 text-green-600"
+                          : "bg-yellow-50 text-yellow-600",
+                      )}
+                    >
                       {shop.status}
                     </span>
                   </div>
@@ -95,24 +131,39 @@ export default function StorePage() {
                   </span>
                 </div>
               </div>
-              <ChevronRight size={20} className="text-gray-300 group-hover:text-gray-500 transition-colors" />
+              <ChevronRight
+                size={20}
+                className="text-gray-300 group-hover:text-gray-500 transition-colors"
+              />
             </div>
 
             {/* 가게별 상세 수치: 승인 대기일 때는 아예 렌더링하지 않음 */}
             {shop.status !== "승인 대기" && (
               <div className="grid grid-cols-3 py-4 border-t border-gray-100 text-center">
                 <div>
-                  <p className="text-[11px] text-gray-400 mb-1 font-medium">총 예약</p>
-                  <p className="text-sm text-gray-700">{shop.totalReservations}</p>
+                  <p className="text-[11px] text-gray-400 mb-1 font-medium">
+                    총 예약
+                  </p>
+                  <p className="text-sm text-gray-700">
+                    {shop.totalReservations}
+                  </p>
                 </div>
                 <div className="border-x border-gray-100">
-                  <p className="text-[11px] text-gray-400 mb-1 font-medium">평점</p>
+                  <p className="text-[11px] text-gray-400 mb-1 font-medium">
+                    평점
+                  </p>
                   <p className="text-sm text-gray-700 flex items-center justify-center gap-1">
-                    <Star size={14} className="fill-yellow-400 text-yellow-400" /> {shop.rating}
+                    <Star
+                      size={14}
+                      className="fill-yellow-400 text-yellow-400"
+                    />{" "}
+                    {shop.rating}
                   </p>
                 </div>
                 <div>
-                  <p className="text-[11px] text-gray-400 mb-1 font-medium">리뷰</p>
+                  <p className="text-[11px] text-gray-400 mb-1 font-medium">
+                    리뷰
+                  </p>
                   <p className="text-sm text-gray-700">{shop.reviews}</p>
                 </div>
               </div>
@@ -137,8 +188,13 @@ export default function StorePage() {
             <BarChart3 size={24} />
           </div>
           <div>
-            <h4 className="text-sm text-gray-900">더 많은 데이터가 필요하신가요?</h4>
-            <p className="text-xs text-gray-500 mt-1 ">프리미엄 플랜으로 업그레이드하고 AI 데이터 인사이트, 상세 분석 리포트를 받아보세요.</p>
+            <h4 className="text-sm text-gray-900">
+              더 많은 데이터가 필요하신가요?
+            </h4>
+            <p className="text-xs text-gray-500 mt-1 ">
+              프리미엄 플랜으로 업그레이드하고 AI 데이터 인사이트, 상세 분석
+              리포트를 받아보세요.
+            </p>
           </div>
         </div>
         <button className="cursor-pointer mt-6 w-full sm:w-auto px-10 py-3 rounded-lg bg-blue-500 text-xs font-bold text-white hover:bg-blue-600 shadow-sm transition-all">
@@ -147,4 +203,4 @@ export default function StorePage() {
       </div>
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/pages/myPage/subscriptionPage.tsx b/src/pages/myPage/subscriptionPage.tsx
index 40ce119..c31b2ee 100644
--- a/src/pages/myPage/subscriptionPage.tsx
+++ b/src/pages/myPage/subscriptionPage.tsx
@@ -1,9 +1,11 @@
 import { Check, Crown } from "lucide-react";
 import { useState } from "react";
-import { cn } from "../../lib/cn";
+import { cn } from "@/lib/utils";
 
 export default function SubscriptionPage() {
-  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly");
+  const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">(
+    "monthly",
+  );
   // 현재 사용 중인 플랜 이름을 관리하는 상태 (기본값: 무료)
   const [selectedPlan, setSelectedPlan] = useState("무료");
 
@@ -17,24 +19,50 @@ export default function SubscriptionPage() {
     {
       name: "무료",
       price: 0,
-      features: ["기본 예약 기능", "월 3회 예약 가능", "일반 리뷰 작성", "기본 알림"],
+      features: [
+        "기본 예약 기능",
+        "월 3회 예약 가능",
+        "일반 리뷰 작성",
+        "기본 알림",
+      ],
     },
     {
       name: "베이직",
       price: billingCycle === "monthly" ? 9900 : 99000,
-      features: ["무제한 예약", "우선 예약 혜택", "리뷰 작성 포인트 적립", "실시간 알림", "예약 변경 수수료 면제"],
+      features: [
+        "무제한 예약",
+        "우선 예약 혜택",
+        "리뷰 작성 포인트 적립",
+        "실시간 알림",
+        "예약 변경 수수료 면제",
+      ],
     },
     {
       name: "프리미엄",
       price: billingCycle === "monthly" ? 19900 : 199000,
-      features: ["베이직 플랜 모든 혜택", "AI맞춤 식당 추천", "VIP 예약 우선권", "특별 할인 쿠폰", "프리미엄 고객 지원", "동반 1인 무료 혜택"],
+      features: [
+        "베이직 플랜 모든 혜택",
+        "AI맞춤 식당 추천",
+        "VIP 예약 우선권",
+        "특별 할인 쿠폰",
+        "프리미엄 고객 지원",
+        "동반 1인 무료 혜택",
+      ],
       isRecommended: true, // 추천 플랜 표시를 위한 플래그
     },
     {
       name: "비즈니스 (사장님)",
       price: billingCycle === "monthly" ? 49900 : 499000,
-      features: ["식당 등록 및 관리", "통합 대시보드", "예약 관리 시스템", "결제 및 정산 기능", "AI 데이터 인사이트", "프리미엄 매장 노출", "24/7 전담 지원"],
-    }
+      features: [
+        "식당 등록 및 관리",
+        "통합 대시보드",
+        "예약 관리 시스템",
+        "결제 및 정산 기능",
+        "AI 데이터 인사이트",
+        "프리미엄 매장 노출",
+        "24/7 전담 지원",
+      ],
+    },
   ];
 
   // 플랜 변경 핸들러
@@ -52,7 +80,11 @@ export default function SubscriptionPage() {
   };
 
   const handleCancel = () => {
-    if (confirm("정말로 구독을 취소하시겠습니까? 다음 결제일부터는 혜택을 이용하실 수 없습니다.")) {
+    if (
+      confirm(
+        "정말로 구독을 취소하시겠습니까? 다음 결제일부터는 혜택을 이용하실 수 없습니다.",
+      )
+    ) {
       setSelectedPlan("무료"); // 취소 시 무료 플랜으로 변경 예시
       alert("구독 취소가 완료되었습니다.");
     }
@@ -62,19 +94,21 @@ export default function SubscriptionPage() {
     <section className="rounded-xl bg-white p-8 shadow-sm border border-gray-100">
       <div className="mb-8">
         <h2 className="text-lg text-gray-900">구독 관리</h2>
-        <p className="mt-1 text-sm text-gray-500">나에게 맞는 플랜을 선택하세요</p>
+        <p className="mt-1 text-sm text-gray-500">
+          나에게 맞는 플랜을 선택하세요
+        </p>
       </div>
 
       {/* 현재 플랜 요약 박스 */}
       <div className="mb-10 rounded-xl bg-blue-50 p-6 border border-blue-100 grid">
         <div>
           <div className="flex items-center gap-2 mb-2">
-            <Crown size={20} color="blue"/>
+            <Crown size={20} color="blue" />
             <span className="text-sm font-bold text-blue-600">현재 플랜</span>
           </div>
           <h3 className="text-2xl text-gray-900">{selectedPlan}</h3>
         </div>
-        
+
         {/* 결제일 정보: 무료 플랜이 아닐 때만 표시 */}
         {selectedPlan !== "무료" && (
           <div className="mt-4 flex items-center">
@@ -83,7 +117,9 @@ export default function SubscriptionPage() {
           </div>
         )}
         {selectedPlan === "무료" && (
-          <p className="text-sm text-gray-600 italic mt-2">무료로 잇츠파인을 이용 중입니다</p>
+          <p className="text-sm text-gray-600 italic mt-2">
+            무료로 잇츠파인을 이용 중입니다
+          </p>
         )}
       </div>
 
@@ -94,7 +130,7 @@ export default function SubscriptionPage() {
             onClick={() => setBillingCycle("monthly")}
             className={cn(
               "cursor-pointer relative z-10 px-6 py-2 text-sm font-medium transition-colors",
-              billingCycle === "monthly" ? "text-white" : "text-gray-500"
+              billingCycle === "monthly" ? "text-white" : "text-gray-500",
             )}
           >
             월간 결제
@@ -103,7 +139,7 @@ export default function SubscriptionPage() {
             onClick={() => setBillingCycle("yearly")}
             className={cn(
               "cursor-pointer relative z-10 px-6 py-2 text-sm font-medium transition-colors",
-              billingCycle === "yearly" ? "text-white" : "text-gray-500"
+              billingCycle === "yearly" ? "text-white" : "text-gray-500",
             )}
           >
             연간 결제
@@ -114,7 +150,7 @@ export default function SubscriptionPage() {
           <div
             className={cn(
               "absolute top-1 bottom-1 left-1 w-[calc(50%-4px)] rounded-md bg-blue-500 transition-transform duration-200 ease-in-out",
-              billingCycle === "yearly" ? "translate-x-full" : "translate-x-0"
+              billingCycle === "yearly" ? "translate-x-full" : "translate-x-0",
             )}
           />
         </div>
@@ -131,8 +167,11 @@ export default function SubscriptionPage() {
               key={plan.name}
               className={cn(
                 "relative flex flex-col rounded-2xl border-2 p-5 transition-all",
-                isCurrent ? "border-blue-500 bg-blue-50 shadow-md" : 
-                isRecommended ? "border-blue-400 bg-white shadow-sm" : "border-gray-100"
+                isCurrent
+                  ? "border-blue-500 bg-blue-50 shadow-md"
+                  : isRecommended
+                    ? "border-blue-400 bg-white shadow-sm"
+                    : "border-gray-100",
               )}
             >
               {isCurrent && (
@@ -140,7 +179,7 @@ export default function SubscriptionPage() {
                   <Check size={14} /> 현재 플랜
                 </div>
               )}
-              
+
               {!isCurrent && isRecommended && (
                 <div className="absolute right-4 top-4 rounded bg-blue-100 px-3 py-1 text-xs font-bold text-blue-600">
                   추천
@@ -153,13 +192,18 @@ export default function SubscriptionPage() {
                   <span className="text-3xl text-gray-900">
                     ₩{plan.price.toLocaleString()}
                   </span>
-                  <span className="text-gray-500">/ {billingCycle === "monthly" ? "월" : "년"}</span>
+                  <span className="text-gray-500">
+                    / {billingCycle === "monthly" ? "월" : "년"}
+                  </span>
                 </div>
               </div>
 
               <ul className="mb-8 flex-1 space-y-4">
                 {plan.features.map((feature) => (
-                  <li key={feature} className="flex items-center gap-3 text-sm text-gray-600">
+                  <li
+                    key={feature}
+                    className="flex items-center gap-3 text-sm text-gray-600"
+                  >
                     <Check size={18} className="text-blue-500" />
                     {feature}
                   </li>
@@ -174,8 +218,8 @@ export default function SubscriptionPage() {
                   isCurrent
                     ? "bg-gray-100 text-gray-400 cursor-default"
                     : isRecommended
-                    ? "bg-blue-500 text-white hover:bg-blue-600 shadow-md"
-                    : "bg-white border-2 border-gray-200 text-gray-700 hover:bg-gray-50"
+                      ? "bg-blue-500 text-white hover:bg-blue-600 shadow-md"
+                      : "bg-white border-2 border-gray-200 text-gray-700 hover:bg-gray-50",
                 )}
               >
                 {isCurrent ? "현재 이용 중" : "플랜 선택"}
@@ -190,7 +234,9 @@ export default function SubscriptionPage() {
         <div className="mt-12 pt-8 border-t border-gray-100 flex items-center justify-between">
           <div>
             <h4 className="text-lg font-semibold text-gray-900">구독 관리</h4>
-            <p className="mt-1 text-sm text-gray-500">구독을 일시정지하거나 취소할 수 있습니다</p>
+            <p className="mt-1 text-sm text-gray-500">
+              구독을 일시정지하거나 취소할 수 있습니다
+            </p>
           </div>
           <div className="flex gap-3">
             <button
@@ -210,4 +256,4 @@ export default function SubscriptionPage() {
       )}
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/src/query/keys.ts b/src/query/keys.ts
new file mode 100644
index 0000000..61a74f8
--- /dev/null
+++ b/src/query/keys.ts
@@ -0,0 +1,68 @@
+// api 연동 시작할때 queryKey 규칙을 통일하기 위한 파일
+
+type QueryParamsValue = string | number | boolean | null;
+type Params = Readonly<Record<string, QueryParamsValue>>;
+
+export const queryKeys = {
+  auth: {
+    all: ["auth"] as const,
+    me: () => ["auth", "me"] as const,
+  },
+
+  user: {
+    all: ["user"] as const,
+    me: () => ["user", "me"] as const,
+    detail: (userId: string | number) => ["user", "detail", userId] as const,
+  },
+
+  restaurant: {
+    all: ["restaurant"] as const,
+
+    lists: () => ["restaurant", "list"] as const,
+    list: (params?: Params) => ["restaurant", "list", params ?? {}] as const,
+
+    details: () => ["restaurant", "detail"] as const,
+    detail: (restaurantId: string | number) =>
+      ["restaurant", "detail", restaurantId] as const,
+
+    menus: (restaurantId: string | number) =>
+      ["restaurant", restaurantId, "menus"] as const,
+    seats: (restaurantId: string | number) =>
+      ["restaurant", restaurantId, "seats"] as const,
+  },
+  reservation: {
+    all: ["reservation"] as const,
+
+    lists: () => ["reservation", "list"] as const,
+    list: (params?: Params) => ["reservation", "list", params ?? {}] as const,
+
+    details: () => ["reservation", "detail"] as const,
+    detail: (reservationId: string | number) =>
+      ["reservation", "detail", reservationId] as const,
+
+    availability: (restaurantId: string | number, params?: Params) =>
+      ["reservation", "availability", restaurantId, params ?? {}] as const,
+  },
+  payment: {
+    all: ["payment"] as const,
+    detail: (paymentId: string | number) =>
+      ["payment", "detail", paymentId] as const,
+  },
+  owner: {
+    all: ["owner"] as const,
+    restaurants: () => ["owner", "restaurants"] as const,
+    restaurant: (restaurantId: string | number) =>
+      ["owner", "restaurant", restaurantId] as const,
+
+    menus: () => ["owner", "menus"] as const,
+    menuList: (restaurantId: string | number) =>
+      ["owner", "menus", restaurantId] as const,
+
+    reservations: () => ["owner", "reservations"] as const,
+    reservationList: (restaurantId: string | number, params?: Params) =>
+      ["owner", "reservations", restaurantId, params ?? {}] as const,
+
+    seats: (restaurantId: string | number) =>
+      ["owner", "seats", restaurantId] as const,
+  },
+} as const;
diff --git a/src/query/queryClient.ts b/src/query/queryClient.ts
new file mode 100644
index 0000000..8d516b5
--- /dev/null
+++ b/src/query/queryClient.ts
@@ -0,0 +1,21 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: true,
+
+      staleTime: 30000,
+      gcTime: 5 * 60000,
+
+      retry: (failureCount, error) => {
+        if (failureCount >= 2) return false;
+        return true;
+      },
+    },
+    mutations: {
+      retry: false,
+    },
+  },
+});
diff --git a/src/styles/globals.css b/src/styles/globals.css
new file mode 100644
index 0000000..acbde7f
--- /dev/null
+++ b/src/styles/globals.css
@@ -0,0 +1,156 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap");
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.028 261.692);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 261.692);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.13 0.028 261.692);
+  --primary: oklch(0.21 0.034 264.665);
+  --primary-foreground: oklch(0.985 0.002 247.839);
+  --secondary: oklch(0.967 0.003 264.542);
+  --secondary-foreground: oklch(0.21 0.034 264.665);
+  --muted: oklch(0.967 0.003 264.542);
+  --muted-foreground: oklch(0.551 0.027 264.364);
+  --accent: oklch(0.967 0.003 264.542);
+  --accent-foreground: oklch(0.21 0.034 264.665);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.928 0.006 264.531);
+  --input: oklch(0.928 0.006 264.531);
+  --ring: oklch(0.707 0.022 261.325);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.002 247.839);
+  --sidebar-foreground: oklch(0.13 0.028 261.692);
+  --sidebar-primary: oklch(0.21 0.034 264.665);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.967 0.003 264.542);
+  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
+  --sidebar-border: oklch(0.928 0.006 264.531);
+  --sidebar-ring: oklch(0.707 0.022 261.325);
+}
+
+.dark {
+  --background: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.985 0.002 247.839);
+  --card: oklch(0.21 0.034 264.665);
+  --card-foreground: oklch(0.985 0.002 247.839);
+  --popover: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.985 0.002 247.839);
+  --primary: oklch(0.928 0.006 264.531);
+  --primary-foreground: oklch(0.21 0.034 264.665);
+  --secondary: oklch(0.278 0.033 256.848);
+  --secondary-foreground: oklch(0.985 0.002 247.839);
+  --muted: oklch(0.278 0.033 256.848);
+  --muted-foreground: oklch(0.707 0.022 261.325);
+  --accent: oklch(0.278 0.033 256.848);
+  --accent-foreground: oklch(0.985 0.002 247.839);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.551 0.027 264.364);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.21 0.034 264.665);
+  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.278 0.033 256.848);
+  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  :where(:not(:has([class*=" text-"]), :has([class^="text-"]))) {
+    h1 {
+      font-size: 1.5rem;
+      font-weight: 700;
+      line-height: 1.5;
+    } /* text-2xl */
+    h2 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      line-height: 1.5;
+    } /* text-xl */
+    h3 {
+      font-size: 1.125rem;
+      font-weight: 600;
+      line-height: 1.5;
+    } /* text-lg */
+    p {
+      font-size: 1rem;
+      font-weight: 400;
+      line-height: 1.5;
+    } /* text-base */
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-family:
+      "Noto Sans KR",
+      -apple-system,
+      BlinkMacSystemFont,
+      system-ui,
+      Roboto,
+      sans-serif;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+  }
+}