[Refactor/#94] 영수증 정보 직접 입력 페이지 수정

src/components/ReceiptEdit/ReceiptEdit.tsx

@@ -10,44 +10,42 @@ 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 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();
@@ -84,9 +82,9 @@ const ReceiptEdit = () => {
     setFocusState((prevState) => ({ ...prevState, [key]: false }));
   };
 
-  const handleInputChange = (key: string, value: string) => {
+  const handleInputChange = (index: number, value: string) => {
     setFormData((prevData) =>
-      prevData.map((item) => (item.key === key ? { ...item, value } : item)),
+      prevData.map((item, idx) => (idx === index ? { ...item, value } : item)),
     );
   };
 
@@ -129,39 +127,39 @@ const ReceiptEdit = () => {
         <div className={styles.InfoList}>
           {formData.map((data, index) => (
             <div key={index} className={styles.InfoItem}>
-              <div className={styles.InfoItem}>
-                <Text variant="bodyXsm" color="secondary">
-                  {data.key}
-                </Text>
-                <Input
-                  placeholder={`${data.key} 입력`}
-                  value={data.value}
-                  onFocus={() => handleFocus(data.key)}
-                  onBlur={() => handleBlur(data.key)}
-                  isFocus={focusState[data.key] || false}
-                  onChange={(e) => handleInputChange(data.key, e.target.value)}
-                />
-              </div>
+              <Text variant="bodyXsm" color="secondary">
+                {data.key}
+              </Text>
+              <Input
+                placeholder={`${data.key} 입력`}
+                value={data.value}
+                onFocus={() => handleFocus(index.toString())}
+                onBlur={() => handleBlur(index.toString())}
+                isFocus={focusState[index.toString()] || false}
+                onChange={(e) => handleInputChange(index, e.target.value)}
+              />
             </div>
           ))}
         </div>
       </div>
 
-      <div
-        className={styles.Bottom}
-        style={{
-          marginBottom: keyboardVisible ? `${keyboardHeight}px` : "0",
-        }}
-      >
+      <div className={styles.Bottom}>
         {Object.values(focusState).some((isFocus) => isFocus) ? (
           <Button
+            key="edit"
             text="수정하기"
             disabled={formData.some((item) => Object.values(item).some((value) => !value))}
           />
         ) : (
           <>
-            <Button text="다시 스캔하기" variant="secondary" onClick={handleReScanClick} />
             <Button
+              key="scan"
+              text="다시 스캔하기"
+              variant="secondary"
+              onClick={handleReScanClick}
+            />
+            <Button
+              key="confirm"
               text="정보가 맞아요"
               disabled={formData.some((item) => Object.values(item).some((value) => !value))}
               onClick={handleInfoRightClick}

src/components/RecognitionFail/RecognitionFail.tsx

@@ -9,7 +9,7 @@ import { useRoute } from "@/hooks/common/useRoute";
 const RecognitionFail = () => {
   const { send } = useAppBridge();
 
-  const { navigateToReceiptEdit } = useRoute();
+  const { navgateToReceiptInput } = useRoute();
 
   return (
     <div className={styles.RecognitionFail}>
@@ -25,7 +25,7 @@ const RecognitionFail = () => {
         <img src="/assets/img/img-recognition-fail.png" alt="recognitionFailImg" />
       </div>
       <div className={styles.Bottom}>
-        <Button text="직접 입력하기" variant="secondary" onClick={navigateToReceiptEdit} />
+        <Button text="직접 입력하기" variant="secondary" onClick={navgateToReceiptInput} />
         <Button
           text="다시 촬영하기"
           variant="secondary"

src/components/SelectTag/SelectTag.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import styles from "@/components/SelectTag/SelectTag.module.scss";
 import TagSheet from "@/components/SelectTag/TagSheet/TagSheet";
@@ -13,48 +13,35 @@ import { useCreateReviewStore } from "@/store/useReviewStore";
 const SelectTag = () => {
   const { navigateToSelectStyle } = useRoute();
 
-  const { setHashTag } = useCreateReviewStore();
+  const { createReviewData, setHashTag, setTagList } = useCreateReviewStore();
+
+  const { tagList, hashTag } = createReviewData;
 
-  const [selectedTagList, setSelectedTagList] = useState<string[]>([]);
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
-  const [tagList, setTagList] = useState<string[]>([
-    "음식이 맛있어요",
-    "양이 많아요",
-    "가성비가 좋아요",
-    "메뉴 구성이 알차요",
-    "매장이 넓어요",
-    "단체모임 하기 좋아요",
-    "뷰가 좋아요",
-    "아늑해요",
-    "분위기가 좋아요",
-    "친절해요",
-    "매장이 청결해요",
-  ]);
-
-  const handleTagClick = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-    const tag = e.currentTarget.textContent || "";
-
-    setSelectedTagList((prevSelectedTags) =>
-      prevSelectedTags.includes(tag)
-        ? prevSelectedTags.filter((selectedTag) => selectedTag !== tag)
-        : [...prevSelectedTags, tag],
-    );
+
+  useEffect(() => {
+    setHashTag(hashTag);
+  }, [hashTag, setHashTag]);
+
+  const handleTagClick = (tag: string) => {
+    const newSelectedTags = hashTag.includes(tag)
+      ? hashTag.filter((selectedTag) => selectedTag !== tag)
+      : [...hashTag, tag];
+
+    setHashTag(newSelectedTags);
   };
 
   const handleTagAdd = (newTag: string) => {
     setIsBottomSheetOpen(false);
-    if (!tagList.includes(newTag)) {
-      setTagList((prevTagList: string[]) => [...prevTagList, newTag]);
-      setSelectedTagList((prevSelectedTags) => [...prevSelectedTags, newTag]);
-    }
+    setTagList([...tagList, newTag]);
+    setHashTag([...hashTag, newTag]);
   };
 
   const handleSheetClose = () => {
     setIsBottomSheetOpen(false);
   };
 
   const handleNextClick = () => {
-    setHashTag(selectedTagList);
     navigateToSelectStyle();
   };
 
@@ -74,8 +61,8 @@ const SelectTag = () => {
             <Tag
               text={tag}
               key={tag}
-              onClick={handleTagClick}
-              isSelect={selectedTagList.includes(tag)}
+              onClick={() => handleTagClick(tag)}
+              isSelect={hashTag.includes(tag)}
             />
           ))}
           <Tag variant="add" onClick={() => setIsBottomSheetOpen(true)} />

src/constants/path.ts

@@ -2,6 +2,7 @@ export const PATH = {
   HOME: "/",
   RECOGNITION_FAIL: "/recognition-fail",
   RECEIPT_EDIT: "/receipt-edit",
+  RECEIPT_INPUT: "/receipt-input",
   SELECT_TAG: "/select-tag",
   SELECT_STYLE: "/select-style",
   REVIEW_RESULT: "/review-result",

src/hooks/common/useRoute.ts

@@ -9,6 +9,7 @@ export const useRoute = () => {
     navigateToHome: () => navigate(PATH.HOME),
     navigateToBack: () => navigate(-1),
     navigateToReceiptEdit: () => navigate(PATH.RECEIPT_EDIT),
+    navgateToReceiptInput: () => navigate(PATH.RECEIPT_INPUT),
     navigateToRecognitionFail: () => navigate(PATH.RECOGNITION_FAIL),
     navigateToSelectStyle: () => navigate(PATH.SELECT_STYLE),
     navigateToSelectTag: () => navigate(PATH.SELECT_TAG),

src/pages/ReceiptInputPage/ReceiptInputPage.module.scss

@@ -0,0 +1,49 @@
+.ReceiptInput {
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 2.5rem;
+  height: calc(100vh - 2.75rem);
+  overflow: hidden;
+  overflow-y: auto;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background: var(--color-bg-gradient);
+
+  &::before {
+    content: "";
+    background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat;
+    background-size: 100% 16.375rem;
+    filter: blur(4.625rem);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+  }
+}
+
+.Top {
+  z-index: 1;
+  margin-top: 2.5rem;
+}
+
+.InfoList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.875rem;
+  margin-top: 1.5rem;
+}
+
+.InfoItem {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.Bottom {
+  z-index: 1;
+  margin-top: 2.5rem;
+}