Skip to content

axiosClient 메서드 사용하기

Jump to bottom
hwisaac edited this page Feb 21, 2023 · 5 revisions

설명

코드는src/libs/axiosClient.tsx 에 있습니다.

  • 해당 파일에서 ax 라는 axios 인스턴스를 생성하고 export 하고 있습니다.
  • 이 ax 인스턴스를 import 하면, 안에 정의된 메서드들을 사용할 수 있습니다.

예시:

import { ax } from './libs/axiosClient';

const handleTest = async () => {
    const { email, password } = getValues(); // useForm 에서 입력받은 email과 password를 가져옵니다.
    const token = await ax.postLogin({email, password}); // 해당 메서드를 이용하면 api 요청을 간단히 할 수 있습니다.
    console.log(token);
  };
image

회원정보 메서드

로그인 요청 postLogin

ax.postLogin : ({ email, password }: ILoginInput) => Promise<IToken>
interface ILoginInput {
  email: string;
  password: string;
}

interface IToken {
  accessToken: string;
  refreshToken: string;
}

유저 정보수정 patchUserEdit

ax.patchUserEdit : (
    accessToken: string,
    payload: IUserEditPayload
  ) => Promise<IPatchUserEditReturn>
interface IUserEditPayload {
  oldPassword: string;
  newPassword?: string;
  phone?: string;
  salary?: number;
  job?: string;
}
interface IPatchUserEditReturn {
  oldPassword: string;
  newPassword: string;
  phone: string;
  salary: number;
  job: string;
}

유저 정보 가져오기 getUser

ax.getUser : (accessToken: string) => Promise<IGetUserReturn>
interface IGetUserReturn {
  email: string;
  password: string;
  name: string;
  birth: string;
  phone: string;
  salary: number;
  job: string;
  availableAmount: number;
}

리프레시토큰 사용 postRefresh

ax.postRefresh : (refreshToken: string) => Promise<IPostRefreshReturn>
interface IPostRefreshReturn {
  accessToken: string,
  refreshToken: string
}

로그아웃 postLogout

ax.postLogout : (accessToken) => Promise<void>
{
	"code": 200,
	"message": "로그아웃 성공",
	"data": "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJGYXN0Q2FtcHVzIiwiaWF0IjoxNjc2OTcxMjkyLCJleHAiOjE2NzY5NzMwOTIsImVtYWlsIjoidGVzdHQifQ.RWsntbwHaURNqyg9jrS_lDx8CDuCWjbIctHcAsH6WYg"
}

회원가입하기 postRegister

ax.postRegister : (payload: IRegisterInput) => Promise<IPostRegisterReturn>
interface IRegisterInput {
  birth?: string;
  email: string;
  job?: string;
  name?: string;
  password: string;
  phone?: string;
  salary: number;
}

interface IPostRegisterReturn {
  code: number;
  message: string;
  data: string;
}

리턴 예시

{
	"code": 200,
	"message": "요청에 성공하였습니다.",
	"data": "SignupReqDTO(email=t2, password={bcrypt}$2a$10$1EkAozx4V5A9Xtyl0kk.3u2RlZDpIcbq2961qAMUo2oVLAH0c8GJS, name=null, birth=null, phone=null, salary=1234, job=null)"
}

회원탈퇴하기 deleteUser

ax.deleteUser : (accessToken, { email, password }) => Promise<IDeleteUserReturn>
interface IDeleteUserReturn {
  memberId: number;
  email: string;
  password: string;
  name: string;
  birth: string;
  phone: string;
  salary: number;
  job: string;
  deleteCheck: string;
  created_date: number[];
  updated_date: number[];
}

리턴 예시

{
		"memberId": 32,
		"email": "t3",
		"password": "{bcrypt}$2a$10$DlG.zG36zkURqyVJuIdcjOVfV7FnqIm7WfoVePqKfWKSXBD6Q3.Xy",
		"name": "Anonymouse",
		"birth": "12314",
		"phone": "011111111111",
		"salary": 313123,
		"job": "feee",
		"deleteCheck": "withdraw",
		"created_date": [
			2023,
			2,
			21,
			3,
			19,
			8,
			65628000
		],
		"updated_date": [
			2023,
			2,
			21,
			3,
			31,
			27,
			590384000
		]
	}

상품 관련

전체상품 가져오기 getProducts

ax.getProducts : (accessToken, page) => Promise<IGetProductsReturn>
interface IGetProductsReturn {
  content : {
    price: number,
    brand: string,
    logo: string;
    name: string;
    rate: number;
    detail: string;
    productId: number
  }[],
  totalPages: number,
  totalElements: number,
  pageNumber: number,
  size: number
}

리턴 예시

{
  "content": [
    {
      "price": 1000,
      "brand": "우리은행",
      "logo": "https://ai.esmplus.com/heehyohoo/project/wori.png",
      "name": "부동산담보대출",
      "rate": 7.7,
      "detail": "02-123-1234",
      "productId": 1
    },
    {
      "price": 2000,
      "brand": "국민은행",
      "logo": "https://ai.esmplus.com/heehyohoo/project/kb.png",
      "name": "부동산담보대출",
      "rate": 7.7,
      "detail": "02-123-1234",
      "productId": 2
    }
  ],
  "totalPages": 15,
  "totalElements": 150,
  "pageNumber": 1,
  "size": 10
}

추천상품 전체 가져오기 getRecommendsProducts

