Feat: interceptor 구현 및 퍼블리싱 수정 (#177)

Upjuyanolja · Jan 21, 2024 · 2908443 · 2908443
1 parent 642915d
commit 2908443
Show file tree

Hide file tree

Showing 8 changed files with 129 additions and 13 deletions.
diff --git a/src/api/index.ts b/src/api/index.ts
diff --git a/src/api/index.tsx b/src/api/index.tsx
@@ -0,0 +1,85 @@
+import axios from 'axios';
+import { HTTP_BASE_URL, HTTP_STATUS_CODE } from '../constants/api';
+import { getCookie, removeCookie, setCookie } from '@hooks/sign-in/useSignIn';
+import { message } from 'antd';
+import { TextBox } from '@components/text-box';
+import { ROUTES } from '@/constants/routes';
+
+export const instance = axios.create({
+  baseURL: HTTP_BASE_URL,
+  headers: {
+    'Content-Type': 'application/json',
+    timeout: 5000,
+  },
+});
+
+instance.interceptors.request.use(
+  (config) => {
+    const accessToken = getCookie('accessToken');
+    if (accessToken) {
+      config.headers['Authorization'] = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+instance.interceptors.response.use(
+  (response) => {
+    if (response.status === HTTP_STATUS_CODE.NOTFOUND) {
+      // 콘솔 지우고 바로 404 페이지로 넘어가게 할 예정
+      console.log('404 페이지로 넘어가야 함!');
+    }
+    return response;
+  },
+  async (error) => {
+    const accessToken = getCookie('accessToken');
+    if (window.location.pathname !== ROUTES.SIGNIN && !accessToken) {
+      message.error({
+        content: (
+          <TextBox typography="body3" fontWeight={'400'}>
+            accessToken이 없습니다.
+          </TextBox>
+        ),
+        duration: 2,
+      });
+      removeCookie('accessToken');
+      removeCookie('refreshToken');
+      removeCookie('accommodationId');
+      setTimeout(() => {
+        window.location.href = ROUTES.SIGNIN;
+      }, 1000);
+      return Promise.reject(error);
+    } else if (
+      window.location.pathname !== ROUTES.SIGNIN &&
+      error.response.status === HTTP_STATUS_CODE.UNAUTHORIZED
+    ) {
+      try {
+        // 여기에 재발급 api 선언, 아래는 예시
+        const newAccessToken = 'ivegaeul';
+        setCookie('accessToken', newAccessToken);
+        return axios(error.config);
+      } catch (refreshError) {
+        removeCookie('accessToken');
+        removeCookie('refreshToken');
+        removeCookie('accommodationId');
+        message.error({
+          content: (
+            <TextBox typography="body3" fontWeight={'400'}>
+              로그인 만료입니다.
+            </TextBox>
+          ),
+          duration: 2,
+        });
+        setTimeout(() => {
+          window.location.href = ROUTES.SIGNIN;
+        }, 1000);
+        return Promise.reject(refreshError);
+      }
+    }
+  },
+);
+
+export default instance;
diff --git a/src/api/sign-in/index.ts b/src/api/sign-in/index.ts
@@ -5,7 +5,7 @@ import { Response } from '@/types/api';
 
 export const SIGN_IN_API = {
   postLogin: (data: SignInData) =>
-    instance.post<Response<MemberData>>('/api/auth/owner/signin', {
+    instance.post<Response<MemberData>>('/api/auth/owners/signin', {
       data,
     }),
 };
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
@@ -32,7 +32,7 @@ const email = '[email protected]';
 const verificationCode = '020924';
 const accommodationId = 1;
 export const handlers = [
-  http.post('/api/auth/owner/signin', postSignInResolver),
+  http.post('/api/auth/owners/signin', postSignInResolver),
   http.post('/api/auth/owners/signup', postSignUpResolver),
   http.post('/api/auth/owners/request-email', postAuthenticationResolver),
   http.get(

diff --git a/src/pages/sign-in-agreement/index.tsx b/src/pages/sign-in-agreement/index.tsx
@@ -9,6 +9,7 @@ import { colors } from '@/constants/colors';
 
 export const SignInAgreement = () => {
   const { handleChangeUrl } = useCustomNavigate();
+  const [allChecked, setAllChecked] = useState(false);
   const [isChecked, setIsChecked] = useState<number[]>([]);
   const [isDisabled, setIsDisabled] = useState(true);
   const data = [
@@ -33,11 +34,15 @@ export const SignInAgreement = () => {
   const handleSingleCheck = (checked: boolean, id: number) => {
     if (checked) {
       setIsChecked((prev) => [...prev, id]);
+      if (isChecked.length + 1 === 4) {
+        setAllChecked(true);
+      }
       if (id === 0) {
         setIsDisabled(false);
       }
     } else {
       setIsChecked(isChecked.filter((el) => el !== id));
+      setAllChecked(false);
       if (id === 0) {
         setIsDisabled(true);
       }
@@ -50,11 +55,14 @@ export const SignInAgreement = () => {
       data.forEach((el) => idArray.push(el.id));
       setIsChecked(idArray);
       setIsDisabled(false);
+      setAllChecked(true);
     } else {
       setIsChecked([]);
       setIsDisabled(true);
+      setAllChecked(false);
     }
   };
+
   return (
     <StyledLayout>
       <StyledContent>
@@ -82,7 +90,11 @@ export const SignInAgreement = () => {
           <MainContainer>
             <CheckBoxContainer>
               <CheckBoxInner>
-                <Checkbox onChange={handleAllCheck} id="all" />
+                <Checkbox
+                  onChange={handleAllCheck}
+                  id="all"
+                  checked={allChecked}
+                />
                 <TextInner>
                   <label htmlFor="all">
                     <TextBox
@@ -254,6 +266,7 @@ const ButtonContainer = styled.div`
 const StyledPrevButton = styled(Button)`
   width: 126px;
   height: 54px;
+  border: 1px solid ${colors.primary};
 `;
 
 const StyledNextButton = styled(StyledPrevButton)`

diff --git a/src/pages/sign-in/index.tsx b/src/pages/sign-in/index.tsx
@@ -13,6 +13,7 @@ import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { useSideBar } from '@hooks/side-bar/useSideBar';
 import { AxiosError } from 'axios';
 import { HTTP_STATUS_CODE } from '@/constants/api';
+import { colors } from '@/constants/colors';
 
 export const SignIn = () => {
   const { handleChangeUrl } = useCustomNavigate();
@@ -26,7 +27,7 @@ export const SignIn = () => {
       localStorage.setItem('member', memberData);
       if (accommodationListData?.accommodations[0]?.id) {
         setCookie(
-          'accomodationId',
+          'accommodationId',
           accommodationListData?.accommodations[0]?.id.toString(),
         );
       }
@@ -276,6 +277,7 @@ const StyledButton = styled(Button)`
   height: 54px;
   border-radius: 2px;
   padding: 12px 32px 12px 32px;
+  border: 1px solid ${colors.primary};
 `;
 
 const SignUpContainer = styled.div`

diff --git a/src/pages/sign-up-success/index.tsx b/src/pages/sign-up-success/index.tsx
@@ -25,7 +25,9 @@ export const SignUpSuccess = () => {
           type="primary"
           size="large"
         >
-          로그인 하러가기
+          <TextBox typography="h5" fontWeight={'700'} textAlign="center">
+            로그인 하러가기
+          </TextBox>
         </StyledButton>
       </StyledContent>
       <Footer />

diff --git a/src/pages/sign-up/index.tsx b/src/pages/sign-up/index.tsx
@@ -21,6 +21,7 @@ export const SignUp = () => {
   const [checkOne, setCheckOne] = useState(false);
   const [checkOne_1, setCheckOne_1] = useState(false);
   const [checkOne_2, setCheckOne_2] = useState(false);
+  const [checkOne_3, setCheckOne_3] = useState(false);
   const [checkTwo, setCheckTwo] = useState(false);
   const [checkTwo_1, setCheckTwo_1] = useState(false);
   const [checkThree, setCheckThree] = useState(false);
@@ -55,20 +56,28 @@ export const SignUp = () => {
       setCheckOne(true);
       setCheckOne_1(false);
       setCheckOne_2(false);
+      setCheckOne_3(false);
       setEmailDisabled(true);
     },
     onError: (error: unknown) => {
       if (error instanceof AxiosError && error.response) {
         const errorData = error.response.data;
         if (errorData) {
-          if (errorData.code == RESPONSE_CODE.INCORRECT_EMAIL_CODE) {
+          if (errorData.code === RESPONSE_CODE.INCORRECT_EMAIL_CODE) {
             setCheckOne(false);
             setCheckOne_1(true);
             setCheckOne_2(false);
-          } else {
+            setCheckOne_3(false);
+          } else if (errorData.code === RESPONSE_CODE.REQUEST_BODY_ERROR) {
             setCheckOne(false);
             setCheckOne_1(false);
             setCheckOne_2(true);
+            setCheckOne_3(false);
+          } else {
+            setCheckOne(false);
+            setCheckOne_1(false);
+            setCheckOne_2(false);
+            setCheckOne_3(true);
           }
         }
       }
@@ -134,6 +143,7 @@ export const SignUp = () => {
       setVerifyError(true);
     }
   };
+
   useEffect(() => {
     if (touched.password && errors.password) {
       setCheckThree(false);
@@ -251,6 +261,16 @@ export const SignUp = () => {
                   </TextBox>
                 )}
                 {checkOne_2 && (
+                  <TextBox
+                    typography="body4"
+                    fontWeight={'400'}
+                    color="error"
+                    cursor="default"
+                  >
+                    이메일 형식이 올바르지 않습니다.
+                  </TextBox>
+                )}
+                {checkOne_3 && (
                   <TextBox
                     typography="body4"
                     fontWeight={'400'}