1️⃣ MSW 설치

npm install msw --save-dev

// MSW는 브라우저 환경에서 동작하기 위해 서비스 워커 파일이 필요합니다.
// 이 명령어는 public/mockServiceWorker.js 파일을 생성합니다.

npx msw init public/ --save

2️⃣ 환경 설정

• 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'
import { startMSW } from './mocks/mockStore.ts'

// MSW 활성화
async function startApp() {
  // 개발 환경에서만 MSW 시작
  if (process.env.NODE_ENV === 'development') {
    // 서비스 워커 등록이 완료될 때까지 기다림
    await startMSW()
    console.log('MSW 초기화 완료, 애플리케이션 시작')
  }

  // 애플리케이션 렌더링
  createRoot(document.getElementById('root')!).render(
    <CookiesProvider>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </CookiesProvider>,
  )
}

startApp()

• App.tsx

import { testMSW } from './mocks/testStore'

function App() {
  // 개발 환경에서 MSW 테스트 실행
  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      // MSW가 정상적으로 작동하는지 테스트
      testMSW().then((success) => {
        if (success) {
          console.log('MSW가 올바르게 설정되었습니다.')
        } else {
          console.warn('MSW 설정이 올바르지 않을 수 있습니다.')
        }
      })
    }
  }, [])
  return (
    <>
      <Fonts />
      <Routes>
      ...
      </Routes>
    </>
  )
}

export default App

• api.ts

// axios 인스턴스 생성
const apiRequester: AxiosInstance = axios.create({
  // baseURL: BASE_URL as string
  baseURL: process.env.NODE_ENV === 'development' ? '' : (BASE_URL as string),
  timeout: 5000,
})

3️⃣ src/mocks/설정 파일 생성

// src/mocks/mockStore.ts

import { rest } from 'msw'
import { setupWorker } from 'msw'

// 방문 매장 목록 모킹 데이터
const mockVisitedStores = [
  {
    storeId: 1,
    storeName: "오더미 부산점",
    address: "부산광역시 강서구 녹산산업중로 333",
    contactNumber: "031-210-5114",
    businessHours: "09:00-22:00",
    visitCount: 2,
    lastVisitDate: "2025-05-12T23:49:25"
  },
  {
    storeId: 2,
    storeName: "오더미 서울점",
    address: "서울특별시 강남구 테헤란로 212",
    contactNumber: "02-3429-5114",
    businessHours: "08:00-23:00",
    visitCount: 15,
    lastVisitDate: "2025-05-13T01:05:56"
  },
  {
    storeId: 3,
    storeName: "오더미 대구점",
    address: "대구광역시 중구 동성로 123",
    contactNumber: "053-123-4567",
    businessHours: "10:00-21:00",
    visitCount: 8,
    lastVisitDate: "2025-05-10T14:30:20"
  },
  {
    storeId: 4,
    storeName: "오더미 인천점",
    address: "인천광역시 연수구 송도동 123",
    contactNumber: "032-987-6543",
    businessHours: "09:30-22:30",
    visitCount: 22,
    lastVisitDate: "2025-05-09T18:15:10"
  },
  {
    storeId: 5,
    storeName: "오더미 제주점",
    address: "제주특별자치도 제주시 노형동 456",
    contactNumber: "064-345-6789",
    businessHours: "08:30-21:30",
    visitCount: 28,
    lastVisitDate: "2025-05-08T11:45:30"
  }
]

// API 응답 타입 정의
interface ApiResponse<T> {
  status: number
  success: boolean
  message: string
  data: T
}

// API 요청을 가로채서 모킹 응답을 반환하는 핸들러 정의
export const handlers = [
  // 방문 매장 목록 조회 API
  http.get('/api/stores/visited', async () => {
    console.log('MSW: 방문 매장 목록 요청 가로챔')

    // 500ms 지연
    await new Promise((resolve) => setTimeout(resolve, 500))

    return HttpResponse.json<ApiResponse<VisitedStoreInfo[]>>(
      {
        status: 200,
        success: true,
        message: '요청이 성공했습니다.',
        data: mockVisitedStores,
      },
      { status: 200 },
    )
  }),
]

// 서비스 워커 생성
export const worker = setupWorker(...handlers)

// 서비스 워커 시작 함수 (Promise 반환)
export async function startMSW(): Promise<void> {
  // 개발 환경에서만 MSW 시작
  if (process.env.NODE_ENV === 'development') {
    try {
      // onUnhandledRequest 옵션을 추가하여 모든 요청 로깅
      await worker.start({
        onUnhandledRequest: 'warn', // 가로채지 않은 요청에 대해 경고
        serviceWorker: {
          url: '/mockServiceWorker.js', // 서비스 워커 파일 경로 명시적 지정
        },
      })
      console.log('🔶 Mock Service Worker 활성화됨')
      return Promise.resolve()
    } catch (error) {
      console.error('MSW 시작 실패:', error)
      return Promise.reject(error)
    }
  }
  return Promise.resolve()
}

// src/mocks/testStore.ts - 테스트 콘솔 코드

/**
 * MSW 디버깅 파일
 * 이 파일에서는 MSW가 올바르게 설정되었는지 확인하는 테스트 함수를 제공합니다.
 */

export async function testMSW() {
  try {
    // 방문 매장 목록 API 테스트
    console.log('MSW 테스트: 방문 매장 목록 요청 시작...')
    const storesResponse = await fetch('/api/stores/visited')
    const storesData = await storesResponse.json()
    console.log('MSW 테스트: 방문 매장 목록 응답', storesData)

    if (storesData.success && Array.isArray(storesData.data)) {
      console.log('✅ MSW 테스트: 방문 매장 목록 모킹 성공!')
    } else {
      console.error('❌ MSW 테스트: 방문 매장 목록 모킹 실패')
    }
    console.log('🔶 모든 MSW 테스트 완료!')
    return true
  } catch (error) {
    console.error('❌ MSW 테스트 실패:', error)
    return false
  }
}

4️⃣ 실행

1. 서비스 워커 파일을 생성합니다 (아직 없는 경우):

>> npx msw init public/ --save

2. 개발 서버를 재시작합니다:
>> npm run dev

3. 브라우저 개발자 도구 콘솔에서 MSW 관련 메시지를 확인합니다.