From 12e9ed9492a9e4ef9698de648b8016d34ec3e82b Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 19:09:14 +0900 Subject: [PATCH 1/9] =?UTF-8?q?delete:=20=EC=82=AC=EC=9A=A9=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8A=94=20=ED=83=80=EC=9E=85=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/header.ts | 4 ---- 1 file changed, 4 deletions(-) delete mode 100644 src/types/header.ts diff --git a/src/types/header.ts b/src/types/header.ts deleted file mode 100644 index 119bce26..00000000 --- a/src/types/header.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type headerAccommodationAtom = { - accommodationId: number; - accommodationName: string; -}; From 7dbad05f64ba4ced0b55d320281e20ab06a0f274 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 19:11:19 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20select=20api?= =?UTF-8?q?=20queryFn=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 1 + src/api/lib/getHeaderAccommodation.ts | 10 ++++++++++ 2 files changed, 11 insertions(+) create mode 100644 src/api/lib/getHeaderAccommodation.ts diff --git a/src/api/index.ts b/src/api/index.ts index cc34ffdd..a57e6efe 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -4,3 +4,4 @@ export { default as postRefreshToken } from './lib/postRefreshToken'; export { default as getTotalReport } from './lib/getTotalReport'; export { default as getYearReport } from './lib/getYearReport'; export { default as getCouponList } from './lib/getCouponList'; +export { default as getHeaderAccommodation } from './lib/getHeaderAccommodation'; diff --git a/src/api/lib/getHeaderAccommodation.ts b/src/api/lib/getHeaderAccommodation.ts new file mode 100644 index 00000000..f07eb134 --- /dev/null +++ b/src/api/lib/getHeaderAccommodation.ts @@ -0,0 +1,10 @@ +import { instance } from '..'; +import { HeaderAccommodationResult } from '@/types/layout'; + +const getHeaderAccommodation = async (): Promise => { + const response = await instance.get(`/v1/accommodation`); + + return response.data; +}; + +export default getHeaderAccommodation; From 7e80dab9387b226cbe5cb376760f817edae13fc7 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 19:11:52 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20select=20useSu?= =?UTF-8?q?spenseQuery=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/queries/useGetHeaderAccommodation.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/hooks/queries/useGetHeaderAccommodation.ts diff --git a/src/hooks/queries/useGetHeaderAccommodation.ts b/src/hooks/queries/useGetHeaderAccommodation.ts new file mode 100644 index 00000000..34b11b10 --- /dev/null +++ b/src/hooks/queries/useGetHeaderAccommodation.ts @@ -0,0 +1,12 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; + +import { getHeaderAccommodation } from 'src/api'; +import { HeaderAccommodationResult } from '@/types/layout'; + +const useGetHeaderAccommodation = () => + useSuspenseQuery({ + queryKey: ['Accommodation'], + queryFn: () => getHeaderAccommodation() + }); + +export default useGetHeaderAccommodation; From aee0ca4a2f6873fe0762f812531f7af1c75bc131 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 19:12:26 +0900 Subject: [PATCH 4/9] =?UTF-8?q?modify:=20headerAccommodationState=20defaul?= =?UTF-8?q?=20=EA=B0=92=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/recoil/atoms/headerAccommodationState.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/recoil/atoms/headerAccommodationState.ts b/src/recoil/atoms/headerAccommodationState.ts index ce38a5b0..52f3f759 100644 --- a/src/recoil/atoms/headerAccommodationState.ts +++ b/src/recoil/atoms/headerAccommodationState.ts @@ -1,22 +1,22 @@ import { atom } from 'recoil'; import { recoilPersist } from 'recoil-persist'; -import { headerAccommodationAtom } from '@/types/header'; +import { HeaderAccommodation } from '@/types/layout'; const { persistAtom } = recoilPersist(); -const headerAccommodationState = atom({ +const headerAccommodationState = atom({ key: 'headerAccommodationState', default: { - /* HACK: 로그인 구현 완료 후 리코일 초기값 설정 방법 - - 1. React Query에서 API 요청을 성공하면, - 2. recoil 상태를 체크하여 비어있는 경우에만 setRecoilState로 업데이트 - - */ - accommodationId: 1, - accommodationName: '영덕 아이스 풀빌라' + id: 0, + name: '', + sido_id: 0, + sido: '', + sigungu_id: 0, + sigungu: '', + address: '' }, + effects_UNSTABLE: [persistAtom] }); From d304e971479878920debdaaaaa41318cf3f7a6b9 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 19:13:04 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20select=20api?= =?UTF-8?q?=20=EC=84=B1=EA=B3=B5=20=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/layout.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/types/layout.ts b/src/types/layout.ts index 5ce95626..2884b841 100644 --- a/src/types/layout.ts +++ b/src/types/layout.ts @@ -1,6 +1,20 @@ // Layout export type LayoutStyleProps = { $pathname: string }; +// Header + +export type HeaderAccommodation = { + id: number; + name: string; + sido_id: number; + sido: string; + sigungu_id: number; + sigungu: string; + address: string; +}; + +export type HeaderAccommodationResult = HeaderAccommodation[]; + // Sidebar export type SidebarHeader = { isSidebarOpen: boolean; From 183e9ab4e15b40275afe8dc9483883058bad24eb Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 19:13:28 +0900 Subject: [PATCH 6/9] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20select=20api?= =?UTF-8?q?=20=EC=84=B1=EA=B3=B5=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/Layout/Header/Select/index.tsx | 50 +++++++------------ 1 file changed, 17 insertions(+), 33 deletions(-) diff --git a/src/components/common/Layout/Header/Select/index.tsx b/src/components/common/Layout/Header/Select/index.tsx index 8572d2b7..2da6291e 100644 --- a/src/components/common/Layout/Header/Select/index.tsx +++ b/src/components/common/Layout/Header/Select/index.tsx @@ -3,44 +3,28 @@ import theme from '@styles/theme'; import { useRecoilState } from 'recoil'; import { headerAccommodationState } from '@recoil/index'; +import useGetHeaderAccommodation from '@hooks/queries/useGetHeaderAccommodation'; +import { useEffect } from 'react'; const Select = () => { - /* HACK: 예시 데이터, 리액트 쿼리를 활용하여 넘겨 selectList 배열을 받음 - - const { data: selectList } = useFetchAccommodation(); - - */ - - const selectList = [ - { - accommodationId: 1, - accommodationName: '영덕 아이스 풀빌라' - }, - { - accommodationId: 2, - accommodationName: '영덕 아이스 풀빌라2' - }, - { - accommodationId: 3, - accommodationName: '영덕 아이스 풀빌라3' - }, - { - accommodationId: 4, - accommodationName: '영덕 아이스 풀빌라4' - } - ]; + const { data: selectList } = useGetHeaderAccommodation(); const [headerAccommodation, setHeaderAccommodation] = useRecoilState( headerAccommodationState ); + useEffect(() => { + setHeaderAccommodation(selectList[0]); + }, []); + const handleSelect = (e: React.ChangeEvent) => { - const accommodationId = Number(e.target.value); + const selectId = Number(e.target.value); + + const selectAccommodation = selectList.find( + select => select.id === selectId + ); - setHeaderAccommodation({ - accommodationId, - accommodationName: `${e.target.children[accommodationId - 1].textContent}` - }); + selectAccommodation ? setHeaderAccommodation(selectAccommodation) : null; }; return ( @@ -48,14 +32,14 @@ const Select = () => { {selectList.map(item => ( - {item.accommodationName} + {item.name} ))} From 4d83f06cde904d50b8601208a7435b0c93c78d2e Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 20:49:50 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20=ED=97=A4=EB=8D=94=20select=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=EB=90=9C=20=EC=86=8D=EC=84=B1=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Report/LeftSection/index.tsx | 6 +----- src/components/Report/RightSection/TotalReport/index.tsx | 4 +--- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/Report/LeftSection/index.tsx b/src/components/Report/LeftSection/index.tsx index 633dedb9..97266e6d 100644 --- a/src/components/Report/LeftSection/index.tsx +++ b/src/components/Report/LeftSection/index.tsx @@ -9,12 +9,8 @@ import Graph from './Graph'; const LeftSection = () => { const headerSelectState = useRecoilValue(headerAccommodationState); - // HACK: recoil로 쿼리 정보 가져오기, 이슈 #67 에서 작업중 - const { data: yearReportData } = useGetYearReport( - headerSelectState.accommodationId - ); + const { data: yearReportData } = useGetYearReport(headerSelectState.id); const { coupon_sales_list: graphProps, ...yearReportProps } = yearReportData; - // HACK: 배열 순서 변경 필요, 이슈 #67 에서 작업중 const yearReport = Object.entries(yearReportProps); return ( diff --git a/src/components/Report/RightSection/TotalReport/index.tsx b/src/components/Report/RightSection/TotalReport/index.tsx index 6c009466..34b877be 100644 --- a/src/components/Report/RightSection/TotalReport/index.tsx +++ b/src/components/Report/RightSection/TotalReport/index.tsx @@ -8,9 +8,7 @@ import { AmountStyleProps } from '@/types/report'; const TotalReport = () => { const headerSelectState = useRecoilValue(headerAccommodationState); - const { data: TotalReportResult } = useGetTotalReport( - headerSelectState.accommodationId - ); + const { data: TotalReportResult } = useGetTotalReport(headerSelectState.id); const TotalReportArray = Object.entries(TotalReportResult); return ( From 65fd1f8929f9548d67a3826001ed91785d06cdcd Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 21:28:07 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83,=20=EB=88=84=EC=A0=81=20=EB=A6=AC=ED=8F=AC=ED=8A=B8,?= =?UTF-8?q?=20api,=20react-query=20=EB=B9=84=EB=8F=99=EA=B8=B0=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC=20=ED=83=80=EC=9E=85=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getHeaderAccommodation.ts | 5 ++++- src/api/lib/getTotalReport.ts | 4 +++- src/hooks/queries/useGetTotalReport.ts | 4 +++- src/hooks/queries/useGetYearReport.ts | 4 +++- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/api/lib/getHeaderAccommodation.ts b/src/api/lib/getHeaderAccommodation.ts index f07eb134..d37c4783 100644 --- a/src/api/lib/getHeaderAccommodation.ts +++ b/src/api/lib/getHeaderAccommodation.ts @@ -1,8 +1,11 @@ +import { AxiosResponse } from 'axios'; + import { instance } from '..'; import { HeaderAccommodationResult } from '@/types/layout'; const getHeaderAccommodation = async (): Promise => { - const response = await instance.get(`/v1/accommodation`); + const response: AxiosResponse = + await instance.get(`/v1/accommodation`); return response.data; }; diff --git a/src/api/lib/getTotalReport.ts b/src/api/lib/getTotalReport.ts index 8b6e369d..1f84e4ec 100644 --- a/src/api/lib/getTotalReport.ts +++ b/src/api/lib/getTotalReport.ts @@ -1,10 +1,12 @@ +import { AxiosResponse } from 'axios'; + import { instance } from '..'; import { TotalReportResult } from '@/types/report'; const getTotalReport = async ( accommodation_id: number ): Promise => { - const response = await instance.get( + const response: AxiosResponse = await instance.get( `/v1/dashboards/${accommodation_id}/reports/total` ); diff --git a/src/hooks/queries/useGetTotalReport.ts b/src/hooks/queries/useGetTotalReport.ts index 1e450c11..bc0ecc73 100644 --- a/src/hooks/queries/useGetTotalReport.ts +++ b/src/hooks/queries/useGetTotalReport.ts @@ -1,8 +1,10 @@ import { useSuspenseQuery } from '@tanstack/react-query'; + import { getTotalReport } from 'src/api'; +import { TotalReportResult } from '@/types/report'; const useGetTotalReport = (accommodation_id: number) => - useSuspenseQuery({ + useSuspenseQuery({ queryKey: ['TotalReport', accommodation_id], queryFn: () => getTotalReport(accommodation_id) }); diff --git a/src/hooks/queries/useGetYearReport.ts b/src/hooks/queries/useGetYearReport.ts index 4b88415b..538fcca1 100644 --- a/src/hooks/queries/useGetYearReport.ts +++ b/src/hooks/queries/useGetYearReport.ts @@ -1,9 +1,11 @@ import { useSuspenseQuery } from '@tanstack/react-query'; + import { getYearReport } from 'src/api'; +import { YearReportResult } from '@/types/report'; // recoil로 쿼리 정보 가져오기 const useGetYearReport = (accommodation_id: number) => - useSuspenseQuery({ + useSuspenseQuery({ queryKey: ['YearReport', accommodation_id], queryFn: () => getYearReport(accommodation_id) }); From 37913550bc7f6cc807ed826881d8f19f4c594661 Mon Sep 17 00:00:00 2001 From: JitHoon Date: Sun, 21 Jan 2024 21:37:05 +0900 Subject: [PATCH 9/9] =?UTF-8?q?fix:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?= =?UTF-8?q?=ED=97=A4=EB=8D=94=20select=20=EC=86=8D=EC=84=B1=EC=9C=BC?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponNav/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/CouponList/CouponNav/index.tsx b/src/components/CouponList/CouponNav/index.tsx index 890345a5..6b37259c 100644 --- a/src/components/CouponList/CouponNav/index.tsx +++ b/src/components/CouponList/CouponNav/index.tsx @@ -42,7 +42,7 @@ const CouponNav = () => { const fetchCoupons = async () => { try { const couponData = await getCouponList( - headerAccommodation.accommodationId, + headerAccommodation.id, resisterDateClick !== '1년' ? resisterDateClick : undefined, categoryTab !== '전체' ? categoryTab : undefined, searchText @@ -62,7 +62,7 @@ const CouponNav = () => { useEffect(() => { fetchCoupons(); - }, [headerAccommodation.accommodationId, categoryTab, resisterDateClick]); + }, [headerAccommodation.id, categoryTab, resisterDateClick]); return (