From 2ae2a5ddd8fb9e1063ad85e8d920cbf7a382aea4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Fri, 12 Jan 2024 20:09:39 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Feat:=20=EC=97=AC=ED=96=89=EC=B7=A8?= =?UTF-8?q?=ED=96=A5=20=EB=A7=88=ED=81=AC=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trip/TripPreference.tsx | 186 +++++++++++++++++++++ src/components/Trip/TripSectionTop.tsx | 3 +- src/components/common/nav/InputComment.tsx | 2 +- 3 files changed, 189 insertions(+), 2 deletions(-) create mode 100644 src/components/Trip/TripPreference.tsx diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx new file mode 100644 index 00000000..11c6d454 --- /dev/null +++ b/src/components/Trip/TripPreference.tsx @@ -0,0 +1,186 @@ +import React, { useEffect } from 'react'; +import { getTripsSurvey } from '@api/trips'; +import { useQuery } from '@tanstack/react-query'; +import { useParams } from 'react-router-dom'; +import { MoreIcon } from '@components/common/icons/Icons'; +import { RightIcon } from '@components/common/icons/Icons'; + +const TripPreference: React.FC = () => { + const params = useParams(); + const tripId = Number(params.id); + const { data: tripPreference, isLoading } = useQuery({ + queryKey: ['tripPreference', tripId], + queryFn: () => getTripsSurvey(tripId), + }); + + if (isLoading) { + return
Loading...
; + } + + useEffect(() => { + console.log('tripPreference', tripPreference); + }, [tripPreference]); + + return ( +
+ +
+
n명 참여
+
+ +
+
+ {tripPreference?.data?.data && ( +
+
+
계획성
+
+
철저하게
+
(그래프)
+
여유롭게
+
+
+
+ {( + (tripPreference.data.data.planningCount / + tripPreference.data.data.planningTotalCount) * + 100 + ).toFixed(0)} + % +
+
+ {( + ((tripPreference.data.data.planningTotalCount - + tripPreference.data.data.planningCount) / + tripPreference.data.data.planningTotalCount) * + 100 + ).toFixed(0)} + % +
+
+
+ +
+
활동시간
+
+
아침형
+
(그래프)
+
저녁형
+
+
+
+ {( + (tripPreference.data.data.activeHoursCount / + tripPreference.data.data.activeHoursTotalCount) * + 100 + ).toFixed(0)} + % +
+
+ {( + ((tripPreference.data.data.activeHoursTotalCount - + tripPreference.data.data.activeHoursCount) / + tripPreference.data.data.activeHoursTotalCount) * + 100 + ).toFixed(0)} + % +
+
+
+ +
+
숙소
+
+
분위기
+
(그래프)
+
가격
+
+
+
+ {( + (tripPreference.data.data.accommodationCount / + tripPreference.data.data.accommodationTotalCount) * + 100 + ).toFixed(0)} + % +
+
+ {( + ((tripPreference.data.data.accommodationTotalCount - + tripPreference.data.data.accommodationCount) / + tripPreference.data.data.accommodationTotalCount) * + 100 + ).toFixed(0)} + % +
+
+
+ +
+
음식
+
+
노포
+
(그래프)
+
인테리어
+
+
+
+ {( + (tripPreference.data.data.foodCount / + tripPreference.data.data.foodTotalCount) * + 100 + ).toFixed(0)} + % +
+
+ {( + ((tripPreference.data.data.foodTotalCount - + tripPreference.data.data.foodCount) / + tripPreference.data.data.foodTotalCount) * + 100 + ).toFixed(0)} + % +
+
+
+ +
+
관광지
+
+
액티비티
+
(그래프)
+
휴양
+
+
+
+ {( + (tripPreference.data.data.tripStyleCount / + tripPreference.data.data.tripStyleTotalCount) * + 100 + ).toFixed(0)} + % +
+
+ {( + ((tripPreference.data.data.tripStyleTotalCount - + tripPreference.data.data.tripStyleCount) / + tripPreference.data.data.tripStyleTotalCount) * + 100 + ).toFixed(0)} + % +
+
+
+
+ )} +
+ ); +}; + +export default TripPreference; +// 현재 내 값/토탈 * 100 = 답 diff --git a/src/components/Trip/TripSectionTop.tsx b/src/components/Trip/TripSectionTop.tsx index ed283e77..9b9dc6ef 100644 --- a/src/components/Trip/TripSectionTop.tsx +++ b/src/components/Trip/TripSectionTop.tsx @@ -1,4 +1,5 @@ import Tab from '@components/common/tab/Tab'; +import TripPreference from './TripPreference'; const TripSectionTop = () => { return ( @@ -6,7 +7,7 @@ const TripSectionTop = () => {
여정 생성 완료 페이지
우리의 여행취향,
우리의 관심목록
]} + contents={[,
우리의 관심목록
]} /> ); diff --git a/src/components/common/nav/InputComment.tsx b/src/components/common/nav/InputComment.tsx index eb21cbf6..9e7f0af5 100644 --- a/src/components/common/nav/InputComment.tsx +++ b/src/components/common/nav/InputComment.tsx @@ -94,7 +94,7 @@ export const InputComment: React.FC = () => { } }; return ( -
+
ㅣ
From 27ee2b6e6269df383dcfaa5ac6e28fcecf7799b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Sat, 13 Jan 2024 00:16:20 +0900 Subject: [PATCH 2/7] =?UTF-8?q?Fix:=20=EB=8C=93=EA=B8=80=EC=9E=85=EB=A0=A5?= =?UTF-8?q?=EC=B0=BD=20=EC=B5=9C=ED=95=98=EB=8B=A8=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Review/ReviewComments.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx index 8cde28ec..208fbd83 100644 --- a/src/components/Review/ReviewComments.tsx +++ b/src/components/Review/ReviewComments.tsx @@ -104,6 +104,7 @@ export default function ReviewComments() { } })}
+
From b8cb1b7d11fcb90e492b0d3c5be8f4b37ea32c65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Sat, 13 Jan 2024 03:56:43 +0900 Subject: [PATCH 3/7] =?UTF-8?q?Feat:=20=EC=97=AC=ED=96=89=EC=B7=A8?= =?UTF-8?q?=ED=96=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trip/TripPreference.tsx | 385 +++++++++++++++++-------- src/utils/calculatePercentage.ts | 6 + tailwind.config.js | 5 +- 3 files changed, 276 insertions(+), 120 deletions(-) create mode 100644 src/utils/calculatePercentage.ts diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx index 11c6d454..dd05ab21 100644 --- a/src/components/Trip/TripPreference.tsx +++ b/src/components/Trip/TripPreference.tsx @@ -1,35 +1,72 @@ -import React, { useEffect } from 'react'; +import React, { useState, useEffect } from 'react'; import { getTripsSurvey } from '@api/trips'; import { useQuery } from '@tanstack/react-query'; import { useParams } from 'react-router-dom'; import { MoreIcon } from '@components/common/icons/Icons'; import { RightIcon } from '@components/common/icons/Icons'; +import { + calculatePercentage, + calculatePercentageRemain, +} from '@utils/calculatePercentage'; + +const TripPreferenceButton: React.FC = () => { + return ( + + ); +}; const TripPreference: React.FC = () => { const params = useParams(); const tripId = Number(params.id); + const [A, setA] = useState<[number, number]>([0, 0]); + const [B, setB] = useState<[number, number]>([0, 0]); + const [C, setC] = useState<[number, number]>([0, 0]); + const [D, setD] = useState<[number, number]>([0, 0]); + const [E, setE] = useState<[number, number]>([0, 0]); + const { data: tripPreference, isLoading } = useQuery({ queryKey: ['tripPreference', tripId], queryFn: () => getTripsSurvey(tripId), }); + useEffect(() => { + if (tripPreference) { + setA([ + tripPreference?.data?.data?.planningCount, + tripPreference?.data?.data?.planningTotalCount, + ]); + setB([ + tripPreference?.data?.data?.activeHoursCount, + tripPreference?.data?.data?.activeHoursTotalCount, + ]); + setC([ + tripPreference?.data?.data?.accommodationCount, + tripPreference?.data?.data?.accommodationTotalCount, + ]); + setD([ + tripPreference?.data?.data?.foodCount, + tripPreference?.data?.data?.foodTotalCount, + ]); + setE([ + tripPreference?.data?.data?.tripStyleCount, + tripPreference?.data?.data?.tripStyleTotalCount, + ]); + } + }, [tripPreference]); + if (isLoading) { return
Loading...
; } - useEffect(() => { - console.log('tripPreference', tripPreference); - }, [tripPreference]); - return ( -
- -
+
+ +
n명 참여
@@ -39,141 +76,252 @@ const TripPreference: React.FC = () => {
계획성
-
-
철저하게
-
(그래프)
-
여유롭게
+
+ {A[0] >= A[1] ? ( + <> +
철저하게
+
+
+
+
여유롭게
+ + ) : ( + <> +
철저하게
+
+
+
+
여유롭게
+ + )}
-
- {( - (tripPreference.data.data.planningCount / - tripPreference.data.data.planningTotalCount) * - 100 - ).toFixed(0)} - % -
-
- {( - ((tripPreference.data.data.planningTotalCount - - tripPreference.data.data.planningCount) / - tripPreference.data.data.planningTotalCount) * - 100 - ).toFixed(0)} - % -
+ {A[0] >= A[1] ? ( + <> +
+ {calculatePercentage(A[0], A[1])}% +
+
+ {calculatePercentageRemain(A[0], A[1])}% +
+ + ) : ( + <> +
+ {calculatePercentage(A[0], A[1])}% +
+
+ {calculatePercentageRemain(A[0], A[1])}% +
+ + )}
활동시간
-
-
아침형
-
(그래프)
-
저녁형
+
+ {B[0] >= B[1] ? ( + <> +
아침형
+
+
+
+ +
저녁형
+ + ) : ( + <> +
아침형
+
+
+
+
저녁형
+ + )}
-
- {( - (tripPreference.data.data.activeHoursCount / - tripPreference.data.data.activeHoursTotalCount) * - 100 - ).toFixed(0)} - % -
-
- {( - ((tripPreference.data.data.activeHoursTotalCount - - tripPreference.data.data.activeHoursCount) / - tripPreference.data.data.activeHoursTotalCount) * - 100 - ).toFixed(0)} - % -
+ {B[0] >= B[1] ? ( + <> +
+ {calculatePercentage(B[0], B[1])}% +
+
+ {calculatePercentageRemain(B[0], B[1])}% +
+ + ) : ( + <> +
+ {calculatePercentage(B[0], B[1])}% +
+
+ {calculatePercentageRemain(B[0], B[1])}% +
+ + )}
숙소
-
-
분위기
-
(그래프)
-
가격
+
+ {C[0] >= C[1] ? ( + <> +
분위기
+
+
+
+
가격
+ + ) : ( + <> +
분위기
+
+
+
+
가격
+ + )}
-
- {( - (tripPreference.data.data.accommodationCount / - tripPreference.data.data.accommodationTotalCount) * - 100 - ).toFixed(0)} - % -
-
- {( - ((tripPreference.data.data.accommodationTotalCount - - tripPreference.data.data.accommodationCount) / - tripPreference.data.data.accommodationTotalCount) * - 100 - ).toFixed(0)} - % -
+ {C[0] >= C[1] ? ( + <> +
+ {calculatePercentage(C[0], C[1])}% +
+
+ {calculatePercentageRemain(C[0], C[1])}% +
+ + ) : ( + <> +
+ {calculatePercentage(C[0], C[1])}% +
+
+ {calculatePercentageRemain(C[0], C[1])}% +
+ + )}
음식
-
-
노포
-
(그래프)
-
인테리어
+
+ {D[0] >= D[1] ? ( + <> +
노포
+
+
+
+
인테리어
+ + ) : ( + <> +
노포
+
+
+
+
인테리어
+ + )}
-
- {( - (tripPreference.data.data.foodCount / - tripPreference.data.data.foodTotalCount) * - 100 - ).toFixed(0)} - % -
-
- {( - ((tripPreference.data.data.foodTotalCount - - tripPreference.data.data.foodCount) / - tripPreference.data.data.foodTotalCount) * - 100 - ).toFixed(0)} - % -
+ {D[0] >= D[1] ? ( + <> +
+ {calculatePercentage(D[0], D[1])}% +
+
+ {calculatePercentageRemain(D[0], D[1])}% +
+ + ) : ( + <> +
+ {calculatePercentage(D[0], D[1])}% +
+
+ {calculatePercentageRemain(D[0], D[1])}% +
+ + )}
관광지
-
-
액티비티
-
(그래프)
-
휴양
+
+ {E[0] >= E[1] ? ( + <> +
액티비티
+
+
+
+
휴양
+ + ) : ( + <> +
액티비티
+
+
+
+
휴양
+ + )}
-
- {( - (tripPreference.data.data.tripStyleCount / - tripPreference.data.data.tripStyleTotalCount) * - 100 - ).toFixed(0)} - % -
-
- {( - ((tripPreference.data.data.tripStyleTotalCount - - tripPreference.data.data.tripStyleCount) / - tripPreference.data.data.tripStyleTotalCount) * - 100 - ).toFixed(0)} - % -
+ {E[0] >= E[1] ? ( + <> +
+ {calculatePercentage(E[0], E[1])}% +
+
+ {calculatePercentageRemain(E[0], E[1])}% +
+ + ) : ( + <> +
+ {calculatePercentage(E[0], E[1])}% +
+
+ {calculatePercentageRemain(E[0], E[1])}% +
+ + )}
@@ -183,4 +331,3 @@ const TripPreference: React.FC = () => { }; export default TripPreference; -// 현재 내 값/토탈 * 100 = 답 diff --git a/src/utils/calculatePercentage.ts b/src/utils/calculatePercentage.ts new file mode 100644 index 00000000..8ca8e8cc --- /dev/null +++ b/src/utils/calculatePercentage.ts @@ -0,0 +1,6 @@ +// utils.ts +export const calculatePercentage = (count: number, totalCount: number) => + ((count / totalCount) * 100).toFixed(0); + +export const calculatePercentageRemain = (count: number, totalCount: number) => + (((totalCount - count) / totalCount) * 100).toFixed(0); diff --git a/tailwind.config.js b/tailwind.config.js index 88a5f6c7..72fa7caa 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -7,7 +7,7 @@ export default { main1: '#062139', main2: '#29DDF6', sub1: '#FFEC3E', - sub2: 'FF2167', + sub2: '#FF2167', gray1: '#f8f8f8', gray2: '#ededed', gray3: '#d7d7d7', @@ -16,6 +16,9 @@ export default { gray6: '#38393C', gray7: '#1E1E1E', red: '#FF0F00', + purple: '#7932FF', + orange: '#FFAC16', + green: '#16E7A9', }, }, }, From 0e1d49e193e90760a49034d0095c06f73fd58059 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=96=B4=EC=8A=B9=EC=A4=80?= Date: Sat, 13 Jan 2024 20:30:20 +0900 Subject: [PATCH 4/7] =?UTF-8?q?Refactor:=20=EC=97=AC=ED=96=89=EC=B7=A8?= =?UTF-8?q?=ED=96=A5=20=ED=95=A8=EC=88=98=ED=98=95=ED=94=84=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EB=9E=98=EB=B0=8D=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Trip/TripPreference.tsx | 337 ++++++++----------------- src/router/routerLayout.tsx | 1 + 2 files changed, 107 insertions(+), 231 deletions(-) diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx index dd05ab21..0a59f8c7 100644 --- a/src/components/Trip/TripPreference.tsx +++ b/src/components/Trip/TripPreference.tsx @@ -9,6 +9,20 @@ import { calculatePercentageRemain, } from '@utils/calculatePercentage'; +interface RatioBarParams { + value: number; + total: number; + color: string; + label1: string; + label2: string; +} + +interface PercentageParams { + value: number; + total: number; + color: string; +} + const TripPreferenceButton: React.FC = () => { return (