From 5244600b161dcaf563729c4035e4f620e55f86f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=95=EA=B0=80=ED=98=84?= <81469686+gahyuun@users.noreply.github.com> Date: Thu, 25 Jan 2024 14:20:10 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20404,=20500=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20=EC=97=90=EB=9F=AC?= =?UTF-8?q?=20=EC=B2=98=EB=A6=AC=20=20(#198)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 120 +++++++++++++--- src/api/coupon/index.ts | 1 - src/api/{index.tsx => index.ts} | 49 ++++--- .../coupon/not-found-coupon/index.tsx | 14 +- src/components/error/NotFound.tsx | 80 +++++++++++ src/components/error/ServerError.tsx | 61 ++++++++ src/components/layout/header/index.tsx | 100 +++++++++++++ src/components/layout/side-bar/index.tsx | 4 +- src/constants/api/index.ts | 1 + src/constants/mobile/index.ts | 2 +- src/hooks/coupon/useCoupon.ts | 6 +- src/hooks/main/useMain.ts | 40 +++--- src/layout.tsx | 134 ++++-------------- src/pages/coupon/index.tsx | 13 +- src/pages/main-redirect/index.tsx | 9 +- src/pages/main/index.tsx | 23 ++- src/pages/sign-in/index.tsx | 7 +- src/queries/.gitkeep | 0 src/queries/coupon/index.ts | 40 +++--- src/styles/.gitkeep | 0 20 files changed, 501 insertions(+), 203 deletions(-) rename src/api/{index.tsx => index.ts} (60%) create mode 100644 src/components/error/NotFound.tsx create mode 100644 src/components/error/ServerError.tsx create mode 100644 src/components/layout/header/index.tsx delete mode 100644 src/queries/.gitkeep delete mode 100644 src/styles/.gitkeep diff --git a/src/App.tsx b/src/App.tsx index 5a7a68cb..3554e45a 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -56,52 +56,138 @@ function App() { path={ROUTES.SIGNUP_SUCCESS} element={accessToken ? : } /> - } /> - } /> - } /> - }> + : + } + /> + : + } + /> + : } + /> + : + } + > } + element={ + !accessToken ? ( + + ) : ( + + ) + } /> } + element={ + !accessToken ? ( + + ) : ( + + ) + } /> } + element={ + !accessToken ? ( + + ) : ( + + ) + } /> {/* 레이아웃 적용 페이지 */} - }> - } /> + : + } + > + : + } + /> } + element={ + !accessToken ? : + } + /> + : + } /> - } /> } + element={ + !accessToken ? ( + + ) : ( + + ) + } /> - } /> - } /> + :
} + /> + : } + /> }> } + element={ + !accessToken ? ( + + ) : ( + + ) + } /> }> } + element={ + !accessToken ? : + } /> - } /> + : + } + /> + + ) : ( + + ) + } + /> ); diff --git a/src/api/coupon/index.ts b/src/api/coupon/index.ts index 58555dad..7fa73c0d 100644 --- a/src/api/coupon/index.ts +++ b/src/api/coupon/index.ts @@ -1,4 +1,3 @@ -import { Response } from '@/types/api'; import { instance } from '..'; import { BuyCouponData, diff --git a/src/api/index.tsx b/src/api/index.ts similarity index 60% rename from src/api/index.tsx rename to src/api/index.ts index f2a20d1b..73e936f2 100644 --- a/src/api/index.tsx +++ b/src/api/index.ts @@ -1,13 +1,10 @@ import axios from 'axios'; -import { HTTP_STATUS_CODE } from '../constants/api'; +import { HTTP_STATUS_CODE, RESPONSE_CODE } from '../constants/api'; import { getCookie, removeCookie, setCookie } from '@hooks/sign-in/useSignIn'; import { REFRESH_API } from './refresh'; import { message } from 'antd'; -import { ROUTES } from '@/constants/routes'; -import { isAccessTokenExpired } from '@/utils/refresh'; export const instance = axios.create({ - // baseURL: '', baseURL: process.env.REACT_APP_SERVER_URL, timeout: 5000, headers: { @@ -28,34 +25,42 @@ instance.interceptors.request.use( async (config) => { const accessToken = getCookie('accessToken'); if (accessToken) { - const isTokenExpired = isAccessTokenExpired(accessToken); - if (isTokenExpired) { - try { - const res = await REFRESH_API.postRefresh({ - accessToken: accessToken, - refreshToken: getCookie('refreshToken') as string, - }); - config.headers['Authorization'] = `Bearer ${res.data.accessToken}`; - setCookie('accessToken', res.data.accessToken); - setCookie('refreshToken', res.data.refreshToken); - } catch (refreshError) { - console.log('재발급 실패'); - } - } else { - config.headers['Authorization'] = `Bearer ${accessToken}`; - } + config.headers['Authorization'] = `Bearer ${accessToken}`; } return config; }, (error) => { - // 여기 뺐습니다. return Promise.reject(error); }, ); instance.interceptors.response.use( (response) => response, - (error) => { + async (error) => { + if (error.response?.status === HTTP_STATUS_CODE.UNAUTHORIZED) { + if (error.response?.data && 'code' in error.response.data) { + // 리프레시 토큰이 유효하지 않을 때 + if (error.response.data.code === RESPONSE_CODE.INVALID_REFRESH_TOKEN) { + message.error('로그인 만료 입니다.'); + handleUnauthorized(); + } + } else { + const accessToken = getCookie('accessToken'); + if (accessToken) { + const res = await REFRESH_API.postRefresh({ + accessToken: accessToken, + refreshToken: getCookie('refreshToken') as string, + }); + setCookie('accessToken', res.data.accessToken); + setCookie('refreshToken', res.data.refreshToken); + } else { + removeCookie('accessToken'); + removeCookie('refreshToken'); + removeCookie('accommodationId'); + window.location.replace('/signin'); + } + } + } return Promise.reject(error); }, ); diff --git a/src/components/coupon/not-found-coupon/index.tsx b/src/components/coupon/not-found-coupon/index.tsx index d7d4b843..c6bd344e 100644 --- a/src/components/coupon/not-found-coupon/index.tsx +++ b/src/components/coupon/not-found-coupon/index.tsx @@ -1,8 +1,15 @@ +import { ROUTES } from '@/constants/routes'; import { TextBox } from '@components/text-box'; import { Button } from 'antd'; +import { useNavigate, useParams } from 'react-router-dom'; import styled from 'styled-components'; export const NotFoundCoupon = () => { + const navigate = useNavigate(); + const { accommodationId } = useParams(); + const handleNavigateCouponRegistration = () => { + navigate(`/${accommodationId}${ROUTES.COUPON_REGISTRATION}`); + }; return ( @@ -14,7 +21,12 @@ export const NotFoundCoupon = () => { - + 쿠폰 만들기 diff --git a/src/components/error/NotFound.tsx b/src/components/error/NotFound.tsx new file mode 100644 index 00000000..5bac5ab1 --- /dev/null +++ b/src/components/error/NotFound.tsx @@ -0,0 +1,80 @@ +import { ROUTES } from '@/constants/routes'; +import { ACCOMMODATION_API } from '@api/accommodation'; +import { TextBox } from '@components/text-box'; +import { getCookie, setCookie } from '@hooks/sign-in/useSignIn'; +import { Button } from 'antd'; +import { useNavigate } from 'react-router-dom'; +import styled from 'styled-components'; + +export const NotFound = () => { + const navigate = useNavigate(); + const handleNavigate = async () => { + const accommodationId = getCookie('accommodationId'); + if (accommodationId) { + navigate(`/${accommodationId}${ROUTES.MAIN}`); + return; + } + const { data } = await ACCOMMODATION_API.getAccommodationList(); + const hasAccommodationData = data.accommodations.length > 0; + const accommodationIdData = data.accommodations[0].id; + if (hasAccommodationData && accommodationIdData) { + setCookie('accommodationId', accommodationIdData.toString()); + navigate(`/${accommodationIdData}${ROUTES.MAIN}`); + return; + } + navigate(ROUTES.INIT); + }; + return ( + + +
+ + 빨리잡아!  + + + 쿠폰센터 + +
+ + 페이지를 찾을 수 없습니다. + + + + + 홈화면으로 이동 + + + + ); +}; + +const StyledLayout = styled.main` + margin: 0 auto; + width: 374px; + height: calc(100vh - 56px); + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 48px; +`; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; +`; + +const StyledButton = styled(Button)` + width: 100%; + height: 54px; + padding: 12px 32px; +`; diff --git a/src/components/error/ServerError.tsx b/src/components/error/ServerError.tsx new file mode 100644 index 00000000..7e640ca6 --- /dev/null +++ b/src/components/error/ServerError.tsx @@ -0,0 +1,61 @@ +import { TextBox } from '@components/text-box'; +import { Button } from 'antd'; +import styled from 'styled-components'; + +export const ServerError = () => { + return ( + + +
+ + 빨리잡아!  + + + 쿠폰센터 + +
+ + 페이지가 작동하지 않습니다 + + + + { + location.reload(); + }} + > + 새로고침 + + + + ); +}; + +const StyledLayout = styled.main` + margin: 0 auto; + width: 374px; + height: calc(100vh - 56px); + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 48px; +`; + +const StyledContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 8px; +`; + +const StyledButton = styled(Button)` + width: 100%; + height: 54px; + padding: 12px 32px; +`; diff --git a/src/components/layout/header/index.tsx b/src/components/layout/header/index.tsx new file mode 100644 index 00000000..c6b31622 --- /dev/null +++ b/src/components/layout/header/index.tsx @@ -0,0 +1,100 @@ +import { colors } from '@/constants/colors'; +import { MOBILE_BREAKPOINTS } from '@/constants/mobile'; +import { TextBox } from '@components/text-box'; +import { getCookie } from '@hooks/sign-in/useSignIn'; +import { isCouponModifiedState } from '@stores/coupon/atom'; +import { isSideBarOpenState } from '@stores/layout'; +import { Layout, Modal } from 'antd'; +import React from 'react'; +import { FaBars } from 'react-icons/fa'; +import { useNavigate } from 'react-router-dom'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; +import styled from 'styled-components'; +import logoImg from '@assets/image/logo.png'; +import { ROUTES } from '@/constants/routes'; + +export const Header = () => { + const navigate = useNavigate(); + const setIsOpenSideBar = useSetRecoilState(isSideBarOpenState); + const isCouponModified = useRecoilValue(isCouponModifiedState); + const openSideBar = () => { + setIsOpenSideBar(true); + }; + const moveToMain = () => { + const accommodationId = getCookie('accommodationId'); + const updatedMainPath = `/${accommodationId}${ROUTES.MAIN}`; + + if (isCouponModified) + Modal.confirm({ + title: '수정사항이 저장되지 않았습니다.', + content: '페이지를 나가겠습니까?', + cancelText: '나가기', + okText: '취소', + className: 'confirm-modal', + onCancel: () => { + navigate(updatedMainPath); + }, + }); + else { + navigate(updatedMainPath); + } + }; + return ( + + + + + + + 빨리잡아! 쿠폰센터 + + + ); +}; +const StyledHeader = styled(Layout.Header)` + position: sticky; + top: 0; + display: flex; + align-items: center; + gap: 8px; + width: 100%; + height: 56px; + background-color: ${colors.black100}; + box-shadow: 0px 1px 5px 0px #0000001a; + padding: 0 24px; + z-index: 7; + @media (max-width: ${MOBILE_BREAKPOINTS}) { + z-index: 4; + } +`; + +const StyleLogo = styled.img` + height: 24px; + object-fit: contain; + cursor: pointer; + @media (max-width: ${MOBILE_BREAKPOINTS}) { + display: none; + } +`; +const StyledBars = styled.button` + padding: 0; + background-color: transparent; + border: none; + font-size: 24px; + width: 24px; + height: 24px; + display: none; + justify-content: space-between; + align-items: center; + cursor: pointer; + color: ${colors.primary}; + @media (max-width: ${MOBILE_BREAKPOINTS}) { + display: flex; + } +`; diff --git a/src/components/layout/side-bar/index.tsx b/src/components/layout/side-bar/index.tsx index f4d2fd9f..549d4466 100644 --- a/src/components/layout/side-bar/index.tsx +++ b/src/components/layout/side-bar/index.tsx @@ -8,7 +8,7 @@ import { IoCloseOutline } from 'react-icons/io5'; import { colors } from '@/constants/colors'; import { useSetRecoilState } from 'recoil'; import { isSideBarOpenState } from '@stores/layout'; -import { mobileBreakPoint } from '@/constants/mobile'; +import { MOBILE_BREAKPOINTS } from '@/constants/mobile'; export const SideBar = () => { const { pointSummaryData, accommodationListData } = useSideBar(); @@ -54,7 +54,7 @@ const StyledClosedButton = styled.button` padding: 0; cursor: pointer; display: none; - @media (max-width: ${mobileBreakPoint}) { + @media (max-width: ${MOBILE_BREAKPOINTS}) { display: flex; } `; diff --git a/src/constants/api/index.ts b/src/constants/api/index.ts index acbcb446..3d7235be 100644 --- a/src/constants/api/index.ts +++ b/src/constants/api/index.ts @@ -42,6 +42,7 @@ export const RESPONSE_CODE = { REQUEST_BODY_ERROR: 9001, SERVER_ERROR: 9002, INVALID_DATE: 9003, + NOT_ACCOMMODATION_OWNER: 9004, // IMAGE SAVE IMAGE_SAVE_FAIL: 2005, diff --git a/src/constants/mobile/index.ts b/src/constants/mobile/index.ts index b65454f8..9d0e2425 100644 --- a/src/constants/mobile/index.ts +++ b/src/constants/mobile/index.ts @@ -1 +1 @@ -export const mobileBreakPoint = '1280px'; +export const MOBILE_BREAKPOINTS = '1280px'; diff --git a/src/hooks/coupon/useCoupon.ts b/src/hooks/coupon/useCoupon.ts index a5043d08..b8f3eb2d 100644 --- a/src/hooks/coupon/useCoupon.ts +++ b/src/hooks/coupon/useCoupon.ts @@ -63,14 +63,13 @@ export const useCoupon = () => { const { data, isLoading: isGetCouponLoading, - isError: isGetCouponError, remove: getCouponRemove, + error, } = useGetCoupon(accommodationId as string, { select(data) { return data.data; }, }); - const { mutate: deleteCoupon } = useDeleteCoupon({ onSuccess() { message.success('삭제되었습니다'); @@ -571,8 +570,6 @@ export const useCoupon = () => { }; return { - data, - isGetCouponError, deleteCoupon, couponData, handleSelectStatus, @@ -595,5 +592,6 @@ export const useCoupon = () => { isGetCouponLoading, handleAgreeCheckbox, isAgreed, + error, }; }; diff --git a/src/hooks/main/useMain.ts b/src/hooks/main/useMain.ts index bfa01c2e..96f28141 100644 --- a/src/hooks/main/useMain.ts +++ b/src/hooks/main/useMain.ts @@ -59,34 +59,38 @@ export const useMain = () => { return hours; }; - const { data: staticsData, isError: isStaticsError } = useGetStatics( - accommodationId as string, - { - select(data) { - return data.data; - }, - staleTime: calculateStaleTime(), + const { + data: staticsData, + error: staticsError, + isLoading: isStaticsLoading, + } = useGetStatics(accommodationId as string, { + select(data) { + return data.data; }, - ); + staleTime: calculateStaleTime(), + }); - const { data, isError: isRevenueError } = useGetRevenue( - accommodationId as string, - { - select(data) { - return data.data; - }, - staleTime: calculateStaleTime(), + const { + data, + error: revenueError, + isLoading: isRevenueLoading, + } = useGetRevenue(accommodationId as string, { + select(data) { + return data.data; }, - ); + staleTime: calculateStaleTime(), + }); const revenueData = handleRevenueDataFormat(data?.revenue); return { navigateCoupon, navigateCouponRegistration, staticsData, - isStaticsError, + staticsError, revenueData, - isRevenueError, + revenueError, + isStaticsLoading, + isRevenueLoading, couponMessage: data?.couponMessage, navigateUserGuide, navigateBusinessCenter, diff --git a/src/layout.tsx b/src/layout.tsx index 7b2677b1..05594a7e 100644 --- a/src/layout.tsx +++ b/src/layout.tsx @@ -1,21 +1,17 @@ import { SideBar } from '@components/layout/side-bar'; -import { Layout, Modal } from 'antd'; -import { Outlet, useLocation, useNavigate } from 'react-router-dom'; +import { Layout } from 'antd'; +import { Outlet, useLocation } from 'react-router-dom'; import { ROUTES } from './constants/routes'; import { colors } from '@/constants/colors'; import styled from 'styled-components'; -import { TextBox } from '@components/text-box'; -import logoImg from '@assets/image/logo.png'; import { StyledLayoutProps, StyledSiderProps } from './types/layout'; -import { FaBars } from 'react-icons/fa6'; -import { useRecoilState, useRecoilValue } from 'recoil'; +import { useRecoilState } from 'recoil'; import { isSideBarOpenState } from '@stores/layout'; -import { getCookie } from '@hooks/sign-in/useSignIn'; -import { mobileBreakPoint } from './constants/mobile'; -import { isCouponModifiedState } from '@stores/coupon/atom'; +import { MOBILE_BREAKPOINTS } from './constants/mobile'; +import { Header } from '@components/layout/header'; +import { NotFound } from '@components/error/NotFound'; -export const RootLayout = () => { - const navigate = useNavigate(); +export const RootLayout = ({ isError = false }: { isError?: boolean }) => { const location = useLocation(); const currentRoute = location.pathname; const isRoomRegistrationRoute = currentRoute.includes( @@ -23,86 +19,38 @@ export const RootLayout = () => { ); const isRoomUpdateRoute = currentRoute.includes(ROUTES.ROOM_UPDATE); const [isOpenSideBar, setIsOpenSideBar] = useRecoilState(isSideBarOpenState); - const isCouponModified = useRecoilValue(isCouponModifiedState); const shouldApplyGrayBackground = isRoomRegistrationRoute || isRoomUpdateRoute; - const moveToMain = () => { - const accommodationId = getCookie('accommodationId'); - const updatedMainPath = `/${accommodationId}${ROUTES.MAIN}`; - - if (isCouponModified) - Modal.confirm({ - title: '수정사항이 저장되지 않았습니다.', - content: '페이지를 나가겠습니까?', - cancelText: '나가기', - okText: '취소', - className: 'confirm-modal', - onCancel: () => { - navigate(updatedMainPath); - }, - }); - else { - navigate(updatedMainPath); - } - }; - - const openSideBar = () => { - setIsOpenSideBar(true); - }; - const closeSideBar = () => { setIsOpenSideBar(false); }; return ( - - - - - - - 빨리잡아! 쿠폰센터 - - - - - - - {isOpenSideBar && } - - - - +
+ {isError ? ( + + ) : ( + + + + + {isOpenSideBar && } + + + + + )} ); }; -const StyledHeader = styled(Layout.Header)` - position: sticky; - top: 0; - display: flex; - align-items: center; - gap: 8px; - width: 100%; - height: 56px; - background-color: ${colors.black100}; - box-shadow: 0px 1px 5px 0px #0000001a; - padding: 0 24px; - z-index: 7; - @media (max-width: ${mobileBreakPoint}) { - z-index: 4; - } -`; - const StyledSider = styled(Layout.Sider)` position: sticky; top: 56px; @@ -110,7 +58,7 @@ const StyledSider = styled(Layout.Sider)` background-color: ${colors.white}; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); z-index: 6; - @media (max-width: ${mobileBreakPoint}) { + @media (max-width: ${MOBILE_BREAKPOINTS}) { transform: ${(props) => props.isOpenSideBar ? 'translateX(0%)' : 'translateX(-100%)'}; top: 0; @@ -120,15 +68,6 @@ const StyledSider = styled(Layout.Sider)` } `; -const StyleLogo = styled.img` - height: 24px; - object-fit: contain; - cursor: pointer; - @media (max-width: ${mobileBreakPoint}) { - display: none; - } -`; - const StyledContent = styled(Layout.Content)` max-width: 1024px; margin: 0 auto; @@ -137,28 +76,11 @@ const StyledContent = styled(Layout.Content)` const StyledLayout = styled(Layout)` background-color: ${(props) => props.shouldApplyGrayBackground ? colors.midGray : 'white'}; - @media (max-width: ${mobileBreakPoint}) { + @media (max-width: ${MOBILE_BREAKPOINTS}) { padding: 0; } `; -const StyledBars = styled.button` - padding: 0; - background-color: transparent; - border: none; - font-size: 24px; - width: 24px; - height: 24px; - display: none; - justify-content: space-between; - align-items: center; - cursor: pointer; - color: ${colors.primary}; - @media (max-width: ${mobileBreakPoint}) { - display: flex; - } -`; - const StyledDim = styled.div` position: fixed; top: 0; @@ -168,7 +90,7 @@ const StyledDim = styled.div` background-color: rgba(0, 0, 0, 0.3); z-index: 5; display: none; - @media (max-width: ${mobileBreakPoint}) { + @media (max-width: ${MOBILE_BREAKPOINTS}) { display: block; } `; diff --git a/src/pages/coupon/index.tsx b/src/pages/coupon/index.tsx index 0d9eef61..476a2cf7 100644 --- a/src/pages/coupon/index.tsx +++ b/src/pages/coupon/index.tsx @@ -8,11 +8,12 @@ import { useCoupon } from '@hooks/coupon/useCoupon'; import { CouponTable } from '@components/coupon/table'; import { PointModal } from '@components/point-charge-modal/point-modal'; import { NotFoundCoupon } from '@components/coupon/not-found-coupon'; +import { RESPONSE_CODE } from '@/constants/api'; +import { NotFound } from '@components/error/NotFound'; +import { ServerError } from '@components/error/ServerError'; export const Coupon = () => { const { - data, - isGetCouponError, couponData, handleSelectStatus, handleSelectRecord, @@ -34,15 +35,20 @@ export const Coupon = () => { isGetCouponLoading, handleAgreeCheckbox, isAgreed, + error, } = useCoupon(); + if (error?.response?.data.code === RESPONSE_CODE.NOT_ACCOMMODATION_OWNER) + return ; + if (error !== null) return ; if (isGetCouponLoading) return ( ); - if (data === null) + + if (couponData.coupons.length === 0) return ( <> { ); - if (isGetCouponError) return
에러
; return ( <> diff --git a/src/pages/main-redirect/index.tsx b/src/pages/main-redirect/index.tsx index 2909c1ac..a315ea1c 100644 --- a/src/pages/main-redirect/index.tsx +++ b/src/pages/main-redirect/index.tsx @@ -1,7 +1,12 @@ import { ROUTES } from '@/constants/routes'; +import { getCookie } from '@hooks/sign-in/useSignIn'; import { Navigate } from 'react-router-dom'; export const MainRedirect = () => { - // 쿠키에 accommodationId가 있으먄 main으로 redirect 없으면 로그인 페이지로 redirect - return ; + const accommodationId = getCookie('accommodationId'); + const accessToken = getCookie('accessToken'); + if (accommodationId) + return ; + if (accessToken) return ; + return ; }; diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx index 33d62476..78b3f0c0 100644 --- a/src/pages/main/index.tsx +++ b/src/pages/main/index.tsx @@ -6,27 +6,44 @@ import { Image, Layout, Spin } from 'antd'; import styled from 'styled-components'; import { useMain } from '@hooks/main/useMain'; import { UserGuidNavigationContainer } from '@components/main/user-guide-navigation-container'; +import { RESPONSE_CODE } from '@/constants/api'; +import { NotFound } from '@components/error/NotFound'; +import { ServerError } from '@components/error/ServerError'; export const Main = () => { const { navigateCoupon, navigateCouponRegistration, staticsData, - isStaticsError, + staticsError, revenueData, - isRevenueError, + revenueError, + isStaticsLoading, + isRevenueLoading, couponMessage, navigateUserGuide, navigateBusinessCenter, } = useMain(); + if ( + staticsError?.response?.data.code === + RESPONSE_CODE.NOT_ACCOMMODATION_OWNER || + revenueError?.response?.data.code === RESPONSE_CODE.NOT_ACCOMMODATION_OWNER + ) + return ; + if (staticsError !== null || revenueError !== null) return ; + if (isStaticsLoading || isRevenueLoading) + return ( + + + + ); if (!staticsData || !revenueData) return ( ); - if (isStaticsError || isRevenueError) return
에러
; return ( diff --git a/src/pages/sign-in/index.tsx b/src/pages/sign-in/index.tsx index d9de2f1a..7a3b29a8 100644 --- a/src/pages/sign-in/index.tsx +++ b/src/pages/sign-in/index.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import styled from 'styled-components'; import { Footer } from '@components/layout/footer'; import { Main } from '@components/sign-up'; @@ -10,12 +9,12 @@ import { useFormik } from 'formik'; import { Layout, Input, Button, message } from 'antd'; import { TextBox } from '@components/text-box'; import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'; -import { useSideBar } from '@hooks/side-bar/useSideBar'; import { AxiosError } from 'axios'; import { HTTP_STATUS_CODE } from '@/constants/api'; import { colors } from '@/constants/colors'; import { SignInData } from '@api/sign-in/type'; import { ACCOMMODATION_API } from '@api/accommodation'; +import { ROUTES } from '@/constants/routes'; export const SignIn = () => { const { handleChangeUrl } = useCustomNavigate(); @@ -34,11 +33,11 @@ export const SignIn = () => { setCookie('accommodationId', firstAccommodationId); const accommodationId = getCookie('accommodationId'); setTimeout(() => { - handleChangeUrl(`/${accommodationId}/main`); + handleChangeUrl(`/${accommodationId}${ROUTES.MAIN}`); }, 1000); } else { setTimeout(() => { - handleChangeUrl('/init'); + handleChangeUrl(`${ROUTES.INIT}`); }, 1000); } } catch (error) { diff --git a/src/queries/.gitkeep b/src/queries/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/src/queries/coupon/index.ts b/src/queries/coupon/index.ts index 4d6b71a9..5bb17a7a 100644 --- a/src/queries/coupon/index.ts +++ b/src/queries/coupon/index.ts @@ -20,41 +20,45 @@ export const useGetStatics = ( accommodationId: string, options?: UseQueryOptions< AxiosResponse, - AxiosError, + AxiosError, staticsData >, ) => { - return useQuery, AxiosError, staticsData>( - ['getStatics'], - () => COUPON_API.getStatics(accommodationId), - { - ...options, - }, - ); + return useQuery< + AxiosResponse, + AxiosError, + staticsData + >(['getStatics'], () => COUPON_API.getStatics(accommodationId), { + ...options, + }); }; export const useGetRevenue = ( accommodationId: string, options?: UseQueryOptions< AxiosResponse, - AxiosError, + AxiosError, revenueData >, ) => { - return useQuery, AxiosError, revenueData>( - ['getRevenue'], - () => COUPON_API.getRevenue(accommodationId), - { - ...options, - }, - ); + return useQuery< + AxiosResponse, + AxiosError, + revenueData + >(['getRevenue'], () => COUPON_API.getRevenue(accommodationId), { + ...options, + }); }; export const useGetCoupon = ( accommodationId: string, - options?: UseQueryOptions, AxiosError, coupons>, + options?: UseQueryOptions< + AxiosResponse, + AxiosError, + coupons + >, ) => - useQuery, AxiosError, coupons>( + useQuery, AxiosError, coupons>( ['getCoupon'], () => COUPON_API.getCoupon(accommodationId), { ...options }, diff --git a/src/styles/.gitkeep b/src/styles/.gitkeep deleted file mode 100644 index e69de29b..00000000