chore: global 스타일 적용

[jjjsun]

💡 개요

전역 스타일 초기 세팅/전체 적용 및 API/Query 관련 폴더 구조 정리

🔢 관련 이슈 링크

• Closes [chore] 글로벌 스타일 적용 #32

💻 작업내용

• globals.css 세팅 및 index.css에서 load하도록 적용
• axios 인스턴스 파일을 src/api/axios.ts로 정리
• TanStack Query 설정, keys를 src/query/* 로 정리
• 공통 유틸을 src/lub/utils.ts로 통

📌 변경사항PR

• FEAT: 새로운 기능 추가
• FIX: 버그/오류 수정
• CHORE: 코드/내부 파일/설정 수정
• DOCS: 문서 수정(README 등)
• REFACTOR: 코드 리팩토링 (기능 변경 없음)
• TEST: 테스트 코드 추가/수정
• STYLE: 스타일 변경(포맷, 세미콜론 등)

🤔 추가 논의하고 싶은 내용

• queryKeys는 API 연동 시작할때부터 적용하면 될것같습니다! 기존 UI에는 영향없습니다.
• 폴더구조는 기존에 README에 적어둔것에 맞춰 정리하였습니다.
• queryKeys 부분 많이 헷갈려서 많은 피드백 부탁드립니다!

✅ 체크리스트

• 브랜치는 잘 맞게 올렸는지
• 관련 이슈를 맞게 연결했는지
• 로컬에서 정상 동작을 확있했는지
• 충돌이 없다(또는 브랜치에서 충돌 해결 후 PR 업데이트 완료)

Summary by CodeRabbit

• 새로운 기능

  • API 클라이언트 추가(자동 인증 토큰 포함)
  • React Query 통합 및 중앙 쿼리 키·클라이언트 제공
  • 구독 관리: 요금제 변경 및 일시중지 흐름 추가
  • 설정 페이지에 저장하기 버튼 추가

• 개선 사항

  • 전역 스타일·타이포그래피 및 다크 테마 일관성 강화(새 글로벌 스타일 적용)
  • 예약·결제·가게·구독 페이지의 UI 가독성 및 탭 필터링 개선

• 정리

  • 경로 별칭 적용 및 내부 유틸리티 정리/포맷 정돈

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

📝 Walkthrough

Walkthrough

Axios 기반 API 클라이언트(src/api/axios.ts) 추가, React Query 통합(src/main.tsx, src/query/*) 및 글로벌 스타일을 src/styles/globals.css로 분리(src/index.css 단순화). 다수 파일에서 cn 임포트 경로를 @/lib/utils로 통일하고, 구독·예약 등 일부 페이지에 소규모 로직과 포맷 정리를 적용했습니다.

Changes

Cohort / File(s)	Summary
API 클라이언트 src/api/axios.ts	새 Axios 인스턴스 api 추가: baseURL = import.meta.env.VITE_API_URL, timeout=10000, 요청 인터셉터에서 localStorage accessToken을 Bearer로 주입, 응답 인터셉터에서 개발환경 에러 로깅 및 401 처리 주석. 검토 포인트: SSR 안전성, env 유효성, 401 흐름.
React Query 통합 src/main.tsx, src/query/queryClient.ts, src/query/keys.ts, src/App.tsx	앱 루트에 QueryClientProvider 적용(main.tsx), 중앙 queryClient 추가(기본옵션: staleTime=30s, gcTime=5min, retry 정책), queryKeys 유틸 추가. App.tsx 내 기존 queryClient 제거. 검토 포인트: 캐시/재시도 정책 적절성, 중복 인스턴스 여부.
글로벌 스타일 분리 src/styles/globals.css, src/index.css	스타일 토큰·타이포·다크모드 변수 등을 src/styles/globals.css로 이동. src/index.css는 단순 import로 대체. 검토 포인트: Tailwind @layer base 우선순위, 폰트 로딩 타이밍, dark mode 적용.
유틸 이동/명칭 변화 src/lib/cn.ts (삭제), src/lib/utils.ts	기존 cn 유틸 파일 삭제 및 다수 파일에서 cn을 @/lib/utils에서 임포트하도록 변경. 검토 포인트: 모든 참조가 업데이트되었는지, cn 구현 차이 유무 확인.
컴포넌트·페이지 포맷·소규모 로직 src/components/modals/paymentAddModal.tsx, src/pages/myPage/*.tsx	포맷 정리·접근성 어트리뷰트 보완, 구독 페이지에 next billing 계산과 플랜 변경/일시중지 핸들러 추가, 예약/설정/스토어 등에서 JSX 리플로우. 검토 포인트: 새 핸들러의 UX 흐름(확인/상태 업데이트), 접근성(aria) 및 상태 초기값.
전역 스타일 추가 파일 src/styles/globals.css	다크 모드 변수 포함 CSS 토큰, 기본 타이포·헤딩 스타일, 폰트 import 및 Tailwind base 레이어 추가. 검토 포인트: 빌드 시 중복 CSS/불필요한 규칙 여부.

Sequence Diagram(s)

sequenceDiagram
    participant User as User
    participant App as App (React)
    participant QP as QueryClientProvider
    participant RQ as React Query
    participant Axios as Axios (api)
    participant Backend as Backend API

    User->>App: 페이지 요청 / 인터랙션
    App->>QP: QueryClientProvider로 QueryClient 제공
    App->>RQ: useQuery / useMutation 호출
    RQ->>Axios: HTTP 요청 실행
    Axios->>Axios: 요청 인터셉터 (localStorage token 주입)
    Axios->>Backend: 요청 전송 (Authorization: Bearer ...)
    Backend-->>Axios: 응답 반환
    Axios-->>RQ: 응답 전달 / 에러 반환
    RQ-->>App: 데이터 / 에러 전달
    App-->>User: UI 갱신

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

• yooseolhee
• dew102938

Poem

🌊 토큰 하나 달고 요청은 떠나네,
쿼리는 기억하고 스타일은 전역에 깔리네.
경로는 정리되고 포맷은 단정해져,
작은 인터셉터가 흐름을 지키네. 🚀

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 21.43% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Out of Scope Changes check	❓ Inconclusive	PR에 포함된 변경사항들이 #32의 주요 목표인 글로벌 스타일 적용 외에도 API/Query 폴더 구조 정리 작업이 추가로 포함되어 있어, 이슈 범위와의 관계를 명확히 하기 어렵습니다.	이슈 #32가 정말 API/Query 관련 폴더 구조 정리까지 포함하는지 확인하거나, 그렇지 않다면 해당 부분을 별도 PR로 분리하는 것을 검토해주세요.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목 'chore: global 스타일 적용'은 전역 스타일 설정이라는 주요 변경사항을 명확하게 요약하고 있으며, 변경사항의 핵심을 잘 나타냅니다.
Description check	✅ Passed	PR 설명이 제공된 템플릿 구조를 따르고 있으며, 주요 작업 내용, 변경사항 분류, 관련 이슈 링크, 추가 논의사항, 체크리스트가 모두 포함되어 있습니다.
Linked Issues check	✅ Passed	PR의 코드 변경사항들이 #32의 주요 요구사항인 '글로벌 스타일 설정 및 적용'을 충족하고 있습니다. globals.css 생성, 폴더 구조 정리 등 모두 이슈의 UI 구성 단계와 일치합니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/pages/myPage/subscriptionPage.tsx (1)

12-16: 연간 결제 선택 시 다음 결제일이 1개월로 고정됩니다.
getNextBillingDate가 항상 +1개월이라 연간 결제에서도 잘못된 날짜가 표시돼요. billingCycle에 따라 +1 또는 +12개월로 계산하도록 분기해 주세요.

🗓️ 계산 로직 수정 예시

-  const getNextBillingDate = () => {
+  const getNextBillingDate = (cycle: "monthly" | "yearly") => {
     const date = new Date();
-    date.setMonth(date.getMonth() + 1);
+    date.setMonth(date.getMonth() + (cycle === "monthly" ? 1 : 12));
     return `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
   };

-            <p className="text-sm text-gray-900"> {getNextBillingDate()}</p>
+            <p className="text-sm text-gray-900"> {getNextBillingDate(billingCycle)}</p>

Also applies to: 113-116

🤖 Fix all issues with AI agents

In `@src/main.tsx`:
- Around line 1-13: App.tsx currently creates its own QueryClient instance
(using new QueryClient()) and wraps components with a QueryClientProvider, which
conflicts with the centralized queryClient imported in main.tsx; remove the
QueryClientProvider and the new QueryClient() instantiation from App.tsx and
instead import and rely on the shared queryClient (from
src/lib/query/queryClient.ts) provided by main.tsx so only the single
queryClient instance is used across the app.

In `@src/pages/myPage/paymentPage.tsx`:
- Around line 67-72: The class list on the element built by className using cn
contains both "border" and "border-2", causing conflicting border-width rules;
remove the redundant "border" and keep "border-2" so the element uses a
consistent 2px border. Update the string passed to cn in the JSX where className
is constructed (the call to cn that includes "group relative flex items-center
justify-between rounded-lg border border-2 p-3 transition-all" and the
conditional branches using method.isDefault) to drop "border" and only include
"border-2" (adjust both the base string and ensure the conditional classes for
method.isDefault remain unchanged).

In `@src/pages/myPage/settingPage.tsx`:
- Around line 150-170: The Switch component is missing visible focus styles and
ARIA semantics; update the Switch function (props: enabled, onClick) to (1)
remove the "focus:outline-none" utility and add visible focus classes like
"focus-visible:ring-2 focus-visible:ring-offset-2" (or equivalent) so keyboard
users see focus, (2) add accessibility attributes role="switch" and
aria-checked={enabled} on the interactive element, and (3) ensure keyboard
activation is supported—since this is a <button> keep onClick but if you change
element type add an onKeyDown handler to call onClick on Enter/Space; use the
Switch function name and enabled/onClick props to locate the code.

In `@src/styles/globals.css`:
- Around line 121-142: The current top-level selector using
:where(:not(:has([class*=" text-"]), :not(:has([class^="text-"])))) has a double
negation that inverts the intended logic; replace that selector so it reads
:where(:not(:has([class*=" text-"]), :has([class^="text-"]))) (i.e., use :not(A,
B) where A = :has([class*=" text-"]) and B = :has([class^="text-"])) so the
h1/h2/h3/p rules only apply when neither kind of text-* utility class is
present. Ensure you update the selector that wraps the h1, h2, h3, p block
accordingly.

🧹 Nitpick comments (6)

src/query/queryClient.ts (1)

1-21: 전역 설정 모듈 분리 좋아요! 👍

설정을 한 곳에서 관리하는 구조가 깔끔하고, TanStack Query v5 기준으로 봤을 때 현재 설정들도 잘 적용되어 있습니다:

• staleTime: 30s → 권장 범위(30s~2m) 내에서 적절한 값 ✓
• gcTime: 5m → 기본값 유지, 프로젝트에서 캐시 지속성이 필요 없으면 문제없음 ✓
• mutations.retry: false → 변경 작업 실패 시 재시도하지 않는 보수적 접근 ✓

한 가지 제안은 retryDelay 추가입니다. 현재 코드는 재시도 시 즉시 다시 요청하는데, 아래처럼 지수 백오프(exponential backoff) 전략을 추가하면 서버 부하도 줄고 사용자 경험도 더 좋아집니다:

제안 코드

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;
      },
      retryDelay: (attemptIndex) =>
        Math.min(1000 * 2 ** attemptIndex, 30000),
    },
    mutations: {
      retry: false,
    },
  },
});

retryDelay는 첫 재시도 1초 → 2초 → 4초 → ... → 30초(상한) 식으로 점진적으로 늘어납니다. 필요에 따라 조정해도 좋습니다.

src/api/axios.ts (1)

8-16: SSR/테스트 환경에서 localStorage 접근 가드가 필요해요.
브라우저가 아닌 환경에서는 localStorage가 없어 런타임 에러가 날 수 있습니다. 간단히 window 존재 여부를 체크해 두면 안전합니다.

♻️ 방어 코드 예시

 function getAccessToken() {
-  return localStorage.getItem("accessToken");
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem("accessToken");
 }

src/pages/myPage/paymentPage.tsx (1)

76-78: 결제수단 타입에 따른 아이콘 분기 처리 고려

현재 모든 결제수단에 💛 (카카오페이 아이콘)이 하드코딩되어 있어요. PaymentAddModal에서는 카카오페이(💛)와 토스페이(💙)를 구분하고 있는데, 리스트에서는 구분이 안 되고 있네요. 나중에 토스페이가 추가되면 아이콘이 맞지 않을 수 있어요.

API 연동 시점에 수정 예정이시라면 TODO 코멘트를 남겨두시면 좋을 것 같아요!

💡 예시 코드

// PaymentMethod 인터페이스에 provider 필드 추가 권장
type PaymentProvider = "kakao" | "toss";

const PAYMENT_ICONS: Record<PaymentProvider, string> = {
  kakao: "💛",
  toss: "💙",
};

// 렌더링 시
<span className="text-xl">
  {PAYMENT_ICONS[method.provider] ?? "💳"}
</span>

src/pages/myPage/storePage.tsx (3)

87-101: stats 배열의 key로 index 사용

현재 index를 key로 사용하고 있는데, stats 배열이 컴포넌트 내부에서 정의된 정적 데이터라 당장은 문제없어요. 다만 나중에 동적으로 변경되거나 정렬/필터가 추가될 경우를 대비해서, 각 stat에 고유 id를 부여하는 것도 좋은 습관이에요.

지금은 괜찮지만, 참고해주세요! 😊

---

107-110: 접근성(a11y): 클릭 가능한 카드에 키보드 접근 지원 필요

가게 카드가 cursor-pointer로 클릭 가능해 보이지만 <div> 요소라서 키보드 사용자가 접근할 수 없어요. 실제로 클릭 시 동작(예: 대시보드 이동)이 구현되면, <button> 또는 <a> 태그로 변경하거나 tabIndex, role, onKeyDown 핸들러를 추가해야 해요.

API 연동 및 라우팅 연결 시점에 함께 수정하시면 될 것 같아요!

♿ 접근성 개선 예시

// 방법 1: button으로 변경
<button
  key={shop.id}
  onClick={() => navigate(`/store/${shop.id}`)}
  className="group relative rounded-2xl border border-gray-200 p-6 hover:shadow-md transition-all cursor-pointer text-left w-full"
>
  {/* 내용 */}
