From a92be326e894efae86d4d0ff8255f8359209286d Mon Sep 17 00:00:00 2001 From: Minji Lee <79428205+alswlfl29@users.noreply.github.com> Date: Fri, 5 Jul 2024 17:32:36 +0900 Subject: [PATCH] =?UTF-8?q?[Fix/#48]=20=EC=98=88=EC=99=B8=EC=B2=98?= =?UTF-8?q?=EB=A6=AC(=ED=86=A0=ED=81=B0=20=EB=A7=8C=EB=A3=8C,=20=EB=9D=BC?= =?UTF-8?q?=EC=9A=B0=ED=84=B0=20=EA=B2=B0=EC=A0=9C=EB=A1=9C=20=EC=95=88?= =?UTF-8?q?=EB=84=98=EC=96=B4=EA=B0=80=EA=B2=8C)=20(#53)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 에러페이지 라우터 추가, api 토큰 만료 response 처리 * fix: 인기 클래스 이미지 사이즈 수정 * fix: 이전 버튼 클릭 라우터 방지 * fix: 클래스 존재 하지 않은 경우, 데이터 요청 실패 경우 --- src/apis/apiClient.ts | 17 +++++++++- src/components/molecules/LessonDateChoice.tsx | 4 ++- .../molecules/PopularLessonItem.tsx | 8 +++-- src/main.tsx | 2 ++ src/pages/main/HanaFunMain.tsx | 18 +++++++--- src/pages/main/QRPay.tsx | 34 +++++++++++-------- src/pages/openLesson/RegisterHost.tsx | 6 +++- src/pages/openLesson/RegisterLesson.tsx | 7 ++-- src/pages/search/LessonDetail.tsx | 14 +++++--- src/pages/search/PayLesson.tsx | 18 ++++++++-- 10 files changed, 96 insertions(+), 32 deletions(-) diff --git a/src/apis/apiClient.ts b/src/apis/apiClient.ts index 8270741..4766b55 100644 --- a/src/apis/apiClient.ts +++ b/src/apis/apiClient.ts @@ -1,12 +1,14 @@ import axios, { AxiosInstance } from 'axios'; import { API_BASE_URL } from './url'; -import { getCookie } from '../utils/cookie'; +import { getCookie, removeCookie } from '../utils/cookie'; import { userApi } from './interfaces/userApi'; import { accountApi } from './interfaces/accountApi'; import { hostApi } from './interfaces/hostApi'; import { categoryApi } from './interfaces/categoryApi'; import { transactionApi } from './interfaces/transactionApi'; import { reservationApi } from './interfaces/reservationApi'; +import { useNavigate } from 'react-router-dom'; +import { useModal } from '../context/ModalContext'; export class ApiClient implements @@ -395,6 +397,19 @@ export class ApiClient } ); + newInstance.interceptors.response.use((response) => { + if (response.status === 403) { + removeCookie('token'); + removeCookie('username'); + location.href = '/'; + } + + if (response.status === 404) { + location.href = '/error'; + } + return response; + }); + return newInstance; }; } diff --git a/src/components/molecules/LessonDateChoice.tsx b/src/components/molecules/LessonDateChoice.tsx index c6e35b1..b83d577 100644 --- a/src/components/molecules/LessonDateChoice.tsx +++ b/src/components/molecules/LessonDateChoice.tsx @@ -6,11 +6,12 @@ import { Button } from '../common/Button'; import { useNavigate } from 'react-router-dom'; interface IProps { + lessonId: number; dateList: LessonDateType[]; price: number; } -export const LessonDateChoice: FC = ({ dateList, price }) => { +export const LessonDateChoice: FC = ({ lessonId, dateList, price }) => { const navigate = useNavigate(); const [choiceDate, setChoiceDate] = useState<{ lessondate_id: number; @@ -143,6 +144,7 @@ export const LessonDateChoice: FC = ({ dateList, price }) => { onClick={() => navigate('/pay', { state: { + lessonId: lessonId, payment: count * price, lessondate_id: choiceDate?.lessondate_id || 0, count: count, diff --git a/src/components/molecules/PopularLessonItem.tsx b/src/components/molecules/PopularLessonItem.tsx index b3e54ab..df65667 100644 --- a/src/components/molecules/PopularLessonItem.tsx +++ b/src/components/molecules/PopularLessonItem.tsx @@ -14,8 +14,12 @@ export const PopularLessonItem: FC = ({ id, img, title }) => { className='w-36 flex flex-col justify-center gap-1 cursor-pointer' onClick={() => navigate(`/lesson/${id}`)} > -
- 클래스 사진 +
+ 클래스 사진

{title} diff --git a/src/main.tsx b/src/main.tsx index 7b30d93..008229b 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -23,6 +23,7 @@ import { LessonDetail } from './pages/search/LessonDetail.tsx'; import { PayLesson } from './pages/search/PayLesson.tsx'; import { Sales } from './pages/mypage/Sales.tsx'; import { SalesYear } from './pages/mypage/SalesYear.tsx'; +import { ErrorPage } from './pages/ErrorPage.tsx'; const router = createBrowserRouter([ { @@ -58,6 +59,7 @@ const router = createBrowserRouter([ ], }, ], + errorElement: , }, ]); diff --git a/src/pages/main/HanaFunMain.tsx b/src/pages/main/HanaFunMain.tsx index 8f2829c..c68e9b4 100644 --- a/src/pages/main/HanaFunMain.tsx +++ b/src/pages/main/HanaFunMain.tsx @@ -22,6 +22,7 @@ import { Account_Slider_Over3_Settings } from '../../constants/accountSliderOver import { Account_Slider_Under2_Settings } from '../../constants/accountSliderUnder2Settings'; import { IntroCard_Slider_Settings } from '../../constants/introCardSliderSettings'; import { useModal } from '../../context/ModalContext'; +import { ErrorPage } from '../ErrorPage'; export const HanaFunMain = () => { const navigate = useNavigate(); @@ -29,7 +30,6 @@ export const HanaFunMain = () => { const [showQr, setShowQr] = useState(false); const [isScan, setIsScan] = useState(false); const [active, setActive] = useState(null); - const [selectedAccount, setSelectedAccount] = useState({ accountId: -1, accountName: '', @@ -40,7 +40,11 @@ export const HanaFunMain = () => { const username = getCookie('username'); const token = getCookie('token'); - const { isLoading: isGetAccountList, data: accountList } = useQuery({ + const { + isLoading: isGetAccountList, + data: accountList, + isError: isGetAccountListError, + } = useQuery({ queryKey: [token, 'accountList'], queryFn: () => { const res = ApiClient.getInstance().getAccountList(); @@ -48,7 +52,11 @@ export const HanaFunMain = () => { }, }); - const { isLoading: isGetPopularLesson, data: popularLessonList } = useQuery({ + const { + isLoading: isGetPopularLesson, + data: popularLessonList, + isError: isGetPopularLessonError, + } = useQuery({ queryKey: ['popularLessonList'], queryFn: () => { const res = ApiClient.getInstance().getSearchLessonAll({ @@ -114,7 +122,9 @@ export const HanaFunMain = () => { }; }, [active]); - if (isGetAccountList && isGetPopularLesson) return ; + if (isGetAccountList || isGetPopularLesson) return ; + + if (isGetAccountListError || isGetPopularLessonError) return ; return ( <> diff --git a/src/pages/main/QRPay.tsx b/src/pages/main/QRPay.tsx index 400b309..d90dd34 100644 --- a/src/pages/main/QRPay.tsx +++ b/src/pages/main/QRPay.tsx @@ -102,19 +102,25 @@ export const QRPay = () => {

