1️⃣ api 베이스 URL env 에 등록

• Vite 에서는 VITE_ 이렇게 변수명 등록함

//.env

VITE_BASE_URL=https://k12e202.p.ssafy.io

2️⃣ config.ts 생성

• src 폴더에 config.ts 생성 - import.meta.env 로 불러올 수 있음

// src/config.ts

export const BASE_URL = import.meta.env.VITE_BASE_URL

3️⃣ Vite 설정에 등록

// src/vite-env.d.ts

interface ImportMetaEnv {
  readonly VITE_BASE_URL: string
  readonly VITE_FACE_URL: string
}

interface ImportMeta {
  readonly env: ImportMetaEnv
}

4️⃣ access token 과 refresh token 은 쿠키에 저장

• react cookie 설치

npm i react-cookie

• main.tsx 에 CookiesProvider 로 묶어주기

// src/main.tsx

import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { BrowserRouter } from 'react-router-dom'
import { CookiesProvider } from 'react-cookie'

createRoot(document.getElementById('root')!).render(
  <CookiesProvider>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </CookiesProvider>,
)

• 쿠키 관련 공통 훅 설정

// src/hooks/useCookieAuth.ts

import { Cookies } from 'react-cookie'

const cookies = new Cookies()

// 쿠키 설정
export const setCookie = (name: string, value: string, options?: any) => {
  return cookies.set(name, value, { ...options })
}

// 쿠키 가져오기
export const getCookie = (name: string) => {
  return cookies.get(name)
}

// 쿠키 삭제
export const removeCookie = (name: string) => {
  return cookies.remove(name, { path: '/' })
}

4️⃣ zustand 상태 관리 설정

• AuthState 정의 - user 정보, 초기화, 인증 여부,