</button>

// 방법 2: Link 컴포넌트 사용 (react-router-dom)
<Link
  key={shop.id}
  to={`/store/${shop.id}`}
  className="group relative rounded-2xl border border-gray-200 p-6 hover:shadow-md transition-all cursor-pointer block"
>
  {/* 내용 */}
</Link>

---

71-206: [참고] 로딩/에러/빈 화면 상태 UX

현재 shops 데이터가 하드코딩되어 있어서 로딩/에러 상태가 없는데, API 연동 시점에 다음 상태들을 추가해주시면 좋겠어요:

• 로딩 상태: 데이터 fetch 중 스켈레톤 UI 또는 스피너
• 에러 상태: API 실패 시 재시도 버튼과 함께 에러 메시지
• 빈 화면 상태: 등록된 가게가 없을 때 안내 메시지 (paymentPage.tsx처럼)

PR 설명에 API 연동은 추후 진행이라고 하셨으니, 해당 시점에 함께 작업해주시면 될 것 같습니다! As per coding guidelines: "라우팅/레이아웃 영향, 로딩/에러/empty 상태 UX 확인."

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@src/styles/globals.css`:
- Line 121: The selector uses the invalid pseudo-element token "::has" instead
of the pseudo-class ":has" causing the rule to be ignored; locate the selector
that contains "::has([class^=\"text-\"])" in globals.css (the :where(:not(...))
rule) and replace the double-colon usage with the single-colon pseudo-class form
so the :has() condition is parsed and the intended text-style exclusions take
effect.
- Around line 2-3: Add Tailwind directive parsing to Biome by updating your
biome.json: set css.parser.tailwindDirectives to true so `@import`, `@apply`, `@theme`
inline, etc. are accepted, or alternatively configure the linter rule to ignore
Tailwind at-rules by adding the noUnknownAtRules ignore list (include
"tailwind", "apply", "layer", "theme", "utility") under linter.rules.suspicious;
modify the biome.json configuration accordingly to resolve the Biome CSS
parser/linter errors.

[dew102938]

코드 리뷰 달았습니다. 수고하셨습니다!!

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/query/keys.ts`:
- Line 3: Replace the overly permissive Params type so query keys only accept
JSON-serializable values: define a recursive Serializable union (e.g., type
Serializable = string | number | boolean | null | Serializable[] | { [k:
string]: Serializable }) and change Params from Record<string, unknown> to
Record<string, Serializable> (update any usages of Params accordingly, e.g., in
functions that build query keys).

