feat: carousel integration with history navigation

components/carousel.js

@@ -5,6 +5,7 @@ import ArrowRight from '@/svgs/arrow-right-line.svg'
 import styles from './carousel.module.css'
 import { useShowModal } from './modal'
 import { Dropdown } from 'react-bootstrap'
+import { usePathname } from 'next/navigation'
 
 function useSwiping ({ moveLeft, moveRight }) {
   const [touchStartX, setTouchStartX] = useState(null)
@@ -104,10 +105,14 @@ function CarouselOverflow ({ originalSrc, rel }) {
 }
 
 export function CarouselProvider ({ children }) {
+  const pathname = usePathname()
+
   const media = useRef(new Map())
   const showModal = useShowModal()
 
   const showCarousel = useCallback(({ src }) => {
+    window.history.pushState(null, '', pathname)
+
     showModal((close, setOptions) => {
       return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
     }, {