feat: 가게 등록완료 UI 변경

src/page/ShopRegistration/view/Mobile/Main/Main.module.scss

@@ -64,13 +64,14 @@
 
   &__delete-img-button {
     position: relative;
-    right: 15px;
+    right: 25px;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #f7941e;
     border-radius: 50%;
     height: 24px;
+    z-index: 999;
 
     svg {
       width: 24px;

src/page/ShopRegistration/view/Mobile/Main/index.tsx

@@ -22,13 +22,11 @@ export default function Main({ onNext, onPrev }:{
   } = useImagesUpload();
 
   const handleDeleteImage = (url: string) => {
-    setImageFile(imageFile.filter((img) => img !== url));
+    setImageFile((prevImages) => prevImages.filter((img) => img !== url));
   };
 
   useEffect(() => {
-    if (imageFile.length > 0) {
-      setValue('image_urls', imageFile);
-    }
+    setValue('image_urls', imageFile);
   }, [imageFile, setValue]);
 
   const handleNextClick = async () => {

src/page/ShopRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss

@@ -162,7 +162,7 @@
     font-weight: 500;
     line-height: 160%;
     border: none;
- 
+
     &--disable {
       background-color: #cacaca;
     }

src/page/ShopRegistration/view/Mobile/ShopRegistrationComplete/ShopRegistrationComplete.module.scss

@@ -0,0 +1,106 @@
+@use "src/utils/styles/mediaQuery" as media;
+
+.content {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  @include media.media-breakpoint-down(mobile) {
+    height: calc(100vh - 200px);
+  }
+
+  &__complete {
+    width: 160px;
+    height: 160px;
+    border-radius: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 8px solid #f7941e;
+    margin-bottom: 72px;
+
+    @include media.media-breakpoint-down(mobile) {
+      width: 55px;
+      height: 55px;
+      border: 3px solid #f7941e;
+      margin-bottom: 25px;
+    }
+
+    &--check-image {
+      width: 74px;
+
+      @include media.media-breakpoint-down(mobile) {
+        width: 26px;
+      }
+    }
+  }
+
+  &__title {
+    display: block;
+    width: auto;
+    text-align: center;
+    font-size: 36px;
+    font-weight: 700;
+    color: #175c8e;
+    margin-bottom: 24px;
+
+    @include media.media-breakpoint-down(mobile) {
+      font-size: 24px;
+      margin-bottom: 18px;
+    }
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    margin-bottom: 80px;
+    color: #858585;
+  }
+
+  &__link {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 368px;
+    height: 48px;
+    font-weight: 500;
+    color: #ffffff;
+    background-color: #175c8e;
+    text-decoration: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    @include media.media-breakpoint-down(mobile) {
+      width: 82%;
+    }
+  }
+
+  &__more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 368px;
+    height: 48px;
+    font-weight: 500;
+    color: #ffffff;
+    background-color: #f7941e;
+    text-decoration: none;
+    margin-bottom: 24px;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    @include media.media-breakpoint-down(mobile) {
+      width: 82%;
+    }
+  }
+}

src/page/ShopRegistration/view/Mobile/ShopRegistrationComplete/index.tsx

@@ -0,0 +1,63 @@
+import { Link } from 'react-router-dom';
+import Check from 'assets/svg/auth/check.svg?react';
+import useStepStore from 'store/useStepStore';
+import useShopRegistrationStore from 'store/shopRegistration';
+import styles from './ShopRegistrationComplete.module.scss';
+
+interface CompleteProps {
+  title: string;
+  topText: string;
+  bottomText: string;
+}
+
+export default function ShopRegistrationComplete({
+  title, topText, bottomText,
+}: CompleteProps) {
+  const { setStep } = useStepStore();
+  const {
+    setCategory,
+    setCategoryId,
+    setImageUrls,
+    setName,
+    setAddress,
+    setPhone,
+    setDeliveryPrice,
+    setDescription,
+    setDelivery,
+    setPayBank,
+    setPayCard,
+  } = useShopRegistrationStore();
+
+  const initialize = () => {
+    setStep(0);
+    setCategory('');
+    setCategoryId(0);
+    setDelivery(false);
+    setDeliveryPrice(0);
+    setDescription('');
+    setImageUrls([]);
+    setName('');
+    setPayBank(false);
+    setPayCard(false);
+    setPhone('');
+    setAddress(''); // 전역 상태 초기화
+  };
+  return (
+    <div className={styles.content}>
+      <div className={styles.content__complete}>
+        <Check className={styles['content__complete--check-image']} />
+      </div>
+      <span className={styles.content__title}>{title}</span>
+      <div className={styles.content__text}>
+        <span>
+          {topText}
+        </span>
+        <span>
+          {bottomText}
+        </span>
+      </div>
+      <Link to="/owner" className={styles.content__more} onClick={initialize}>내 상점 바로가기</Link>
+      <Link to="/owner/shop-registration" className={styles.content__link} onClick={initialize}>가게 추가 등록하기</Link>
+    </div>
+  );
+}

src/page/ShopRegistration/view/Mobile/index.tsx

@@ -1,6 +1,6 @@
 import PreviousStep from 'component/Auth/PreviousStep';
 import ProgressBar from 'component/Auth/ProgressBar';
-import Complete from 'component/Auth/Complete';
+import ShopRegistrationComplete from 'page/ShopRegistration/view/Mobile/ShopRegistrationComplete';
 import SubTitle from 'component/Auth/SubTitle';
 import PROGRESS_TITLE from 'utils/constant/progress';
 import ShopEntry from 'page/ShopRegistration/view/Mobile/ShopEntry';
@@ -139,12 +139,10 @@ export default function ShopRegistrationMobile() {
         </>
         )}
         {step === 5 && (
-        <Complete
+        <ShopRegistrationComplete
           title="가게 등록 완료"
           topText="가게 등록이 완료되었습니다."
-          bottomText="업체 정보 수정은 내 상점에서 가능합니다."
-          link="/"
-          linkText="메인 화면 바로가기"
+          bottomText="가게 정보 수정은 내 상점에서 가능합니다."
         />
         )}
       </div>