[ Common ] 엑세스 토큰 관리

src/CreateBook/utils/api.ts

@@ -18,19 +18,12 @@ interface PostBookData {
   backgroundColor: string;
 }
 
-const getAuthorizationToken = (): string | null => {
-  return localStorage.getItem('token');
-};
-
 const postBook = async (data: PostBookData): Promise<{ bookUuid: string }> => {
-  const token = getAuthorizationToken();
-
-  const response: AxiosResponse<ApiResponse> = await api.post(
+  const response: AxiosResponse<ApiResponse> = await api().post(
     '/api/books',
     data,
     {
       headers: {
-        Authorization: `Bearer ${token}`,
         'Content-Type': 'application/json',
       },
     },

src/Detail/api/getBookDetail.ts

@@ -1,7 +1,7 @@
 import { api } from '../../libs/api';
 
 export async function getBookDetail(bookUuid: string) {
-  const data = await api.get(`/api/books/detail/${bookUuid}`, {
+  const data = await api().get(`/api/books/detail/${bookUuid}`, {
     headers: {
       'Content-Type': 'application/json',
     },

src/Detail/api/getBookDetailLogin.ts

@@ -1,11 +1,9 @@
 import { api } from '../../libs/api';
 
 export async function getBookDetailLogin(bookUuid: string) {
-  const token = localStorage.getItem('token');
-  const data = await api.get(`/api/books/favorite/${bookUuid}`, {
+  const data = await api().get(`/api/books/favorite/${bookUuid}`, {
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
     },
   });
 

src/Detail/components/BookInfoBox/index.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from 'react';
-
 import {
   IcCrown,
   IcDate,
@@ -33,8 +31,7 @@ function BookInfoBox({
   bookId,
   bookUuid,
 }: BookInfoBoxProps) {
-  const token = localStorage.getItem('token');
-  const [isLogin, setIsLogin] = useState(false);
+  const isLogin = sessionStorage.getItem('token');
 
   const postFavoriteMutation = usePostFavorite('lecueBookDetail', bookUuid);
   const deleteFavoriteMutation = useDeleteFavorite('lecueBookDetail', bookUuid);
@@ -43,10 +40,6 @@ function BookInfoBox({
     isFavorite ? deleteFavoriteMutation(bookId) : postFavoriteMutation(bookId);
   };
 
-  useEffect(() => {
-    token ? setIsLogin(true) : setIsLogin(false);
-  }, []);
-
   return (
     <S.BookInfoBoxWrapper backgroundColor={bookBackgroundColor}>
       <S.ProfileImageWrapper>

src/Detail/components/LecueNoteListContainer/index.tsx

@@ -8,7 +8,6 @@ import {
   BtnFloatingWriteOrange,
 } from '../../../assets';
 import CommonModal from '../../../components/common/Modal/CommonModal';
-import useAuth from '../../../libs/hooks/useAuth';
 import useScrollPosition from '../../../utils/savedScrollPosition';
 // hooks
 import usePostSticker from '../../hooks/usePostSticker';
@@ -53,7 +52,8 @@ function LecueNoteListContainer(props: LecueNoteListContainerProps) {
   const { savedScrollPosition } = useScrollPosition();
   const { stickerState, setStickerState, handleDrag } =
     useStickerState(savedScrollPosition);
-  const isLoggedIn = useAuth();
+
+  const isLogin = sessionStorage.getItem('token');
 
   //state
   const [fullHeight, setFullHeight] = useState<number | null>(null);
@@ -97,7 +97,7 @@ function LecueNoteListContainer(props: LecueNoteListContainerProps) {
   });
 
   const handleClickIconButton = (isSticker: boolean) => {
-    if (isLoggedIn) {
+    if (isLogin) {
       sessionStorage.setItem('scrollPosition', window.scrollY.toString());
       const path = isSticker ? '/sticker-pack' : '/create-note';
       navigate(path, { state: { bookId } });

src/Detail/page/DetailPage/index.tsx

@@ -14,10 +14,10 @@ import * as S from './DetailPage.style';
 function DetailPage() {
   const [isEditable, setIsEditable] = useState(true);
 
-  const token = window.localStorage.getItem('token');
+  const isLogin = sessionStorage.getItem('token');
 
   const { bookUuid } = useParams() as { bookUuid: string };
-  const { bookDetail, isLoading } = token
+  const { bookDetail, isLoading } = isLogin
     ? useGetBookDetailLogin(bookUuid)
     : useGetBookDetail(bookUuid);
   const postMutation = usePostStickerState(bookUuid);

src/EditNickname/api/patchNickname.ts

@@ -1,13 +1,12 @@
 import { api } from '../../libs/api';
 
-export const patchNickname = async (token: string, nickname: string) => {
-  const response = await api.patch(
+export const patchNickname = async (nickname: string) => {
+  const response = await api().patch(
     '/api/nickname',
     { nickname: nickname },
     {
       headers: {
         'Content-Type': 'application/json',
-        Authorization: `Bearer ${token}`,
       },
     },
   );

src/EditNickname/components/EditButton/index.tsx

@@ -5,24 +5,21 @@ import * as S from './EditButton.style';
 
 function EditButton({
   isActive,
-  token,
   nickname,
   handleSetIsValid,
   handleSetIsActive,
 }: EditButtonProps) {
   const patchMutation = usePatchNickname({
     handleSetIsValid,
     handleSetIsActive,
-    token,
     nickname,
   });
 
-  const handelClickSubmitBtn = (token: string, nickname: string) => {
+  const handelClickSubmitBtn = (nickname: string) => {
     const patchNickname = nickname.trim();
 
     patchMutation.mutate({
       nickname: patchNickname,
-      token: token,
     });
   };
 
@@ -32,7 +29,7 @@ function EditButton({
         type="button"
         variant="complete"
         disabled={!isActive}
-        onClick={() => handelClickSubmitBtn(token, nickname)}
+        onClick={() => handelClickSubmitBtn(nickname)}
       >
         완료
       </Button>

src/EditNickname/components/NicknameInput/index.tsx

@@ -10,7 +10,7 @@ function NicknameInput({
   handleSetNickname,
   handleSetIsValid,
 }: NicknameInputProps) {
-  const currentNickname: string = localStorage.getItem('nickname') || '';
+  const currentNickname: string = sessionStorage.getItem('nickname') || '';
   const [wordCnt, setWordCnt] = useState(currentNickname.length);
 
   const handleSetWordCnt = (wordCnt: number) => {

src/EditNickname/hooks/usePatchNickname.ts

@@ -9,14 +9,14 @@ import {
 } from '../types/editNicknameTypes';
 
 const usePatchNickname = (props: usePatchNicknameProps) => {
-  const { handleSetIsValid, handleSetIsActive, token, nickname } = props;
+  const { handleSetIsValid, handleSetIsActive, nickname } = props;
 
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
   const mutation = useMutation({
-    mutationFn: async ({ token, nickname }: patchNicknameProps) => {
-      return await patchNickname(token, nickname);
+    mutationFn: async ({ nickname }: patchNicknameProps) => {
+      return await patchNickname(nickname);
     },
     onError: (err: AxiosError) => {
       const code = err.response?.status;
@@ -35,10 +35,8 @@ const usePatchNickname = (props: usePatchNicknameProps) => {
       queryClient.refetchQueries(['useGetMyNickName'], {
         exact: true,
       });
-
-      window.localStorage.setItem('token', token);
-      window.localStorage.setItem('nickname', nickname);
-      navigate('/');
+      sessionStorage.setItem('nickname', nickname);
+      navigate('/mypage');
     },
   });
 

src/EditNickname/page/index.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
 
 import Header from '../../components/common/Header';
 import EditButton from '../components/EditButton';
@@ -10,12 +9,10 @@ import * as S from './EditNickname.style';
 function EditNickname() {
   const [isActive, setIsActive] = useState(false);
   const [nickname, setNickname] = useState(
-    localStorage.getItem('nickname') || '',
+    sessionStorage.getItem('nickname') || '',
   );
   const [isValid, setIsValid] = useState<isValidState>('enter');
 
-  const { state } = useLocation();
-
   const handleSetNickname = (nickname: string) => {
     setNickname(nickname);
   };
@@ -49,7 +46,6 @@ function EditNickname() {
         <EditButton
           isActive={isActive}
           nickname={nickname}
-          token={state}
           handleSetIsValid={handleSetIsValid}
           isValid={isValid}
           handleSetIsActive={handleSetIsActive}

src/EditNickname/types/editNicknameTypes.ts

@@ -14,7 +14,6 @@ export interface NicknameInputProps {
 }
 
 export interface EditButtonProps {
-  token: string;
   nickname: string;
   isActive: boolean;
   isValid: string;
@@ -30,7 +29,6 @@ export interface CheckNicknameProps {
 }
 
 export interface patchNicknameProps {
-  token: string;
   nickname: string;
 }
 

src/Enter/page/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
 import { IcMypageArrowRight } from '../../assets';
 import Header from '../../components/common/Header';
@@ -9,14 +9,16 @@ import * as S from './Enter.style';
 function Enter() {
   const [nickname, setNickname] = useState('');
   const navigate = useNavigate();
-  const { state } = useLocation();
-  if (state) {
+
+  const isLogin = sessionStorage.getItem('token');
+
+  if (isLogin) {
     const { myNickName } = useGetMyNickName();
     if (nickname === '' || nickname !== myNickName) setNickname(myNickName);
   }
 
   const handleClickNickname = () => {
-    navigate('edit-nickname', { state: state });
+    navigate('edit-nickname');
   };
   const handleClickHistory = () => {
     navigate('select-history');
@@ -29,15 +31,15 @@ function Enter() {
     const isLogout = confirm('로그아웃하시겠습니까?');
 
     if (isLogout) {
-      window.localStorage.clear();
+      sessionStorage.clear();
       navigate('/', { state: { step: 1 } });
     }
   };
 
   return (
     <React.Fragment>
       <Header headerTitle="마이페이지" />
-      {state ? (
+      {isLogin ? (
         <S.MypageBodyWrapper>
           <S.NicknameWrapper>
             <S.NicknameText>{nickname}님, 안녕하세요</S.NicknameText>

src/History/api/deleteMyBook.ts

@@ -1,11 +1,9 @@
 import { api } from '../../libs/api';
 
 export async function deleteMyBook(bookId: number) {
-  const token = localStorage.getItem('token');
-  const data = await api.delete(`/api/books/${bookId}`, {
+  const data = await api().delete(`/api/books/${bookId}`, {
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
     },
   });
 

src/History/api/getMyBookList.ts

@@ -1,11 +1,9 @@
 import { api } from '../../libs/api';
 
 export async function getMyBookList() {
-  const token = localStorage.getItem('token');
-  const data = await api.get(`/api/mypage/book`, {
+  const data = await api().get(`/api/mypage/book`, {
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
     },
   });
 

src/History/api/getMyFavorite.ts

@@ -1,11 +1,9 @@
 import { api } from '../../libs/api';
 
 export async function getMyFavorite() {
-  const token = localStorage.getItem('token');
-  const data = await api.get(`/api/mypage/favorite`, {
+  const data = await api().get(`/api/mypage/favorite`, {
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
     },
   });
 

src/History/api/getMyNoteList.ts

@@ -1,11 +1,9 @@
 import { api } from '../../libs/api';
 
 export async function getMyNoteList() {
-  const token = localStorage.getItem('token');
-  const data = await api.get(`/api/mypage/note`, {
+  const data = await api().get(`/api/mypage/note`, {
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${token}`,
     },
   });
   return data.data.data;

src/Home/api/getLecueBook.ts

@@ -1,7 +1,7 @@
 import { api } from '../../libs/api';
 
 const getLecueBook = async () => {
-  const { data } = await api.get('/api/common/home');
+  const { data } = await api().get('/api/common/home');
   return data.data;
 };
 

src/Home/components/HomeMainBanner/index.tsx

@@ -10,14 +10,14 @@ function NavigateLecueBook() {
   const navigate = useNavigate();
   const [modalOn, setModalOn] = useState(false);
 
-  const handleClickIcProfile = () => {
-    const token = localStorage.getItem('token');
+  const isLogin = sessionStorage.getItem('token');
 
-    navigate('/mypage', { state: token });
+  const handleClickIcProfile = () => {
+    navigate('/mypage');
   };
 
   const handleClickNavBtn = () => {
-    if (localStorage.getItem('token')) {
+    if (isLogin) {
       navigate('/target');
     } else {
       setModalOn(true);

src/Home/page/index.tsx

@@ -8,9 +8,10 @@ import useGetLecueBook from '../hooks/useGetLecueBook';
 import * as S from './Home.style';
 
 function Home({ handleStep }: StepProps) {
-  const token = localStorage.getItem('token');
   const { isLoading: isLoadingLecueBook } = useGetLecueBook();
 
+  const isLogin = sessionStorage.getItem('token');
+
   useEffect(() => {
     handleStep(1);
   }, []);
@@ -21,7 +22,7 @@ function Home({ handleStep }: StepProps) {
     <S.Wrapper>
       <HomeMainBanner />
 
-      {token && <LecueBookList title="즐겨찾기한 레큐북" />}
+      {isLogin && <LecueBookList title="즐겨찾기한 레큐북" />}
       <LecueBookList title="인기 레큐북 구경하기" />
     </S.Wrapper>
   );

src/LecueNote/api/getPresignedUrl.ts

@@ -1,7 +1,7 @@
 import { api } from '../../libs/api';
 
 const getPresignedUrl = async () => {
-  const { data } = await api.get('/api/images/note');
+  const { data } = await api().get('/api/images/note');
   return data;
 };