diff --git a/app/[locale]/(main)/header.tsx b/app/[locale]/(main)/header.tsx index 82177d0..46bc6b6 100644 --- a/app/[locale]/(main)/header.tsx +++ b/app/[locale]/(main)/header.tsx @@ -26,6 +26,7 @@ function Header() {
{ + sessionStorage.removeItem("selectedTag"); router.push(`/${locale}/`); }} className="flex cursor-pointer items-center text-base font-medium" @@ -63,7 +64,7 @@ function Header() { // https://github.com/streamich/react-use/blob/master/src/useInterval.ts const useInterval = (callback: Function, delay?: number | null) => { - const savedCallback = useRef(() => {}); + const savedCallback = useRef(() => { }); useEffect(() => { savedCallback.current = callback; }); diff --git a/components/Switch.tsx b/components/Switch.tsx index 8db919a..c55b498 100644 --- a/components/Switch.tsx +++ b/components/Switch.tsx @@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"; import { motion } from "framer-motion"; -import React, { useEffect, useRef, useState } from "react"; +import React, { useEffect, useRef, useState, createRef } from "react"; export default function Switch({ allTag, @@ -14,6 +14,7 @@ export default function Switch({ onTagChange: (tag: string) => void; }) { const scrollRef = useRef(null); + const tagRefs = useRef(allTag.map(() => createRef())); useEffect(() => { const savedTag = sessionStorage.getItem("selectedTag"); @@ -41,21 +42,33 @@ export default function Switch({ }; }, []); + useEffect(() => { + const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)]; + if (currentTagRef && currentTagRef.current) { + currentTagRef.current.scrollIntoView({ + behavior: "smooth", + block: "nearest", + inline: "center", + }); + } + }, [nowTag]); + return (
- {allTag.map((tag) => ( + {allTag.map((tag, index) => (
onTagChange(tag)} className={cn( "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500", nowTag === tag ? "text-black dark:text-white" - : "text-stone-400 dark:text-stone-500", + : "text-stone-400 dark:text-stone-500" )} > {nowTag === tag && (