feat: ux 개선

BCSDLab · Sep 12, 2024 · c5d9ba8 · c5d9ba8
1 parent 751feba
commit c5d9ba8
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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({