From 6d907d98b71956c1fa9acd42c89ffce0a953d0af Mon Sep 17 00:00:00 2001
From: KimMurPin <50792467+daepan@users.noreply.github.com>
Date: Thu, 16 Jan 2025 16:24:44 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=80=EA=B2=8C=20=EB=93=B1=EB=A1=9D?=
 =?UTF-8?q?=EC=99=84=EB=A3=8C=20UI=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../view/Mobile/Main/Main.module.scss         |   3 +-
 .../view/Mobile/Main/index.tsx                |   6 +-
 .../ShopConfirmation.module.scss              |   2 +-
 .../ShopRegistrationComplete.module.scss      | 106 ++++++++++++++++++
 .../Mobile/ShopRegistrationComplete/index.tsx |  63 +++++++++++
 .../ShopRegistration/view/Mobile/index.tsx    |   8 +-
 6 files changed, 177 insertions(+), 11 deletions(-)
 create mode 100644 src/page/ShopRegistration/view/Mobile/ShopRegistrationComplete/ShopRegistrationComplete.module.scss
 create mode 100644 src/page/ShopRegistration/view/Mobile/ShopRegistrationComplete/index.tsx

diff --git a/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss b/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss
index 36f3164b..74003ca1 100644
--- a/src/page/ShopRegistration/view/Mobile/Main/Main.module.scss
+++ b/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;
diff --git a/src/page/ShopRegistration/view/Mobile/Main/index.tsx b/src/page/ShopRegistration/view/Mobile/Main/index.tsx
index 380ab083..9d9e8c96 100644
--- a/src/page/ShopRegistration/view/Mobile/Main/index.tsx
+++ b/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 () => {
diff --git a/src/page/ShopRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss b/src/page/ShopRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss
index b70818b7..a17f5c68 100644
--- a/src/page/ShopRegistration/view/Mobile/ShopConfirmation/ShopConfirmation.module.scss
+++ b/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;
     }
diff --git a/src/page/ShopRegistration/view/Mobile/ShopRegistrationComplete/ShopRegistrationComplete.module.scss b/src/page/ShopRegistration/view/Mobile/ShopRegistrationComplete/ShopRegistrationComplete.module.scss
new file mode 100644
index 00000000..d4d3aebe
--- /dev/null
+++ b/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%;
+    }
+  }
+}
diff --git a/src/page/ShopRegistration/view/Mobile/ShopRegistrationComplete/index.tsx b/src/page/ShopRegistration/view/Mobile/ShopRegistrationComplete/index.tsx
new file mode 100644
index 00000000..1a8786fa
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/page/ShopRegistration/view/Mobile/index.tsx b/src/page/ShopRegistration/view/Mobile/index.tsx
index 4c537164..e9a40c36 100644
--- a/src/page/ShopRegistration/view/Mobile/index.tsx
+++ b/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>