Nexters · sikkzz · Feb 15, 2025 · Feb 14, 2025 · Feb 14, 2025 · Feb 14, 2025
@@ -2,7 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"
+    />
     <title>misik</title>
   </head>
   <body>

@@ -46,8 +46,8 @@
   margin-top: 3.75rem;
 
   & > img {
-    width: 14.375rem;
-    height: 14.375rem;
+    width: 22.5rem;
+    height: 22.5rem;
   }
 }
 

@@ -15,10 +15,14 @@ const Home = () => {
 
   const { scanData } = useScanDataStore();
 
-  const { navigateToReceiptEdit } = useRoute();
+  const { navigateToReceiptEdit, navigateToRecognitionFail } = useRoute();
 
   useEffect(() => {
-    if (scanData.parsed && scanData.parsed.length > 0) {
+    if (scanData === "error") {
+      navigateToRecognitionFail();
+    }
+
+    if (typeof scanData !== "string" && scanData.parsed && scanData.parsed.length > 0) {
       navigateToReceiptEdit();
     }
   }, [scanData]);

@@ -1,5 +1,8 @@
 .Modal {
   padding: 1.875rem 1.25rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
   & > p {
     margin-top: 0.375rem;
@@ -16,25 +19,3 @@
     width: 8.75rem;
   }
 }
-
-.ShowButtonWrapper {
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  justify-self: center;
-  gap: 0.375rem;
-  margin-top: 0.25rem;
-  width: 6.6875rem;
-  height: 1.75rem;
-  cursor: pointer;
-
-  & > svg > path {
-    fill: rgba(0, 0, 0, 0.15);
-  }
-
-  &.isChecked {
-    & > svg > path {
-      fill: rgb(54, 54, 66);
-    }
-  }
-}
@@ -1,10 +1,5 @@
-import { useState } from "react";
-
-import classNames from "classnames";
-
 import styles from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss";
 import Button from "@/components/ui/Button/Button";
-import Icon from "@/components/ui/Icon/Icon";
 import Modal from "@/components/ui/Modal/Modal";
 import Text from "@/components/ui/Text/Text";
 
@@ -18,13 +13,8 @@ interface HomeNavigateConfirmModalProps {
 }
 
 const HomeNavigateConfirmModalStory = ({ isOpen, handleClose }: HomeNavigateConfirmModalProps) => {
-  const [isShowButtonChecked, setIsShowButtonChecked] = useState(false);
-
-  const handleShowButtonClick = () => {
-    setIsShowButtonChecked((prev) => !prev);
-  };
   return (
-    <Modal isOpen={isOpen} onClose={handleClose}>
+    <Modal isOpen={isOpen}>
       <div className={styles.Modal}>
         <Text variant="titleSm" color="primary" align="center" as="h2">
           홈으로 가시겠어요?
@@ -36,17 +26,6 @@ const HomeNavigateConfirmModalStory = ({ isOpen, handleClose }: HomeNavigateConf
           <Button text="아니요" variant="tertiary" onClick={handleClose} />
           <Button text="네" variant="primary" onClick={handleClose} />
         </div>
-        <button
-          className={classNames(styles.ShowButtonWrapper, {
-            [styles.isChecked]: isShowButtonChecked,
-          })}
-          onClick={handleShowButtonClick}
-        >
-          <Icon name="checkCircle" />
-          <Text variant="bodyXsm" color={isShowButtonChecked ? "primary" : "tertiary"}>
-            다시 안볼래요
-          </Text>
-        </button>
       </div>
     </Modal>
   );

@@ -1,10 +1,5 @@
-import { useState } from "react";
-
-import classNames from "classnames";
-
 import styles from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss";
 import Button from "@/components/ui/Button/Button";
-import Icon from "@/components/ui/Icon/Icon";
 import Modal from "@/components/ui/Modal/Modal";
 import Text from "@/components/ui/Text/Text";
 
@@ -14,35 +9,27 @@ import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
-interface HomeNavigateConfirmModalProps {
+export interface ModalProps {
   isOpen: boolean;
   handleClose: () => void;
 }
 
-const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmModalProps) => {
+const HomeNavigateConfirmModal = ({ isOpen, handleClose }: ModalProps) => {
   const { navigateToHome } = useRoute();
 
   const { resetGenerateReviewData } = useGenerateReviewStore();
   const { resetCreateReviewData } = useCreateReviewStore();
   const { resetScanData } = useScanDataStore();
 
-  // 이후 상태 초기값 재설정
-  const [isShowButtonChecked, setIsShowButtonChecked] = useState(false);
-
-  const handleShowButtonClick = () => {
-    setIsShowButtonChecked((prev) => !prev);
-  };
-
   const handleNavigateHome = () => {
-    handleClose();
     resetGenerateReviewData();
     resetCreateReviewData();
     resetScanData();
     navigateToHome();
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={handleClose}>
+    <Modal isOpen={isOpen}>
       <div className={styles.Modal}>
         <Text variant="titleSm" color="primary" align="center" as="h2">
           홈으로 가시겠어요?
@@ -54,17 +41,6 @@ const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmMo
           <Button text="아니요" variant="tertiary" onClick={handleClose} />
           <Button text="네" variant="primary" onClick={handleNavigateHome} />
         </div>
-        <button
-          className={classNames(styles.ShowButtonWrapper, {
-            [styles.isChecked]: isShowButtonChecked,
-          })}
-          onClick={handleShowButtonClick}
-        >
-          <Icon name="checkCircle" />
-          <Text variant="bodyXsm" color={isShowButtonChecked ? "primary" : "tertiary"}>
-            다시 안볼래요
-          </Text>
-        </button>
       </div>
     </Modal>
   );

@@ -4,6 +4,7 @@
   padding-bottom: 2.5rem;
   height: calc(100vh - 2.75rem);
   overflow: hidden;
+  overflow-y: auto;
   position: relative;
   display: flex;
   flex-direction: column;
@@ -52,4 +53,5 @@
   align-items: center;
   gap: 0.875rem;
   z-index: 1;
+  margin-top: 2.5rem;
 }
@@ -10,7 +10,44 @@ import { useRoute } from "@/hooks/common/useRoute";
 import { useCreateReviewStore } from "@/store/useReviewStore";
 import { useScanDataStore } from "@/store/useScanDataStore";
 
+const useKeyboardAvoidance = () => {
+  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardHeight, setKeyboardHeight] = useState(0);
+
+  useEffect(() => {
+    const handleVisualViewportChange = () => {
+      const isKeyboardVisible = !!(
+        window.visualViewport && window.visualViewport.height < window.innerHeight
+      );
+      setKeyboardVisible(isKeyboardVisible);
+
+      if (isKeyboardVisible) {
+        setKeyboardHeight(
+          window.visualViewport ? window.innerHeight - window.visualViewport.height : 0,
+        );
+      } else {
+        setKeyboardHeight(0);
+      }
+    };
+
+    if (window.visualViewport) {
+      window.visualViewport.addEventListener("resize", handleVisualViewportChange);
+      handleVisualViewportChange();
+    }
+
+    return () => {
+      if (window.visualViewport) {
+        window.visualViewport.removeEventListener("resize", handleVisualViewportChange);
+      }
+    };
+  }, []);
+
+  return { keyboardVisible, keyboardHeight };
+};
+
 const ReceiptEdit = () => {
+  const { keyboardVisible, keyboardHeight } = useKeyboardAvoidance();
+
   const { navigateToHome, navigateToSelectTag } = useRoute();
 
   const { scanData, resetScanData } = useScanDataStore();
@@ -21,14 +58,16 @@ const ReceiptEdit = () => {
   const [focusState, setFocusState] = useState<{ [key: string]: boolean }>({});
 
   useEffect(() => {
-    if (Array.isArray(scanData.parsed) && scanData.parsed.length > 0) {
+    if (
+      typeof scanData !== "string" &&
+      Array.isArray(scanData.parsed) &&
+      scanData.parsed.length > 0
+    ) {
       setFormData(scanData.parsed);
 
       const initialFocusState = scanData.parsed.reduce(
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (acc: any, data: any) => {
-          const keys = Object.keys(data);
-          keys.forEach((key) => (acc[key] = false));
+        (acc: { [key: string]: boolean }, data: { key: string; value: string }) => {
+          acc[data.key] = false;
           return acc;
         },
         {} as { [key: string]: boolean },
@@ -45,14 +84,9 @@ const ReceiptEdit = () => {
     setFocusState((prevState) => ({ ...prevState, [key]: false }));
   };
 
-  const handleInputChange = (index: number, key: string, value: string) => {
+  const handleInputChange = (key: string, value: string) => {
     setFormData((prevData) =>
-      prevData.map((item, idx) => {
-        if (idx === index) {
-          return { ...item, [key]: value };
-        }
-        return item;
-      }),
+      prevData.map((item) => (item.key === key ? { ...item, value } : item)),
     );
   };
 
@@ -105,15 +139,20 @@ const ReceiptEdit = () => {
                   onFocus={() => handleFocus(data.key)}
                   onBlur={() => handleBlur(data.key)}
                   isFocus={focusState[data.key] || false}
-                  onChange={(e) => handleInputChange(index, data.key, e.target.value)}
+                  onChange={(e) => handleInputChange(data.key, e.target.value)}
                 />
               </div>
             </div>
           ))}
         </div>
       </div>
 
-      <div className={styles.Bottom}>
+      <div
+        className={styles.Bottom}
+        style={{
+          marginBottom: keyboardVisible ? `${keyboardHeight}px` : "0",
+        }}
+      >
         {Object.values(focusState).some((isFocus) => isFocus) ? (
           <Button
             text="수정하기"

@@ -22,15 +22,31 @@
   }
 }
 
-.Title {
+.Top {
   z-index: 1;
+}
+
+.Title {
   margin-top: 2.5rem;
 
   & > h2 {
     margin-top: 0.625rem;
   }
 }
 
+.ExampleButtonBox {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+
+  button {
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.875rem;
+    background-color: var(--color-white);
+    width: 5.9375rem;
+  }
+}
+
 .Image {
   display: flex;
   justify-content: center;
@@ -43,6 +59,14 @@
   }
 }
 
+.Bottom {
+  z-index: 1;
+
+  button {
+    margin-top: 2.5rem;
+  }
+}
+
 .StyleButtonList {
   display: flex;
   flex-direction: column;
@@ -63,10 +87,3 @@
     }
   }
 }
-
-.Bottom {
-  display: flex;
-  align-items: center;
-  gap: 0.875rem;
-  z-index: 1;
-}