From c5d9ba8d09d306ebb603976b4ea2c6196270158d Mon Sep 17 00:00:00 2001
From: chaeseungyun <thslr57@naver.com>
Date: Thu, 12 Sep 2024 09:44:14 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20ux=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../fileUploadModal/fileUploadModal.module.scss       | 11 +++++++++++
 .../Auth/Signup/components/fileUploadModal/index.tsx  |  1 +
 .../Auth/Signup/components/ownerInfoStep/index.tsx    |  2 +-
 .../ownerInfoStep/ownerInfoStep.module.scss           |  5 +++++
 src/page/Auth/components/Common/index.module.scss     |  6 ++++++
 src/page/Auth/components/Common/index.tsx             |  5 ++++-
 6 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/page/Auth/Signup/components/fileUploadModal/fileUploadModal.module.scss b/src/page/Auth/Signup/components/fileUploadModal/fileUploadModal.module.scss
index d65cb960..effdb32c 100644
--- a/src/page/Auth/Signup/components/fileUploadModal/fileUploadModal.module.scss
+++ b/src/page/Auth/Signup/components/fileUploadModal/fileUploadModal.module.scss
@@ -56,6 +56,12 @@
     font-weight: 500;
     background-color: white;
     color: #4b4b4b;
+    transition: scale 0.25s;
+    cursor: pointer;
+
+    &:active {
+      scale: 0.95;
+    }
   }
 
   &--upload {
@@ -67,6 +73,11 @@
     font-weight: 500;
     background-color: #175c8e;
     color: white;
+    transition: scale 0.25s;
     cursor: pointer;
+
+    &:active {
+      scale: 0.95;
+    }
   }
 }
diff --git a/src/page/Auth/Signup/components/fileUploadModal/index.tsx b/src/page/Auth/Signup/components/fileUploadModal/index.tsx
index 0b50d452..166be874 100644
--- a/src/page/Auth/Signup/components/fileUploadModal/index.tsx
+++ b/src/page/Auth/Signup/components/fileUploadModal/index.tsx
@@ -34,6 +34,7 @@ export default function FileUploadModal({ onClose, onUpload }: FileUploadModalPr
           <input
             type="file"
             multiple
+            accept="image/*"
             className={styles['file-input']}
             onChange={handleFileChange}
             style={{ display: 'none' }}
diff --git a/src/page/Auth/Signup/components/ownerInfoStep/index.tsx b/src/page/Auth/Signup/components/ownerInfoStep/index.tsx
index a5ca90e0..d9f7582e 100644
--- a/src/page/Auth/Signup/components/ownerInfoStep/index.tsx
+++ b/src/page/Auth/Signup/components/ownerInfoStep/index.tsx
@@ -141,7 +141,7 @@ export default function OwnerInfoStep({ onSearch, setIsStepComplete }: OwnerInfo
           <button
             type="button"
             className={styles['search-button']}
-            onClick={onSearch}
+            onClick={() => setTimeout(onSearch, 250)}
           >
             가게 검색
           </button>
diff --git a/src/page/Auth/Signup/components/ownerInfoStep/ownerInfoStep.module.scss b/src/page/Auth/Signup/components/ownerInfoStep/ownerInfoStep.module.scss
index 92bf298e..0c4a86bd 100644
--- a/src/page/Auth/Signup/components/ownerInfoStep/ownerInfoStep.module.scss
+++ b/src/page/Auth/Signup/components/ownerInfoStep/ownerInfoStep.module.scss
@@ -103,6 +103,11 @@
   color: #fff;
   font-size: 13px;
   font-weight: 500;
+  transition: scale 0.25s;
+
+  &:active {
+    scale: 0.95;
+  }
 }
 
 .shop-name,
diff --git a/src/page/Auth/components/Common/index.module.scss b/src/page/Auth/components/Common/index.module.scss
index 0d09b2f2..bdc9e0ea 100644
--- a/src/page/Auth/components/Common/index.module.scss
+++ b/src/page/Auth/components/Common/index.module.scss
@@ -92,5 +92,11 @@
     border-radius: 4px;
     font-weight: 600;
     color: white;
+    cursor: pointer;
+    transition: scale 0.25s;
+
+    &:active {
+      scale: 0.95;
+    }
   }
 }
diff --git a/src/page/Auth/components/Common/index.tsx b/src/page/Auth/components/Common/index.tsx
index b2a1d821..1735a45d 100644
--- a/src/page/Auth/components/Common/index.tsx
+++ b/src/page/Auth/components/Common/index.tsx
@@ -9,6 +9,7 @@ import { phoneRegisterUser } from 'api/register';
 import { isKoinError, sendClientError } from '@bcsdlab/koin';
 import { useStep } from 'page/Auth/hook/useStep';
 import sha256 from 'utils/ts/SHA-256';
+import { useDebounce } from 'utils/hooks/useDebounce';
 // eslint-disable-next-line
 import Done from '../Done/index';
 import styles from './index.module.scss';
@@ -118,6 +119,8 @@ export default function CommonLayout() {
     }
   };
 
+  const debounce = useDebounce<null>(stepCheck, null);
+
   const handleSelectComplete = () => {
     setIsSearch(false);
     steps.setIsStepComplete(true);
@@ -165,7 +168,7 @@ export default function CommonLayout() {
           {!isComplete && !isSearch && (
             <button
               type="button"
-              onClick={stepCheck}
+              onClick={debounce}
               disabled={!isStepComplete}
               className={
                 cn({