클래스를 선택해주세요.

-
- {hostInfo.data?.lessonList.map((lesson, idx) => ( -
-

onChangeLesson(lesson)} - > - {lesson.title} -

- {idx + 1 !== hostInfo.data?.lessonList.length &&
} -
- ))} -
+ {hostInfo.data.lessonList.length !== 0 ? ( +
+ {hostInfo.data?.lessonList.map((lesson, idx) => ( +
+

onChangeLesson(lesson)} + > + {lesson.title} +

+ {idx + 1 !== hostInfo.data?.lessonList.length &&
} +
+ ))} +
+ ) : ( +
+ 클래스가 없습니다. +
+ )}
)} @@ -156,7 +162,7 @@ export const QRPay = () => { message={!isSend ? '결제' : '완료'} isActive={!isSend ? isBtnActive : true} onClick={() => { - !isSend ? handleSendPayment() : navigate('/'); + !isSend ? handleSendPayment() : navigate('/', { replace: true }); }} /> diff --git a/src/pages/openLesson/RegisterHost.tsx b/src/pages/openLesson/RegisterHost.tsx index 59069f2..0e68bdd 100644 --- a/src/pages/openLesson/RegisterHost.tsx +++ b/src/pages/openLesson/RegisterHost.tsx @@ -87,7 +87,11 @@ export const RegisterHost = () => { isActive={true} message={!isSend ? '등록' : '클래스 개설하기'} onClick={() => - !isSend ? handleRegisterHost() : navigate('/open-lesson/lesson') + !isSend + ? handleRegisterHost() + : navigate('/open-lesson/lesson', { + replace: true, + }) } /> diff --git a/src/pages/openLesson/RegisterLesson.tsx b/src/pages/openLesson/RegisterLesson.tsx index 18cf737..535f981 100644 --- a/src/pages/openLesson/RegisterLesson.tsx +++ b/src/pages/openLesson/RegisterLesson.tsx @@ -92,7 +92,6 @@ export const RegisterLesson = () => { }; const onChangeLessonTime = (lessontime: LessonDateCommonType[]) => { - console.log('aaa>', lessonTime); setLessonTime(lessontime); }; @@ -248,7 +247,11 @@ export const RegisterLesson = () => { message={!isSend ? '등록' : '완료'} isActive={isBtnActive} onClick={() => { - !isSend ? handlePostAddLesson() : navigate('/mypage/host'); + !isSend + ? handlePostAddLesson() + : navigate('/mypage/host', { + replace: true, + }); }} /> diff --git a/src/pages/search/LessonDetail.tsx b/src/pages/search/LessonDetail.tsx index 3127fa4..35dc0c5 100644 --- a/src/pages/search/LessonDetail.tsx +++ b/src/pages/search/LessonDetail.tsx @@ -1,4 +1,4 @@ -import { useNavigate, useParams } from 'react-router-dom'; +import { useLocation, useNavigate, useParams } from 'react-router-dom'; import { Topbar } from '../../components/common/Topbar'; import { LessonContainer } from '../../components/molecules/LessonContainer'; import { Button } from '../../components/common/Button'; @@ -13,12 +13,12 @@ import { Loading } from '../Loading'; export const LessonDetail = () => { const navigate = useNavigate(); + const { state } = useLocation(); const { lessonId } = useParams(); const [shownotice, setShowNotice] = useState(false); const [copyLocation, setCopyLocation] = useState(false); const [materials, setMaterials] = useState([]); const [choiceModal, setChoiceModal] = useState(false); - const { isLoading: isGetLessonLoading, data: lesson } = useQuery({ queryKey: ['lesson', lessonId], queryFn: () => { @@ -76,7 +76,7 @@ export const LessonDetail = () => { onClickShowAlarm={(status: boolean) => setCopyLocation(status)} /> )} - {lessonDateList?.data && lesson?.data && choiceModal && ( + {lessonId && lessonDateList?.data && lesson?.data && choiceModal && ( setChoiceModal(false)} @@ -85,12 +85,18 @@ export const LessonDetail = () => { 하나의 일정을 선택해주세요.
)} - navigate(-1)} /> + { + state && state.prev === 'pay' ? navigate(-3) : navigate(-1); + }} + />
{ openModal(data.data?.message, closeModal); if (data.data.message === '계좌 비밀번호가 맞지 않습니다.') setShowPwModal(false); - else navigate(-1); + else + navigate(`/lesson/${state.lessonId}`, { + state: { prev: 'pay' }, + }); } } }, @@ -188,7 +191,14 @@ export const PayLesson = () => { onClose={() => setShowPwModal(false)} /> )} - navigate(-1)} /> + + navigate(`/lesson/${state.lessonId}`, { + state: { prev: 'pay' }, + }) + } + /> {!isSend ? ( <> {accountList?.data && ( @@ -254,7 +264,9 @@ export const PayLesson = () => { message={!isSend ? '다음' : '완료'} isActive={!isSend ? activeBtn : true} onClick={() => { - !isSend ? setShowModal(true) : navigate('/mypage/my-lesson-list'); + !isSend + ? setShowModal(true) + : navigate('/mypage/my-lesson-list', { replace: true }); }} />