feat: FooterSection 컴포넌트의 스타일 및 구조 개선, 링크 추가

Author: toothlessdev

mosu-app/src/widgets/home/FooterSection.module.scss

@@ -1,7 +1,7 @@
 .footer_section {
     position: relative;
 
-    height: 1500px;
+    height: fit-content;
 
     overflow: clip;
 
@@ -10,39 +10,47 @@
 
     &__image {
         position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+
         z-index: 0;
 
+        width: 80%;
         height: 100%;
-        width: 100%;
+        max-width: 1000px;
+
+        margin: 0px auto;
 
         padding-left: 0.25rem;
         padding-right: 0.25rem;
 
-        object-fit: cover;
+        object-fit: contain;
     }
 
     &__content {
-        position: absolute;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        gap: 4rem;
+
         z-index: 1;
-        top: 50%;
-        left: 50%;
 
         width: 100%;
+        height: 80%;
 
-        transform: translate(-50%, -50%);
+        margin: 0px auto;
 
         text-align: center;
-        font-weight: bold;
 
         &__title {
             position: relative;
-            top: -280px;
 
             display: flex;
             flex-direction: column;
 
-            font-size: 2.5rem;
-
+            font-size: 1.25rem;
             @media (max-width: 1023px) {
                 font-size: 2rem;
             }
@@ -53,6 +61,8 @@
     }
 
     &__call_to_action {
+        z-index: 1;
+
         display: flex;
         justify-content: center;
         gap: 1.5rem;
@@ -73,14 +83,14 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: 0.75rem;
+    gap: 0.5rem;
 
-    width: 17rem;
+    width: 210px;
 
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     border-radius: 9999px;
-    padding: 0.75rem 1rem 0.75rem 1rem;
+    padding: 0.5rem 1rem;
 
     background-color: #fff;
 
@@ -90,7 +100,6 @@
     }
 
     span:first-of-type {
-        margin-right: 2rem;
         color: #000;
     }
     span:last-of-type {

mosu-app/src/widgets/home/FooterSection.tsx

@@ -1,19 +1,25 @@
 import { ChevronRight } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import React from "react";
 
 import imgHero from "@/widgets/home/assets/img-hero.png";
 import { LineBreakUnderTablet } from "@/widgets/home/helper/LineBreak";
 
+import { Button } from "@/shared/ui/button";
+
 import styles from "./FooterSection.module.scss";
 
 /**
  * @description 수능장에 들어서기 전, 반드시 겪어야 할 감정이 있습니다.
  */
 export const FooterSection = () => {
+    const router = useRouter();
+
     return (
         <section className={styles.footer_section}>
-            <Image alt="" src={imgHero} width={1500} height={800} />
+            <Image alt="" src={imgHero} className={styles.footer_section__image} />
 
             <div className={styles.footer_section__content}>
                 <h1 className={styles.footer_section__content__title}>
@@ -33,19 +39,23 @@ export const FooterSection = () => {
                 </h1>
 
                 <div className={styles.footer_section__call_to_action}>
-                    <button className={styles.call_to_action__button}>
-                        <span>상세운영방식 보러가기</span>
-                        <span>
-                            <ChevronRight strokeWidth={1} />
-                        </span>
-                    </button>
-
-                    <button className={styles.call_to_action__button}>
-                        <span>지금 바로 신청하기</span>
-                        <span>
-                            <ChevronRight strokeWidth={1} />
-                        </span>
-                    </button>
+                    <Link href="/warning" scroll>
+                        <button className={styles.call_to_action__button}>
+                            <span>상세운영 보러가기</span>
+                            <span>
+                                <ChevronRight strokeWidth={1} />
+                            </span>
+                        </button>
+                    </Link>
+
+                    <Link href="/apply" scroll>
+                        <button className={styles.call_to_action__button}>
+                            <span>지금 바로 신청하기</span>
+                            <span>
+                                <ChevronRight strokeWidth={1} />
+                            </span>
+                        </button>
+                    </Link>
                 </div>
             </div>
         </section>