diff --git a/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx b/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx index 7a31ea1d0..2b1f9f793 100644 --- a/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx +++ b/components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx @@ -1,6 +1,6 @@ "use client" -import { useState } from "react" +import { useRef,useState } from "react" import Image from "@/components/Image" import Pagination from "@/components/MyPages/Pagination" @@ -18,6 +18,7 @@ export default function ClientCurrentRewards({ pageSize, showRedeem, }: CurrentRewardsClientProps) { + const containerRef = useRef(null) const [currentPage, setCurrentPage] = useState(1) const totalPages = Math.ceil(rewards.length / pageSize) @@ -25,8 +26,19 @@ export default function ClientCurrentRewards({ const endIndex = startIndex + pageSize const currentRewards = rewards.slice(startIndex, endIndex) + function handlePageChange(page: number) { + requestAnimationFrame(() => { + setCurrentPage(page) + containerRef.current?.scrollIntoView({ + behavior: "smooth", + block: "start", + inline: "nearest", + }) + }) + } + return ( -
+
{currentRewards.map((reward, idx) => (
@@ -58,7 +70,7 @@ export default function ClientCurrentRewards({ )}
diff --git a/components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css b/components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css index f2ff4ca62..fe57e8167 100644 --- a/components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css +++ b/components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css @@ -128,4 +128,6 @@ display: flex; flex-direction: column; gap: var(--Spacing-x4); + position: relative; + scroll-margin-top: calc(var(--current-mobile-site-header-height) * 2); }