From 2a35e27c18ae2ae9f267758962cd127b3b138297 Mon Sep 17 00:00:00 2001 From: Demian Date: Wed, 20 Nov 2024 11:28:34 +0900 Subject: [PATCH] fetch --- public/MAPUimg/back_btn_active.png | Bin 0 -> 212 bytes public/MAPUimg/back_btn_inactive.png | Bin 0 -> 227 bytes public/MAPUimg/forward_btn_active.png | Bin 0 -> 203 bytes public/MAPUimg/forward_btn_inactive.png | Bin 0 -> 236 bytes src/assets/user.svg | 20 +++--- .../timeLine/editorList/EditorList.tsx | 4 ++ .../headerNavigatin/HeaderNavigation.scss | 33 +++++++++ .../headerNavigatin/HeaderNavigation.tsx | 63 ++++++++++++++++++ src/pages/TimeLine.tsx | 12 ++++ svg.d.ts | 3 - 10 files changed, 122 insertions(+), 13 deletions(-) create mode 100644 public/MAPUimg/back_btn_active.png create mode 100644 public/MAPUimg/back_btn_inactive.png create mode 100644 public/MAPUimg/forward_btn_active.png create mode 100644 public/MAPUimg/forward_btn_inactive.png create mode 100644 src/components/timeLine/headerNavigatin/HeaderNavigation.scss create mode 100644 src/components/timeLine/headerNavigatin/HeaderNavigation.tsx create mode 100644 src/pages/TimeLine.tsx diff --git a/public/MAPUimg/back_btn_active.png b/public/MAPUimg/back_btn_active.png new file mode 100644 index 0000000000000000000000000000000000000000..dc4aea7469e18049807880c7ff7d2bf6fe39137d GIT binary patch literal 212 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?3oVGw3ym^DWND9BhG z_S3#4H#fePcW`kLQBm?fxATYg3IoLlzVm{#6%L# literal 0 HcmV?d00001 diff --git a/public/MAPUimg/forward_btn_active.png b/public/MAPUimg/forward_btn_active.png new file mode 100644 index 0000000000000000000000000000000000000000..2609366870b0ef5db96a1dd339a8805a5361e3c4 GIT binary patch literal 203 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz&H|6fVg?3oVGw3ym^DWND9BhG z z`Mlwvib$Q_OK-jJH`QEQIyyKK(x&gW|2f-4wkh(bUuf?10LIjJ@e5A59N9aG;Q>>y u>IKeYZ!8anR5+@yI9LX4CK1U(JWsQtYuxB{@RBw bE-urBXMeOyy*()l - - - + + + + - + - - + + - - + + - + diff --git a/src/components/timeLine/editorList/EditorList.tsx b/src/components/timeLine/editorList/EditorList.tsx index 87f1b8f..870ddfa 100644 --- a/src/components/timeLine/editorList/EditorList.tsx +++ b/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 = ({ className, isLog, token }) => { }; export default EditorList; +======= +import React from "react"; +>>>>>>> b00baec9 (feat : add HeaderNavigation component) diff --git a/src/components/timeLine/headerNavigatin/HeaderNavigation.scss b/src/components/timeLine/headerNavigatin/HeaderNavigation.scss new file mode 100644 index 0000000..0d6b732 --- /dev/null +++ b/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; +} diff --git a/src/components/timeLine/headerNavigatin/HeaderNavigation.tsx b/src/components/timeLine/headerNavigatin/HeaderNavigation.tsx new file mode 100644 index 0000000..dd74e68 --- /dev/null +++ b/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(false); + const [isForward, setIsForward] = useState(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 ( + + ); +}; + +export default HeaderNavigation; + diff --git a/src/pages/TimeLine.tsx b/src/pages/TimeLine.tsx new file mode 100644 index 0000000..5b8862b --- /dev/null +++ b/src/pages/TimeLine.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import HeaderNavigation from '../components/timeLine/headerNavigatin/HeaderNavigation' + +const TimeLine = () => { + return ( + <> + + + ) +} + +export default TimeLine \ No newline at end of file diff --git a/svg.d.ts b/svg.d.ts index 7388665..657e1c6 100644 --- a/svg.d.ts +++ b/svg.d.ts @@ -1,8 +1,5 @@ /// -<<<<<<< HEAD declare module '*.svg' { const value: React.FunctionComponent>; export default value; } -======= ->>>>>>> aa93db65 (feat:svg.d.ts file added)