design: 하단 언덕 이미지 깨지는 문제 해결

Author: AAminha

src/components/BackgroundBottom.tsx

@@ -6,7 +6,7 @@ const BackgroundBottom = () => {
   return (
     <BackgroundImageWrapper
       as="div"
-      className="fixed bottom-[-40px] left-1/2 z-[-10] h-42 w-full -translate-x-1/2 opacity-70"
+      className="fixed bottom-[-40px] left-1/2 h-42 w-full -translate-x-1/2 opacity-70"
       imageUrl={BgItem}
     />
   );

src/pages/LetterBoard/index.tsx

@@ -56,7 +56,7 @@ const LetterBoardPage = () => {
 
   return (
     <>
-      <main className="mt-[-25px] flex grow flex-col px-5 pt-20 pb-10">
+      <main className="z-1 mt-[-25px] flex grow flex-col px-5 pt-20 pb-10">
         <>
           <NoticeRollingPaper />
           <PageTitle className="mx-auto mt-4">게시판</PageTitle>

src/pages/MyPage/components/MyBoardPage.tsx

@@ -39,7 +39,7 @@ const MyBoardPage = () => {
   }
   return (
     <>
-      <main className={twMerge('flex grow flex-col px-5 pt-20 pb-10')}>
+      <main className={twMerge('z-1 flex grow flex-col px-5 pt-20 pb-10')}>
         <PageTitle className="mx-auto mb-11">내가 올린 게시물</PageTitle>
         {isLoading ? (
           <p>loading</p>

src/pages/RollingPaper/index.tsx

@@ -86,7 +86,7 @@ const RollingPaperPage = () => {
         />
       )}
       <Header />
-      <main className="flex grow flex-col items-center px-5 pt-20 pb-12">
+      <main className="z-1 flex grow flex-col items-center px-5 pt-20 pb-12">
         <PageTitle className="mb-18 max-w-73 text-center">{title}</PageTitle>
         <p className="body-sb text-gray-60 mb-2 w-full">등록된 편지 {totalComments}</p>
         <section className="w-full">