ax.getRecommendsProducts : (accessToken, page) => Promise<IGetProductsReturn>
interface IGetProductsReturn {
  content: {
    price: number;
    brand: string;
    logo: string;
    name: string;
    rate: number;
    detail: string;
    productId: number;
  }[];
  totalPages: number;
  totalElements: number;
  pageNumber: number;
  size: number;
}

리턴값 예시는 전체상품 가져오기와 동일

상품 상세정보 가져오기 getProductsDetails

ax.getProductsDetails : (products_id) => Promise<IProduct>
interface IProduct {
  brand: string;
  detail: string;
  logo: string;
  name: string;
  price: number;
  productId: number;
  rate: number;
}

주문관련

상품 구매하기 postOrders

리턴값은 없습니다.(void)

ax.postOrders(
    accessToken,
    products_id_list: (number|string)[]
  ): Promise<void>

구매목록 조회 getOrders

ax.getOrders : (accessToken) => Promise<IGetOrders>
type IGetOrders = {
  orderId: number;
  purchaseDate: number[];
  purchasedProductList: purchasedProduct[];
}[]; // 배열을 리턴해줍니다.

리턴 예시

[
  {
    "orderId": 52,
    "purchaseDate": [2023, 2, 21, 9, 43, 45, 197054000],
    "purchasedProductList": [
      {
        "purchasedProductId": 75,
        "purchasedProductPrice": 1000,
        "purchasedProductBrand": "우리은행",
        "purchasedProductLogo": "https://ai.esmplus.com/heehyohoo/project/wori.png",
        "purchasedProductName": "부동산담보대출",
        "purchasedProductRate": 7.7,
        "purchasedProductDetail": "02-123-1234",
        "originalProductId": 1
      },
      {
        "purchasedProductId": 76,
        "purchasedProductPrice": 2000,
        "purchasedProductBrand": "국민은행",
        "purchasedProductLogo": "https://ai.esmplus.com/heehyohoo/project/kb.png",
        "purchasedProductName": "부동산담보대출",
        "purchasedProductRate": 7.7,
        "purchasedProductDetail": "02-123-1234",
        "originalProductId": 2
      },
      {
        "purchasedProductId": 77,
        "purchasedProductPrice": 3000,
        "purchasedProductBrand": "하나은행",
        "purchasedProductLogo": "https://ai.esmplus.com/heehyohoo/project/hana.png",
        "purchasedProductName": "부동산담보대출",
        "purchasedProductRate": 7.7,
        "purchasedProductDetail": "02-123-1234",
        "originalProductId": 3
      }
    ]
  },
  {
    "orderId": 53,
    "purchaseDate": [2023, 2, 21, 9, 43, 56, 653965000],
    "purchasedProductList": [
      {
        "purchasedProductId": 78,
        "purchasedProductPrice": 4000,
        "purchasedProductBrand": "신한은행",
        "purchasedProductLogo": "https://ai.esmplus.com/heehyohoo/project/shinhan.png",
        "purchasedProductName": "부동산담보대출",
        "purchasedProductRate": 7.7,
        "purchasedProductDetail": "02-123-1234",
        "originalProductId": 4
      },
      {
        "purchasedProductId": 79,
        "purchasedProductPrice": 5000,
        "purchasedProductBrand": "카카오뱅크",
        "purchasedProductLogo": "https://ai.esmplus.com/heehyohoo/project/kakao.png",
        "purchasedProductName": "부동산담보대출",
        "purchasedProductRate": 7.7,
        "purchasedProductDetail": "02-123-1234",
        "originalProductId": 5
      },
      {
        "purchasedProductId": 80,
        "purchasedProductPrice": 5000,
        "purchasedProductBrand": "기업은행",
        "purchasedProductLogo": "https://ai.esmplus.com/heehyohoo/project/ibk.png",
        "purchasedProductName": "부동산담보대출",
        "purchasedProductRate": 7.7,
        "purchasedProductDetail": "02-123-1234",
        "originalProductId": 6
      }
    ]
  }
]

구매 취소 deleteOrders

ax.deleteOrders : (accessToken: string, orderId: number | string ) => Promise<void>

검색

상품 검색하기 getSearch

getSearch(
    accessToken,
    { name, page }
  ): Promise<ISearchedData>
interface ISearchedData {
  content: {
    price: number;
    brand: string;
    logo: string;
    name: string;
    rate: number;
    detail: string;
    productId: number;
  }[];
  totalPages: number;
  totalElements: number;
  pageNumber: number;
  size: number;
}

위시리스트 & 장바구니

위시리스트 & 장바구니 에 추가한 목록 가져오기 getWishlists & getBaskets

ax.getWishlists : (accessToken) => Promise<IWishlistsData>
ax.getBaskets : (accessToken) => Promise<IBasketsData>
type IWishlistsData = {
  wishlistId: number;
  productId: number;
  brand: string;
  logo: string;
  name: string;
  price: number;
  detail: string;
  rate: number;
}[];

type IBasketsData = {
  basketId: number;
  brand: string;
  detail: string;
  logo: string;
  name: string;
  price: number;
  productId: number;
  rate: number;
}[];

위시리스트 & 장바구니에 상품 추가 postWishlists & postBaskets

ax.postWishlists : (accessToken: string, productId: number | string ) => Promise<void>

ax.postBaskets: (accessToken: string, basketId: number | string ) => Promise<void>

위시리스트 & 장바구니 상품 삭제 deleteWishlists & deleteBaskets

ax.deleteWishlists : ( accessToken: string, wishlistId: number | string ) => Promise<void>

ax.deleteBaskets(
    accessToken: string,
    basketId: number | string
  ): Promise<void>
Clone this wiki locally