refactor: 스크롤 페이지 버튼 수정

Author: sikkzz

src/components/ReceiptEdit/ReceiptEdit.module.scss

@@ -55,9 +55,25 @@
 }
 
 .Bottom {
+  z-index: 2;
+  position: fixed;
   display: flex;
   align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 7rem;
+  left: 0;
+  bottom: 0;
   gap: 0.875rem;
-  z-index: 1;
-  margin-top: 2.5rem;
+  background: linear-gradient(
+    180deg,
+    rgba(220, 220, 232, 0) 0%,
+    rgba(220, 220, 232, 1) 20%,
+    rgba(220, 220, 232, 1) 100%
+  );
+
+  & > button {
+    margin-top: 1.25rem;
+    width: calc(50% - 1.25rem);
+  }
 }

src/components/ui/Button/Button.module.scss

@@ -15,11 +15,11 @@
 
   &.style-tertiary {
     background-color: var(--color-gray200);
-    color: var(--color-text-secondary);
+    color: var(--color-text-tertiary);
   }
 
   &:disabled {
-    background-color: var(--color-gray350);
+    background-color: var(--color-disabled);
     color: var(--color-text-tertiary);
     cursor: not-allowed;
   }

src/pages/ReceiptInputPage/ReceiptInputPage.tsx

@@ -82,12 +82,10 @@ const ReceiptInputPage = () => {
           <Text variant="titleM" color="primary" align="center" as="h1">
             {formData.find((item) => item.key === "place")?.value
               ? `${formData.find((item) => item.key === "place")?.value}에`
-              : "영수증 정보를"}
+              : "가게명과 메뉴명을"}
           </Text>
           <Text variant="titleM" color="primary" as="h1" align="center">
-            {formData.find((item) => item.key === "place")?.value
-              ? "다녀오셨네요!"
-              : "입력해주세요!"}
+            {formData.find((item) => item.key === "place")?.value ? "다녀오셨네요!" : "알려주세요!"}
           </Text>
 
           <div className={styles.InfoList}>
@@ -110,7 +108,7 @@ const ReceiptInputPage = () => {
 
         <div className={styles.Bottom}>
           {Object.values(focusState).some((isFocus) => isFocus) ? (
-            <Button key="edit" text="수정하기" />
+            <Button key="edit" text="다음" />
           ) : (
             <Button
               key="confirm"

src/styles/_variables.scss

@@ -18,6 +18,7 @@
   --color-text-secondary: #68696e;
   --color-text-tertiary: #a6a6ad;
   --color-text-quarternary: #e0e0e0;
+  --color-disabled: #ebecf0;
   --color-text-gradient: linear-gradient(
     90deg,
     var(--color-primary-pink),
@@ -35,7 +36,6 @@
   --color-gray100: #f8f8f8;
   --color-gray200: #ebecf0;
   --color-gray300: #e1e2e8;
-  --color-gray350: #dcdde3;
   --color-gray400: #00000026;
   --color-gray500: #00000040;
   --color-gray600: #363642;