refactor: navbar 제거, 일부 여백 스타일 수정

Author: sikkzz

src/components/ReviewResult/ReviewResult.module.scss

@@ -1,7 +1,6 @@
 .ReviewResult {
-  padding: 1.25rem;
-  padding-bottom: 2.5rem;
-  height: calc(100vh - 2.75rem);
+  padding: 3.75rem 1.25rem 2.5rem;
+  height: 100vh;
   overflow: hidden;
   position: relative;
   display: flex;

src/components/SelectStyle/SelectStyle.tsx

@@ -20,15 +20,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.png" },
+  { name: "믿음직한 말투", image: "/assets/img/img-style-trust.png" },
+  { name: "유쾌한 말투", image: "/assets/img/img-style-cute.png" },
 ];
 
 const STYLE_NAME_MAPPING: { [key: string]: string } = {
-  "친절한 미식가": "FRIENDLY",
-  "귀여운 미식가": "CUTE",
-  "믿음직한 미식가": "PROFESSIONAL",
+  "친근한 말투": "FRIENDLY",
+  "유쾌한 말투": "CUTE",
+  "믿음직한 말투": "PROFESSIONAL",
 };
 
 const SelectStyle = () => {
@@ -72,7 +72,7 @@ const SelectStyle = () => {
   return (
     <div className={styles.SelectStyle}>
       <div className={styles.Title}>
-        <Text variant="titleM" color="primary" align="center" as="h1">
+        <Text variant="titleM" color="purpleGradient" align="center" as="h1">
           어떤 말투로 작성할까요?
         </Text>
         <Text variant="bodyLg" color="secondary" align="center" as="h2">

src/components/ui/Text/Text.module.scss

@@ -4,7 +4,17 @@
   line-height: 1.5;
 
   @each $color-name
-    in ("white", "black", "primary", "secondary", "tertiary", "quarternary", "gradient", "error")
+    in (
+      "white",
+      "black",
+      "primary",
+      "secondary",
+      "tertiary",
+      "quarternary",
+      "gradient",
+      "error",
+      "purpleGradient"
+    )
   {
     @if $color-name == "gradient" {
       &.color-#{$color-name} {
@@ -13,6 +23,13 @@
         background-clip: text;
         -webkit-text-fill-color: transparent;
       }
+    } @else if $color-name == "purpleGradient" {
+      &.color-#{$color-name} {
+        background: var(--color-text-purpleGradient);
+        -webkit-background-clip: text;
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
     } @else {
       &.color-#{$color-name} {
         color: var(--color-text-#{$color-name});

src/components/ui/Text/Text.types.ts

@@ -20,7 +20,8 @@ type TextColor =
   | "tertiary"
   | "quarternary"
   | "gradient"
-  | "error";
+  | "error"
+  | "purpleGradient";
 
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
   as?: React.ElementType;

src/pages/ReviewResultPage.tsx

@@ -1,16 +1,10 @@
 import { useEffect, useState } from "react";
 
-import Navbar from "@/components/common/Navbar/Navbar";
 import CreateReviewLoading from "@/components/CreateReviewLoading/CreateReviewLoading";
 import ReviewResult from "@/components/ReviewResult/ReviewResult";
-import Icon from "@/components/ui/Icon/Icon";
-
-import { useRoute } from "@/hooks/common/useRoute";
 
 // 로딩 코드 api 연결 후 삭제
 export default function ReviewResultPage() {
-  const { navigateToBack } = useRoute();
-
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
@@ -25,18 +19,5 @@ export default function ReviewResultPage() {
     return <CreateReviewLoading />;
   }
 
-  return (
-    <>
-      {!isLoading && (
-        <>
-          <Navbar>
-            <Navbar.LeftButton onClick={navigateToBack}>
-              <Icon name="leftArrow" />
-            </Navbar.LeftButton>
-          </Navbar>
-          <ReviewResult />
-        </>
-      )}
-    </>
-  );
+  return <>{!isLoading && <ReviewResult />}</>;
 }

src/styles/_variables.scss

@@ -24,6 +24,11 @@
     var(--color-primary-purple)
   );
   --color-text-error: #d45085;
+  --color-text-purpleGradient: linear-gradient(
+    90deg,
+    var(--color-primary-purple),
+    var(--color-gray600)
+  );
 
   --color-white: #ffffff;
   --color-black: #000000;