fix: 에러를 쓰고있는쪽에서 변경된 error interface에 맞지 않는 문제 대응

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@bcsdlab/koin": "^0.0.15",
     "@hookform/resolvers": "^3.1.0",
     "@tanstack/react-query": "^5.8.1",
     "@testing-library/jest-dom": "^5.14.1",

src/page/Auth/Signup/component/ErrorMessage/index.tsx

@@ -2,16 +2,31 @@ import { ReactComponent as Warn } from 'assets/svg/auth/warning.svg';
 import styles from './ErrorMessage.module.scss';
 
 interface ErrorMessageProps {
-  message:string | (string | undefined)[]
+  message: string | (string | undefined | null)[]
 }
 
 export default function ErrorMessage({ message }:ErrorMessageProps) {
-  return (
-    <div className={styles.warn}>
-      <Warn />
-      <span className={styles['warn--phrase']}>
-        {typeof message === 'string' ? message : message[0]}
-      </span>
-    </div>
-  );
+  if (typeof message === 'string') {
+    return (
+      <div className={styles.warn}>
+        <Warn />
+        <span className={styles['warn--phrase']}>
+          {message}
+        </span>
+      </div>
+    );
+  }
+
+  if (message.length > 0) {
+    return (
+      <div className={styles.warn}>
+        <Warn />
+        <span className={styles['warn--phrase']}>
+          {typeof message === 'string' ? message : message[0]}
+        </span>
+      </div>
+    );
+  }
+
+  return null;
 }

src/page/Auth/Signup/hooks/useCheckEmailDuplicate.ts

@@ -5,13 +5,14 @@ import {
 import { SubmitHandler } from 'react-hook-form';
 import { User } from 'page/Auth/Signup/types/User';
 import useRegisterInfo from 'store/registerStore';
+import { isKoinError } from '@bcsdlab/koin';
 
 export default function useCheckEmailDuplicate(isMobile: boolean) {
   const [email, setEmail] = useState<string>('');
   const { status, refetch, error } = useCheckDuplicate(email);
   const { userInfo: userData, setUserInfo: setId } = useRegisterInfo();
   const debounceSearch = useRef<NodeJS.Timeout>();
-  const errorMessage:string | undefined = status === 'error' ? Object(error).response.data.message : null;
+  const errorMessage = isKoinError(error) && error.status === 409 ? '이미 사용중인 아이디입니다.' : null;
   const onSubmit:SubmitHandler<User> = (data) => {
     setEmail(() => (data.email ? data.email : ''));
   };

src/query/auth.ts

@@ -9,8 +9,8 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useErrorMessageStore } from 'store/errorMessageStore';
 import usePrevPathStore from 'store/path';
-import { isKoinError } from 'utils/ts/isKoinError';
 import useStepStore from 'store/useStepStore';
+import { isKoinError } from '@bcsdlab/koin';
 
 interface VerifyInput {
   email: string;

yarn.lock

@@ -1650,6 +1650,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@bcsdlab/koin@npm:^0.0.15":
+  version: 0.0.15
+  resolution: "@bcsdlab/koin@npm:0.0.15"
+  peerDependencies:
+    axios: ^0.27.2
+  checksum: 30b1904180a8278bdc45cbb487e10c88da6034d74964070a2837694df16b87606535b45bc5675f4f8038d7530b9d2ecf009b11d360bc572141fe92ba3ef6059e
+  languageName: node
+  linkType: hard
+
 "@csstools/normalize.css@npm:*":
   version: 12.1.1
   resolution: "@csstools/normalize.css@npm:12.1.1"
@@ -8982,6 +8991,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "koin_owner_web@workspace:."
   dependencies:
+    "@bcsdlab/koin": ^0.0.15
     "@hookform/resolvers": ^3.1.0
     "@tanstack/react-query": ^5.8.1
     "@testing-library/jest-dom": ^5.14.1