[로그인] 승인 알림 모달

src/page/AddMenu/components/MenuImage/index.tsx

@@ -49,6 +49,14 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
             <div className={styles.mobile__header__condition}>(최대 이미지 3장)</div>
           </div>
           <div className={styles['mobile__new-image__container']}>
+            <button
+              type="button"
+              className={styles['mobile__new-image__add-btn']}
+              onClick={openAddMenuImgModal}
+            >
+              <ImgPlusIcon className={styles['mobile__new-image__plusIcon']} />
+              <div className={styles['mobile__new-image__add-caption']}>이미지 추가</div>
+            </button>
             {imageUrl.map((image, index) => (
               <div key={image} className={styles['mobile__new-image__item']}>
                 <img src={image} alt={`Selected ${index + 1}`} className={styles['mobile__new-image__selected']} />
@@ -64,14 +72,6 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
                 )}
               </div>
             ))}
-            <button
-              type="button"
-              className={styles['mobile__new-image__add-btn']}
-              onClick={openAddMenuImgModal}
-            >
-              <ImgPlusIcon className={styles['mobile__new-image__plusIcon']} />
-              <div className={styles['mobile__new-image__add-caption']}>이미지 추가</div>
-            </button>
           </div>
           <AddMenuImgModal
             isOpen={isAddMenuImgModal}

src/page/AddMenu/components/MenuName/MenuName.module.scss

@@ -25,6 +25,10 @@
       font-size: 13px;
       font-weight: 400;
     }
+
+    &--error {
+      border: 0.5px #f7941e solid;
+    }
   }
 
   &__name-text {
@@ -67,6 +71,10 @@
     font-size: 20px;
     font-weight: 400;
   }
+
+  &--error {
+    border: 0.5px #f7941e solid;
+  }
 }
 
 .name-text {

src/page/AddMenu/components/MenuName/index.tsx

@@ -1,6 +1,7 @@
 import useMediaQuery from 'utils/hooks/useMediaQuery';
 import useAddMenuStore from 'store/addMenu';
 import { useErrorMessageStore } from 'store/errorMessageStore';
+import cn from 'utils/ts/className';
 import styles from './MenuName.module.scss';
 
 interface MenuNameProps {
@@ -27,7 +28,10 @@ export default function MenuName({ isComplete }: MenuNameProps) {
             <span className={styles['mobile__name-text']}>{name}</span>
           ) : (
             <input
-              className={styles['mobile__name-input']}
+              className={cn({
+                [styles['mobile__name-input']]: true,
+                [styles['mobile__name-input--error']]: menuError,
+              })}
               placeholder="예) 불족발 + 막국수 저녁 SET"
               onChange={handleNameChange}
               value={name}
@@ -44,7 +48,10 @@ export default function MenuName({ isComplete }: MenuNameProps) {
             <span className={styles['name-text']}>{name}</span>
           ) : (
             <input
-              className={styles['name-input']}
+              className={cn({
+                [styles['name-input']]: true,
+                [styles['name-input--error']]: menuError,
+              })}
               placeholder="예) 불족발 + 막국수 저녁 SET"
               onChange={handleNameChange}
               value={name}

src/page/AddMenu/components/MenuPrice/index.tsx

@@ -45,8 +45,8 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
                     <input
                       type="number"
                       className={styles['mobile__price-info-inputs__price-input']}
-                      value={singlePrice === 0 || singlePrice === null ? '' : singlePrice}
-                      onChange={(e) => setSinglePrice(e.target.value === '' ? 0 : Number(e.target.value))}
+                      value={singlePrice}
+                      onChange={(e) => setSinglePrice(Number(e.target.value))}
                     />
                     <p className={styles['mobile__price-info-inputs__price-input-won']}>원</p>
                   </div>
@@ -93,9 +93,7 @@ export default function MenuPrice({ isComplete }:MenuPriceProps) {
             <>
               <div className={styles.header}>
                 <div className={styles.header__title}>가격</div>
-
               </div>
-
               <div className={styles['price-info-input-box']}>
                 <div className={styles['price-info-inputs']}>
                   <div className={styles['price-info-inputs__price-input-box']}>

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,13 +11,15 @@ const useFormValidation = () => {
 
     if (name.length === 0) {
       setMenuError('메뉴명을 입력해주세요.');
+      showToast('error', '메뉴명을 입력해주세요.');
       isValid = false;
     } else {
       setMenuError('');
     }
 
     if (categoryIds.length === 0) {
       setCategoryError('카테고리를 1개 이상 선택해주세요.');
+      showToast('error', '카테고리를 1개 이상 선택해주세요.');
       isValid = false;
     } else {
       setCategoryError('');

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;
+  }
+}

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(
+    <div className={styles.background}>
+      <div className={styles.container}>
+        <div className={styles.container__title}>
+          <span>관리자의 승인</span>
+          이 진행 중입니다.
+        </div>
+        <div className={styles.container__description}>
+          <span>해당 화면이 지속해서 보일 시</span>
+          <span>아래 연락처로 문의하시기 바랍니다.</span>
+        </div>
+        <div className={styles.container__phone}>{PHONE_NUMBER}</div>
+        <div className={styles.button}>
+          <button type="button" className={styles.button__confirm} onClick={toggle}>확인</button>
+          <button type="button" className={styles.button__clipboard} onClick={copyPhone}>번호 복사</button>
+        </div>
+      </div>
+
+    </div>,
+    document.body,
+  );
+}

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}
           >
             로그인
           </button>
@@ -132,6 +135,7 @@ export default function Login() {
           </div>
         </form>
       </div>
+      {loginErrorCode === 100005 && isModalOpen && <ApprovalModal toggle={toggle} />}
     </div>
   );
 }

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);
       }
     },
   });

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}`);

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<AddMenuStore>((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,
       });
     }
   },

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<ErrorMessageStore>((set) => ({
@@ -16,4 +18,6 @@ export const useErrorMessageStore = create<ErrorMessageStore>((set) => ({
   setCategoryError: (error) => set({ categoryError: error }),
   loginError: '',
   setLoginError: (error) => set({ loginError: error }),
+  loginErrorCode: 0,
+  setLoginErrorCode: (error) => set({ loginErrorCode: error }),
 }));