Footer에 EditBtn 묶어서 모듈화 및 적용

client/src/components/Buttons/EditBtn.js

@@ -3,7 +3,7 @@ import styles from "./buttons.module.scss";
 
 const EditBtn = ({ pathname }) => {
     return (
-        <Link className={`position-absolute ${styles.editBtn}`} to={{
+        <Link className={`me-2 mb-1 ${styles.editBtn}`} to={{
             pathname: "/" + pathname,
             state: {}
         }}>

client/src/components/Buttons/buttons.module.scss

@@ -12,12 +12,9 @@
 }
 
 .editBtn {
-    bottom: 10px;
-    right: 10px;
-
     & .icon {
         color: crimson;
-        font-size: 2.5em;
+        font-size: 2.7em;
     }
 }
 

client/src/components/Footer.js

+import EditBtn from "./Buttons/EditBtn.js";
+
+const Footer = ({ pathname }) => {
+    return (
+        <div className="position-absolute bottom-0 start-0 justify-content-end d-flex justify-content-end w-100 bg-white" style={{ zIndex: "50" }}>
+            <EditBtn pathname={pathname} />
+        </div>
+    )
+}
+
+export default Footer
\ No newline at end of file

client/src/components/Menu/menu.module.scss

 .content {
     background-color: #fff;
-    z-index: 1;
+    z-index: 100;
     overflow: hidden;
+    width: inherit;
 
     & .close {
         top: 10px;

client/src/pages/HomePage.js

 import Menu from "../components/Menu/Menu.js";
-import EditBtn from "../components/Buttons/EditBtn.js";
+import Footer from "../components/Footer.js";
 
 const HomePage = () => {
     return (
         <>
             <Menu />
-            <EditBtn pathname="schedule/edit" />
+            <Footer pathname="schedule/edit" />
         </>
     )
 }

client/src/pages/SchedulePage.js

 import Menu from "../components/Menu/Menu.js";
 import HomeBtn from "../components/Buttons/HomeBtn.js";
-import EditBtn from "../components/Buttons/EditBtn.js";
 import ScheduleModal from "../components/Modal/ScheduleModal.js";
 import KUSchedule from "../components/Schedule/KUSchedule.js";
 import ScheduleList from "../components//Schedule/ScheduleList.js";
+import Footer from "../components/Footer.js";
 
 const SchedulePage = () => {
     return (
@@ -15,7 +15,7 @@ const SchedulePage = () => {
             </button>
             <KUSchedule />
             <ScheduleList />
-            <EditBtn pathname="schedule/edit" />
+            <Footer pathname="schedule/edit" />
         </>
     )
 }

client/src/pages/StudyPlanPage.js

 import Menu from "../components/Menu/Menu.js";
 import BackBtn from "../components/Buttons/BackBtn.js";
-import EditBtn from "../components/Buttons/EditBtn.js";
+import Footer from "../components/Footer.js";
 
 const StudyPlanPage = () => {
     return (
         <>
             <Menu />
             <BackBtn />
-            <EditBtn pathname="studyplan/edit" />
+            <Footer pathname="studyplan/edit" />
         </>
     )
 }