diff --git a/src/page/Auth/Signup/components/ownerInfoStep/ownerInfoStep.module.scss b/src/page/Auth/Signup/components/ownerInfoStep/ownerInfoStep.module.scss
index 0c4a86bd..e6374789 100644
--- a/src/page/Auth/Signup/components/ownerInfoStep/ownerInfoStep.module.scss
+++ b/src/page/Auth/Signup/components/ownerInfoStep/ownerInfoStep.module.scss
@@ -69,8 +69,6 @@
.owner-file-input {
&__button {
- position: absolute;
- bottom: -40px;
display: flex;
align-items: center;
justify-content: center;
diff --git a/src/page/Auth/Signup/components/phoneStep/index.tsx b/src/page/Auth/Signup/components/phoneStep/index.tsx
index d5bacaf9..6aadf860 100644
--- a/src/page/Auth/Signup/components/phoneStep/index.tsx
+++ b/src/page/Auth/Signup/components/phoneStep/index.tsx
@@ -1,113 +1,183 @@
-import Error from 'assets/svg/auth/error-icon.svg?react';
import {
useFormContext, UseFormGetValues, UseFormSetError,
} from 'react-hook-form';
import {
- useState, useEffect, ChangeEvent,
+ useState, ChangeEvent, useEffect,
} from 'react';
-import cn from 'utils/ts/className';
import { verificationAuthCode, getPhoneAuthCode } from 'api/register';
import { isKoinError, sendClientError } from '@bcsdlab/koin';
-import { useDebounce } from 'utils/hooks/useDebounce';
import { PhoneNumberRegisterParam } from 'model/register';
import showToast from 'utils/ts/showToast';
+import {
+ Button, Input, Title, ValidationMessage,
+} from 'page/Auth/components/Common/form';
+import { useMutation } from '@tanstack/react-query';
+import BlindButton from 'page/Auth/components/Common/BlindButton';
+import { Register } from 'model/auth';
+import { Link } from 'react-router-dom';
+import ROUTES from 'static/routes';
import styles from './phoneStep.module.scss';
-interface PhoneStepProps {
- setIsStepComplete: React.Dispatch
>;
-}
-
-interface Verify {
- phone_number: string;
- attachment_urls: {
- file_url: string
- }[];
- verificationCode: string;
- password: string;
- passwordConfirm: string;
+interface SendCodeParams {
+ getValues: UseFormGetValues;
+ onError: (e: unknown) => void;
+ onSucess?: () => void;
+ onClick?: () => void;
}
-interface SendCodeParams {
- getValues: UseFormGetValues;
- setError: UseFormSetError;
- setIsSent: React.Dispatch>;
- setIsClick: React.Dispatch>;
+interface TimerProps {
+ seconds: number;
+ setSeconds: React.Dispatch>;
+ time?: number;
+ timeOut?: () => void;
+ onMid?: () => void;
+ stop?: boolean;
}
-const code = ({
- getValues, setError, setIsSent, setIsClick,
+const useSendCode = ({
+ getValues, onError, onSucess, onClick,
}: SendCodeParams) => {
+ if (onClick) onClick();
const phoneNumber = getValues('phone_number');
const phoneNumberParam: PhoneNumberRegisterParam = { phone_number: phoneNumber };
- getPhoneAuthCode(phoneNumberParam)
- .then(() => {
- setIsSent(true);
- setIsClick(false);
+ const sendCode = useMutation({
+ mutationKey: ['sendCode'],
+ mutationFn: () => getPhoneAuthCode(phoneNumberParam),
+ onError: (e) => onError(e),
+ onSuccess: () => {
+ if (onSucess) onSucess();
showToast('success', '인증번호를 발송했습니다');
- })
- .catch((e) => {
- if (isKoinError(e)) {
- setError('phone_number', { type: 'custom', message: e.message });
- }
- });
+ },
+ });
+
+ return sendCode;
};
const useCheckCode = (
- getValues: UseFormGetValues,
- setError: UseFormSetError,
+ verificationCode: string,
+ phoneNumber: string,
+ setError: UseFormSetError,
) => {
const [isCertified, setIsCertified] = useState(false);
+ const mutation = useMutation({
+ mutationFn: () => verificationAuthCode({
+ certification_code: verificationCode,
+ phone_number: phoneNumber,
+ }),
+ onError: (e) => {
+ if (isKoinError(e)) {
+ setError('verificationCode', { type: 'error', message: e.message });
+ } else {
+ sendClientError(e);
+ }
+ },
+ onSuccess: (res) => {
+ sessionStorage.setItem('access_token', res.token);
+ setIsCertified(true);
+ },
+ });
+
+ return { mutation, isCertified };
+};
+
+function Timer({
+ seconds, setSeconds, time = 180, timeOut, onMid, stop,
+}: TimerProps) {
+ useEffect(() => {
+ let interval: NodeJS.Timeout;
- const checkCode = () => {
- const certificationCode = getValues('verificationCode');
- if (certificationCode.length === 6) {
- verificationAuthCode({
- certification_code: certificationCode,
- phone_number: getValues('phone_number'),
- })
- .then((res) => {
- sessionStorage.setItem('access_token', res.token);
- setIsCertified(true);
- showToast('success', '인증번호 확인 성공');
- })
- .catch((e) => {
- if (isKoinError(e)) {
- setError('verificationCode', { type: 'error', message: e.message });
- } else {
- sendClientError(e);
- }
- });
+ if (seconds <= 0 && timeOut) {
+ timeOut();
}
- };
- return { checkCode, isCertified };
-};
+ if (seconds === time - 30 && onMid) {
+ // 30초 지났을 때
+ onMid();
+ }
+
+ if (seconds > 0 && !stop) {
+ interval = setInterval(() => {
+ setSeconds((prev) => prev - 1);
+ }, 1000);
+ }
-export default function PhoneStep({ setIsStepComplete }: PhoneStepProps) {
+ return () => clearInterval(interval);
+ }, [seconds, setSeconds, timeOut, time, onMid, stop]);
+
+ return (
+
+ {seconds / 60 >= 10 ? Math.floor(seconds / 60) : `0${Math.floor(seconds / 60)}`}
+ {' : '}
+ {seconds % 60 >= 10 ? seconds % 60 : `0${seconds % 60}`}
+
+ );
+}
+
+interface InquiryButtonProps {
+ title: string;
+ link: string;
+}
+
+function InquiryButton({ title, link }:InquiryButtonProps) {
+ return (
+
+ );
+}
+
+function PhoneStep({ nextStep }: { nextStep: () => void }) {
const {
register, formState: { errors }, getValues, setError, watch, setValue, clearErrors,
- } = useFormContext();
+ } = useFormContext();
+
+ const [steps, setSteps] = useState(0);
+ const [isShowInquiry, setIsShowInquiry] = useState(false);
+ const [seconds, setSeconds] = useState(180);
+ const [hasConfilct, setHasConflict] = useState(false);
+ const [phoneNumber, verificationCode] = watch(['phone_number', 'verificationCode']);
+ const onSendCodeSucess = () => {
+ setSteps((prev) => prev + 1);
+ setHasConflict(false);
+ };
+ const onSendCodeError = (e: unknown) => {
+ if (isKoinError(e)) {
+ if (e.status === 409) {
+ setError('phone_number', { type: 'custom', message: '이미 가입된 전화번호입니다.' });
+ setHasConflict(true);
+ return;
+ }
+ setError('phone_number', { type: 'custom', message: e.message });
+ }
+ };
+
+ const onRevalidateCodeSuccess = () => {
+ setSeconds(180);
+ clearErrors();
+ };
+
+ const sendCode = useSendCode({
+ getValues, onError: onSendCodeError, onSucess: onSendCodeSucess,
+ });
- const [isSent, setIsSent] = useState(false);
- const [isClick, setIsClick] = useState(false);
- const debounce = useDebounce(code, {
- getValues, setError, setIsSent, setIsClick,
+ const revalidataCode = useSendCode({
+ getValues, onError: onSendCodeError, onSucess: onRevalidateCodeSuccess,
});
- const { checkCode, isCertified } = useCheckCode(
- getValues,
+ const { mutation, isCertified } = useCheckCode(
+ verificationCode,
+ phoneNumber,
setError,
);
- const sendCode = () => {
- setIsClick(true);
- if (!getValues('phone_number')) {
- setError('phone_number', { type: 'custom', message: '필수 입력 항목입니다.' });
- return;
- }
- debounce();
- };
-
const setCode = (e: ChangeEvent) => setValue('verificationCode', e.target.value);
const handlePhoneNumberChange = (e: ChangeEvent) => {
@@ -116,155 +186,204 @@ export default function PhoneStep({ setIsStepComplete }: PhoneStepProps) {
value = value.slice(0, 11);
}
setValue('phone_number', value);
- setIsClick(false);
clearErrors();
};
- const watchedValues = watch(['attachment_urls', 'verificationCode', 'password', 'passwordConfirm']);
-
useEffect(() => {
- const values = getValues();
- const isComplete = (
- values.password === values.passwordConfirm
- && values.password.length > 0
- ) && isCertified && !!errors;
- if (isComplete) {
- setIsStepComplete(true);
- } else {
- setIsStepComplete(false);
+ if (verificationCode.length === 6 && mutation.isIdle && sendCode.isSuccess) {
+ mutation.mutate();
}
- }, [watchedValues, isCertified, getValues, setIsStepComplete, errors]);
+ }, [verificationCode, mutation, sendCode]);
return (
-
-
전화번호
-
-
+ {steps >= 0 && (
+
+
+
-
+
-
-
-
- {errors.phone_number && }
- {errors.phone_number?.message}
+ 인증번호 발송
+
+ {hasConfilct && (
+
+ )}
-
-
-
인증번호
-
-
= 1 && (
+
+
+ setError('verificationCode', { type: 'error', message: '유효시간이 지났습니다. 인증번호를 재발송 해주세요.' })}
+ onMid={() => setIsShowInquiry(true)}
+ stop={isCertified}
+ />
+)}
/>
-
-
-
- {errors.verificationCode && (
- <>
-
- {errors.verificationCode.message}
-
+
+ {!isCertified && (
+ <>
+
+ {isShowInquiry && (
+
+ )}
+
)}
+ )}
-
- 비밀번호
- {
+ setValue('verificationCode', '');
+ nextStep();
+ }}
+ >
+ 다음
+
+
+ );
+}
+
+interface Props {
+ nextStep: () => void;
+}
+
+interface PasswordParams {
+ password: string;
+ passwordConfirm: string;
+}
+
+function PasswordStep({ nextStep }: Props) {
+ const {
+ register, formState: { errors }, watch,
+ } = useFormContext
();
+
+ const [isBlind, setIsBlind] = useState({
+ password: false,
+ passwordConfirm: false,
+ });
+
+ const toggleBlindState = (key: 'password' | 'passwordConfirm') => {
+ setIsBlind((prev) => ({
+ ...prev, [key]: !prev[key],
+ }));
+ };
+
+ const [password, passwordConfirm] = watch(['password', 'passwordConfirm']);
+
+ const isValidPassword = password.length >= 6 && !errors.password;
+ return (
+
+
+
+
toggleBlindState('password')} />}
/>
-
- {errors.password && (
- <>
-
- {errors.password.message}
-
- )}
-
-
-
+
-
-
- handleSearch()}
- />
-
-
- {isError &&
에러가 발생했습니다.
}
- {filteredShopList?.map((shop) => (
-
+
{title}
+ );
+}
+
+export function ValidationMessage({ message, isError }: ValidationMessageProps) {
+ if (isError) {
+ return (
+
+
+ {message}
+
+ );
+ }
+
+ return (
+
+ {message && }
+ {message}
+
+ );
+}
+
+export function Input({
+ type = 'text', placeholder, register, onChange, inputMode, name, required, pattern,
+ requiredMessage, patternMessage, maxLength, component,
+}: InputProps) {
+ return (
+
+ );
+}
+
+export function Button({
+ disabled = false, children, onClick, type = 'button', onSubmit, primary = true, secondary = false, info = false,
+}: ButtonProps) {
+ return (
+
+ );
+}
diff --git a/src/page/Auth/components/Common/index.module.scss b/src/page/Auth/components/Common/index.module.scss
index bdc9e0ea..9293bba0 100644
--- a/src/page/Auth/components/Common/index.module.scss
+++ b/src/page/Auth/components/Common/index.module.scss
@@ -64,18 +64,14 @@
}
.content {
- height: calc(100vh - 35vh);
box-sizing: border-box;
padding: 5px 0;
overflow: scroll;
+ height: 75dvh;
&::-webkit-scrollbar {
display: none;
}
-
- @include media.media-breakpoint-down(mobile) {
- height: calc(100vh - 28vh);
- }
}
.button {
diff --git a/src/page/Auth/components/Common/index.tsx b/src/page/Auth/components/Common/index.tsx
index f1f2c228..692a35c9 100644
--- a/src/page/Auth/components/Common/index.tsx
+++ b/src/page/Auth/components/Common/index.tsx
@@ -1,130 +1,43 @@
import BackArrow from 'assets/svg/common/back-arrow.svg?react';
-import { FormProvider, useForm, UseFormSetError } from 'react-hook-form';
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
-import cn from 'utils/ts/className';
-import { Register, RegisterUser } from 'model/auth';
-import { changePassword } from 'api/auth';
-import { phoneRegisterUser } from 'api/register';
-import { isKoinError, sendClientError } from '@bcsdlab/koin';
+import { FormProvider, useForm } from 'react-hook-form';
+import { Outlet, useLocation } from 'react-router-dom';
+import { Register } from 'model/auth';
import { useStep } from 'page/Auth/hook/useStep';
-import sha256 from 'utils/ts/SHA-256';
-import { useDebounce } from 'utils/hooks/useDebounce';
-import ROUTES from 'static/routes';
import Done from 'page/Auth/components/Done';
import styles from './index.module.scss';
-const setNewPassword = async (
- phone_number: string,
- password: string,
- setError: UseFormSetError,
-) => {
- const hashPassword = await sha256(password);
- changePassword({ phone_number, password: hashPassword })
- .catch((e) => {
- if (isKoinError(e)) {
- setError('password', { type: 'custom', message: e.message });
- } else {
- sendClientError(e);
- }
- });
-};
-
-interface RegisterParam {
- company_number: string,
- name: string,
- password: string,
- phone_number: string,
- shop_id: number | null,
- shop_name: string,
- attachment_urls: { file_url: string; }[],
- setError: UseFormSetError,
-}
-
-const registerUser = (
- {
- company_number,
- name,
- password,
- phone_number,
- shop_id,
- shop_name,
- attachment_urls,
- setError,
- }: RegisterParam,
-) => {
- phoneRegisterUser({
- company_number, name, password, phone_number, shop_id, shop_name, attachment_urls,
- }).then(() => sessionStorage.removeItem('accessToken'))
- .catch((e) => {
- if (isKoinError(e)) {
- setError('password', { type: 'custom', message: e.message });
- } else {
- sendClientError(e);
- }
- });
-};
-
export default function CommonLayout() {
const location = useLocation();
- const navigate = useNavigate();
const isFindPassword = location.pathname.includes('find');
const title = isFindPassword ? '비밀번호 찾기' : '회원가입';
const method = useForm({
mode: 'onChange',
+ defaultValues: {
+ company_number: '',
+ name: '',
+ password: '',
+ phone_number: '',
+ shop_id: null,
+ shop_name: '',
+ attachment_urls: [],
+ verificationCode: '',
+ },
});
- const {
- formState: { errors }, setError, getValues,
- } = method;
const steps = useStep(isFindPassword ? 'find' : 'register');
const {
- nextStep,
previousStep,
currentStep,
index,
totalStep,
isComplete,
- isStepComplete,
- isSearch,
- setIsSearch,
} = steps;
// eslint-disable-next-line
const progressPercentage = (index + 1) / totalStep * 100;
- const stepCheck = async () => {
- if (isComplete) navigate(ROUTES.Login());
- if (!errors.root) {
- if (index + 1 === totalStep && isFindPassword) {
- setNewPassword(getValues('phone_number'), getValues('password'), setError);
- } else if (index + 1 === totalStep && !isFindPassword) {
- const hash = await sha256(getValues('password'));
- registerUser(
- {
- company_number: getValues('company_number'),
- name: getValues('name'),
- password: hash,
- phone_number: getValues('phone_number'),
- shop_id: getValues('shop_id'),
- shop_name: getValues('shop_name'),
- attachment_urls: getValues('attachment_urls'),
- setError,
- },
- );
- }
- nextStep();
- }
- };
-
- const debounce = useDebounce(stepCheck, null);
-
- const handleSelectComplete = () => {
- setIsSearch(false);
- steps.setIsStepComplete(true);
- };
-
return (
@@ -164,36 +77,6 @@ export default function CommonLayout() {
?
: }
- {!isComplete && !isSearch && (
-
- )}
- {isSearch && (
-
- )}
- {menu.image_urls.length > 0 ? (
- menu.image_urls.map((img, idx) => (
-
-
-
- ))) : (
-
-
-
- )}
{menu.name}
@@ -129,6 +116,33 @@ function MenuTable({ shopMenuCategories, onClickImage }: MenuTableProps) {
+ {isEdit && (
+
+ )}
+ {menu.image_urls.length > 0 ? (
+
+
+
+ ) : (
+
+
+
+ )}
{tapType === '메뉴' ? (
menusData && menusData.menu_categories.length > 0 && (