[비즈니스] 회원가입 플로우 및 메뉴 편집 개선 (#389)

* feat: validate 성공 시 아이콘 추가 * feat: Auth 공용 Form 컴포넌트 제작 * style: box-sizing 값 조정 * refactor: model 재정의 * refactor: 다음 버튼을 재사용 하도록 변경 및 기본값 추가 * feat: Auth 공용 컴포넌트 제작 * feat: input 숨기기 버튼 컴포넌트화 * refactor: 비밀번호 찾기에 공용 컴포넌트 적용 * refactor: useSteps에서 불필요한 값 제거거 * refactor: 공용 컴포넌트 적용 * refactor: 커스텀훅으로 개편 및 컴포넌트화 적용 * refactor: 불필요한 기능 삭제 및 css 조정 * feat: 회원가입 플로우 개선 * style: secondary 색상 변경 * refactor: 라우팅 세팅 * refactor: 메뉴 편집 개편 * style: 버튼 색상 조정 * feat: 메뉴 편집탭 추가 * style: lint 수정 * style: 메뉴추가 버튼 위치 및 스타일 변경 * style: lint 수정
BCSDLab · Feb 13, 2025 · ec25da3 · ec25da3
1 parent 7a2abec
commit ec25da3
Show file tree

Hide file tree

Showing 49 changed files with 1,520 additions and 780 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -20,6 +20,7 @@ import LogPage from 'component/common/PageLog';
 import CommonLayout from 'page/Auth/components/Common';
 import FindPassword from 'page/Auth/FindPassword';
 import ROUTES from 'static/routes';
+import EditMenu from 'page/MyShopPage/components/EditMenu';
 
 interface ProtectedRouteProps {
   userTypeRequired: UserType;
@@ -51,6 +52,7 @@ function App() {
             <Route path={ROUTES.Owner.Root()} element={<MyShopPage />} />
             <Route path={ROUTES.Owner.ShopRegistration()} element={<ShopRegistration />} />
             <Route path={ROUTES.Owner.AddMenu()} element={<AddMenu />} />
+            <Route path={ROUTES.Owner.EditMenu()} element={<EditMenu />} />
             <Route path={ROUTES.Owner.ModifyMenu({ isLink: false })} element={<ModifyMenu />} />
             <Route path={ROUTES.Owner.ModifyInfo()} element={<PageNotFound />} />
             <Route path={ROUTES.Owner.MenuManagement()} element={<PageNotFound />} />

diff --git a/src/assets/svg/auth/success.svg b/src/assets/svg/auth/success.svg
diff --git a/src/component/common/Header/index.tsx b/src/component/common/Header/index.tsx
@@ -12,8 +12,10 @@ function Header() {
   const { isMobile } = useMediaQuery();
 
   if ((pathname === ROUTES.Owner.AddMenu()
-    || pathname.startsWith(ROUTES.Owner.ModifyMenu({ isLink: false }))
-    || pathname.startsWith(ROUTES.Owner.Event({ isLink: false })))
+    || pathname.includes('modify-menu')
+    || pathname.startsWith(ROUTES.Owner.Event({ isLink: false }))
+    || pathname.startsWith(ROUTES.Owner.EditMenu())
+  )
     && isMobile) {
     return (
       <header className={styles['add-menu-header']}>
@@ -26,9 +28,10 @@ function Header() {
           <BackArrowIcon title="뒤로 가기 버튼" />
         </button>
         <div className={styles['add-menu-header__caption']}>
-          {pathname === ROUTES.Owner.AddMenu() && '메뉴추가'}
-          {pathname.startsWith(ROUTES.Owner.ModifyMenu({ isLink: false })) && '메뉴수정'}
+          {pathname === ROUTES.Owner.AddMenu() && '메뉴 추가'}
+          {pathname.includes('modify-menu') && '메뉴 수정'}
           {pathname.startsWith(ROUTES.Owner.Event({ isLink: false })) && '이벤트/공지 작성하기'}
+          {pathname.startsWith(ROUTES.Owner.EditMenu()) && '메뉴 편집'}
         </div>
       </header>
     );

diff --git a/src/model/auth/index.ts b/src/model/auth/index.ts
@@ -93,6 +93,8 @@ export interface Register extends FindPassword {
   attachment_urls: {
     file_url: string
   }[],
+  verificationCode: string;
+  shop_call: string;
 }
 
 export interface RegisterUser {

diff --git a/src/page/AddMenu/AddMenu.module.scss b/src/page/AddMenu/AddMenu.module.scss
@@ -33,13 +33,14 @@
     width: 94px;
     height: 43px;
     flex-shrink: 0;
-    border: 1px solid #f7941e;
+    border: 1px solid #cacaca;
     background-color: white;
-    color: #f7941e;
+    color: #cacaca;
     text-align: center;
     font-family: "Noto Sans CJK KR", sans-serif;
     font-size: 18px;
     font-weight: 500;
+    border-radius: 8px;
 
     &:hover {
       cursor: pointer;
@@ -56,6 +57,7 @@
     font-family: "Noto Sans CJK KR", sans-serif;
     font-size: 18px;
     font-weight: 500;
+    border-radius: 8px;
 
     &:hover {
       cursor: pointer;

diff --git a/src/page/AddMenu/components/MenuCategory/MenuCategory.module.scss b/src/page/AddMenu/components/MenuCategory/MenuCategory.module.scss
@@ -115,12 +115,13 @@ $button-text-color: #252525;
 
   &__category-button {
     height: 39px;
-    border: 0.5px solid #898a8d;
+    border: 0.5px solid #cacaca;
     background-color: white;
     color: $button-text-color;
     text-align: center;
     font-size: 15px;
     font-weight: 500;
+    border-radius: 8px;
 
     &--selected {
       background-color: #f7941e;

diff --git a/src/page/AddMenu/components/MenuCategory/index.tsx b/src/page/AddMenu/components/MenuCategory/index.tsx
@@ -66,10 +66,9 @@ export default function MenuCategory({ isComplete }:MenuCategoryProps) {
                     메뉴 카테고리
                   </div>
                   <div className={styles['mobile__category-header__condition']}>
-                    (최대 선택 n개)
+                    (1개 이상 선택)
                   </div>
                 </div>
-                <GearIcon className={styles['mobile__category-header__icon']} />
               </div>
               <div className={styles['mobile__category-button-container']}>
                 {shopData && shopData.menu_categories.map((category) => (

diff --git a/src/page/AddMenu/components/MenuImage/MenuImage.module.scss b/src/page/AddMenu/components/MenuImage/MenuImage.module.scss
@@ -132,6 +132,7 @@
       gap: 16px;
       white-space: nowrap;
       align-items: center;
+      justify-content: space-around;
       height: 170px;
     }
 
@@ -140,8 +141,8 @@
       justify-content: center;
       align-items: center;
       flex-direction: column;
-      width: 137px;
-      height: 137px;
+      width: 100px;
+      height: 100px;
       flex-shrink: 0;
       border: 0.5px solid #a1a1a1;
       background-color: white;
@@ -168,13 +169,13 @@
       justify-content: center;
       align-items: center;
       position: relative;
-      width: 137px;
-      height: 137px;
+      width: 100px;
+      height: 100px;
     }
 
     &__selected {
-      max-width: 137px;
-      max-height: 137px;
+      width: 100px;
+      height: 100px;
     }
   }
 

diff --git a/src/page/AddMenu/components/MenuImage/index.tsx b/src/page/AddMenu/components/MenuImage/index.tsx
@@ -58,31 +58,32 @@ export default function MenuImage({ isComplete }: MenuImageProps) {
             <div className={styles.mobile__header__condition}>(최대 이미지 3장)</div>
           </div>
           <div className={styles['mobile__new-image__container']}>
-            {!isComplete && (
-              <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']} />
                 {!isComplete && (
-                  <button
-                    type="button"
-                    onClick={() => handleDeleteImage(image)}
-                    className={styles['mobile__delete-img-button']}
-                    aria-label="Delete image"
-                  >
-                    <MobileDeleteImgIcon className={styles['mobile__delete-img-icon']} />
-                  </button>
+                <button
+                  type="button"
+                  onClick={() => handleDeleteImage(image)}
+                  className={styles['mobile__delete-img-button']}
+                  aria-label="Delete image"
+                >
+                  <MobileDeleteImgIcon className={styles['mobile__delete-img-icon']} />
+                </button>
                 )}
               </div>
             ))}
+            {!isComplete && (
+              Array.from({ length: 3 - imageUrl.length }).map(() => (
+                <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}

diff --git a/src/page/AddMenu/components/MenuName/MenuName.module.scss b/src/page/AddMenu/components/MenuName/MenuName.module.scss
@@ -16,9 +16,10 @@
     width: 100%;
     height: 35px;
     flex-shrink: 0;
-    border: 0.5px solid #898a8d;
+    border: 0.5px solid #cacaca;
     padding: 8px;
     box-sizing: border-box;
+    border-radius: 8px;
 
     &::placeholder {
       color: #a1a1a1;

diff --git a/src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss b/src/page/AddMenu/components/MenuPrice/components/PriceInput/PriceInput.module.scss
@@ -68,7 +68,7 @@
     @include media.media-breakpoint-down(mobile) {
       width: 100%;
       height: 35px;
-      border: 0.5px solid #898a8d;
+      border: 0.5px solid #cacaca;
       padding: 8px;
       font-size: 14px;
       box-sizing: border-box;
@@ -136,11 +136,18 @@
     @include media.media-breakpoint-down(mobile) {
       width: 100%;
       height: 35px;
-      border: 0.5px solid #898a8d;
+      border: 0.5px solid #cacaca;
       padding: 8px;
       text-align: left;
       box-sizing: border-box;
       font-size: 14px;
+      border-radius: 8px;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        appearance: none;
+        margin: 0;
+      }
     }
   }
 

diff --git a/src/page/AddMenu/components/MenuPrice/components/PriceInput/index.tsx b/src/page/AddMenu/components/MenuPrice/components/PriceInput/index.tsx
@@ -102,7 +102,7 @@ export default function PriceInput({
       >
         <MobilePlusIcon className={styles['add-price-button__icon']} />
         <span className={styles['add-price-button__text']}>
-          사이즈 추가
+          가격 추가
         </span>
       </button>
     </>

diff --git a/src/page/Auth/FindPassword/ChangePassword/index.tsx b/src/page/Auth/FindPassword/ChangePassword/index.tsx
@@ -1,20 +1,50 @@
 import { useEffect } from 'react';
-import { useFormContext } from 'react-hook-form';
+import { useFormContext, UseFormSetError } from 'react-hook-form';
 import { useOutletContext } from 'react-router-dom';
 import { ChangePasswordForm } from 'model/auth';
 import { OutletProps } from 'page/Auth/FindPassword/entity';
 import Warning from 'assets/svg/auth/warning.svg?react';
 import styles from 'page/Auth/FindPassword/index.module.scss';
+import { isKoinError, sendClientError } from '@bcsdlab/koin';
+import { Button } from 'page/Auth/components/Common/form';
+import sha256 from 'utils/ts/SHA-256';
+import { changePassword } from 'api/auth';
+import { useMutation } from '@tanstack/react-query';
+
+interface ChangePasswordProps {
+  setError: UseFormSetError<ChangePasswordForm>;
+  nextStep: () => void;
+}
+
+const useChangePassword = ({ setError, nextStep } : ChangePasswordProps) => {
+  const mutate = useMutation({
+    mutationFn: async (data: { phone_number: string, password: string }) => {
+      const hashPassword = await sha256(data.password);
+      changePassword({ phone_number: data.phone_number, password: hashPassword });
+    },
+    onError: (e) => {
+      if (isKoinError(e)) {
+        setError('password', { type: 'custom', message: e.message });
+      } else {
+        sendClientError(e);
+      }
+    },
+    onSuccess: () => nextStep(),
+  });
+
+  return mutate;
+};
 
 const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,18}$/;
 
 export default function ChangePassword() {
   const {
-    register, formState: { errors, isValid }, getValues, clearErrors,
+    register, formState: { errors, isValid }, getValues, clearErrors, setError,
   } = useFormContext<ChangePasswordForm>();
 
   const steps = useOutletContext<OutletProps>();
   const { setIsStepComplete } = steps;
+  const mutation = useChangePassword({ setError, nextStep: steps.nextStep });
 
   useEffect(() => {
     if (isValid) {
@@ -57,7 +87,6 @@ export default function ChangePassword() {
               </div>
             )
         }
-
       </section>
       <section className={styles.section}>
         <div className={styles.title}>새 비밀번호 확인</div>
@@ -78,6 +107,15 @@ export default function ChangePassword() {
           )
         }
       </section>
+      <Button
+        disabled={!isValid}
+        onClick={() => {
+          const data = { phone_number: getValues('phone_number'), password: getValues('password') };
+          mutation.mutate(data);
+        }}
+      >
+        완료
+      </Button>
     </form>
   );
 }