Merge pull request #343 from Team-Lecue/refactor/dori

도리브랜치 dev까지 올리기
Team-Lecue · Jun 10, 2024 · b7d68af · b7d68af
2 parents 66f4d98 + 3fdbbc7
commit b7d68af
Show file tree

Hide file tree

Showing 44 changed files with 798 additions and 514 deletions.
diff --git a/package.json b/package.json
@@ -16,38 +16,38 @@
     "@sentry/browser": "^7.93.0",
     "@sentry/react": "^7.93.0",
     "@sentry/vite-plugin": "^2.14.1",
-    "@types/node": "^20.11.30",
     "axios": "^1.6.5",
-    "eslint-plugin-react": "^7.33.2",
     "grapheme-splitter": "^1.0.4",
     "heic2any": "^0.0.4",
     "lottie-react": "^2.4.0",
-    "postcss": "^8.4.33",
-    "postcss-styled-syntax": "^0.6.3",
-    "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.1",
-    "swiper": "^11.1.1",
-    "vite-plugin-svgr": "^4.2.0"
+    "swiper": "^11.1.1"
   },
   "devDependencies": {
+    "@types/node": "^20.13.0",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
+    "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
+    "postcss": "^8.4.38",
+    "postcss-styled-syntax": "^0.6.4",
+    "prettier": "^3.2.5",
     "stylelint": "^16.1.0",
     "stylelint-config-standard": "^36.0.0",
     "stylelint-order": "^6.0.4",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }
diff --git a/src/CreateBook/utils/api.ts b/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',
       },
     },

diff --git a/src/Detail/api/getBookDetail.ts b/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',
     },

diff --git a/src/Detail/api/getBookDetailLogin.ts b/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}`,
     },
   });
 

diff --git a/src/Detail/components/BookInfoBox/index.tsx b/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>

diff --git a/src/Detail/components/LecueNoteListContainer/index.tsx b/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 } });

diff --git a/src/Detail/page/DetailPage/index.tsx b/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);

diff --git a/src/EditNickname/api/patchNickname.ts b/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}`,
       },
     },
   );

diff --git a/src/EditNickname/components/EditButton/index.tsx b/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>

diff --git a/src/EditNickname/components/NicknameInput/index.tsx b/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) => {

diff --git a/src/EditNickname/hooks/usePatchNickname.ts b/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');
     },
   });
 

diff --git a/src/EditNickname/page/index.tsx b/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}

diff --git a/src/EditNickname/types/editNicknameTypes.ts b/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;
 }
 

diff --git a/src/Enter/page/index.tsx b/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>

diff --git a/src/History/api/deleteMyBook.ts b/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}`,
     },
   });
 

diff --git a/src/History/api/getMyBookList.ts b/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}`,
     },
   });
 

diff --git a/src/History/api/getMyFavorite.ts b/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}`,
     },
   });
 

diff --git a/src/History/api/getMyNoteList.ts b/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;

diff --git a/src/Home/api/getLecueBook.ts b/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;
 };