[Refactor/#103] 2차 디자인 QA 사항 반영

src/components/Home/Home.module.scss

@@ -46,8 +46,10 @@
   margin-top: 3.75rem;
 
   & > img {
-    width: 22.5rem;
-    height: 22.5rem;
+    width: 14.375rem;
+    height: 14.375rem;
+    box-shadow: 0px 0px 2.5rem 0.625rem #fff;
+    border-radius: 100%;
   }
 }
 

src/components/ReceiptEdit/ReceiptEdit.module.scss

@@ -4,13 +4,19 @@
   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);
 
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
   &::before {
     content: "";
     background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat;

src/components/RecognitionFail/RecognitionFail.module.scss

@@ -10,8 +10,7 @@
   background: var(--color-bg-gradient);
 
   .Title {
-    padding-top: 5rem;
-    padding-bottom: 1.25rem;
+    padding-top: 3.75rem;
 
     display: flex;
     flex-direction: column;

src/components/SelectStyle/SelectStyle.module.scss

@@ -30,7 +30,7 @@
   margin-top: 2.5rem;
 
   & > h2 {
-    margin-top: 0.625rem;
+    margin-top: 0.5rem;
   }
 }
 
@@ -54,16 +54,16 @@
   z-index: 1;
 
   & > img {
-    width: 13.125rem;
-    height: 13.125rem;
+    width: 17.5rem;
+    height: 17.5rem;
   }
 }
 
 .Bottom {
   z-index: 1;
 
   button {
-    margin-top: 2.5rem;
+    margin-top: 1.875rem;
   }
 }
 

src/components/SelectStyle/SelectStyle.tsx

@@ -21,15 +21,15 @@ interface StyleProps {
 }
 
 const IMG_STYLE_DATA = [
-  { name: "친근한 말투", image: "/assets/img/img-style-friendly.png" },
-  { name: "믿음직한 말투", image: "/assets/img/img-style-trust.png" },
-  { name: "유쾌한 말투", image: "/assets/img/img-style-cute.png" },
+  { name: "친근한 말투", image: "/assets/img/img-style-friendly.webp" },
+  { name: "믿음직한 말투", image: "/assets/img/img-style-trust.webp" },
+  { name: "귀여운 말투", image: "/assets/img/img-style-cute.webp" },
 ];
 
 const STYLE_NAME_MAPPING: { [key: string]: string } = {
   "친근한 말투": "FRIENDLY",
   "유쾌한 말투": "CUTE",
-  "믿음직한 말투": "PROFESSIONAL",
+  "귀여운 말투": "PROFESSIONAL",
 };
 
 const SelectStyle = () => {

src/components/ui/Toast/Toast.module.scss

@@ -22,7 +22,7 @@
 .Toast {
   width: 100%;
   height: 3.25rem;
-  z-index: 1;
+  z-index: 2;
   border-radius: 0.75rem;
   background-color: white;
   padding: 0.875rem 1.125rem;

src/pages/CreateReviewFailPage/CreateReviewFailPage.module.scss

@@ -16,13 +16,12 @@
 }
 
 .Image {
-  margin-top: 6.25rem;
   display: flex;
   justify-content: center;
   align-items: center;
 
   & > img {
-    width: 22.5rem;
-    height: 22.5rem;
+    width: 20rem;
+    height: 20rem;
   }
 }

src/pages/CreateReviewFailPage/CreateReviewFailPage.tsx

@@ -5,9 +5,24 @@ import { useRoute } from "@/hooks/common/useRoute";
 
 import styles from "@/pages/CreateReviewFailPage/CreateReviewFailPage.module.scss";
 
+import { useGenerateReviewStore } from "@/store/useGenerateReviewStore";
+import { useCreateReviewStore } from "@/store/useReviewStore";
+import { useScanDataStore } from "@/store/useScanDataStore";
+
 const CreateReviewFailPage = () => {
   const { navigateToHome } = useRoute();
 
+  const { resetGenerateReviewData } = useGenerateReviewStore();
+  const { resetCreateReviewData } = useCreateReviewStore();
+  const { resetScanData } = useScanDataStore();
+
+  const handleNavigateHome = () => {
+    resetGenerateReviewData();
+    resetCreateReviewData();
+    resetScanData();
+    navigateToHome();
+  };
+
   return (
     <div className={styles.CreateReviewFail}>
       <div className={styles.Top}>
@@ -17,12 +32,12 @@ const CreateReviewFailPage = () => {
         <Text color="secondary" variant="bodyLg" align="center" as="h2">
           {`네트워크 오류로 인해 리뷰 생성에\n실패했어요. 다시 시도해주세요.`}
         </Text>
+      </div>
 
-        <div className={styles.Image}>
-          <img src="/assets/img/img-graphic-logo-blur.png" alt="createReviewFailImg" />
-        </div>
+      <div className={styles.Image}>
+        <img src="/assets/img/img-graphic-logo-blur.webp" alt="createReviewFailImg" />
       </div>
-      <Button text="홈으로 가기" onClick={navigateToHome} />
+      <Button text="홈으로 가기" onClick={handleNavigateHome} />
     </div>
   );
 };

src/pages/ReviewResultPage/ReviewResultPage.module.scss

@@ -1,5 +1,5 @@
 .ReviewResult {
-  padding: 3.75rem 1.25rem 2.5rem;
+  padding: 2.5rem 1.25rem;
   height: 100vh;
   overflow: hidden;
   position: relative;
@@ -8,6 +8,13 @@
   background: var(--color-bg-gradient);
   justify-content: space-between;
 
+  overflow-y: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
   &::before {
     content: "";
     background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat;
@@ -28,7 +35,7 @@
   .TitleBox {
     display: flex;
     justify-content: center;
-    margin: 1.875rem 0;
+    margin: 1.25rem 0;
   }
 }
 
@@ -44,17 +51,18 @@
   z-index: 1;
   display: grid;
   grid-template-columns: 30% 1fr;
+  margin-top: 1.25rem;
 }
 
-.ReceiptImage {
+.Image {
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1;
 
   & > img {
-    width: 7.5rem;
-    height: 7.5rem;
+    width: 10rem;
+    height: 10rem;
   }
 }
 

src/pages/ReviewResultPage/ReviewResultPage.tsx

@@ -70,8 +70,8 @@ export default function ReviewResultPage() {
   return (
     <div className={styles.ReviewResult}>
       <div className={styles.Top}>
-        <div className={styles.ReceiptImage}>
-          <img src="/assets/img/img-style-cute-circle.png" alt="mainLogo" />
+        <div className={styles.Image}>
+          <img src="/assets/img/img-style-friendly-circle.webp" alt="mainLogo" />
         </div>
         <div className={styles.TitleBox}>
           <Text variant="titleM" color="gradient" as="h1" truncated>