Design:공지사항 페이지 퍼블리싱(#13)

src/api/auth.ts

@@ -8,24 +8,14 @@ export const signUp = async (formData: SignUpForm) => {
   return response.data;
 };
 
-// 로그아웃
-// export const signOut = async () => {
-//   const user = userStorage.get();
-//   const response = await instance.delete('/api/member/logout', {
-//     data: {
-//       refreshToken: user?.refreshToken,
-//     },
-//   });
-//   return response;
-// };
-
 // 재발급
-// export const retryToken = async (refreshToken: string) => {
-//   const response = await instance.post<LoginResponse>('/api/member/refreshToken', {
-//     refreshToken,
-//   });
-//   return response.data;
-// };
+export const retryToken = async (refreshToken: string) => {
+  // const response = await instance.post<LoginResponse>('/api/member/refreshToken', {
+  const response = await instance.post('/api/member/refreshToken', {
+    refreshToken,
+  });
+  return response.data;
+};
 
 // 닉네임 중복 체크
 export const CheckDuplicatedName = async (name: string) => {

src/api/index.ts

@@ -1,6 +1,7 @@
 import axios from 'axios';
 import { getUserTokens } from 'repository/auth';
 import { userStorage } from 'repository/userStorage';
+import { retryToken } from './auth';
 
 export const instance = axios.create({
   baseURL: 'http://localhost:8080',
@@ -19,3 +20,55 @@ instance.interceptors.request.use(
     return Promise.reject(error);
   },
 );
+
+instance.interceptors.response.use(
+  response => {
+    return response;
+  },
+  async error => {
+    const { config, response } = error;
+    console.log(config);
+    console.log(response);
+    if (response.status == 401) {
+      // 401(Unauthorized): 클라이언트가 인증되지 않았기 때문에 요청을 정상적으로 처리할 수 없음
+      const originalRequest = config;
+      const tokens = getUserTokens();
+
+      if (!tokens) {
+        return window.location.replace('/');
+      }
+
+      try {
+        // if (response.status == 401 && response.data.message == "기간이 만료된 토큰")
+        const { accessToken: newAccessToken, refreshToken: newRefreshToken } =
+          await retryToken(tokens.refreshToken);
+        // RefreshToken으로 AccessToken 재발급 요청
+
+        const newUser = {
+          accessToken: newAccessToken,
+          refreshToken: newRefreshToken,
+        };
+
+        userStorage.set(newUser);
+        // 발급 받은 AccessToken을 state에 재저장
+
+        axios.defaults.headers.common.Authorization = `Bearer ${newAccessToken}`;
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
+        return axios(originalRequest);
+        // 방금 실패했던 API 재요청
+      } catch (error) {
+        userStorage.remove();
+        return window.location.replace('/');
+      }
+    }
+
+    if (error.response.status == 403) {
+      // 403(Forbidden): 클라이언트가 해당 요청에 대한 권한이 없음
+      throw new Error('접근 권한이 없습니다.');
+    }
+
+    throw error.response.status;
+    // throw error.response.error;
+    // TODO: 예외 처리 개선
+  },
+);

src/api/mypage.ts

@@ -0,0 +1,7 @@
+import { instance } from 'api';
+import { MyPage } from 'types/api';
+
+export const getMyPage = async (): Promise<MyPage> => {
+  const response = await instance.get(`/api/mypage`);
+  return response.data;
+};

src/api/problem.ts

@@ -1,18 +1,9 @@
-/* -------- POST 요청 -------- */
 import { instance } from 'api';
 import { FieldValues } from 'react-hook-form';
 
 // 문제 생성하기 & 대량 문제 생성하기
 export const problemSet = async (formData: FieldValues) => {
-  if (formData.length === 1) {
-    const response = await instance.post('/api/question', formData[0]);
-    return response.data;
-  }
+  const response = await instance.post('/api/questions', formData);
 
-  if (formData.length > 1) {
-    const response = await instance.post('/api/questions', formData);
-    return response.data;
-  }
-
-  throw new Error('문제 생성에 실패했습니다.');
+  return response.data;
 };

src/api/request.ts

@@ -1,39 +1,53 @@
 import { instance } from 'api';
 import { FieldValues } from 'react-hook-form';
-// import { RequestDetail, ToggleRequestList } from 'types/api';
-
-/* -------- Get 요청 -------- */
+import { RequestDetail, ToggleRequestList } from 'types/api';
 
 // 게시판 글 조회
-// export const getRequest = async (
-//   id: string | undefined,
-// ): Promise<RequestDetail> => {
-//   const response = await instance.get(`/api/request/${id}`);
-//   return response.data;
-// };
+export const getRequest = async (
+  id: string | undefined,
+): Promise<RequestDetail> => {
+  const response = await instance.get(`/api/request/${id}`);
+  return response.data;
+};
 
 // 게시판 전체 리스트 / 내가 요청한 문제 조회
-// export const getToggleRequestList = async ({
-//   page = 0,
-//   size = 10,
-//   query = 'list',
-// }): Promise<ToggleRequestList> => {
-//   const response = await instance.get(
-//     `/api/request/${query}?page=${page}&size=${size}`,
-//   );
-//   return response.data;
-// };
-
-/* -------- POST 요청 -------- */
+export const getToggleRequestList = async ({
+  page = 0,
+  size = 10,
+  sort = 'list',
+}): Promise<ToggleRequestList> => {
+  const response = await instance.get(
+    `/api/request/requests?page=${page}&size=${size}&$sort=${sort}`,
+  );
+  return response.data;
+};
+export const getRequestListTest = () => {
+  const response = instance.get(`/api/request/requests`);
+  return response;
+};
 
 // 게시판 문제 요청글 생성
 export const createRequest = (RequestForm: FieldValues) => {
-  const response = instance.post('/api/request/create', RequestForm);
+  const response = instance.post('/api/request', RequestForm);
   return response;
 };
 
-// 게시글 상태 수정
+// 게시글 상태(승인/대기) 수정
 export const approveRequest = (RequestForm: FieldValues) => {
-  const response = instance.post('/api/request/approve', RequestForm);
+  const response = instance.put('/api/request/approve', RequestForm);
   return response;
 };
+
+// 게시글 수정
+export const editRequest = (RequestForm: FieldValues) => {
+  const response = instance.put('/api/request', RequestForm);
+  return response;
+};
+
+// 게시글 삭제
+export const deleteRequest = async (
+  id: string | undefined,
+): Promise<RequestDetail> => {
+  const response = await instance.delete(`/api/request/${id}`);
+  return response.data;
+};

src/components/NavLinkStyles.ts

@@ -1,12 +1,15 @@
 import { NavLink } from 'react-router-dom';
 import styled from 'styled-components';
 import { FONT } from 'constants/Font';
+import { COLOR } from 'constants/Color';
 
 export const StyleNavLink = styled(NavLink)`
   &.active {
     font-weight: bold;
   }
 
+  font-size: ${FONT.REGULAR_14};
+  color: ${COLOR.BLACK};
   &.mypage {
     font-size: ${FONT.REGULAR_14};
     padding: 0.5rem;

src/components/commons/Container/index.tsx

@@ -3,7 +3,7 @@ import * as S from './style';
 
 const Container = ({ children }: React.PropsWithChildren) => {
   return (
-    <S.Wrapper style={{ position: 'relative' }}>
+    <S.Wrapper>
       <S.BodyWrapper>
         <S.ContentWrapper>{children}</S.ContentWrapper>
       </S.BodyWrapper>

src/components/commons/Header/Header.tsx

@@ -9,19 +9,27 @@ import { openModal } from 'hooks/@redux/modalSlice';
 import { useSignOut } from 'hooks/@query/useSignOut';
 import { logout } from 'hooks/@redux/authSlice';
 import useModal from 'hooks/useModal';
-import Modal from 'components/unit/Modal';
-import SignModal from '../Modal/SignModal';
+import Modal from '../../unit/Modal';
 import SignInModal from 'components/unit/SignIn';
+import SignModal from '../Modal/SignModal';
+import SignUp from 'components/unit/SignUp';
+import { useState } from 'react';
 
 const Header = () => {
   const { modalIsOpen, toggleModal } = useModal();
-  const isAuthenticated = useSelector(
-    (state: any) => state.auth.isAuthenticated,
-  );
+  const [signupModal, setSignupModal] = useState(true);
+  // const isAuthenticated = useSelector(
+  //   (state: any) => state.auth.isAuthenticated,
+  // );
   const { mutate: signOut } = useSignOut();
 
   const openModal = () => {
     toggleModal();
+    setSignupModal(false);
+  };
+  const openSignupModal = () => {
+    toggleModal();
+    setSignupModal(true);
   };
 
   return (
@@ -34,28 +42,6 @@ const Header = () => {
             </picture>
           </Link>
         </S.LogoWrap>
-        <S.Sign>
-          {modalIsOpen && (
-            <Modal toggleModal={toggleModal}>
-              <SignModal toggleModal={toggleModal}>
-                <SignInModal />
-              </SignModal>
-            </Modal>
-          )}
-          {isAuthenticated ? (
-            <>
-              <button onClick={() => signOut()}>로그아웃</button>
-              <Link to="/">마이페이지</Link>
-            </>
-          ) : (
-            <>
-              <button onClick={openModal}>로그인</button>
-              <Link to="signup">회원가입</Link>
-            </>
-          )}
-        </S.Sign>
-      </S.Wrapper>
-      <S.NavHeader>
         <S.Nav>
           <S.NavList>
             <S.NavItem>
@@ -78,7 +64,34 @@ const Header = () => {
             </S.NavItem>
           </S.NavList>
         </S.Nav>
-      </S.NavHeader>
+        <S.Sign>
+          {modalIsOpen && (
+            <Modal toggleModal={toggleModal}>
+              <SignModal toggleModal={toggleModal}>
+                <SignInModal />
+              </SignModal>
+            </Modal>
+          )}
+          {modalIsOpen && signupModal && (
+            <Modal toggleModal={toggleModal}>
+              <SignModal toggleModal={toggleModal}>
+                <SignUp />
+              </SignModal>
+            </Modal>
+          )}
+          {/* {isAuthenticated ? (
+            <> */}
+          {/* <button onClick={() => signOut()}>로그아웃</button>
+              <Link to="/">마이페이지</Link>
+            </> 
+          ) : (
+            <> */}
+          <button onClick={openModal}>로그인</button>
+          <button onClick={openSignupModal}>회원가입</button>
+          {/* </>
+          )} */}
+        </S.Sign>
+      </S.Wrapper>
     </>
   );
 };

src/components/commons/Header/style.ts

@@ -6,9 +6,15 @@ export const Wrapper = styled.header`
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 2rem 0;
+  padding: 1.5rem 0;
   justify-content: space-between;
   background-color: ${COLOR.WHITE};
+  border-bottom: 1px solid #e9e9e9;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 99;
 `;
 
 export const LogoWrap = styled.h1`
@@ -23,7 +29,7 @@ export const Nav = styled.nav`
 export const NavList = styled.ul`
   display: flex;
   justify-content: center;
-  font-size: ${FONT.REGULAR_16};
+  font-size: ${FONT.REGULAR_14};
   color: #181818;
 `;
 
@@ -35,13 +41,13 @@ export const NavItem = styled.li`
   & > a {
     display: inline-block;
     padding: 0.5rem 1.5rem;
-    color: ${COLOR.BLACK};
   }
 `;
 
 export const Sign = styled.div`
   display: flex;
   padding-right: 1.8rem;
+  align-items: center;
   & > button {
     padding: 0.5rem;
     font-size: ${FONT.REGULAR_14};
@@ -51,14 +57,3 @@ export const Sign = styled.div`
     margin-right: 1.4rem;
   }
 `;
-
-export const NavHeader = styled.header`
-  border-bottom: 1px solid #e9e9e9;
-  position: sticky;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 1rem 0 1.5rem 0;
-  background-color: ${COLOR.WHITE};
-  z-index: 99;
-`;