diff --git a/README.md b/README.md
index 0528ef0a..2e2f1557 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,274 @@
-# tattour-client
-TBD
+# 🦋 TATTOUR
+
+![표지](https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/e77e1a88-a897-48b1-8bc1-4f358d9dfdcb)
+
+<br/>
+
+
+## 📱 서비스 소개
+
+### 후회없는 선택의 여정을 함께, 커스텀 타투 체험 서비스 TATTOUR
+
+<br/>
+
+### 🔎 타투를 받고 싶은 사람들은 왜 고민하고 망설이는데 시간을 허비하게 될까?
+
+    문제 정의: 마음에 드는 도안을 찾더라도 과연 나에게 어울릴지, 후회하지 않을지, 주위의 시선 등의 이유로 길게는 3년 이상 고민과 망설임을 반복한다.
+
+<br/>
+
+<details>
+<summary> 👀 target </summary>
+	
+- 타투를 하고 싶지만, 과연 후회하지 않을지. 고민과 망설임을 반복하며 리소스를 허비하는 고객
+    
+- 고민하는 도안 또는 개체를 [타투스티커]라는 수단을 통해 미리 부위에 부착하고 생활하며, 다양한 고민의 이유를 현실적으로 해결하고 해소할 수 있을 것임.
+
+</details>
+
+<br />
+
+<details>
+<summary>📍 service flow </summary>
+	
+1. 유저 로그인
+    - 소셜 로그인 기능
+    - 로그인 성공 시, 회원 전용 홈 화면으로 이동
+	
+2. `포인트`를 활용한 결제 서비스
+    - 포인트가 구매 금액보다 적으면, 계좌로 구매 금액을 송금하여 포인트 충전 후 결제 가능
+	
+3. `커스텀 도안`의 유무에 따라 주문 페이지 및 금액이 달라짐.
+	
+4. `내 타투` 페이지에서 찜 목록과 주문 목록 화인 가능.
+</details>
+
+<br />
+
+<details>
+<summary>✅ solution</summary>
+가상으로 체험해본다면, 더 나아가 생활해본다면 고민의 장벽을 대폭 낮출 수 있을 것이라고 판단함.
+
+- `효율적인` 고민과 탐색 🔎
+
+  - 타투스티커를 통해 타투 고민의 과정 단축 가능.
+
+- `현실적인` 결정 💡
+
+  - 체험과 생활을 통해 고객의 상황에 맞는 현실적인 결정 가능.
+
+- `개인화 맞춤화` 경험 🪄
+  - 개인이 고민하는 이유/상황에 맞는 직접적인 선택 및 결정 경험 가능.
+
+<br />
+
+즉! 소비자가 고민되는 모든 것들을 직접 타투스티커로 체험하며, 고민의 효율성을 높이는 커스터마이징된 타투를 선택 및 체험 가능.
+
+</details>
+
+<br/>
+<hr/>
+
+## 🚀 핵심 기능 소개
+### **1️⃣ TATTOUR MAIN** : HOT CUSTOM, THEME, STYLE 소개, 네비게이션 사이드바
+<img width="595" alt="KakaoTalk_Photo_2023-07-21-22-58-41 001" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/863b1e38-2ada-4bd2-a36b-0fd87a3171f4">
+
+### **2️⃣ TATTOUR SHOP** : 고객들이 함께 만든 타투 스티커 둘러보기 및 주문하기 / 주문하기 과정에서 찜한 타투들은 '내 타투' 페이지에서 확인 가능
+<img width="595" alt="KakaoTalk_Photo_2023-07-21-22-58-41 002" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/de9a6ac6-bb8e-4fd8-8333-fbf0ce922a63">
+
+### **3️⃣ TATTOUR CUSTOM** : 원하는 제작 방식에 따라 섬세한 신청서 작성으로 나만의 타투 스티커 만들기
+* 내 도안 그대로 만들기 : 타투스티커 크기, 도안 이미지 첨부, 타투스티커 이름, 요청 사항, 수량 선택 가능
+* 타투어에게 도안 의뢰하기 : 타투스티커 크기, 참고 이미지 첨부, 레퍼런스 대충 그리기, 색상, 장르 , 스타일, 타투스티커 이름, 주제 및 추가 설명, 요청 사항, 수량 선택 가능
+
+<img width="595" alt="KakaoTalk_Photo_2023-07-21-22-58-42 003" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/a8999877-8130-42ce-bd90-556e2e2eb511">
+<img width="595" alt="KakaoTalk_Photo_2023-07-21-22-58-42 004" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/77691829/683d94dd-eb58-4036-a77a-bfdb2cf9232e">
+
+<br/>
+<hr/>
+
+
+## 🙋🏻‍♀️ 팀원 소개
+<br/>
+<div align="center">
+	<table>
+<th>팀원</th>
+  <th>구건모  <a href="https://github.com/gunom"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+	<th>서아름 <a href="https://github.com/Arooming"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+    <th> 유지민 <a href="https://github.com/urjimyu"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+  <th> 조승희 <a href="https://github.com/lydiacho"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+  <th> 조연서 <a href="https://github.com/Yeonseo-Jo"><img src="https://img.shields.io/badge/Github-181717?style=flat-square&logo=Github&logoColor=white"/></a>  </th>
+	<tr>
+	<td> 팀원 소개 </td>
+		<td> <img width="230" alt="image" src="https://user-images.githubusercontent.com/80264647/252587166-85b4b938-e123-4a83-ad4b-ce3b7e28cd52.jpeg">
+ </td>
+		<td> <img width="230" alt="image" src="https://avatars.githubusercontent.com/u/80264647?v=4"></td>  
+		<td><img width="230" alt="image" src="https://github.com/TEAM-TATTOUR/tattour-client/assets/92876819/11be19b8-442b-4d7b-9a0d-266d92a8ae03"></td>
+        <td> <img width="230" alt="image" src="https://avatars.githubusercontent.com/u/81505421?v=4"></td>  
+		<td><img width="230" alt="image" src="https://github.com/SopkathonTeam2/Client/assets/77691829/4828df0b-3fad-44bd-a243-7682687aff66"></td>
+	</tr>
+	<tr>
+	<td> 역할 </td>
+	<td>
+		<strong>WEB FRONTEND, 리드 개발자</strong>
+	</td>
+	<td>
+		<strong>WEB FRONTEND</strong>
+	</td>
+	<td>
+		<strong>WEB FRONTEND</strong>
+	</td>
+    <td>
+		<strong>WEB FRONTEND</strong>
+	</td>
+    <td>
+		<strong>WEB FRONTEND</strong>
+	</td>
+    </tr>
+	</table>
+</div>
+
+
+<br/>
+<hr/>
+
+## ⚙️ 기술 스택
+
+<div align="center">
+
+| 역할                 | 종류                                                                                                                                                                                                              |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Library              | ![React](https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black)                                                                                                                |
+| Programming Language | ![TypeScript](https://img.shields.io/badge/TypeScript-3178C6.svg?style=for-the-badge&logo=TypeScript&logoColor=white)                                                                                             |
+| Styling              | ![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)                                                                           |
+| State Management     | ![State Management](https://img.shields.io/badge/recoil-f26b00?style=for-the-badge&logo=Recoil)                                                                                                                   |
+| Formatting           | ![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white) ![Prettier](https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=white) |
+| Version Control      | ![Git](https://img.shields.io/badge/git-%23F05033.svg?style=for-the-badge&logo=git&logoColor=white) ![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)  |
+
+</div>
+
+
+<br/>
+<hr/>
+
+## ✍🏻 컨벤션
+
+### ✨ Git 컨벤션
+
+<details>
+<summary> 1️⃣ Commit 컨벤션  </summary>
+
+- 기본적인것 (feat, fix, chore, ..) 중점적으로 지키기!
+
+| 제목     | 내용                                        |
+| -------- | ------------------------------------------- |
+| init     | 브랜치 첫 커밋                              |
+| feat     | 새로운 기능에 대한 커밋                     |
+| fix      | 버그 수정에 대한 커밋                       |
+| build    | 빌드 관련 파일 수정에 대한 커밋             |
+| chore    | 그 외 자잘한 수정에 대한 커밋               |
+| docs     | 문서 수정에 대한 커밋                       |
+| style    | style: 코드 스타일 혹은 포맷 등에 관한 커밋 |
+| refactor | 코드 리팩토링에 대한 커밋                   |
+
+</details>
+
+<details>
+<summary> 2️⃣ Branch 전략 </summary>
+  
+```  
+1. feature 브랜치를 파고 페이지 단위로 이름 생성 ex)feature/LoginPage
+
+2. feature 브랜치 하위에 이슈 번호를 포함한 기능 단위 브랜치 생성 ex)LoginPage/#6-login
+
+3. develop 브랜치 만들어서 페이지 단위 브랜치는 dev브랜치로 merge
+
+4. 개발이 최종적으로 끝나면 main에 dev 브랜치 merge
+
+5. 개발단계에서 merge가 이루어지면 develop pull 받아오기 !
+
+````
+
+</details>
+
+<br/>
+
+### ✨ Project 컨벤션
+
+<details>
+<summary >1️⃣ 폴더 구조 </summary>
+
+* 공통 컴포넌트를 분리
+* 페이지 단위로 러프하게 분리
+
+```tsx
+├── public 🗂 썸네일 이미지, 로고 이미지 저장
+├── .eslintrc.cjs ✨ 린트 설정
+├── .prettierrc.cjs ✨ 프리티어 설정
+├── package.json 📦 설치된 패키지를 관리하는 파일
+└── src
+    ├── App.tsx ✡️ 앱의 라우팅과 글로벌 스타일 지정
+    │
+    ├── main.tsx
+    │
+    ├── Router.tsx ✡️ 라우터 설정
+    │
+    ├── assets
+    │   ├── icon 🖼 이미지 파일들 저장
+    │   ├── └── svgs 🌁 svg 파일들 저장
+    │
+    ├── components 🗂 컴포넌트들 저장
+    │   ├── modal 🗂 모달 컴포넌트들
+    │   └── Login.tsx
+    │
+    ├── pages 🗂 라우팅 시 보여질 페이지 컴포넌트 저장
+    │   └── LoginPage.tsx
+    │
+    ├── recoil 🗂 리코일 관련 파일들 저장
+    │   ├── atoms 🗂 atom들 저장
+    │   └── seletors 🗂 selector들 저장
+    │
+    ├── styles 🗂 전역 스타일 관련 파일들 저장
+    │   ├── GlobalStyle.js
+    │   ├── modal.css
+    │   └── color.js
+    │
+    ├── utils 🗂 util 함수 관련 파일들 저장
+    │   └── apis 🗂 api 함수 관련 파일들 저장
+ 
+
+````
+
+</details>
+
+<details>
+<summary >2️⃣ 기타 컨벤션 </summary>
+
+#### (1) 🎨 Style 속성
+
+```
+1.  레이아웃 속성 (display, position, float 등)
+
+2.  박스 모델 속성 (width, height, margin, padding, border 등)
+
+3.  시각 관련 속성 (background-color, background-image, box-shadow 등)
+
+4.  글꼴 관련 속성 (font-size, font-family, color, text-align, text-transform 등)
+
+5.  기타 속성 (opacity, cursor, overflow, z-index, transition, animation 등)
+```
+
+- CSS : Styled component 사용
+- theme와 globalStyle 사용 (`theme` : colors, font ~ )
+- rem을 위주로 적용.
+
+<br/>
+
+#### 🫡 기타 컨벤션
+
+- 화살표 함수형태 (`const ~~~ () => { } )` ) 로 사용.
+  - `rsc` 컴포넌트 단축키 사용
+- event 함수는 `handle(Action)(Component)`
+- 변수명 : `카멜케이스` / 상수데이터 : `대문자` / Component명 :`파스칼`
+- 절대경로 사용 (`src` 기준)
+</details>
+
diff --git a/src/common/Modal/CheckModal/CheckModalForm.tsx b/src/common/Modal/CheckModal/CheckModalForm.tsx
index ab97d93f..1a9937d9 100644
--- a/src/common/Modal/CheckModal/CheckModalForm.tsx
+++ b/src/common/Modal/CheckModal/CheckModalForm.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { IcCancelDark } from '../../../assets/icon';
 import { useNavigate } from 'react-router-dom';
-import api from '../../../libs/api';
+import { api } from '../../../libs/api';
 
 interface CheckModalFormProps {
   onClose: () => void;
diff --git a/src/common/Modal/DeleteCartModal/DeleteCartModal.tsx b/src/common/Modal/DeleteCartModal/DeleteCartModal.tsx
index 7b75dff1..d6682b33 100644
--- a/src/common/Modal/DeleteCartModal/DeleteCartModal.tsx
+++ b/src/common/Modal/DeleteCartModal/DeleteCartModal.tsx
@@ -1,6 +1,6 @@
 import ModalPortal from '../ModalPortal';
 import EscapeModalForm from '../EscapeModal/EscapeModalForm';
-import api from '../../../libs/api';
+import { api } from '../../../libs/api';
 import { useNavigate } from 'react-router-dom';
 
 interface DeleteCartModalProps {
diff --git a/src/common/Modal/EscapeModal/CustomSizeEscapeModal.tsx b/src/common/Modal/EscapeModal/CustomSizeEscapeModal.tsx
index 566a34d9..1e01ca0f 100644
--- a/src/common/Modal/EscapeModal/CustomSizeEscapeModal.tsx
+++ b/src/common/Modal/EscapeModal/CustomSizeEscapeModal.tsx
@@ -3,7 +3,7 @@ import ModalPortal from '../ModalPortal';
 import { IcCancelDark } from '../../../assets/icon';
 import { useNavigate } from 'react-router-dom';
 import { customInfoType } from '../../../types/customInfoType';
-import api from '../../../libs/api';
+import { api } from '../../../libs/api';
 
 interface CustomSizeEscapeModalProps {
   setModalOn: React.Dispatch<React.SetStateAction<boolean>>;
diff --git a/src/components/Cart/CartItem.tsx b/src/components/Cart/CartItem.tsx
index 4dcdf6fe..52dd1c9d 100644
--- a/src/components/Cart/CartItem.tsx
+++ b/src/components/Cart/CartItem.tsx
@@ -3,7 +3,7 @@ import { IcCancelDark, IcMinus, IcMinusOneunder, IcPlus } from '../../assets/ico
 import { useState, useEffect, useCallback } from 'react';
 import DeleteCartModal from '../../common/Modal/DeleteCartModal/DeleteCartModal';
 import { debounce } from 'lodash';
-import api from '../../libs/api';
+import { api } from '../../libs/api';
 import { useNavigate } from 'react-router-dom';
 
 const CartItem = ({
diff --git a/src/components/Custom/Common/OnBoardingFooter.tsx b/src/components/Custom/Common/OnBoardingFooter.tsx
index c39ef14b..3f7b8a47 100644
--- a/src/components/Custom/Common/OnBoardingFooter.tsx
+++ b/src/components/Custom/Common/OnBoardingFooter.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { styled } from 'styled-components';
 import TempSaveModal from '../../../common/Modal/TempSaveModal/TempSaveModal';
 import { useNavigate } from 'react-router-dom';
-import api from '../../../libs/api';
+import { api } from '../../../libs/api';
 import { AxiosError } from 'axios';
 
 export interface CustomSaveItemProps {
diff --git a/src/components/Custom/PriceFooter.tsx b/src/components/Custom/PriceFooter.tsx
index 8ec7f04e..a62698ba 100644
--- a/src/components/Custom/PriceFooter.tsx
+++ b/src/components/Custom/PriceFooter.tsx
@@ -1,7 +1,7 @@
 import { styled } from 'styled-components';
 import { customInfoType, resCustomInfoType } from '../../types/customInfoType';
-import api from '../../libs/api';
 import React from 'react';
+import { api } from '../../libs/api';
 
 interface PriceFooterProps {
   haveDesign?: boolean;
diff --git a/src/components/Detail/DetailFooter.tsx b/src/components/Detail/DetailFooter.tsx
index 9d59ee18..a4b5b15c 100644
--- a/src/components/Detail/DetailFooter.tsx
+++ b/src/components/Detail/DetailFooter.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { IcHeartDark, IcHeartLight } from '../../assets/icon';
 import { useNavigate } from 'react-router-dom';
-import api from '../../libs/api';
+import { api } from '../../libs/api';
 import { useState } from 'react';
 import Toast from '../../common/ToastMessage/Toast';
 
diff --git a/src/components/MyTattoo/MySaveItem.tsx b/src/components/MyTattoo/MySaveItem.tsx
index 02412b96..8779f42a 100644
--- a/src/components/MyTattoo/MySaveItem.tsx
+++ b/src/components/MyTattoo/MySaveItem.tsx
@@ -1,6 +1,6 @@
 import { styled } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import api from '../../libs/api';
+import { api } from '../../libs/api';
 
 export interface CustomDetailItemProps {
   id: number;
diff --git a/src/components/Order/OrderFooter.tsx b/src/components/Order/OrderFooter.tsx
index 7c03a15f..62e64af6 100644
--- a/src/components/Order/OrderFooter.tsx
+++ b/src/components/Order/OrderFooter.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
-import api from '../../libs/api';
+import { api } from '../../libs/api';
 import { OrderSheetProps } from '../../libs/hooks/order/useGetOrdersheet';
 
 interface OrderRequest {
diff --git a/src/components/Register/RegisterPhoneNumForm.tsx b/src/components/Register/RegisterPhoneNumForm.tsx
index bb2a3a41..19c9b3d6 100644
--- a/src/components/Register/RegisterPhoneNumForm.tsx
+++ b/src/components/Register/RegisterPhoneNumForm.tsx
@@ -1,13 +1,12 @@
 import { styled } from 'styled-components';
 import React, { SetStateAction, useReducer, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import axios from 'axios';
-import api from '../../libs/api';
 import { reducer } from '../../libs/reducers/registerReducer';
 import sliceMaxLength from '../../utils/sliceMaxLength';
 import Toast from '../../common/ToastMessage/Toast';
 import Timer from './Timer';
 import ErrorMessage from './ErrorMessage';
+import { api, baseAxios } from '../../libs/api';
 
 interface RegisterPhoneNumFormProps {
   setStep: React.Dispatch<SetStateAction<number>>;
@@ -80,23 +79,12 @@ const RegisterPhoneNumForm = ({ setStep }: RegisterPhoneNumFormProps) => {
 
   // 클릭 시, 인증번호를 받을 수 있는 버튼
   const handleClickSendMessageBtn = () => {
-    const ACCESS_TOKEN_KEY = 'accesstoken';
-    const accessToken = localStorage.getItem(ACCESS_TOKEN_KEY);
-
     // 전화번호가 제대로 입력된 경우에만 인증번호를 받을 수 있음
     if (phoneNum.length === 11) {
-      axios
-        .post(
-          `https://dev.tattour.shop/sms/send/verification-code`,
-          {
-            phoneNumber: `${phoneNum}`,
-          },
-          {
-            headers: {
-              Authorization: `Bearer ${accessToken}`,
-            },
-          },
-        )
+      baseAxios
+        .post(`/sms/send/verification-code`, {
+          phoneNumber: `${phoneNum}`,
+        })
         .then(() => {
           dispatch({ type: 'SHOW_CERTIFICATION_FORM' });
           setToast(true);
@@ -123,8 +111,8 @@ const RegisterPhoneNumForm = ({ setStep }: RegisterPhoneNumFormProps) => {
   const checkCertificationNum = (e: React.ChangeEvent<HTMLInputElement>) => {
     // 인증번호 6자리를 모두 입력했을 경우에만 서버와 소통
     if (e.target.value.length === 6) {
-      api
-        .get(`/user/phonenumber/verification`, {
+      baseAxios
+        .get(`/api/v1/user/phonenumber/verification`, {
           params: {
             verificationCode: `${e.target.value}`,
           },
diff --git a/src/libs/api.ts b/src/libs/api.ts
index 72810abe..4786282c 100644
--- a/src/libs/api.ts
+++ b/src/libs/api.ts
@@ -1,10 +1,15 @@
 import axios, { AxiosInstance } from 'axios';
 
-const api: AxiosInstance = axios.create({
+// /api/vi endpoint가 붙지 않은 instance
+export const baseAxios: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_URL,
   // timeout: 5000, // 원하는 경우 타임아웃 설정
 });
 
+export const api: AxiosInstance = axios.create({
+  baseURL: `${import.meta.env.VITE_APP_BASE_URL}/api/v1`,
+  // timeout: 5000, // 원하는 경우 타임아웃 설정
+});
 // const ACCESS_TOKEN_KEY = 'accessToken';
 const ACCESS_TOKEN_KEY = 'accesstoken';
 
@@ -20,7 +25,7 @@ export const removeAccessToken = () => {
   localStorage.removeItem(ACCESS_TOKEN_KEY);
 };
 
-api.interceptors.request.use((config) => {
+baseAxios.interceptors.request.use((config) => {
   const accessToken = getAccessToken();
   if (accessToken) {
     config.headers['Authorization'] = `Bearer ${accessToken}`;
@@ -28,4 +33,10 @@ api.interceptors.request.use((config) => {
   return config;
 });
 
-export default api;
+api.interceptors.request.use((config) => {
+  const accessToken = getAccessToken();
+  if (accessToken) {
+    config.headers['Authorization'] = `Bearer ${accessToken}`;
+  }
+  return config;
+});
diff --git a/src/libs/hooks/detail/useGetRelated.tsx b/src/libs/hooks/detail/useGetRelated.tsx
index c4d65eb9..fc168b00 100644
--- a/src/libs/hooks/detail/useGetRelated.tsx
+++ b/src/libs/hooks/detail/useGetRelated.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api from '../../api';
+import { api } from '../../api';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/src/libs/hooks/detail/useGetSticker.tsx b/src/libs/hooks/detail/useGetSticker.tsx
index 02510078..71761095 100644
--- a/src/libs/hooks/detail/useGetSticker.tsx
+++ b/src/libs/hooks/detail/useGetSticker.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api from '../../api';
+import { api } from '../../api';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/src/libs/hooks/list/useGetAllList.tsx b/src/libs/hooks/list/useGetAllList.tsx
index 82ca449b..665e3c15 100644
--- a/src/libs/hooks/list/useGetAllList.tsx
+++ b/src/libs/hooks/list/useGetAllList.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api from '../../api';
+import { api } from '../../api';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 import { buttonType } from '../../../page/ListPage';
diff --git a/src/libs/hooks/list/useGetGenre.tsx b/src/libs/hooks/list/useGetGenre.tsx
index 7ffeeb54..7d303a4e 100644
--- a/src/libs/hooks/list/useGetGenre.tsx
+++ b/src/libs/hooks/list/useGetGenre.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api from '../../api';
+import { api } from '../../api';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/src/libs/hooks/list/useGetStyle.tsx b/src/libs/hooks/list/useGetStyle.tsx
index 5cb2c67b..e2db463d 100644
--- a/src/libs/hooks/list/useGetStyle.tsx
+++ b/src/libs/hooks/list/useGetStyle.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api from '../../api';
+import { api } from '../../api';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/src/libs/hooks/order/useGetOrdersheet.tsx b/src/libs/hooks/order/useGetOrdersheet.tsx
index 4ab02ae8..f9b396b6 100644
--- a/src/libs/hooks/order/useGetOrdersheet.tsx
+++ b/src/libs/hooks/order/useGetOrdersheet.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api from '../../api';
+import { api } from '../../api';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/src/libs/hooks/order/usePostOrder.tsx b/src/libs/hooks/order/usePostOrder.tsx
index ece087ef..b6d13d01 100644
--- a/src/libs/hooks/order/usePostOrder.tsx
+++ b/src/libs/hooks/order/usePostOrder.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import api from '../../api';
+import { api } from '../../api';
 import { useNavigate } from 'react-router-dom';
 
 export interface OrderRequest {
diff --git a/src/libs/hooks/useGetCartList.ts b/src/libs/hooks/useGetCartList.ts
index d5719a6e..3340434e 100644
--- a/src/libs/hooks/useGetCartList.ts
+++ b/src/libs/hooks/useGetCartList.ts
@@ -1,58 +1,59 @@
 import { useEffect, useState } from 'react';
-import { AxiosError } from "axios";
-import api from "../api";
+import { AxiosError } from 'axios';
+import { api } from '../api';
 
 interface CartListProps {
-    cartItemsRes: CartItemProps[];
-    orderAmountDetailRes: OrderAmountDetailProps;
+  cartItemsRes: CartItemProps[];
+  orderAmountDetailRes: OrderAmountDetailProps;
 }
 
 export interface CartItemProps {
-    stickerId: number;
-    id: number;
-    mainImageUrl: string;
-    name: string;
-    price: number;
-    discountPrice: number;
-    count: number;
+  stickerId: number;
+  id: number;
+  mainImageUrl: string;
+  name: string;
+  price: number;
+  discountPrice: number;
+  count: number;
 }
 
 export interface OrderAmountDetailProps {
-    totalAmount: number;
-    productAmount: number;
-    shippingFee: number;
+  totalAmount: number;
+  productAmount: number;
+  shippingFee: number;
 }
 
 interface CartListResponse {
-    data: CartListProps
-    code: number;
-    message: string;
+  data: CartListProps;
+  code: number;
+  message: string;
 }
 
 const useGetCartList = () => {
-    const [response, setResponse] = useState<CartListProps>({} as CartListProps);
-    const [error, setError] = useState<AxiosError>();
-    const [loading, setLoading] = useState(true);
-
-    const fetchData = async () => {
-        await api.get('/cart')
-            .then(res => {
-                const data: CartListResponse = res.data;
-                setResponse(data.data);
-            })
-            .catch(err => {
-                setError(err);
-            })
-            .finally(() => {
-                setLoading(false);
-            })
-    }
-
-    useEffect(() => {
-        fetchData();
-    }, [])
-
-    return { response, error, loading }
-}
+  const [response, setResponse] = useState<CartListProps>({} as CartListProps);
+  const [error, setError] = useState<AxiosError>();
+  const [loading, setLoading] = useState(true);
+
+  const fetchData = async () => {
+    await api
+      .get('/cart')
+      .then((res) => {
+        const data: CartListResponse = res.data;
+        setResponse(data.data);
+      })
+      .catch((err) => {
+        setError(err);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  return { response, error, loading };
+};
 
 export default useGetCartList;
diff --git a/src/libs/hooks/useGetCustomDetail.ts b/src/libs/hooks/useGetCustomDetail.ts
index c5888b0c..97106a18 100644
--- a/src/libs/hooks/useGetCustomDetail.ts
+++ b/src/libs/hooks/useGetCustomDetail.ts
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { useEffect, useState } from 'react';
-import api from '../api';
+import { api } from '../api';
 import { useNavigate } from 'react-router-dom';
 
 export interface CustomDetailItemProps {
diff --git a/src/libs/hooks/useGetCustomSaveList.ts b/src/libs/hooks/useGetCustomSaveList.ts
index 1c9a3c28..a1a51a42 100644
--- a/src/libs/hooks/useGetCustomSaveList.ts
+++ b/src/libs/hooks/useGetCustomSaveList.ts
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import api from '../api';
+import { api } from '../api';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/src/libs/hooks/useGetHotCustom.ts b/src/libs/hooks/useGetHotCustom.ts
index 29480fb8..63b78464 100644
--- a/src/libs/hooks/useGetHotCustom.ts
+++ b/src/libs/hooks/useGetHotCustom.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import api from '../api';
+import { api } from '../api';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/src/libs/hooks/useGetLikeSticker.ts b/src/libs/hooks/useGetLikeSticker.ts
index c8ac9c12..8817c4a2 100644
--- a/src/libs/hooks/useGetLikeSticker.ts
+++ b/src/libs/hooks/useGetLikeSticker.ts
@@ -1,5 +1,5 @@
 import { AxiosError } from 'axios';
-import api from '../api';
+import { api } from '../api';
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
diff --git a/src/libs/hooks/useGetMyCustom.ts b/src/libs/hooks/useGetMyCustom.ts
index e29a9a6d..96236cf2 100644
--- a/src/libs/hooks/useGetMyCustom.ts
+++ b/src/libs/hooks/useGetMyCustom.ts
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { useEffect, useState } from 'react';
-import api from '../api';
+import { api } from '../api';
 import { useNavigate } from 'react-router-dom';
 
 export interface MyCustomItemProps {
diff --git a/src/libs/hooks/useGetSearchSticker.ts b/src/libs/hooks/useGetSearchSticker.ts
index d02b6483..752dc3e3 100644
--- a/src/libs/hooks/useGetSearchSticker.ts
+++ b/src/libs/hooks/useGetSearchSticker.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { AxiosError } from 'axios';
-import api from '../api';
+import { api } from '../api';
 import { useNavigate } from 'react-router-dom';
 
 export interface SearchStickerItemProps {
diff --git a/src/libs/hooks/useGetStyleCard.ts b/src/libs/hooks/useGetStyleCard.ts
index cbcc0aec..a3e0f042 100644
--- a/src/libs/hooks/useGetStyleCard.ts
+++ b/src/libs/hooks/useGetStyleCard.ts
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { useEffect, useState } from 'react';
-import api from '../api';
+import { api } from '../api';
 import { useNavigate } from 'react-router-dom';
 
 export interface MainStyleItemProps {
diff --git a/src/libs/hooks/useGetThemeCard.ts b/src/libs/hooks/useGetThemeCard.ts
index 9cfcf8bf..8ee5e2f2 100644
--- a/src/libs/hooks/useGetThemeCard.ts
+++ b/src/libs/hooks/useGetThemeCard.ts
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import { useEffect, useState } from 'react';
-import api from '../api';
+import { api } from '../api';
 import { useNavigate } from 'react-router-dom';
 
 export interface MainThemeItemProps {
diff --git a/src/libs/hooks/useGetUserProfile.ts b/src/libs/hooks/useGetUserProfile.ts
index 3050c560..0e3b7717 100644
--- a/src/libs/hooks/useGetUserProfile.ts
+++ b/src/libs/hooks/useGetUserProfile.ts
@@ -1,4 +1,4 @@
-import api from '../api';
+import { api } from '../api';
 import { useState, useEffect } from 'react';
 import { AxiosError } from 'axios';
 import { useNavigate } from 'react-router-dom';
diff --git a/src/libs/hooks/useKakaoLogin.tsx b/src/libs/hooks/useKakaoLogin.tsx
index d3eb2df9..ed566198 100644
--- a/src/libs/hooks/useKakaoLogin.tsx
+++ b/src/libs/hooks/useKakaoLogin.tsx
@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import api, { setAccessToken } from '../api';
+import { api, setAccessToken } from '../api';
 
 interface resProps {
   data: {
diff --git a/src/libs/hooks/usePostCustomApply.ts b/src/libs/hooks/usePostCustomApply.ts
index eb476c39..2cce0aab 100644
--- a/src/libs/hooks/usePostCustomApply.ts
+++ b/src/libs/hooks/usePostCustomApply.ts
@@ -1,7 +1,7 @@
 import { AxiosError, isAxiosError } from 'axios';
 import { useEffect, useState } from 'react';
-import api from '../api';
 import { useNavigate } from 'react-router-dom';
+import { api } from '../api';
 
 interface CustomApplyResponseData {
   customId: number;