fix: auth bridge

src/apis/Instance.ts

@@ -1,10 +1,28 @@
 import axios from 'axios';
 
-import { nativeInfo } from '@utils/storage';
+import BridgeApi from '@utils/Bridge.ts';
+import { nativeInfo } from '@utils/storage.ts';
 
 export const Instance = axios.create({
   baseURL: 'https://api.jmt-matzip.dev',
-  headers: {
-    authorization: `Bearer ${nativeInfo.getData().accessToken}`,
-  },
 });
+
+Instance.interceptors.request.use((config) => {
+  const token = nativeInfo.getData().accessToken;
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+Instance.interceptors.response.use(
+  (res) => res,
+  async (error) => {
+    /** 1 */
+    if (error.response?.status === 401) {
+      BridgeApi.token();
+    }
+
+    return Promise.reject(error);
+  },
+);

src/pages/Main.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, useRef } from 'react';
 
 import RightArrowIconButton from '@components/common/RightArrowIcon.tsx';
 import CreateGroupButton from '@components/Main/CreateGroupButton.tsx';
@@ -7,14 +7,17 @@ import { AppScreen } from '@stackflow/plugin-basic-ui';
 import { useMainFlow } from '@stacks/StackFlow';
 import { MainContainer, MyGroupList, MyGroupListContainer, MyGroupListHeader } from '@styles/pages/Main.tsx';
 import { textStyles } from '@styles/theme/typographies.ts';
-import BridgeApi from '@utils/Bridge.ts';
+import BridgeApi, { setAccessToken } from '@utils/Bridge.ts';
+import { nativeInfo } from '@utils/storage.ts';
 
 import { useGetMyGroups } from '../apis/Group/queries/useGetMyGroups.ts';
 
 const Main = (): ReactNode => {
   const { push } = useMainFlow();
   const { myGroupsData } = useGetMyGroups();
 
+  const inputRef = useRef<HTMLInputElement>(null);
+
   return (
     <AppScreen
       appBar={{
@@ -41,6 +44,9 @@ const Main = (): ReactNode => {
         <button onClick={() => BridgeApi.navigation(true)}>nav 노출</button>
         <button onClick={() => BridgeApi.navigation(false)}>nav 비노출</button>
         <button onClick={() => BridgeApi.token()}>토큰 가져오기</button>
+        <input ref={inputRef} />
+        <button onClick={() => setAccessToken(inputRef.current?.value ?? '')}>토큰 세팅</button>
+        <button onClick={() => console.info(nativeInfo.getData())}>토큰 체크</button>
       </MainContainer>
     </AppScreen>
   );

src/utils/storage.ts

@@ -22,8 +22,7 @@ type NativeInfo = {
 };
 
 export const nativeInfo = makeStorage<NativeInfo>({
-  accessToken:
-    'eyJhbGciOiJIUzUxMiJ9.eyJlbWFpbCI6InRlc3RAbmF2ZXIuY29tIiwiYXV0aCI6Ik1FTUJFUiIsImV4cCI6MTcxMDA4MjUxMX0.TChmWo1TeOtJZzeuHikhDJLdfKviTHkNVTFux5Up9_peKyFZKqIspuc3haVLhcSetOMdqIK3sCVi4iDyNFFu9Q',
+  accessToken: '',
   userPosition: {
     placeName: '',
     addressName: '',