refactor : 그라디언트와 물결 컴포넌트로 분리

src/components/Common/GradientContainer/GradientContainer.tsx

@@ -0,0 +1,14 @@
+/** 그라디언트 배경을 주는 container */
+export const GradientContainer = () => {
+    const gradientStyle = {
+        background:
+            'linear-gradient(to top, #58A1EB 0%, #91CFF8 50%, #C6E6FC 100%)'
+    };
+
+    return (
+        <div
+            className="h-full max-w-[473px] min-w-[375px] w-full absolute"
+            style={gradientStyle}
+        ></div>
+    );
+};

src/components/Common/NavigationBar/NavigationBar.tsx

@@ -18,7 +18,7 @@ export const NavigationBar = () => {
     ];
 
     return (
-        <nav className="flex justify-around bg-white border-y p-3 max-w-[473px] min-w-[375px] w-full z-[9999]">
+        <nav className="flex justify-around bg-white border-y p-3 max-w-[475px] min-w-[375px] w-full z-[9999]">
             {navItems.map((item) => (
                 <div className="flex justify-center flex-1" key={item.id}>
                     <NavigationItem

src/components/Common/WaveContainer/WaveContainer.tsx

@@ -0,0 +1,8 @@
+export const WaveContainer = () => {
+    return (
+        <div className="z-0">
+            <img src="/무인도.svg" className="absolute -top-10 right-20" />
+            <div className="bg-[url('/물결.svg')] absolute h-full w-full overflow-auto bg-cover bg-center custom-mask" />
+        </div>
+    );
+};

src/components/HomePage/LetterContainer/LetterContainer.tsx

@@ -3,6 +3,7 @@ import { EffectCards } from 'swiper/modules';
 import 'swiper/swiper-bundle.css';
 import { NotificationBadge } from '../../Common/NotificationBadge/NotificationBadge';
 import { HomeBottleLetter } from '../HomeBottleLetter';
+import { WaveContainer } from '@/components/Common/WaveContainer/WaveContainer';
 
 type RecommendLetter = {
     letterId: number;
@@ -25,8 +26,7 @@ type LetterContainerProps = {
 export const LetterContainer = ({ letters }: LetterContainerProps) => {
     const hasLetters = (
         <div className="relative -m-6 pb-10">
-            <img src="/무인도.svg" className="absolute -top-10 right-20" />
-            <div className="bg-[url('/물결.svg')] absolute h-full w-full overflow-auto bg-cover bg-center custom-mask"></div>
+            <WaveContainer />
 
             <div className="absolute right-[80px] z-[2]">
                 <NotificationBadge count={letters.length} />

src/pages/Home/HomePage.tsx

@@ -12,6 +12,7 @@ import { ToggleVariant } from '@/constants/toggleVariant';
 import { useGetThreeLetterData } from '@/hooks/useGetThreeLetterData';
 import { ErrorPage } from '../ErrorPage';
 import { usePushNotifications } from '@/hooks/usePushNotifications';
+import { Margin } from '@/components/Common/Margin/Margin';
 
 export const HomePage = () => {
     usePushNotifications(); // 푸시 알림 훅
@@ -31,8 +32,8 @@ export const HomePage = () => {
     }
 
     return (
-        <div className="relative h-full overflow-auto px-6 py-6 flex flex-col justify-between gap-5 scrollbar-hide">
-            <div>
+        <div className="relative h-full w-full flex flex-col justify-between gap-5 ">
+            <div className="z-0">
                 <TopButtonContainer />
 
                 <Toggle
@@ -64,8 +65,9 @@ export const HomePage = () => {
                 </div>
             </div>
 
-            <div className="relative -mx-6">
+            <div className="relative -mx-5">
                 <BannerContainer />
+                <Margin bottom={20} />
             </div>
 
             <SliderMenuContainer