[Feature] 내정보 페이지 구매자 구현완료 및 public instance 추가

src/api/axios.ts

@@ -1,5 +1,5 @@
 import axios from 'axios';
-import { postReissue } from './post';
+import { postPublicReissue, postReissue } from './post';
 // axios 인스턴스 생성
 export const instance = axios.create({
   baseURL: process.env.REACT_APP_API_URL,
@@ -13,6 +13,7 @@ instance.interceptors.request.use((config) => {
 
   return config;
 });
+
 //리프레시 토큰 구현
 instance.interceptors.response.use(
   (response) => {
@@ -36,9 +37,10 @@ instance.interceptors.response.use(
           localStorage.setItem('refreshToken', refreshToken);
           axios.defaults.headers.common.Authorization = `${accessToken}`;
           originRequest.headers.Authorization = `${accessToken}`;
-          return axios(originRequest);
+          return instance(originRequest);
         } else if (tokenResponse.response.status === 400) {
           window.location.href = '/login';
+
           //나중에 지우고 로그인으로 navigate
         }
       } catch (error) {
@@ -59,6 +61,55 @@ instance.interceptors.response.use(
   },
 );
 
+// axios 인증 필요 없는 인스턴스 생성
+export const publicInstance = axios.create({
+  baseURL: process.env.REACT_APP_API_URL,
+  headers: {
+    Authorization: `${localStorage.getItem('accessToken')}`,
+  },
+});
+publicInstance.interceptors.request.use((config) => {
+  const token = localStorage.getItem('accessToken');
+  config.headers.Authorization = token;
+
+  return config;
+});
+
+//리프레시 토큰 구현
+publicInstance.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const {
+      config,
+      response: { status },
+    } = error;
+
+    if (status === 401) {
+      const originRequest = config;
+      try {
+        const tokenResponse: any = await postPublicReissue({
+          refreshToken: localStorage.getItem('refreshToken'),
+        });
+        if (tokenResponse.status === 200) {
+          const { accessToken, refreshToken } = tokenResponse.data;
+          localStorage.setItem('accessToken', accessToken);
+          localStorage.setItem('refreshToken', refreshToken);
+          axios.defaults.headers.common.Authorization = `${accessToken}`;
+          originRequest.headers.Authorization = `${accessToken}`;
+          return axios(originRequest);
+        }
+      } catch (error) {
+        if (axios.isAxiosError(error)) {
+          alert('로그인 후 이용해 주세요');
+        }
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
 export const getInstance = async (url: string, params?: any) => {
   try {
     const data = await instance.get(url, params);
@@ -104,3 +155,61 @@ export const deleteInstance = async (url: string, body?: any) => {
     return error;
   }
 };
+
+export const getPublicInstance = async (url: string, params?: any) => {
+  try {
+    const data = await publicInstance.get(url, params);
+    return data;
+  } catch (error) {
+    return error;
+  }
+};
+export const postPublicInstance = async (
+  url: string,
+  body: any,
+  params?: any,
+) => {
+  try {
+    const data = await publicInstance.post(url, body, params);
+    return data;
+  } catch (error) {
+    return error;
+  }
+};
+export const putPublicInstance = async (
+  url: string,
+  body: any,
+  params: any,
+) => {
+  try {
+    const data = await publicInstance.put(url, body, params);
+    return data;
+  } catch (error) {
+    return error;
+  }
+};
+
+export const patchPublicInstance = async (
+  url: string,
+  body?: any,
+  params?: any,
+) => {
+  try {
+    const data = await publicInstance.patch(url, body, params);
+    return data;
+  } catch (error) {
+    return error;
+  }
+};
+
+export const deletePublicInstance = async (url: string, body?: any) => {
+  try {
+    const config = {
+      data: body,
+    };
+    const data = await publicInstance.delete(url, config);
+    return data;
+  } catch (error) {
+    return error;
+  }
+};

src/api/get.ts

@@ -1,4 +1,4 @@
-import { getInstance } from './axios';
+import { getInstance, getPublicInstance } from './axios';
 //admin
 export const getAdminsUnpaidConsults = async () =>
   await getInstance('/admins/unpaid-consults');
@@ -40,7 +40,9 @@ export const getDraftsLetter = async (
 
 export const getLetterDeadline = async (letterId: string | undefined) =>
   await getInstance(`/letters/deadline/${letterId}`);
-
+//Customer Controller
+export const getCustomersNickname = async () =>
+  await getPublicInstance('/customers/nickname');
 //LetterMessage Controller
 
 export const getLetterMessages = async (

src/api/post.ts

@@ -1,4 +1,4 @@
-import { postInstance } from './axios';
+import { postInstance, postPublicInstance } from './axios';
 //Auth controller
 //로그인
 export const postLogin = async (body: any) =>
@@ -10,6 +10,9 @@ export const postSingup = async (body: any) =>
 export const postReissue = async (body: any) =>
   await postInstance('/auth/reissue', body);
 
+export const postPublicReissue = async (body: any) =>
+  await postPublicInstance('/auth/reissue', body);
+
 //Email controller
 //인증번호 전송
 export const postEmails = async (body: any) =>
@@ -33,5 +36,5 @@ export const postLetterMessageFirstQustion = async (body: any) =>
 
 //Counselor Controller
 // 퀴즈 통과 여부 수정
-export const postIsPassQuiz = async (body: any,parmas: any) =>
+export const postIsPassQuiz = async (body: any, parmas: any) =>
   await postInstance('counselors/quiz', body, parmas);

src/components/Buyer/BuyerSearch/SearchHeader.tsx

@@ -26,7 +26,7 @@ export const SearchHeader = () => {
     <Wrapper>
       <BackIcon
         onClick={() => {
-          navigate(-1);
+          navigate('/buyer');
         }}
       />
       <FormWrapper onSubmit={handleSubmit}>

src/pages/Buyer/BuyerCounselorProfile.tsx

@@ -9,15 +9,15 @@ import {
 } from 'components/Buyer/BuyerCounselorProfile';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
-import { profileCounselorIdState } from 'utils/atom';
 import { counselorDummyData as dummy } from 'utils/buyerDummy';
 import { reviewDummy } from 'utils/buyerDummy';
 import { CartegoryState } from 'utils/type';
 export const BuyerCounselorProfile = () => {
   const { id } = useParams();
-
+  useEffect(() => {
+    const fetchData = async () => {};
+  }, []);
   //Nav 버튼 toggle
   const [isInfo, setIsInfo] = useState<boolean>(true);
   if (id !== undefined) {

src/pages/Buyer/BuyerMypage.tsx

@@ -8,13 +8,27 @@ import { Characters } from 'utils/Characters';
 import { ReactComponent as PayedIcon } from 'assets/icons/icon-mypage-payed.svg';
 import { ReactComponent as ReviewIcon } from 'assets/icons/icon-mypage-review.svg';
 import { ReactComponent as SavedIcon } from 'assets/icons/icon-mypage-saved.svg';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Button } from 'components/Common/Button';
+import { getCustomersNickname } from 'api/get';
 export const BuyerMypage = () => {
   const navigate = useNavigate();
   //로그인 여부 temp
-  const [IsLoginTemp, setIsLoginTemp] = useState<boolean>(true);
-
+  const [IsLogin, setIsLogin] = useState<boolean>(true);
+  //회원닉네임
+  const [nickname, setNickname] = useState<string>('');
+  useEffect(() => {
+    const fetchNickname = async () => {
+      const res: any = await getCustomersNickname();
+      if (res.status === 200) {
+        setNickname(res.data);
+        setIsLogin(true);
+      } else if (res.response.status === 401) {
+        setIsLogin(false);
+      }
+    };
+    fetchNickname();
+  }, []);
   return (
     <Wrapper>
       <Header
@@ -24,12 +38,12 @@ export const BuyerMypage = () => {
         }}
       />
       <TabA1 isBuyer={true} initState={3} />
-      {IsLoginTemp ? (
+      {IsLogin ? (
         <>
           <UserCard>
             <div className="profile">
               <Characters number={2} width="7.9rem" height="5.8rem" />
-              <Subtitle>김고민고민</Subtitle>
+              <Subtitle>{nickname}</Subtitle>
             </div>
             <div className="change-button">
               <ChangeButton
@@ -106,7 +120,7 @@ export const BuyerMypage = () => {
       <div className="additional-box">
         <Body2 color={Grey1}>서비스 소개</Body2>
       </div>
-      {IsLoginTemp ? (
+      {IsLogin ? (
         <>
           <div className="additional-box">
             <Body2 color={Grey1}>결제 문의</Body2>
@@ -123,12 +137,6 @@ export const BuyerMypage = () => {
           </div>
         </>
       ) : null}
-      <Button
-        text="로그인 전환"
-        onClick={() => {
-          setIsLoginTemp(!IsLoginTemp);
-        }}
-      />
     </Wrapper>
   );
 };