diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx index b4129da7..0edb4ba3 100644 --- a/src/page/AddMenu/components/MenuImage/index.tsx +++ b/src/page/AddMenu/components/MenuImage/index.tsx @@ -49,6 +49,14 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
(최대 이미지 3장)
+ {imageUrl.map((image, index) => (
{`Selected @@ -64,14 +72,6 @@ export default function MenuImage({ isComplete }: MenuImageProps) { )}
))} -
{name} ) : ( {name} ) : ( setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))} + value={singlePrice} + onChange={(e) => setSinglePrice(Number(e.target.value))} />

원

@@ -93,9 +93,7 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) { <>
가격
-
-
diff --git a/src/page/AddMenu/hook/useFormValidation.ts b/src/page/AddMenu/hook/useFormValidation.ts index 6afc46b4..f1331a19 100644 --- a/src/page/AddMenu/hook/useFormValidation.ts +++ b/src/page/AddMenu/hook/useFormValidation.ts @@ -1,5 +1,6 @@ import useAddMenuStore from 'store/addMenu'; import { useErrorMessageStore } from 'store/errorMessageStore'; +import showToast from 'utils/ts/showToast'; const useFormValidation = () => { const { setMenuError, setCategoryError } = useErrorMessageStore(); @@ -10,6 +11,7 @@ const useFormValidation = () => { if (name.length === 0) { setMenuError('메뉴명을 입력해주세요.'); + showToast('error', '메뉴명을 입력해주세요.'); isValid = false; } else { setMenuError(''); @@ -17,6 +19,7 @@ const useFormValidation = () => { if (categoryIds.length === 0) { setCategoryError('카테고리를 1개 이상 선택해주세요.'); + showToast('error', '카테고리를 1개 이상 선택해주세요.'); isValid = false; } else { setCategoryError(''); diff --git a/src/page/Auth/Login/ApprovalModal/ApprovalModal.module.scss b/src/page/Auth/Login/ApprovalModal/ApprovalModal.module.scss new file mode 100644 index 00000000..4655fca4 --- /dev/null +++ b/src/page/Auth/Login/ApprovalModal/ApprovalModal.module.scss @@ -0,0 +1,72 @@ +.background { + background-color: rgb(0 0 0 / 70%); + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; +} + +.container { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #000000; + opacity: 1; + background-color: #ffffff; + width: 300px; + height: 200px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8px; + + &__title { + font-size: 18px; + font-weight: 500; + + span { + color: #175c8e; + } + } + + &__description { + display: flex; + flex-direction: column; + align-items: center; + font-size: 14px; + color: #8e8e8e; + } + + &__phone { + font-size: 16px; + color: #175c8e; + font-weight: 500; + } +} + +.button { + display: flex; + gap: 8px; + margin-top: 8px; + + &__confirm { + width: 115px; + height: 40px; + border-radius: 4px; + border: 1px solid #8e8e8e; + box-sizing: border-box; + cursor: pointer; + } + + &__clipboard { + width: 115px; + height: 40px; + border-radius: 4px; + background-color: #175c8e; + color: #ffffff; + cursor: pointer; + } +} diff --git a/src/page/Auth/Login/ApprovalModal/index.tsx b/src/page/Auth/Login/ApprovalModal/index.tsx new file mode 100644 index 00000000..02e68a65 --- /dev/null +++ b/src/page/Auth/Login/ApprovalModal/index.tsx @@ -0,0 +1,37 @@ +import { createPortal } from 'react-dom'; +import showToast from 'utils/ts/showToast'; +import styles from './ApprovalModal.module.scss'; + +const PHONE_NUMBER = '010-7724-5536'; + +export default function ApprovalModal({ toggle }:{ toggle: () => void }) { + const copyPhone = () => { + navigator.clipboard.writeText(PHONE_NUMBER).then(() => { + showToast('success', '전화번호를 클립보드에 복사하였습니다.'); + }).catch(() => { + showToast('error', '전화번호를 복사하는데 실패했습니다.'); + }); + }; + + return createPortal( +
+
+
+ 관리자의 승인 + 이 진행 중입니다. +
+
+ 해당 화면이 지속해서 보일 시 + 아래 연락처로 문의하시기 바랍니다. +
+
{PHONE_NUMBER}
+
+ + +
+
+ +
, + document.body, + ); +} diff --git a/src/page/Auth/Login/index.tsx b/src/page/Auth/Login/index.tsx index 29db67ae..668242a5 100644 --- a/src/page/Auth/Login/index.tsx +++ b/src/page/Auth/Login/index.tsx @@ -15,6 +15,7 @@ import sha256 from 'utils/ts/SHA-256'; import { useErrorMessageStore } from 'store/errorMessageStore'; import styles from './Login.module.scss'; import OPTION from './static/option'; +import ApprovalModal from './ApprovalModal'; export default function Login() { const { value: isBlind, changeValue: changeIsBlind } = useBooleanState(); @@ -23,8 +24,9 @@ export default function Login() { const { login, isError: isServerError } = useLogin(); const [isFormError, setIsFormError] = useState(false); const navigate = useNavigate(); - const { loginError } = useErrorMessageStore(); + const { loginError, loginErrorCode } = useErrorMessageStore(); const [emailError, setEmailError] = useState(''); + const { value: isModalOpen, changeValue: toggle } = useBooleanState(false); const isError = isServerError || isFormError; @@ -107,6 +109,7 @@ export default function Login() { [styles['form__button--login']]: true, })} type="submit" + onClick={toggle} > 로그인 @@ -132,6 +135,7 @@ export default function Login() {
+ {loginErrorCode === 100005 && isModalOpen && }
); } diff --git a/src/query/auth.ts b/src/query/auth.ts index 72b16517..8d2275d7 100644 --- a/src/query/auth.ts +++ b/src/query/auth.ts @@ -17,7 +17,7 @@ interface VerifyInput { verify: string; } -interface ErrorResponse { +export interface ErrorResponse { response: undefined | { message: string; data: { @@ -35,7 +35,7 @@ interface ErrorResponse { export const useLogin = () => { const navigate = useNavigate(); const { setPrevPath } = usePrevPathStore((state) => state); - const { setLoginError } = useErrorMessageStore(); + const { setLoginError, setLoginErrorCode } = useErrorMessageStore(); const setStep = useStepStore((state) => state.setStep); const { mutate, error, isError } = useMutation({ @@ -64,6 +64,7 @@ export const useLogin = () => { sessionStorage.removeItem('access_token'); localStorage.removeItem('refresh_token'); setLoginError(err.message || '로그인에 실패했습니다.'); + setLoginErrorCode(err.code); } }, }); diff --git a/src/query/register.ts b/src/query/register.ts index 2f162618..8a977580 100644 --- a/src/query/register.ts +++ b/src/query/register.ts @@ -2,6 +2,7 @@ import { useMutation, useQuery } from '@tanstack/react-query'; import { getEmailAuthCode, getEmailDuplicate, getFileUrls, registerUser, verificationAuthCode, } from 'api/register'; +import axios from 'axios'; import parseRegisterData from 'page/Auth/Signup/utils/parseRegisterData'; import useRegisterInfo from 'store/registerStore'; import useShopRegistrationStore from 'store/shopRegistration'; @@ -83,7 +84,9 @@ export const useGetFileUrls = (goNext:()=>void) => { try { await register.mutateAsync(data.file_urls); } catch (e) { - showToast('error', `회원가입 중 에러가 발생했어요${e}`); + if (axios.isAxiosError(e)) { + showToast('error', `${e.response?.data.message || e.message}`); + } } } catch (e) { showToast('error', `파일업로드 중 에러가 발생했어요${e}`); diff --git a/src/store/addMenu.ts b/src/store/addMenu.ts index f064a97e..95cf046d 100644 --- a/src/store/addMenu.ts +++ b/src/store/addMenu.ts @@ -15,7 +15,7 @@ interface AddMenuStore { isSingle: boolean; name: string; optionPrices: OptionPrices[] | null; - singlePrice: number | null; + singlePrice: number; setCategoryIds: (categoryIds: number[]) => void; setDescription: (description: string) => void; setImageUrl: (newImageUrl: string) => void; @@ -83,7 +83,7 @@ const useAddMenuStore = create((set) => ({ isSingle: menuData.is_single, name: menuData.name, optionPrices: newOptionPrices, - singlePrice: 'single_price' in menuData ? menuData.single_price : null, + singlePrice: menuData.single_price !== null ? menuData.single_price : undefined, }); } }, diff --git a/src/store/errorMessageStore.ts b/src/store/errorMessageStore.ts index 8497ab41..648d0040 100644 --- a/src/store/errorMessageStore.ts +++ b/src/store/errorMessageStore.ts @@ -7,6 +7,8 @@ interface ErrorMessageStore { setCategoryError: (error: string) => void; loginError: string; setLoginError: (error: string) => void; + loginErrorCode: number; + setLoginErrorCode: (error: number) => void; } export const useErrorMessageStore = create((set) => ({ @@ -16,4 +18,6 @@ export const useErrorMessageStore = create((set) => ({ setCategoryError: (error) => set({ categoryError: error }), loginError: '', setLoginError: (error) => set({ loginError: error }), + loginErrorCode: 0, + setLoginErrorCode: (error) => set({ loginErrorCode: error }), }));