🧹 Nitpick comments (1)

src/query/keys.ts (1)

17-31: restaurant의 detail과 menus/seats 키 구조를 통일하면 한 번에 무효화하기 쉬워져요.

지금 detail은 ["restaurant", "detail", restaurantId] 형태인데, menus/seats는 ["restaurant", restaurantId, "menus"] 형태라서 패턴이 섞여 있습니다. TanStack Query v5의 prefix 매칭은 배열의 앞부터 차례대로 비교하기 때문에, 현재 구조로는 특정 식당의 모든 데이터를 한 번에 invalidate하려면 predicate 함수로 직접 필터링해야 합니다.

제안하신 대로 ID를 중심 prefix로 통일하면, queryClient.invalidateQueries({ queryKey: ["restaurant", 5] })처럼 간단한 prefix 매칭으로 그 식당의 모든 데이터를 정리할 수 있습니다.

✅ 제안 변경

  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,
+    byId: (restaurantId: string | number) =>
+      ["restaurant", restaurantId] as const,
+    detail: (restaurantId: string | number) =>
+      ["restaurant", restaurantId, "detail"] as const,
+    menus: (restaurantId: string | number) =>
+      ["restaurant", restaurantId, "menus"] as const,
+    seats: (restaurantId: string | number) =>
+      ["restaurant", restaurantId, "seats"] as const,
  },