Merge pull request #112 from Kernel360/page-car-wash-details

페이지 UI: 세차 부가정보 페이지

src/app/car-wash-details/hydrated-page.tsx

@@ -0,0 +1,94 @@
+/* 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 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 CarWashDetailsPage() {
+  const { data: carWashFrequencyData } = useCarWashFrequency();
+  const { data: carWashCostData } = useCarWashCost();
+  const { data: carWashInterestData } = useCarWashInterest();
+
+  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
+    || carWashInterestData == null
+  ) {
+    return <div>로딩중 입니다..</div>;
+  }
+
+  return (
+    <>
+      {step <= 3 && (
+        <>
+          <Header isDisplayLogo={false} />
+          <Spacing size={16} />
+          <ProgressBar progressCount={3} currentStep={step} />
+          <Spacing size={32} />
+        </>
+      )}
+      {step === 1 && (
+        <CarDetails
+          onClick={onNext}
+          main="세차 빈도는 어떤가요?"
+          sub="월 평균 세차 빈도를 선택해주세요."
+          options={carWashFrequencyData}
+          register={register}
+          dirtyFields={dirtyFields}
+        />
+      )}
+      {step === 2 && (
+        <CarDetails
+          onClick={onNext}
+          main="지출하시는 세차 비용을 알려주세요"
+          sub="용품 구매비용을 포함한 세차 비용을 선택해주세요."
+          options={carWashCostData}
+          register={register}
+          dirtyFields={dirtyFields}
+        />
+      )}
+      {step === 3 && (
+        <CarDetails
+          onClick={onSubmit}
+          main="주요 관심사는 무엇인가요?"
+          sub="주요 관심사를 선택해주세요."
+          options={carWashInterestData}
+          register={register}
+          dirtyFields={dirtyFields}
+        />
+
+      )}
+      {step === 4 && <DetailsLoading />}
+    </>
+  );
+}
+
+export default CarWashDetailsPage;

src/app/car-wash-details/layout.tsx

@@ -0,0 +1,7 @@
+function CarWashDetailsPageLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{ padding: '0 24px' }}>{children}</div>
+  );
+}
+
+export default CarWashDetailsPageLayout;

src/app/car-wash-details/page.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+// app/hydratedPosts.jsx
+import { dehydrate, Hydrate } from '@tanstack/react-query';
+
+import getQueryClient from '@lib/getQueryClient';
+import {
+  getCarWashFrequency, getCarWashCost, getCarWashInterest,
+} from '@remote/api/requests/additional-info/additional-info.get.api';
+
+import CarWashDetailsPage from './hydrated-page';
+
+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-interest'], queryFn: getCarWashInterest }),
+  ]);
+
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <CarWashDetailsPage />
+    </Hydrate>
+  );
+};
+
+export default HydratedCarWashDetails;

src/components/additional-info/car-details/CarDetails.tsx

@@ -28,21 +28,23 @@ function CarDetails({
     <>
       <Description main={main} sub={sub} />
       <Spacing size={40} />
-      <Flex direction="column" gap={10}>
-        {options?.map((option) => {
-          return (
-            <Radio
-              key={option.codeNo}
-              type="additionalInfo"
-              label={option.description}
-              value={option.codeName}
-              {...register(option.upperName, {
-                required: true,
-              })}
-            />
-          );
-        })}
-      </Flex>
+      <div style={{ margin: '0 20px' }}>
+        <Flex direction="column" gap={10}>
+          {options?.map((option) => {
+            return (
+              <Radio
+                key={option.codeNo}
+                type="additionalInfo"
+                label={option.description}
+                value={option.codeName}
+                {...register(option.upperName, {
+                  required: true,
+                })}
+              />
+            );
+          })}
+        </Flex>
+      </div>
       <FixedBottomButton
         disabled={!dirtyFields[options[0].upperName] ?? false}
         onClick={onClick}

src/components/additional-info/description/Description.tsx

@@ -10,7 +10,7 @@ interface DescriptionProps {
 function Description({ main, sub }: DescriptionProps) {
   return (
     <Flex direction="column" justify="center" align="center">
-      <Text typography="t3" bold>{main}</Text>
+      <Text typography="t3" wordBreak="keep-all" textAlign="center" fontWeight={600}>{main}</Text>
       <Spacing size={10} />
       <Text typography="t6" color="tertiary">{sub}</Text>
     </Flex>

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;

src/components/shared/progress-bar/ProgressBar.module.scss

@@ -1,6 +1,5 @@
 .container {
     position: relative;
-    width: 185px;
     height: 24px;
     margin: 0 auto;
 

src/components/shared/progress-bar/ProgressBar.tsx

@@ -28,7 +28,7 @@ function ProgressBar({ progressCount = 5, currentStep = 1, setCurrentStep }: Pro
   };
 
   return (
-    <div className={cx('container')}>
+    <div className={cx('container')} style={{ width: progressCount * 40 }}>
       <div className={cx('progressBar')} />
       <div className={cx('progress')} style={{ width: progressBarWidth }} />
       <div>

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 (
     <span className={className} style={styles}>{children}</span>
   );

src/remote/api/requests/additional-info/additional-info.get.api.ts

@@ -30,3 +30,24 @@ export const getCarParking = async () => {
 
   return response;
 };
+
+// 세차빈도 : frequency
+export const getCarWashFrequency = async () => {
+  const response = await getRequest<IAdditionalInfo[]>('/commoncode/frequency');
+
+  return response;
+};
+
+// 지출비용 : cost
+export const getCarWashCost = async () => {
+  const response = await getRequest<IAdditionalInfo[]>('/commoncode/cost');
+
+  return response;
+};
+
+// 주요관심사 : interest
+export const getCarWashInterest = async () => {
+  const response = await getRequest<IAdditionalInfo[]>('/commoncode/interest');
+
+  return response;
+};

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<IAdditionalInfo[]>({ queryKey: ['car-wash-cost'], queryFn: getCarWashCost });
+}
+
+export default useCarWashCost;

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<IAdditionalInfo[]>({ queryKey: ['car-wash-frequency'], queryFn: getCarWashFrequency });
+}
+
+export default useCarWashFrequency;

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<IAdditionalInfo[]>({ queryKey: ['car-wash-interest'], queryFn: getCarWashInterest });
+}
+
+export default useCarWashInterest;