From 7dd0503caac4aafafbf21a0a6367bb3dbf306e06 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Sun, 21 Jan 2024 19:14:02 +0900 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=EB=B6=80=EA=B0=80=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=A7=80=EC=B6=9C=20=EB=B9=84=EC=9A=A9=20useQuery?= =?UTF-8?q?=20=EC=A0=9C=EC=9E=91=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../car-wash-details/useCarWashCost.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/remote/queries/additional-info/car-wash-details/useCarWashCost.tsx diff --git a/src/remote/queries/additional-info/car-wash-details/useCarWashCost.tsx b/src/remote/queries/additional-info/car-wash-details/useCarWashCost.tsx new file mode 100644 index 00000000..49fa8a1f --- /dev/null +++ b/src/remote/queries/additional-info/car-wash-details/useCarWashCost.tsx @@ -0,0 +1,10 @@ +import { useQuery } from '@tanstack/react-query'; + +import { getCarWashCost } from '@remote/api/requests/additional-info/additional-info.get.api'; +import { IAdditionalInfo } from '@remote/api/types/additional-info'; + +function useCarWashCost() { + return useQuery({ queryKey: ['car-wash-cost'], queryFn: getCarWashCost }); +} + +export default useCarWashCost; From 314463db002cc5d75af57870fb88547ce259a894 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Sun, 21 Jan 2024 19:14:45 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EB=B6=80=EA=B0=80=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=84=B8=EC=B0=A8=20=EB=B9=88=EB=8F=84=20useQuery?= =?UTF-8?q?=20=EC=A0=9C=EC=9E=91=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../car-wash-details/useCarWashFrequency.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/remote/queries/additional-info/car-wash-details/useCarWashFrequency.tsx diff --git a/src/remote/queries/additional-info/car-wash-details/useCarWashFrequency.tsx b/src/remote/queries/additional-info/car-wash-details/useCarWashFrequency.tsx new file mode 100644 index 00000000..2dbf1eca --- /dev/null +++ b/src/remote/queries/additional-info/car-wash-details/useCarWashFrequency.tsx @@ -0,0 +1,10 @@ +import { useQuery } from '@tanstack/react-query'; + +import { getCarWashFrequency } from '@remote/api/requests/additional-info/additional-info.get.api'; +import { IAdditionalInfo } from '@remote/api/types/additional-info'; + +function useCarWashFrequency() { + return useQuery({ queryKey: ['car-wash-frequency'], queryFn: getCarWashFrequency }); +} + +export default useCarWashFrequency; From 712715366a23b2137ad765537eb01fc952970e2c Mon Sep 17 00:00:00 2001 From: seoyeong Date: Sun, 21 Jan 2024 19:19:20 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=EC=84=B8=EC=B0=A8=20=EB=B9=84?= =?UTF-8?q?=EC=9A=A9,=20=EC=84=B8=EC=B0=A8=EB=B9=88=EB=8F=84=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=EB=A5=BC=20=EA=B0=80=EC=A0=B8=EC=98=A4?= =?UTF-8?q?=EB=8A=94=20=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../additional-info/additional-info.get.api.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/remote/api/requests/additional-info/additional-info.get.api.ts b/src/remote/api/requests/additional-info/additional-info.get.api.ts index f53cf673..ef684749 100644 --- a/src/remote/api/requests/additional-info/additional-info.get.api.ts +++ b/src/remote/api/requests/additional-info/additional-info.get.api.ts @@ -30,3 +30,19 @@ export const getCarParking = async () => { return response; }; + +// 세차빈도 : frequency +export const getCarWashFrequency = async () => { + const response = await getRequest('/commoncode/frequency'); + + return response; +}; + +// 지출비용 : cost +export const getCarWashCost = async () => { + const response = await getRequest('/commoncode/cost'); + + return response; +}; + +// 주요관심사 : From a63361548c371a5085a9ab2b9005ef16068bb6d3 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Sun, 21 Jan 2024 19:26:04 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20=EC=84=B8=EC=B0=A8=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=A0=9C=EC=9E=91=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/car-wash-details/hydrated-page.tsx | 93 ++++++++++++++++++++++ src/app/car-wash-details/layout.tsx | 7 ++ src/app/car-wash-details/page.tsx | 30 +++++++ 3 files changed, 130 insertions(+) create mode 100644 src/app/car-wash-details/hydrated-page.tsx create mode 100644 src/app/car-wash-details/layout.tsx create mode 100644 src/app/car-wash-details/page.tsx diff --git a/src/app/car-wash-details/hydrated-page.tsx b/src/app/car-wash-details/hydrated-page.tsx new file mode 100644 index 00000000..870a3f00 --- /dev/null +++ b/src/app/car-wash-details/hydrated-page.tsx @@ -0,0 +1,93 @@ +/* eslint-disable @typescript-eslint/no-misused-promises */ + +'use client'; + +import { useState } from 'react'; +import { useForm } from 'react-hook-form'; + +import CarDetails from '@components/additional-info/car-details/CarDetails'; +import DetailsLoading from '@components/additional-info/details-loading/DetailsLoading'; +import useCarWashCost from '@remote/queries/additional-info/car-wash-details/useCarWashCost'; +import useCarWashFrequency from '@remote/queries/additional-info/car-wash-details/useCarWashFrequency'; +import Header from '@shared/header/Header'; +import ProgressBar from '@shared/progress-bar/ProgressBar'; +import Spacing from '@shared/spacing/Spacing'; + +function CarDetailsPage() { + const { data: carWashFrequencyData } = useCarWashFrequency(); + const { data: carWashCostData } = useCarWashCost(); + + const [step, setStep] = useState(1); + + const { + // eslint-disable-next-line @typescript-eslint/no-unused-vars + register, getValues, formState: { dirtyFields }, + } = useForm(); + + const onNext = () => { + setStep((currentStep) => { return currentStep + 1; }); + }; + + // eslint-disable-next-line @typescript-eslint/require-await + const onSubmit = async () => { + onNext(); + // TODO: 쿼리훅 제작 + // console.log(getValues()); + }; + + // TODO: Loader 컴포넌트 제작 + if (carWashFrequencyData == null + || carWashCostData == null + ) { + return
로딩중 입니다..
; + } + + return ( + <> + {step <= 3 && ( + <> +
+ + + + + )} + {step === 1 && ( + + )} + {step === 2 && ( + + )} + {step === 3 && ( + // +
+ +
+ )} + {step === 4 && } + + ); +} + +export default CarDetailsPage; diff --git a/src/app/car-wash-details/layout.tsx b/src/app/car-wash-details/layout.tsx new file mode 100644 index 00000000..4d902e0d --- /dev/null +++ b/src/app/car-wash-details/layout.tsx @@ -0,0 +1,7 @@ +function CarWashDetailsPageLayout({ children }: { children: React.ReactNode }) { + return ( +
{children}
+ ); +} + +export default CarWashDetailsPageLayout; diff --git a/src/app/car-wash-details/page.tsx b/src/app/car-wash-details/page.tsx new file mode 100644 index 00000000..6eca492a --- /dev/null +++ b/src/app/car-wash-details/page.tsx @@ -0,0 +1,30 @@ +// app/hydratedPosts.jsx +import { dehydrate, Hydrate } from '@tanstack/react-query'; + +import getQueryClient from '@lib/getQueryClient'; +import { + getCarWashFrequency, getCarWashCost, +} from '@remote/api/requests/additional-info/additional-info.get.api'; + +import CarWashDetailsPage from './hydrated-page'; + +const HydratedCarDetails = async () => { + const queryClient = getQueryClient(); + + await Promise.all([ + queryClient.prefetchQuery({ queryKey: ['car-wash-frequency'], queryFn: getCarWashFrequency }), + queryClient.prefetchQuery({ queryKey: ['car-wash-cost'], queryFn: getCarWashCost }), + // 주요관심사 + // queryClient.prefetchQuery({ queryKey: ['car-wash-'], queryFn: getCarWash }), + ]); + + const dehydratedState = dehydrate(queryClient); + + return ( + + + + ); +}; + +export default HydratedCarDetails; From fe132cdc0e4ccc5894f2363b95cb8096ae5186db Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 15:21:29 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20=EB=B6=80=EA=B0=80=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=84=B8=EC=B0=A8=20=EC=A3=BC=EC=9A=94=EA=B4=80?= =?UTF-8?q?=EC=8B=AC=EC=82=AC=20useQuery=20=EC=A0=9C=EC=9E=91=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../car-wash-details/useCarWashInterest.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 src/remote/queries/additional-info/car-wash-details/useCarWashInterest.tsx diff --git a/src/remote/queries/additional-info/car-wash-details/useCarWashInterest.tsx b/src/remote/queries/additional-info/car-wash-details/useCarWashInterest.tsx new file mode 100644 index 00000000..2a4ee1d7 --- /dev/null +++ b/src/remote/queries/additional-info/car-wash-details/useCarWashInterest.tsx @@ -0,0 +1,10 @@ +import { useQuery } from '@tanstack/react-query'; + +import { getCarWashInterest } from '@remote/api/requests/additional-info/additional-info.get.api'; +import { IAdditionalInfo } from '@remote/api/types/additional-info'; + +function useCarWashInterest() { + return useQuery({ queryKey: ['car-wash-interest'], queryFn: getCarWashInterest }); +} + +export default useCarWashInterest; From 5b1dd8726aaef27c68b3cf16c11a7d23afbe36f3 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 15:22:03 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20=EB=B6=80=EA=B0=80=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=84=B8=EC=B0=A8=20=EC=A3=BC=EC=9A=94=EA=B4=80?= =?UTF-8?q?=EC=8B=AC=EC=82=AC=20=EC=A0=95=EB=B3=B4=20=EA=B0=80=EC=A0=B8?= =?UTF-8?q?=EC=98=A4=EA=B8=B0=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../requests/additional-info/additional-info.get.api.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/remote/api/requests/additional-info/additional-info.get.api.ts b/src/remote/api/requests/additional-info/additional-info.get.api.ts index ef684749..71c30b27 100644 --- a/src/remote/api/requests/additional-info/additional-info.get.api.ts +++ b/src/remote/api/requests/additional-info/additional-info.get.api.ts @@ -45,4 +45,9 @@ export const getCarWashCost = async () => { return response; }; -// 주요관심사 : +// 주요관심사 : interest +export const getCarWashInterest = async () => { + const response = await getRequest('/commoncode/interest'); + + return response; +}; From 70101b690424e5142bbf530468ac67f76cc0bf2c Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 15:24:11 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20=EC=84=B8=EC=B0=A8=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=A3=BC=EC=9A=94=EA=B4=80=EC=8B=AC=EC=82=AC=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/car-wash-details/hydrated-page.tsx | 27 +++++++++++----------- src/app/car-wash-details/page.tsx | 9 ++++---- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/src/app/car-wash-details/hydrated-page.tsx b/src/app/car-wash-details/hydrated-page.tsx index 870a3f00..529fa41f 100644 --- a/src/app/car-wash-details/hydrated-page.tsx +++ b/src/app/car-wash-details/hydrated-page.tsx @@ -9,13 +9,15 @@ import CarDetails from '@components/additional-info/car-details/CarDetails'; import DetailsLoading from '@components/additional-info/details-loading/DetailsLoading'; import useCarWashCost from '@remote/queries/additional-info/car-wash-details/useCarWashCost'; import useCarWashFrequency from '@remote/queries/additional-info/car-wash-details/useCarWashFrequency'; +import useCarWashInterest from '@remote/queries/additional-info/car-wash-details/useCarWashInterest'; import Header from '@shared/header/Header'; import ProgressBar from '@shared/progress-bar/ProgressBar'; import Spacing from '@shared/spacing/Spacing'; -function CarDetailsPage() { +function CarWashDetailsPage() { const { data: carWashFrequencyData } = useCarWashFrequency(); const { data: carWashCostData } = useCarWashCost(); + const { data: carWashInterestData } = useCarWashInterest(); const [step, setStep] = useState(1); @@ -38,6 +40,7 @@ function CarDetailsPage() { // TODO: Loader 컴포넌트 제작 if (carWashFrequencyData == null || carWashCostData == null + || carWashInterestData == null ) { return
로딩중 입니다..
; } @@ -73,21 +76,19 @@ function CarDetailsPage() { /> )} {step === 3 && ( - // -
- -
+ + )} {step === 4 && } ); } -export default CarDetailsPage; +export default CarWashDetailsPage; diff --git a/src/app/car-wash-details/page.tsx b/src/app/car-wash-details/page.tsx index 6eca492a..77de375f 100644 --- a/src/app/car-wash-details/page.tsx +++ b/src/app/car-wash-details/page.tsx @@ -3,19 +3,18 @@ import { dehydrate, Hydrate } from '@tanstack/react-query'; import getQueryClient from '@lib/getQueryClient'; import { - getCarWashFrequency, getCarWashCost, + getCarWashFrequency, getCarWashCost, getCarWashInterest, } from '@remote/api/requests/additional-info/additional-info.get.api'; import CarWashDetailsPage from './hydrated-page'; -const HydratedCarDetails = async () => { +const HydratedCarWashDetails = async () => { const queryClient = getQueryClient(); await Promise.all([ queryClient.prefetchQuery({ queryKey: ['car-wash-frequency'], queryFn: getCarWashFrequency }), queryClient.prefetchQuery({ queryKey: ['car-wash-cost'], queryFn: getCarWashCost }), - // 주요관심사 - // queryClient.prefetchQuery({ queryKey: ['car-wash-'], queryFn: getCarWash }), + queryClient.prefetchQuery({ queryKey: ['car-wash-interest'], queryFn: getCarWashInterest }), ]); const dehydratedState = dehydrate(queryClient); @@ -27,4 +26,4 @@ const HydratedCarDetails = async () => { ); }; -export default HydratedCarDetails; +export default HydratedCarWashDetails; From d795932a2d4423c867bba5440ae0c3cba0ce7d06 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 15:37:34 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20=EC=84=B8=EC=B0=A8=20=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=88=98=EC=A0=95=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/car-wash-details/hydrated-page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/car-wash-details/hydrated-page.tsx b/src/app/car-wash-details/hydrated-page.tsx index 529fa41f..537ca61d 100644 --- a/src/app/car-wash-details/hydrated-page.tsx +++ b/src/app/car-wash-details/hydrated-page.tsx @@ -59,7 +59,7 @@ function CarWashDetailsPage() { Date: Mon, 22 Jan 2024 16:18:49 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20ProgressBar=20width=20=EB=8F=99?= =?UTF-8?q?=EC=A0=81=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95=20#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/progress-bar/ProgressBar.module.scss | 2 +- src/components/shared/progress-bar/ProgressBar.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/shared/progress-bar/ProgressBar.module.scss b/src/components/shared/progress-bar/ProgressBar.module.scss index ab9b7086..3a478461 100644 --- a/src/components/shared/progress-bar/ProgressBar.module.scss +++ b/src/components/shared/progress-bar/ProgressBar.module.scss @@ -1,8 +1,8 @@ .container { position: relative; - width: 185px; height: 24px; margin: 0 auto; + box-shadow: inset 0 0 10px red; .progressBar { position: absolute; diff --git a/src/components/shared/progress-bar/ProgressBar.tsx b/src/components/shared/progress-bar/ProgressBar.tsx index eec604d8..a0c5dd79 100644 --- a/src/components/shared/progress-bar/ProgressBar.tsx +++ b/src/components/shared/progress-bar/ProgressBar.tsx @@ -28,7 +28,7 @@ function ProgressBar({ progressCount = 5, currentStep = 1, setCurrentStep }: Pro }; return ( -
+
From 886f9d97573401dfd0849d2c33d1999b9b24f35a Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 16:46:52 +0900 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=EB=B6=80=EA=B0=80=EC=A0=95?= =?UTF-8?q?=EB=B3=B4=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?#81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/car-wash-details/page.tsx | 1 + .../car-details/CarDetails.tsx | 32 ++++++++++--------- .../description/Description.tsx | 2 +- .../FixedBottomButton.module.scss | 2 +- .../progress-bar/ProgressBar.module.scss | 1 - .../shared/progress-bar/ProgressBar.tsx | 2 +- src/components/shared/text/Text.tsx | 6 ++-- 7 files changed, 25 insertions(+), 21 deletions(-) diff --git a/src/app/car-wash-details/page.tsx b/src/app/car-wash-details/page.tsx index 77de375f..81ec4d9d 100644 --- a/src/app/car-wash-details/page.tsx +++ b/src/app/car-wash-details/page.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-unsafe-assignment */ // app/hydratedPosts.jsx import { dehydrate, Hydrate } from '@tanstack/react-query'; diff --git a/src/components/additional-info/car-details/CarDetails.tsx b/src/components/additional-info/car-details/CarDetails.tsx index 0052a4c4..1e4f8953 100644 --- a/src/components/additional-info/car-details/CarDetails.tsx +++ b/src/components/additional-info/car-details/CarDetails.tsx @@ -28,21 +28,23 @@ function CarDetails({ <> - - {options?.map((option) => { - return ( - - ); - })} - +
+ + {options?.map((option) => { + return ( + + ); + })} + +
- {main} + {main} {sub} diff --git a/src/components/shared/fixedBottomButton/FixedBottomButton.module.scss b/src/components/shared/fixedBottomButton/FixedBottomButton.module.scss index 22de08a8..60f111ab 100644 --- a/src/components/shared/fixedBottomButton/FixedBottomButton.module.scss +++ b/src/components/shared/fixedBottomButton/FixedBottomButton.module.scss @@ -3,7 +3,7 @@ right: 0; bottom: 0; left: 0; - padding: 20px 10px 66px; + padding: 20px 24px 66px; // transform: translateY(100%); // animation: slideup 0.5s ease-in-out forwards; diff --git a/src/components/shared/progress-bar/ProgressBar.module.scss b/src/components/shared/progress-bar/ProgressBar.module.scss index 3a478461..dfa139a7 100644 --- a/src/components/shared/progress-bar/ProgressBar.module.scss +++ b/src/components/shared/progress-bar/ProgressBar.module.scss @@ -2,7 +2,6 @@ position: relative; height: 24px; margin: 0 auto; - box-shadow: inset 0 0 10px red; .progressBar { position: absolute; diff --git a/src/components/shared/progress-bar/ProgressBar.tsx b/src/components/shared/progress-bar/ProgressBar.tsx index a0c5dd79..9653b5d5 100644 --- a/src/components/shared/progress-bar/ProgressBar.tsx +++ b/src/components/shared/progress-bar/ProgressBar.tsx @@ -28,7 +28,7 @@ function ProgressBar({ progressCount = 5, currentStep = 1, setCurrentStep }: Pro }; return ( -
+
diff --git a/src/components/shared/text/Text.tsx b/src/components/shared/text/Text.tsx index 69de7de4..8fc4099e 100644 --- a/src/components/shared/text/Text.tsx +++ b/src/components/shared/text/Text.tsx @@ -13,10 +13,11 @@ interface TextProps { children: React.ReactNode whiteSpace?: CSSProperties['whiteSpace'] className?: string + wordBreak?:CSSProperties['wordBreak'] } function Text({ - typography = 't5', color = 'black', display, textAlign, fontWeight, bold, children, whiteSpace = 'pre-line', className, + typography = 't5', color = 'black', display, textAlign, fontWeight, bold, children, whiteSpace = 'pre-line', wordBreak = 'normal', className, }: TextProps) { const styles = useMemo(() => { return { @@ -26,8 +27,9 @@ function Text({ textAlign, fontWeight: bold ? 'bold' : fontWeight, whiteSpace, + wordBreak, }; - }, [typography, color, display, textAlign, fontWeight, bold, whiteSpace]); + }, [typography, color, display, textAlign, fontWeight, bold, whiteSpace, wordBreak]); return ( {children} );