Skip to content

Commit

Permalink
[Fix/#338] QA 반영 (#339)
Browse files Browse the repository at this point in the history
* feat: 401 에러 났을 때 로그아웃 되도록 수정!

* feat: '생산성' 카테고리 클릭할 때, 스크롤 다르게 이동하기

* fix: console 삭제

* fix: 토큰 재발급 로직 수정

* fix: deprecated code 수정

* fix: 인증 에러 로직 수정

* fix: 스픽커 마이페이지 새로고침 오류 수정

---------

Co-authored-by: Parkchaeyeon <[email protected]>
  • Loading branch information
gudusol and chaeneey authored Oct 9, 2024
1 parent b0728d3 commit 9d66c7a
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 19 deletions.
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image" href="/favicon.png" sizes="32x32" />
<link rel="apple-touch-icon" href="/favicon.png" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="mobile-web-app-capable" content="yes" />
<meta property="og:locale" content="ko_KR" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://pick-ple.com/" />
Expand Down
33 changes: 26 additions & 7 deletions src/apis/api.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,22 @@ export function del<T>(...args: Parameters<typeof instance.delete>) {
const fetchAccessToken = async (): Promise<string | null> => {
const refreshToken = localStorage.getItem('refreshToken');

// 리프레시 토큰이 없는 경우 로그아웃 처리
if (!refreshToken) {
console.error('리프레시 토큰이 없습니다. 로그아웃 처리합니다.');
clearLocalStorage();
window.location.href = '/login';
return null;
}

try {
const response = await axios.get<ApiResponseType<AccessTokenGetSuccess>>(
`${import.meta.env.VITE_APP_BASE_URL}/v1/user/token-refresh?refreshToken=${refreshToken}`
`${import.meta.env.VITE_APP_BASE_URL}/v1/user/token-refresh?refreshToken=${encodeURIComponent(refreshToken)}`
);

const accessToken = response.data.data.accessToken;
if (!accessToken) {
console.error('액세스 토큰을 받지 못했습니다.');
return null;
}
localStorage.setItem('accessToken', accessToken);
Expand All @@ -54,28 +63,32 @@ const fetchAccessToken = async (): Promise<string | null> => {
} catch (error) {
console.error('토큰 재발급 실패:', error);

const errorData = (error as AxiosError)?.response?.data as ErrorType;
const axiosError = error as AxiosError<ErrorType>;
const errorData = axiosError.response?.data;

// 리프레시 토큰 만료 시. 로그아웃 처리
if (errorData.status === 40101) {
if (errorData?.status === 40101) {
console.error('리프레시 토큰 만료:', errorData);
clearLocalStorage();
window.location.href = '/login';
return Promise.reject(error);
}

return null;
}
};

instance.interceptors.response.use(
(response) => response, // 성공적인 응답은 그대로 반환
async (error) => {
const errorData = error?.response.data;
const status = error?.response?.status;
const errorData = error?.response?.data;
const accessToken = localStorage.getItem('accessToken');

if (errorData && errorData.status && accessToken) {
// 액세스 토큰 만료 시. 리프레시 토큰으로 재발급 시도
if (errorData.status === 40100) {
// 401 계열 에러 처리
if (status === 401) {
// 40100인 경우에만 리프레시 토큰을 사용한 재발급 로직 실행
if (errorData?.status === 40100 && accessToken) {
const originalRequest = error.config;

try {
Expand All @@ -91,6 +104,12 @@ instance.interceptors.response.use(
console.error('토큰 갱신 후 재시도 실패:', tokenError);
return Promise.reject(tokenError);
}
} else {
// 그 외의 40101, 40102, 40103, 40104 에러는 로그아웃 처리
console.error('인증 에러');
clearLocalStorage();
window.location.href = '/login';
return;
}
}

Expand Down
21 changes: 17 additions & 4 deletions src/pages/classList/page/ClassList/ClassList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,12 +86,27 @@ const ClassList = () => {
if (categoriesRef.current) {
const selectedIndex = (categories ?? []).indexOf(selectedCategory);
setTimeout(() => {
if (selectedIndex < 5) {
if (selectedIndex === 4) {
if (categoriesRef.current?.scrollLeft === 0) {
categoriesRef.current?.scrollTo({
left: 353,
// left: categoriesRef.current?.scrollWidth,
behavior: 'smooth',
});
} else {
categoriesRef.current?.scrollTo({
left: 30,
behavior: 'smooth',
});
}
}

if (selectedIndex < 4) {
categoriesRef.current?.scrollTo({
left: 0,
behavior: 'smooth',
});
} else {
} else if (selectedIndex > 4) {
categoriesRef.current?.scrollTo({
left: categoriesRef.current?.scrollWidth,
behavior: 'smooth',
Expand Down Expand Up @@ -127,8 +142,6 @@ const ClassList = () => {
return <Error />;
}

console.log(categories);

return (
<>
<LogoHeader />
Expand Down
13 changes: 6 additions & 7 deletions src/pages/myPage/page/HostMyPage/HostMyPage.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { useAtom } from 'jotai';
import { useEffect, useState } from 'react';

import { useFetchMyHost } from '@apis/domains/moim/useFetchMyHost';
Expand All @@ -10,7 +9,6 @@ import { Error } from '@pages/error';
import { ApprovalReviewingView, HostMyPageEmptyView } from '@pages/myPage/components';
import HostInfoCardWithLink from '@pages/myPage/components/HostInfoCardWithLink/HostInfoCardWithLink';
import LogoutModal from '@pages/myPage/components/LogoutModal/LogoutModal';
import { userAtom } from '@stores';
import { IcNext } from '@svg';
import { clearLocalStorage } from '@utils';

Expand All @@ -27,7 +25,7 @@ import {
} from './HostMyPage.style';

import { components } from '@schema';
import { ErrorType } from '@types';
import { ErrorType, localStorageUserType } from '@types';

type HostGetResponse = components['schemas']['HostGetResponse'];

Expand All @@ -48,13 +46,14 @@ const isErrorResponseType = (data: unknown): data is ErrorType => {
}
return false;
};

const HostMyPage = () => {
const [user] = useAtom(userAtom);
const { data: hostInfoResponse, isSuccess, isLoading } = useFetchMyHost();
const { goGuestMyPage } = useEasyNavigate();
const [isModalOpen, setIsModalOpen] = useState(false);

const { hostId: jotaiHostId, hostNickname: jotaiHostNickname } = user;
const localStorageUser: localStorageUserType = JSON.parse(localStorage.getItem('user') || '{}');
const { hostId: localStorageHostId, hostNickname: localStorageHostNickname } = localStorageUser;

let hostInfoData: HostGetResponse | null = null;
let errorData: ErrorType | null = null;
Expand Down Expand Up @@ -84,7 +83,7 @@ const HostMyPage = () => {
};

useEffect(() => {
if (isSuccess && hostInfoData && !jotaiHostId && !jotaiHostNickname) {
if (isSuccess && hostInfoData && !localStorageHostId && !localStorageHostNickname) {
const { hostId, hostNickName } = hostInfoData;
const isFirstApproval = hostId && hostNickName;
if (isFirstApproval) {
Expand All @@ -94,7 +93,7 @@ const HostMyPage = () => {
window.location.href = '/login';
}
}
}, [isSuccess, hostInfoData, jotaiHostId, jotaiHostNickname]);
}, [isSuccess, hostInfoData, localStorageHostId, localStorageHostNickname]);

return (
<>
Expand Down
7 changes: 7 additions & 0 deletions src/types/commonType.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,3 +30,10 @@ export type MoimIdPathParameterType = {
export type NoticeIdPathParameterType = {
noticeId: string;
};

export interface localStorageUserType {
guestId: number;
guestNickname: string;
hostId: number;
hostNickname: string;
}

0 comments on commit 9d66c7a

Please sign in to comment.