Merge branch 'develop' into ui-my-profie-page-with-dropdown

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.

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/app/find-id/layout.tsx

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

src/app/find-id/page.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable no-alert */
+/* eslint-disable @typescript-eslint/no-misused-promises */
+
+'use client';
+
+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 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 FindIdPage() {
+  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 (
+    <>
+      <Header isDisplayLogo={false} />
+      <Spacing size={16} />
+      <main>
+        <Title title="아이디 찾기" description="가입할 때 입력한 이메일을 입력해주세요." size={4} descriptionColor="tertiary" />
+        <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 FindIdPage;

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/fixedBottomButton/FixedBottomButton.tsx

@@ -13,17 +13,20 @@ interface FixedBottomButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
   children: React.ReactNode
   disabled?: boolean
   onClick: () => void
+  size?: 'large' | 'small' | 'medium'
 }
 
-function FixedBottomButton({ children, disabled, onClick }: FixedBottomButtonProps) {
+function FixedBottomButton({
+  children, onClick, disabled, size = 'large',
+}: FixedBottomButtonProps) {
   const PORTAL_ROOT = document.getElementById('portal-root');
   if (PORTAL_ROOT == null) {
     return null;
   }
 
   return createPortal(
     <div className={cx('container')}>
-      <Button size="large" full disabled={disabled} onClick={onClick}>
+      <Button size={size} full disabled={disabled} onClick={onClick}>
         {children}
       </Button>
     </div>,

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-field/TextField.tsx

@@ -37,7 +37,7 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextFiel
     <div>
       {label && <Text typography="t6" display="inline-block" color={labelColor}>{label}</Text>}
       {required && <Text typography="t6" display="inline-block" color="red">*</Text>}
-      <Spacing size={12} />
+      <Spacing size={4} />
       <Input
         ref={ref}
         aria-invalid={hasError}
@@ -46,10 +46,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextFiel
         isPasswordType={isPasswordType}
         {...props}
       />
-      {hasError ? <Spacing size={6} /> : <Spacing size={20} />}
+      {hasError ? <Spacing size={4} /> : <Spacing size={20} />}
       {hasError && (
         <>
-          <Text typography="t7" color={labelColor} display="inline-block">{helpMessage}</Text>
+          <Text typography="t8" color={labelColor} display="inline-block">{helpMessage}</Text>
           <Spacing size={6} />
         </>
       )}

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/components/shared/title/Title.tsx

@@ -23,7 +23,7 @@ function Title({
         {titleIcon}
       </Flex>
       <Spacing size={size} />
-      <Text color={descriptionColor}>{description}</Text>
+      <Text typography="t6" color={descriptionColor}>{description}</Text>
     </Flex>
   );
 }

src/constants/validationMessage.ts

@@ -20,6 +20,7 @@ const VALIDATION_MESSAGE_MAP: {
     message: '비밀번호를 확인해주세요.',
   },
   failedLogin: { message: '아이디 또는 비밀번호를 확인해주세요.' },
+  failedFindId: { message: '잘못된 이메일입니다.' },
 } as const;
 
 export default VALIDATION_MESSAGE_MAP;