chore: global 스타일 적용

biome.json

@@ -0,0 +1,7 @@
+{
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  }
+}

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>
+    </>
   );
 }

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);
+  },
+);

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>
   );
-}
+}

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";

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",
                     )
                   }
                 >

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));
+}

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>,
+);