💡 로컬 mockData를 axios API처럼 사용하는 구조 + 실제 서버로 자연스럽게 전환하는

React 프로젝트에서 조직도/구성원 같은 더미 데이터를 mockData.ts로 관리하고 있다면,

실제 API 서버와 연결될 때 코드를 대거 뜯어고치지 않고도 "그대로 전환"할 수 있는 구조를 만들어둘 수 있습니다.

---

✅ 목표

• mockData.ts에 있는 데이터를 실제 API처럼 axios.get()으로 불러오는 방식으로 처리
• 나중에 서버만 붙이면 자동 전환되도록 설계
• 전환 시 기존 UI/상태 관리 구조 단 한 줄도 안 바꾸는 것이 목표

---

1. 기본 API 클라이언트 설정 (axios)

// api/apiClient.ts
import axios from 'axios';

const BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:3000';

const apiClient = axios.create({
  baseURL: BASE_URL,
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json'
  },
  timeout: 15000
});

export default apiClient;

.env.local:

REACT_APP_API_BASE_URL=https://mock.domain.com:443

---

2. mock 응답을 가로채는 세팅 (axios-mock-adapter)

npm install axios-mock-adapter

// api/mock/setupMockApi.ts
import MockAdapter from 'axios-mock-adapter';
import apiClient from '../apiClient';
import { initialMembers } from '@/mock/mockData';

export function setupMockApi() {
  const mock = new MockAdapter(apiClient, { delayResponse: 300 });

  mock.onGet('//{프로젝트명}/rest/getCpnOrgEmpList.do').reply((config) => {
    const { cpnId } = config.params;

    if (cpnId === 1) {
      const allMembers = Object.values(initialMembers).flat().map((m, index) => ({
        userId: index + 1,
        userNm: m.name,
        position: 1,
        deptNm: '',
        deptId: 0,
        parentId: 0,
        macId: '',
        osId: ''
      }));

      return [200, {
        pscd: 'OK',
        pcsRsltMsg: '조직도 조회 성공',
        Data: allMembers
      }];
    }

    return [200, {
      pscd: 'FAIL',
      pcsRsltMsg: '해당 회사 없음',
      Data: []
    }];
  });
}

// App.tsx or main.ts
import { setupMockApi } from '@/api/mock/setupMockApi';

if (process.env.NODE_ENV === 'development') {
  setupMockApi();
}

---

3. 실제 API처럼 함수 정의

// api/getCpnOrgEmpList.ts
import apiClient from './apiClient';
import { ApiResponse } from './apiTemplates';

export interface GetCpnOrgEmpParams {
  userId: number;
  cpnId: number;
}

export interface CpnOrgEmp {
  userId: number;
  userNm: string;
  position: number;
  deptNm: string;
  deptId: number;
  parentId: number;
  macId: string;
  osId: string;
}

export const getCpnOrgEmpList = async (
  params: GetCpnOrgEmpParams
): Promise<ApiResponse<CpnOrgEmp[]>> => {
  try {
    const res = await apiClient.get('/{프로젝트명}/rest/getCpnOrgEmpList.do', { params });
    return res.data;
  } catch (e) {
    return {
      pscd: 'ERR_500',
      pcsRsltMsg: '서버 연결 실패'
    };
  }
};

---

4. 사용 예시 (React 컴포넌트)

useEffect(() => {
  const fetchData = async () => {
    const res = await getCpnOrgEmpList({ userId: 1, cpnId: 1 });
    if (res.pscd === 'OK' && res.Data) {
      console.log('응답받은 구성원', res.Data);
    } else {
      console.error('API 실패:', res.pcsRsltMsg);
    }
  };

  fetchData();
}, []);

---

✅ 전환이 쉬운 이유

지금 구조는 실제 API가 생기더라도 mock 설정만 제거하면 완벽하게 연동됩니다.

변경 전	변경 후
setupMockApi();	❌ 주석 처리
axios.get(...)	✅ 그대로 유지
useEffect 호출 로직	✅ 그대로 유지
mockData.ts	❌ 사용 안 해도 됨

---

🔁 실제 API 서버 전환 시 해야 할 일

// setupMockApi(); 👈 이 한 줄만 제거!

---

✨ 마무리

이 구조는 다음과 같은 경우에 매우 적합합니다:

• 백엔드 연동 전 프론트엔드 단독 개발 필요할 때
• API 명세서 기반으로 작업 중일 때
• 테스트용 mockData로 화면만 먼저 보여줘야 할 때
• 후에 실서버 전환이 부담 없이 이뤄져야 할 때