Merge branch 'develop' into 1-feature/global-modal-management

Author: shlee9999

.vscode/typescript.code-snippets

@@ -6,7 +6,7 @@
       "import { styled } from 'styled-components'",
       "",
       "export const ${1:${TM_DIRECTORY/^.+\\\\(.*)$/$1/}} = styled.div`",
-      " $2",
+      " ${2}",
       "`;",
     ],
   },
@@ -16,9 +16,55 @@
     "body": [
       "import { styled } from 'styled-components'",
       "",
-      "export const ${3:${TM_DIRECTORY/.*\\/(.*)$/$1/}} = styled.div`",
-      " $2",
+      "export const ${1:${TM_DIRECTORY/.*\\/(.*)$/$1/}} = styled.div`",
+      " ${2}",
       "`;",
     ],
   },
+  "Axios Request Function": {
+    "prefix": "api-req",
+    "body": [
+      "import { AxiosError } from 'axios';",
+      "import { APIResponse, ErrorResponse } from '~types/apiResponse';",
+      "import { axiosInstance } from '~apis/axiosInstance';",
+      "",
+      "interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Request {",
+      "  ${2}",
+      "}",
+      "",
+      "interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Response {",
+      "  ${3}",
+      "}",
+      "",
+      "export const ${4:${TM_FILENAME_BASE/(.*)/${1:/camelcase}/}} = async (req: ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Request): Promise<APIResponse<${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Response>> => {",
+      "  try {",
+      "    const { data } = await axiosInstance.${5|get,post,put,patch,delete|}<APIResponse<${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Response>>(",
+      "      `/${6:endpoint}`,",
+      "       req",
+      "    );",
+      "    return data;",
+      "  } catch (error) {",
+      "    if (error instanceof AxiosError) {",
+      "      const { response, request } = error as AxiosError<ErrorResponse>;",
+      "",
+      "      if (response) {",
+      "        //? 서버에서 응답이 왔지만 에러가 발생한 경우",
+      "        console.error('${7:ErrorMessage}', response.data);",
+      "        throw new Error(response.data.message ?? '요청 실패');",
+      "      }",
+      "",
+      "      if (request) {",
+      "        //? 요청 자체가 실패한 경우 : 네트워크 연결 문제나 CORS 에러와 같은 클라이언트 측 문제",
+      "        console.error('요청 에러:', request);",
+      "        throw new Error('네트워크 연결을 확인해주세요');",
+      "      }",
+      "    }",
+      "",
+      "    console.error('예상치 못한 에러:', error);",
+      "    throw new Error('다시 시도해주세요');",
+      "  }",
+      "};",
+    ],
+    "description": "Axios request function template with error handling",
+  },
 }