Merge pull request #83 from Beside-Potenday/seungbeom

fix: 헤더 리다이렉트 + apiclient 수정
Beside-Potenday · Aug 7, 2024 · 90be50d · 90be50d
2 parents 9408deb + d8ba137
commit 90be50d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 29 deletions.
diff --git a/src/api/hooks/Mail/useGetMailBusiness.tsx b/src/api/hooks/Mail/useGetMailBusiness.tsx
@@ -6,18 +6,20 @@ import { useQuery } from '@tanstack/react-query';
 export const getMailPath = (page: number, size: number) =>
   `${BASE_URL}/emails?page=${page}&size=${size}`;
 
-const token = sessionStorage.getItem('accessToken');
-
-const apiClient = axios.create({
-  baseURL: BASE_URL,
-  headers: {
-    Authorization: `Bearer ${token}`,
-    Job: `business`,
-  },
-});
+const createApiClient = () => {
+  const token = sessionStorage.getItem('accessToken');
+  return axios.create({
+    baseURL: BASE_URL,
+    headers: {
+      Authorization: `Bearer ${token}`,
+      Job: 'business',
+    },
+  });
+};
 
 const getMailBusiness = async (page: number, size: number) => {
   try {
+    const apiClient = createApiClient();
     const response = await apiClient.get<MailListResponse>(getMailPath(page, size));
     return response.data;
   } catch (error) {

diff --git a/src/api/hooks/Mail/useGetMailUniv.tsx b/src/api/hooks/Mail/useGetMailUniv.tsx
@@ -6,18 +6,20 @@ import { useQuery } from '@tanstack/react-query';
 export const getMailPath = (page: number, size: number) =>
   `${BASE_URL}/emails?page=${page}&size=${size}`;
 
-const token = sessionStorage.getItem('accessToken');
-
-const apiClient = axios.create({
-  baseURL: BASE_URL,
-  headers: {
-    Authorization: `Bearer ${token}`,
-    Job: `univ`,
-  },
-});
+const createApiClient = () => {
+  const token = sessionStorage.getItem('accessToken');
+  return axios.create({
+    baseURL: BASE_URL,
+    headers: {
+      Authorization: `Bearer ${token}`,
+      Job: 'univ',
+    },
+  });
+};
 
 const getMailUniv = async (page: number, size: number) => {
   try {
+    const apiClient = createApiClient();
     const response = await apiClient.get<MailListResponse>(getMailPath(page, size));
     return response.data;
   } catch (error) {

diff --git a/src/api/hooks/Mail/usePostMail.tsx b/src/api/hooks/Mail/usePostMail.tsx
@@ -4,17 +4,21 @@ import { BASE_URL } from '../..';
 import { useMutation } from '@tanstack/react-query';
 
 export const postMailPath = () => `${BASE_URL}/save-email`;
-const token = sessionStorage.getItem('accessToken');
 
-const apiClient = axios.create({
-  baseURL: BASE_URL,
-  headers: {
-    Authorization: `Bearer ${token}`,
-  },
-});
+const createApiClient = () => {
+  const token = sessionStorage.getItem('accessToken');
+
+  return axios.create({
+    baseURL: BASE_URL,
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+};
 
 const postMail = async (mailInput: MailPostData) => {
   try {
+    const apiClient = createApiClient();
     const response = await apiClient.post<number>(postMailPath(), mailInput);
     return response.data;
   } catch (error) {

diff --git a/src/components/Layout/Header/HeaderWithout.tsx b/src/components/Layout/Header/HeaderWithout.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { Button } from '@chakra-ui/react';
 import { breakpoints } from '@/styles/variants';
 import { useMail } from '@/Provider/MailContext';
@@ -13,6 +13,7 @@ export const Header = () => {
     throw new Error('MailContext not found');
   }
   const { handleMail } = mailContext;
+  const navigate = useNavigate();
 
   const handleMailInput = () => {
     handleMail({
@@ -23,6 +24,7 @@ export const Header = () => {
       subject: '',
       receiver: '',
     });
+    navigate(RouterPath.mail);
   };
 
   const { authInfo } = useAuth();
@@ -46,9 +48,7 @@ export const Header = () => {
           <Logo src="/images/logo.svg" />
         </LogoLink>
         <div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
-          <Link to={RouterPath.mail} style={{ display: 'flex', alignItems: 'center' }}>
-            <AiButton onClick={handleMailInput}>AI 메일 생성하기</AiButton>
-          </Link>
+          <AiButton onClick={handleMailInput}>AI 메일 생성하기</AiButton>
         </div>
       </Container>
     </Wrapper>