[Client] / #276 / feat : add buttons in footer

client/src/pages/memoryRoad/main.css

@@ -438,7 +438,27 @@
   font-size: 0.9em;  
   color: #fff;
 }
-
+.Home-button {
+  background-color: #91ba9f;
+  color: white;
+  font-weight: bold;
+  font-size: 15px;
+  border: 2px solid white;
+  border-radius:30px;
+  padding: 15px;
+  margin: 15px;
+  cursor: pointer;
+}
+.Home-button1 {
+  position: absolute;
+  top: 12%;
+  left: 5%;
+}
+.Home-button2 {
+  position: absolute;
+  top: 22%;
+  left: 5%;
+}
 
 @media screen and (max-width: 1125px) {
   .mainpage-section {

client/src/pages/memoryRoad/main.tsx

@@ -21,6 +21,7 @@ import {
   DotsToMove,
   FooterBackground,
   FooterGitHubLinks,
+  FooterButton,
 } from './main_sections';
 import { titleAndContent, sidebarBoxContent } from './dummyData';
 
@@ -244,6 +245,16 @@ function Main() {
           </div>
         </section>
         <section className="mainpage-section" id="mainpage-seventh">
+          <FooterButton
+            isCurrSection={currSectIdx === 5 ? true : false}
+            isScrollDown={isScrollDown}
+            num={0}
+          />
+          <FooterButton
+            isCurrSection={currSectIdx === 5 ? true : false}
+            isScrollDown={isScrollDown}
+            num={1}
+          />
           <FooterGitHubLinks
             isCurrSection={currSectIdx === 5 ? true : false}
             isScrollDown={isScrollDown}

client/src/pages/memoryRoad/main_sections.tsx

@@ -17,6 +17,12 @@ interface DotsProps {
   num: number;
 }
 
+interface ButtonProps {
+  isCurrSection: boolean;
+  isScrollDown: boolean;
+  num: number;
+}
+
 interface ComponentProps {
   isCurrSection: boolean;
   isScrollDown: boolean;
@@ -624,3 +630,80 @@ export function FooterGitHubLinks({
     </>
   );
 }
+
+export function FooterButton({
+  isCurrSection,
+  isScrollDown,
+  num,
+}: ButtonProps) {
+  const navigate = useNavigate();
+  const data = [
+    {
+      title: '사진 기록하러 가기',
+      endPoint: '/createRoute',
+      style: 'Home-button1',
+    },
+    {
+      title: '루트 검색하러 가기',
+      endPoint: '/searchRoutes',
+      style: 'Home-button2',
+    },
+  ];
+  return (
+    <>
+      <button
+        className={`Home-button ${data[num].style}`}
+        onClick={() => {
+          navigate(`${data[num].endPoint}`);
+        }}
+      >
+        {data[num].title}
+      </button>
+    </>
+  );
+}
+
+// export function DotsToMove({ isCurrSection, isScrollDown, num }: DotsProps) {
+//   const navigate = useNavigate();
+//   const data = [
+//     {
+//       title: '사진 기록하러 가기',
+//       endPoint: '/createRoute',
+//     },
+//     {
+//       title: '루트 검색하러 가기',
+//       endPoint: '/searchRoutes',
+//     },
+//   ];
+//   return (
+//     <>
+//       <div
+//         className={`mainpage-dots-container ${
+//           isCurrSection && isScrollDown ? 'line-up' : ''
+//         } ${
+//           isCurrSection ? 'mainpage-opacity-true' : 'mainpage-opacity-false'
+//         }`}
+//       >
+//         <div className="mainpage-dots-box">
+//           <div className="mainpage-dots-circle-zero"></div>
+//           <div className="mainpage-dots-circle-first"></div>
+//           <div className="mainpage-dots-circle-second"></div>
+//           <div
+//             className="mainpage-dots-next-circle"
+//             onClick={() => navigate(`${data[num].endPoint}`)}
+//             onKeyPress={() => navigate(`${data[num].endPoint}`)}
+//             role="button"
+//             tabIndex={0}
+//           >
+//             <img
+//               alt="next-button"
+//               className="mainpage-dots-next-button"
+//               src="https://server.memory-road.net/upload/next_button.png"
+//             />
+//           </div>
+//         </div>
+//         <p className="mainpage-dots-text">{data[num].title}</p>
+//       </div>
+//     </>
+//   );
+// }