Skip to content

Commit

Permalink
Merge pull request #17 from CHZZK-Study/chore/axios-setting
Browse files Browse the repository at this point in the history
chore : axios 세팅 msw 연동 및 테스트
  • Loading branch information
aquaman122 authored Jul 30, 2024
2 parents fd19642 + 65c2c6b commit 704e006
Show file tree
Hide file tree
Showing 16 changed files with 202 additions and 154 deletions.
1 change: 1 addition & 0 deletions .env
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
VITE_MOCK_API_URL= http://localhost:5173
203 changes: 73 additions & 130 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@
"@reduxjs/toolkit": "^2.2.6",
"@tanstack/react-query": "^5.51.11",
"@tanstack/react-query-devtools": "^5.51.11",
"axios": "^1.7.2",
"classnames": "^2.5.1",
"dotenv": "^16.4.5",
"msw": "^2.3.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.2.1",
Expand Down Expand Up @@ -58,7 +59,6 @@
"husky": "^8.0.0",
"jsdom": "^24.1.0",
"lint-staged": "^15.2.7",
"msw": "^2.3.3",
"postcss": "^8.4.39",
"prettier": "^3.3.2",
"tailwindcss": "^3.4.5",
Expand Down
2 changes: 1 addition & 1 deletion public/mockServiceWorker.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* - Please do NOT serve this file on production.
*/

const PACKAGE_VERSION = '2.3.3';
const PACKAGE_VERSION = '2.3.4';
const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423';
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse');
const activeClientIds = new Set();
Expand Down
13 changes: 13 additions & 0 deletions src/api/test.api.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { API_END_POINT } from '@/constants/api';
// eslint-disable-next-line import/no-cycle
import { TestItems } from '@/pages/Test';
import { httpClient } from '@/utils/axios';

interface TestData {
test: TestItems[];
}

export const getTest = async (): Promise<TestData> => {
const response = await httpClient.get(API_END_POINT.TEST);
return response.data;
};
10 changes: 10 additions & 0 deletions src/constants/api.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export const API_END_POINT = {
// AUTH
LOGIN: '/auth/login',
LOGOUT: '/auth/logout',
REFRESH_TOKEN: '/auth/token',
SIGNUP: '/users/signup',
PROFILE: '/profile',
// Test
TEST: '/test',
};
2 changes: 1 addition & 1 deletion src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { store } from './store';
import ReactQueryProvider from './provider/queryProvider';

async function enableMocking(): Promise<void> {
if (process.env.NODE_ENV !== 'development') {
if (import.meta.env.MODE !== 'development') {
return;
}

Expand Down
9 changes: 6 additions & 3 deletions src/mocks/broswer.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
/* eslint-disable import/no-named-as-default */
import { setupWorker } from 'msw/browser';
import { handlers } from './handlers';
import { HttpHandler } from 'msw';
import getTest from './handlers/test';

export const worker = setupWorker(...handlers);
export const handlers: HttpHandler[] = [getTest];

export default worker;
export const worker = setupWorker(...handlers);
/* eslint-disable import/no-named-as-default */
10 changes: 0 additions & 10 deletions src/mocks/handlers.ts

This file was deleted.

20 changes: 20 additions & 0 deletions src/mocks/handlers/test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { http, HttpHandler, HttpResponse } from 'msw';
import { API_END_POINT } from '@/constants/api';
import ongoingProducts from '../data/ongoingData';

export const getTest: HttpHandler = http.get(
`${API_END_POINT.TEST}`,
async () => {
return new HttpResponse(
JSON.stringify({
test: [...ongoingProducts],
}),
{
status: 200,
statusText: 'OK',
},
);
},
);

export default getTest;
6 changes: 0 additions & 6 deletions src/mocks/node.ts

This file was deleted.

36 changes: 36 additions & 0 deletions src/pages/Test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/* eslint-disable import/no-cycle */
import { useQuery } from '@tanstack/react-query';
import { getTest } from '@/api/test.api';
/* eslint-disable import/no-cycle */

export interface TestItems {
id: number;
name: string;
startPrice: string;
timeLeft: string;
activeUserCount: string;
isBidding: boolean;
}

const Test = () => {
const { data, isLoading, error } = useQuery({
queryKey: ['TEST'],
queryFn: () => getTest(),
});

if (isLoading) return <div>Loading</div>;
if (error) return <div>Error</div>;

return (
<div>
{data?.test?.map(
(
item: any /* eslint-disable-line @typescript-eslint/no-explicit-any */,
index: number /* eslint-disable-line @typescript-eslint/no-unused-vars */,
) => <div key={item.id}>{item.name}</div>,
)}
</div>
);
};

export default Test;
5 changes: 5 additions & 0 deletions src/routing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import ROUTERS from '@/constants/route';
import MainPage from '@/pages/MainPage';
import Home from '@/pages/home';
import ProductList from '@/pages/ProductList';
import Test from './pages/Test';

const routeList = [
{
Expand All @@ -18,6 +19,10 @@ const routeList = [
path: ROUTERS.PRODUCT.LIST,
element: <ProductList />,
},
{
path: '/test',
element: <Test />,
},
];

export const router = createBrowserRouter(
Expand Down
29 changes: 29 additions & 0 deletions src/utils/axios.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import axios, { AxiosRequestConfig } from 'axios';

export const createClient = (config?: AxiosRequestConfig) => {
const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_MOCK_API_URL,
headers: {
'Content-Type': 'application/json',
},
withCredentials: true,
timeout: 5000,
...config,
});
axiosInstance.interceptors.request.use((request) => {
return request;
});

axiosInstance.interceptors.response.use(
(response) => {
return response;
},
(error) => {
return Promise.reject(error);
},
);

return axiosInstance;
};

export const httpClient = createClient();
4 changes: 3 additions & 1 deletion tsconfig.base.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
"@/assets/*": ["assets/*"],
"@/constants/*": ["constants/*"],
"@/mocks/*": ["mocks/*"],
"@/pages/*": ["pages/*"]
"@/pages/*": ["pages/*"],
"@/api/*": ["api/*"],
"@/utils/*": ["utils/*"],
}
}
}
2 changes: 2 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export default defineConfig({
'@/constants': resolve(__dirname, 'src/constants'),
'@/mocks': resolve(__dirname, 'src/mocks'),
'@/pages': resolve(__dirname, 'src/pages'),
'@/api': resolve(__dirname, 'src/api'),
'@/utils': resolve(__dirname, 'src/utils'),
},
},
test: {
Expand Down

0 comments on commit 704e006

Please sign in to comment.