fetch

src/components/timeLine/editorList/EditorList.tsx

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 import React, { useEffect, useState } from 'react';
 import { useQuery } from 'react-query';
 
@@ -48,3 +49,6 @@ const EditorList: React.FC<EditorListProps> = ({ className, isLog, token }) => {
 };
 
 export default EditorList;
+=======
+import React from "react";
+>>>>>>> b00baec9 (feat : add HeaderNavigation component)

src/components/timeLine/headerNavigatin/HeaderNavigation.scss

@@ -0,0 +1,33 @@
+$background: #FFF;
+
+.headerNav {
+  display: flex;
+  width: 100%;
+  height: 48px;
+  padding: 8px 868px 8px 4px;
+  align-items: center;
+  background-color: $background;
+  border-bottom: 1px solid #F2F5F8;
+}
+
+.backbtn, .forwardbtn {
+  background-color: $background;
+  width: 32px;
+  height: 32px;
+  margin-top: 8px;
+  padding: 8px;
+
+  border: none; 
+  text-align: center;
+  line-height: 1;
+}
+
+.backbtn img, .forwardbtn img {
+  max-width: 100%; 
+  max-height: 100%; 
+  vertical-align: middle;
+}
+
+.backbtn {
+  margin-left: 4px;
+}

src/components/timeLine/headerNavigatin/HeaderNavigation.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useLocation, useNavigate, useNavigationType } from 'react-router-dom';
+import './HeaderNavigation.scss';
+
+const HeaderNavigation: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const navigationType = useNavigationType();
+
+  const [isBack, setIsBack] = useState<boolean>(false);
+  const [isForward, setIsForward] = useState<boolean>(false);
+
+  useEffect(() => {
+    const updateButtonStates = () => {
+      const idx = window.history.state?.idx ?? 0;
+      const length = window.history.length;
+
+      setIsBack(idx !== 0);
+      setIsForward(navigationType === 'POP' && idx < length-1);
+    };
+
+    window.addEventListener('popstate', updateButtonStates);
+
+    updateButtonStates();
+
+    return () => {
+      window.removeEventListener('popstate', updateButtonStates);
+    };
+  }, [location.pathname, navigationType, isForward]); 
+
+  const handleBack = () => {
+    if (isBack) {
+      navigate(-1);
+    }
+  };
+
+  const handleForward = () => {
+    if (isForward) {
+      navigate(1);
+    }
+  };
+
+  return (
+    <nav className="headerNav">
+      <button className="backbtn" onClick={handleBack} disabled={!isBack}>
+        <img
+          src={isBack ? '/MAPUimg/back_btn_active.png' : '/MAPUimg/back_btn_inactive.png'}
+          alt="Back"
+        />
+      </button>
+
+      <button className="forwardbtn" onClick={handleForward} disabled={!isForward}>
+        <img 
+          src={isForward ? '/MAPUimg/forward_btn_active.png' : '/MAPUimg/forward_btn_inactive.png'}
+          alt="Forward"
+        />
+      </button>
+    </nav>
+  );
+};
+
+export default HeaderNavigation;
+

src/pages/TimeLine.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import HeaderNavigation from '../components/timeLine/headerNavigatin/HeaderNavigation'
+
+const TimeLine = () => {
+  return (
+    <>
+      <HeaderNavigation />
+    </>
+  )
+}
+
+export default TimeLine

svg.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react-scripts" />
-<<<<<<< HEAD
 declare module '*.svg' {
     const value: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     export default value;
   }
-=======
->>>>>>> aa93db65 (feat:svg.d.ts file added)