From 7dd0503caac4aafafbf21a0a6367bb3dbf306e06 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Sun, 21 Jan 2024 19:14:02 +0900 Subject: [PATCH 01/18] =?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/18] =?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/18] =?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/18] =?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/18] =?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/18] =?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/18] =?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/18] =?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/18] =?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/18] =?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} ); From aec5b6d9cf6fb860c483e9f125efc75838912ea1 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 23:13:45 +0900 Subject: [PATCH 11/18] =?UTF-8?q?refactor:=20FixedBottomButton=20size=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95=20#113?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shared/fixedBottomButton/FixedBottomButton.module.scss | 2 +- .../shared/fixedBottomButton/FixedBottomButton.tsx | 7 +++++-- src/styles/button.ts | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) 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/fixedBottomButton/FixedBottomButton.tsx b/src/components/shared/fixedBottomButton/FixedBottomButton.tsx index 1d5298a2..d164378c 100644 --- a/src/components/shared/fixedBottomButton/FixedBottomButton.tsx +++ b/src/components/shared/fixedBottomButton/FixedBottomButton.tsx @@ -13,9 +13,12 @@ interface FixedBottomButtonProps extends ButtonHTMLAttributes onClick: () => void disabled?: boolean children: React.ReactNode + size?: 'large' | 'small' | 'medium' } -function FixedBottomButton({ children, onClick, disabled }: FixedBottomButtonProps) { +function FixedBottomButton({ + children, onClick, disabled, size = 'large', +}: FixedBottomButtonProps) { const portalRoot = document.getElementById('portal-root'); if (portalRoot == null) { return null; @@ -23,7 +26,7 @@ function FixedBottomButton({ children, onClick, disabled }: FixedBottomButtonPro return createPortal(
-
, diff --git a/src/styles/button.ts b/src/styles/button.ts index 46ff8994..48cfd675 100644 --- a/src/styles/button.ts +++ b/src/styles/button.ts @@ -42,7 +42,7 @@ export const buttonSizeMap = { padding: '8px 9px', }, medium: { - fontSize: '15px', + fontSize: '16px', padding: '10px 15px', }, large: { From d2b2e226f26120d9c46ee5071b82f791048793e8 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 23:14:58 +0900 Subject: [PATCH 12/18] =?UTF-8?q?refactor:=20TextField,=20Title=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95=EB=90=9C=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B0=98=EC=98=81=20#113?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/shared/text-field/TextField.tsx | 6 +++--- src/components/shared/title/Title.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/shared/text-field/TextField.tsx b/src/components/shared/text-field/TextField.tsx index 5cafbc4c..faa28ce4 100644 --- a/src/components/shared/text-field/TextField.tsx +++ b/src/components/shared/text-field/TextField.tsx @@ -37,7 +37,7 @@ const TextField = forwardRef(function TextFiel
{label && {label}} {required && *} - + (function TextFiel isPasswordType={isPasswordType} {...props} /> - {hasError ? : } + {hasError ? : } {hasError && ( <> - {helpMessage} + {helpMessage} )} diff --git a/src/components/shared/title/Title.tsx b/src/components/shared/title/Title.tsx index 285c4675..c5c89440 100644 --- a/src/components/shared/title/Title.tsx +++ b/src/components/shared/title/Title.tsx @@ -23,7 +23,7 @@ function Title({ {titleIcon} - {description} + {description} ); } From f7649e39f0fdb5c3e8923764c05abf00aee78825 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 23:16:37 +0900 Subject: [PATCH 13/18] =?UTF-8?q?feat:=20FindId=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=A0=95=EC=9D=98=20=EB=B0=8F=20post=20api=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EC=9E=91=EC=84=B1=20#113?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/remote/api/requests/auth/auth.post.api.ts | 12 +++++++++++- src/remote/api/types/auth.ts | 4 ++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/remote/api/requests/auth/auth.post.api.ts b/src/remote/api/requests/auth/auth.post.api.ts index 8332e69c..c3eacc7c 100644 --- a/src/remote/api/requests/auth/auth.post.api.ts +++ b/src/remote/api/requests/auth/auth.post.api.ts @@ -1,4 +1,4 @@ -import { ISignIn, ISignUp } from '../../types/auth'; +import { IFindId, ISignIn, ISignUp } from '../../types/auth'; import { postRequest } from '../requests.api'; export const signup = async ({ @@ -20,3 +20,13 @@ export const login = async ({ return response; }; + +export const findId = async ({ + email, +}: IFindId) => { + const response = await postRequest('/member/find-id', { + email, + }); + + return response; +}; diff --git a/src/remote/api/types/auth.ts b/src/remote/api/types/auth.ts index 1f2e92d5..0489f15a 100644 --- a/src/remote/api/types/auth.ts +++ b/src/remote/api/types/auth.ts @@ -1,3 +1,7 @@ +export interface IFindId { + email:string +} + export interface ISignIn { id: string password: string From b6ad74c555ee94f4f8deb268d92bd732398d8053 Mon Sep 17 00:00:00 2001 From: seoyeong Date: Mon, 22 Jan 2024 23:28:48 +0900 Subject: [PATCH 14/18] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EB=94=94=20?= =?UTF-8?q?=EC=B0=BE=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20#113?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/find-id/layout.tsx | 7 ++++ src/app/find-id/page.tsx | 57 ++++++++++++++++++++++++++++++ src/constants/validationMessage.ts | 1 + 3 files changed, 65 insertions(+) create mode 100644 src/app/find-id/layout.tsx create mode 100644 src/app/find-id/page.tsx diff --git a/src/app/find-id/layout.tsx b/src/app/find-id/layout.tsx new file mode 100644 index 00000000..1b58628e --- /dev/null +++ b/src/app/find-id/layout.tsx @@ -0,0 +1,7 @@ +function FindIdLayout({ children }: { children: React.ReactNode }) { + return ( +
{children}
+ ); +} + +export default FindIdLayout; diff --git a/src/app/find-id/page.tsx b/src/app/find-id/page.tsx new file mode 100644 index 00000000..b336986b --- /dev/null +++ b/src/app/find-id/page.tsx @@ -0,0 +1,57 @@ +/* eslint-disable no-alert */ +/* eslint-disable @typescript-eslint/no-misused-promises */ + +'use client'; + +import { useForm } from 'react-hook-form'; + +import VALIDATION_MESSAGE_MAP from '@/constants/validationMessage'; +import { IFindId } from '@/remote/api/types/auth'; +import FixedBottomButton from '@shared/fixedBottomButton/FixedBottomButton'; +import Header from '@shared/header/Header'; +import Spacing from '@shared/spacing/Spacing'; +import TextField from '@shared/text-field/TextField'; +import Title from '@shared/title/Title'; + +function FindUsernamePage() { + const { register, handleSubmit, formState: { isValid, errors, isDirty } } = useForm({ + mode: 'onBlur', + }); + + const onSubmit = (data: IFindId) => { + + }; + + return ( + <> +
+ +
+ + <Spacing size={40} /> + <TextField + label="이메일" + required + placeholder="이메일" + {...register('email', { + required: true, + pattern: VALIDATION_MESSAGE_MAP.email.value, + })} + hasError={!!errors.email} + helpMessage={VALIDATION_MESSAGE_MAP.failedFindId.message} + /> + <div> + <FixedBottomButton + disabled={!isValid || !isDirty} + onClick={handleSubmit(onSubmit)} + size="medium" + > + 다음 + </FixedBottomButton> + </div> + </main> + </> + ); +} + +export default FindUsernamePage; diff --git a/src/constants/validationMessage.ts b/src/constants/validationMessage.ts index cb499f7a..c4aa65c8 100644 --- a/src/constants/validationMessage.ts +++ b/src/constants/validationMessage.ts @@ -20,6 +20,7 @@ const VALIDATION_MESSAGE_MAP: { message: '비밀번호를 확인해주세요.', }, failedLogin: { message: '아이디 또는 비밀번호를 확인해주세요.' }, + failedFindId: { message: '잘못된 이메일입니다.' }, } as const; export default VALIDATION_MESSAGE_MAP; From 194b64060a61b1aeb6067f9dde671c788d142d7b Mon Sep 17 00:00:00 2001 From: seoyeong <bsy0313@gmail.com> Date: Mon, 22 Jan 2024 23:29:18 +0900 Subject: [PATCH 15/18] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EB=94=94=20?= =?UTF-8?q?=EC=B0=BE=EA=B8=B0=20=EC=BF=BC=EB=A6=AC=ED=9B=85=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20#113?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/find-id/page.tsx | 15 ++++++++++++++- src/remote/queries/auth/useFindId.ts | 10 ++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 src/remote/queries/auth/useFindId.ts diff --git a/src/app/find-id/page.tsx b/src/app/find-id/page.tsx index b336986b..ae019db9 100644 --- a/src/app/find-id/page.tsx +++ b/src/app/find-id/page.tsx @@ -7,6 +7,7 @@ import { useForm } from 'react-hook-form'; import VALIDATION_MESSAGE_MAP from '@/constants/validationMessage'; import { IFindId } from '@/remote/api/types/auth'; +import useFindId from '@/remote/queries/auth/useFindId'; import FixedBottomButton from '@shared/fixedBottomButton/FixedBottomButton'; import Header from '@shared/header/Header'; import Spacing from '@shared/spacing/Spacing'; @@ -17,9 +18,21 @@ function FindUsernamePage() { const { register, handleSubmit, formState: { isValid, errors, isDirty } } = useForm<IFindId>({ mode: 'onBlur', }); + const { mutate } = useFindId(); const onSubmit = (data: IFindId) => { - + const { email } = data; + mutate({ email }, { + onError: (error) => { + console.error('Error:', error); + alert('다시 입력해주세요'); + // TODO: 아이디 찾기 실패 시 알림 메세지 바로 출력 + }, + onSuccess: () => { + alert('회원님의 이메일로 아이디 전송완료'); + // TODO: 아이디 전송완료 페이지 로드하기 + }, + }); }; return ( diff --git a/src/remote/queries/auth/useFindId.ts b/src/remote/queries/auth/useFindId.ts new file mode 100644 index 00000000..b89b2bbe --- /dev/null +++ b/src/remote/queries/auth/useFindId.ts @@ -0,0 +1,10 @@ +/* eslint-disable no-console */ +import { useMutation } from '@tanstack/react-query'; + +import { findId } from '@remote/api/requests/auth/auth.post.api'; + +function useFindId() { + return useMutation({ mutationFn: findId }); +} + +export default useFindId; From e66d3ea606ed1789c7dc69de5ebeff2f3c6ace97 Mon Sep 17 00:00:00 2001 From: seoyeong <bsy0313@gmail.com> Date: Mon, 22 Jan 2024 23:58:50 +0900 Subject: [PATCH 16/18] =?UTF-8?q?chore:=20build=20error=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20#113?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/find-id/page.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/app/find-id/page.tsx b/src/app/find-id/page.tsx index ae019db9..8d2315d8 100644 --- a/src/app/find-id/page.tsx +++ b/src/app/find-id/page.tsx @@ -5,15 +5,20 @@ import { useForm } from 'react-hook-form'; +import dynamic from 'next/dynamic'; + import VALIDATION_MESSAGE_MAP from '@/constants/validationMessage'; import { IFindId } from '@/remote/api/types/auth'; import useFindId from '@/remote/queries/auth/useFindId'; -import FixedBottomButton from '@shared/fixedBottomButton/FixedBottomButton'; import Header from '@shared/header/Header'; import Spacing from '@shared/spacing/Spacing'; import TextField from '@shared/text-field/TextField'; import Title from '@shared/title/Title'; +const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButton/FixedBottomButton'); }, { + ssr: false, +}); + function FindUsernamePage() { const { register, handleSubmit, formState: { isValid, errors, isDirty } } = useForm<IFindId>({ mode: 'onBlur', From fbf92dabc5817c370a55881f145b41f25116e167 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EB=B3=91=EC=9A=B1?= <103362820+wookki@users.noreply.github.com> Date: Tue, 23 Jan 2024 01:42:17 +0900 Subject: [PATCH 17/18] =?UTF-8?q?docs:=20license=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..e5fc96f6 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 washpedia + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From 47bb773d11dc59cedd86a82dedd0e5474f659c9a Mon Sep 17 00:00:00 2001 From: seoyeong <bsy0313@gmail.com> Date: Tue, 23 Jan 2024 12:13:17 +0900 Subject: [PATCH 18/18] =?UTF-8?q?chore:=20=EC=BB=A8=EB=B2=A4=EC=85=98=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=20#113?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/find-id/page.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/find-id/page.tsx b/src/app/find-id/page.tsx index 8d2315d8..aac88dfd 100644 --- a/src/app/find-id/page.tsx +++ b/src/app/find-id/page.tsx @@ -7,9 +7,9 @@ import { useForm } from 'react-hook-form'; import dynamic from 'next/dynamic'; -import VALIDATION_MESSAGE_MAP from '@/constants/validationMessage'; -import { IFindId } from '@/remote/api/types/auth'; -import useFindId from '@/remote/queries/auth/useFindId'; +import VALIDATION_MESSAGE_MAP from '@constants/validationMessage'; +import { IFindId } from '@remote/api/types/auth'; +import useFindId from '@remote/queries/auth/useFindId'; import Header from '@shared/header/Header'; import Spacing from '@shared/spacing/Spacing'; import TextField from '@shared/text-field/TextField'; @@ -19,7 +19,7 @@ const FixedBottomButton = dynamic(() => { return import('@shared/fixedBottomButt ssr: false, }); -function FindUsernamePage() { +function FindIdPage() { const { register, handleSubmit, formState: { isValid, errors, isDirty } } = useForm<IFindId>({ mode: 'onBlur', }); @@ -72,4 +72,4 @@ function FindUsernamePage() { ); } -export default FindUsernamePage; +export default FindIdPage;