선세! 뒤로가기 눌렀을때 페이지 복원 질문이요

5 글 보임 - 1 에서 5 까지 (총 5 중에서)

글쓴이

글
2024년 1월 30일 19:28 #111870

Marina
참가자
```
app/newbody.js
```
<div style="color: #cccccc; background-color: #1f1f1f; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div>'use client';</div>
<div>import { generateHTML } from '@tiptap/html';</div>
<div>import StarterKit from '@tiptap/starter-kit';</div>
<div>import Image from '@tiptap/extension-image';</div>
<div>import Youtube from '@tiptap/extension-youtube';</div>
<div>import Link from 'next/link';</div>
<div>import { useEffect, useRef, useState } from 'react';</div>
<div>import { useSession } from 'next-auth/react';</div>
<div>import UpDownBtn from './detail/[id]/UpDownBtn';</div>
<div>import { useRouter } from 'next/navigation';</div>
<div>export default function NewBody() {</div>
<div> const { data: session, status } = useSession();</div>
<div> const [posts, setPosts] = useState([]);</div>
<div> const targetRef = useRef(null);</div>
<div> const router = useRouter();</div>
<div> useEffect(() => {</div>
<div> fetch('/api/post/getPost')</div>
<div> .then((r) => r.json())</div>
<div> .then((result) => {</div>
<div> setPosts(result);</div>
<div> });</div>
<div> }, []);</div>
<div> // 무한스크롤</div>
<div> useEffect(() => {</div>
<div> let observer;</div>
<div> const target = targetRef.current;</div>
<div> if (target) {</div>
<div> observer = new IntersectionObserver(</div>
<div> (entries) => {</div>
<div> entries.forEach(async (entry) => {</div>
<div> if (entry.isIntersecting && posts.length > 0) {</div>
<div> // 마지막 게시물의 ID를 얻기</div>
<div> const lastId = posts[posts.length - 1]._id;</div>
<div> try {</div>
<div> const response = await fetch(</div>
<div> '/api/post/getPost',</div>
<div> {</div>
<div> method: 'POST',</div>
<div> headers: {</div>
<div> 'Content-Type': 'application/json',</div>
<div> },</div>
<div> body: JSON.stringify({ lastId }),</div>
<div> }</div>
<div> );</div>
<div> const newPosts = await response.json();</div>
<div> setPosts((prevPosts) => [</div>
<div> ...prevPosts,</div>
<div> ...newPosts,</div>
<div> ]);</div>
<div> } catch (error) {</div>
<div> console.error('Error fetching posts:', error);</div>
<div> }</div>
<div> }</div>
<div> });</div>
<div> },</div>
<div> { threshold: 0.5 }</div>
<div> );</div>
<div> observer.observe(target);</div>
<div> return () => {</div>
<div> if (observer && target) {</div>
<div> observer.unobserve(target);</div>
<div> }</div>
<div> };</div>
<div> }</div>
<div> }, [targetRef, posts]); // targetRef와 posts에 의존성 추가</div>
<div> // 게시물 클릭 핸들러</div>
<div> const handlePostClick = (postId) => {</div>
<div> localStorage.setItem('scrollY', window.scrollY.toString());</div>
<div> router.push(`/detail/${postId}`);</div>
<div> };</div>
<div> const refreshPosts = async () => {</div>
<div> try {</div>
<div> const response = await fetch('/api/post/getPost');</div>
<div> const newPosts = await response.json();</div>
<div> setPosts(newPosts);</div>
<div> } catch (error) {</div>
<div> console.error('Error fetching posts:', error);</div>
<div> }</div>
<div> };</div>
<div> const formatReativeDate = (dateString) => {</div>
<div> const date = new Date(dateString);</div>
<div> const now = new Date();</div>
<div> const diffInSeconds = Math.floor((now - date) / 1000);</div>
<div> if (diffInSeconds < 60) {</div>
<div> return `${diffInSeconds}sec ago`;</div>
<div> } else if (diffInSeconds < 3600) {</div>
<div> return `${Math.floor(diffInSeconds / 60)}min ago`;</div>
<div> } else if (diffInSeconds < 86400) {</div>
<div> return `${Math.floor(diffInSeconds / 3600)}hours ago`;</div>
<div> } else {</div>
<div> return date.toLocaleDateString('ko-KR', {</div>
<div> year: 'numeric',</div>
<div> month: '2-digit',</div>
<div> day: '2-digit',</div>
<div> });</div>
<div> }</div>
<div> };</div>
<div> const convertYoutubeLink = (url) => {</div>
<div> const regExp =</div>
<div> /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;</div>
<div> const match = url.match(regExp);</div>
<div> return match && match[2].length === 11</div>
<div> ? `https://www.youtube.com/embed/${match[2]}`</div>
<div> : url;</div>
<div> };</div>
<div> const renderContent = (item, subIndex) => {</div>
<div> switch (item.type) {</div>
<div> case 'youtube':</div>
<div> const youtubeUrl = convertYoutubeLink(item.attrs.src);</div>
<div> return (</div>
<div> <iframe</div>
<div> key={subIndex}</div>
<div> src={youtubeUrl}</div>
<div> className="w-full h-96"</div>
<div> /></div>
<div> );</div>
<div> default:</div>
<div> const htmlStr = generateHTML(item, [</div>
<div> StarterKit,</div>
<div> Image,</div>
<div> Youtube,</div>
<div> ]);</div>
<div> return (</div>
<div> <code</div>
<div> key={subIndex}</div>
<div> className="font-normal break-all line-clamp-1"</div>
<div> dangerouslySetInnerHTML={{ __html: htmlStr }}</div>
<div> ></code></div>
<div> );</div>
<div> }</div>
<div> };</div>
<div> return (</div>
<div> <></div>
<div> {posts.map((content, index) => (</div>
<div> <div</div>
<div> className="border rounded-lg shadow-lg p-4 w-full max-w-xl mx-auto my-1 hover:bg-slate-100"</div>
<div> key={index}</div>
<div> ></div>
<div> <div</div>
<div> onClick={(e) => {</div>
<div> handlePostClick(content._id);</div>
<div> }}</div>
<div> ></div>
<div> <div className="col-span-2"></div>
<div> <span className="text-slate-700"></div>
<div> @{content.authorname}</div>
<div> </span></div>
<div> <span> | </span></div>
<div> <span className="text-slate-700"></div>
<div> {formatReativeDate(content.date)}</div>
<div> </span></div>
<div> </div></div>
<div> <div className="col-span-1"></div>
<div> <h2 className="text-2xl font-semibold mb-2 hover:bg-slate-300 ellipsis"></div>
<div> {content.title}</div>
<div> </h2></div>
<div> </div></div>
<div> {/* content body */}</div>
<div> <div className="col-span-1 mt-3"></div>
<div> <p className="font-normal text-gray-600 break-all line-clamp-3 multi-line-ellipsis imageSizes"></div>
<div> {content.content.content</div>
<div> .slice(0, 5)</div>
<div> .map(renderContent)}</div>
<div> </p></div>
<div> </div></div>
<div> </div></div>
<div> {session?.user._id == content.author ||</div>
<div> session?.user.role == 'admin' ? (</div>
<div> <div className="col-span-2 pt-3 pb-3"></div>
<div> <UpDownBtn</div>
<div> content={content}</div>
<div> session={session}</div>
<div> refreshPosts={refreshPosts}</div>
<div> /></div>
<div> <Link</div>
<div> href={`/edit/${content._id}`}</div>
<div> className="mr-3 hover:text-red-600"</div>
<div> ></div>
<div> Edit</div>
<div> </Link></div>
<div> <span</div>
<div> className="hover:text-red-600"</div>
<div> onClick={async () => {</div>
<div> await fetch('/api/post/delete', {</div>
<div> method: 'POST',</div>
<div> body: JSON.stringify({</div>
<div> contentId: content._id,</div>
<div> authorId: content.author,</div>
<div> }),</div>
<div> })</div>
<div> .then((response) => {</div>
<div> if (!response.ok) {</div>
<div> throw new Error(</div>
<div> 'Failed to delete the post'</div>
<div> );</div>
<div> }</div>
<div> // 게시물 삭제 후 목록을 다시 가져오는 API 호출</div>
<div> return fetch('/api/post/getPost')</div>
<div> .then((r) => r.json())</div>
<div> .then((result) => {</div>
<div> setPosts(result);</div>
<div> });</div>
<div> })</div>
<div> .catch((error) => {</div>
<div> // 에러 핸들링</div>
<div> console.error('Error:', error);</div>
<div> });</div>
<div> }}</div>
<div> ></div>
<div> delete</div>
<div> </span></div>
<div> </div></div>
<div> ) : (</div>
<div> <div className="col-span-2 pt-3 pb-3"></div>
<div> <UpDownBtn</div>
<div> content={content}</div>
<div> session={session}</div>
<div> refreshPosts={refreshPosts}</div>
<div> /></div>
<div> </div></div>
<div> )}</div>
<div> </div></div>
<div> ))}</div>
<div> <div ref={targetRef} style={{ height: '50px' }}></div></div>
<div> </></div>
<div> );</div>
<div>}</div>
</div>
```
components/RollBack.js
```
<div style="color: #cccccc; background-color: #1f1f1f; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div>'use client';</div>
<div>import { useRouter } from 'next/navigation';</div>
<div>import { useEffect } from 'react';</div>
<div>import { FaArrowLeftLong } from 'react-icons/fa6';</div>
<div>import { usePathname, useSearchParams } from 'next/navigation';</div>
<div>export default function RollBack() {</div>
<div> const router = useRouter();</div>
<div> return (</div>
<div> <a</div>
<div> className="px-8 pb-4 flex items-center justify-start"</div>
<div> onClick={() => {</div>
<div> router.back();</div>
<div> }}</div>
<div> ></div>
<div> <FaArrowLeftLong size={20} className="mr-3" /></div>
<div> back</div>
<div> </a></div>
<div> );</div>
<div>}</div>
</div>
```
components/ScrollRestoration.js
```
<div style="color: #cccccc; background-color: #1f1f1f; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div>'use client';</div>
<div>import { useEffect } from 'react';</div>
<div>const ScrollRestoration = () => {</div>
<div> useEffect(() => {</div>
<div> // 스크롤 위치 복원</div>
<div> const savedScrollY = localStorage.getItem('scrollY');</div>
<div> if (savedScrollY) {</div>
<div> window.scrollTo(0, parseInt(savedScrollY, 10));</div>
<div> }</div>
<div> }, []);</div>
<div> return null;</div>
<div>};</div>
<div>export default ScrollRestoration;</div>
</div>
```
detail/page.js
```
<div style="color: #cccccc; background-color: #1f1f1f; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div> return (</div>
<div> <section className="bg-white"></div>
<div> <RollBack /></div>
<div> <div className="px-4 w-full"></div>
<div> <div className="grid gap-8"></div>
</div>
```
app/page.js
```
<div style="color: #cccccc; background-color: #1f1f1f; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; line-height: 19px; white-space: pre;">
<div> <div className="container grid grid-cols-1"></div>
<div> {/* <BodyContent result={transformedResult} /> */}</div>
<div> <ScrollRestoration /></div>
<div> <NewBody result={transformedResult} /></div>
<div> </div>

</div>
</div>
```
무한 스크롤을 만들어서 데이터를 5개씩 마우스 내릴때마다 실행하고 있어요 

디테일 페이지를 들어갔다가 뒤로가기를 눌러서 나오면 항상 맨처음 데이터로 되돌아가서 
스크롤 y 값을localStroage에 저장을 하고 그 값을 불러오려고 하는데 이게 잘 안되요 

지금 상황은 localStorage에는 잘 저장이 되고 있는데 scrollTo로 해서 불러 오면 
저장된 y값으로 이동을 안해요 

 
```
2024년 1월 30일 19:43 #111872

Marina
참가자
```
수정해도 html로 나오네요 
```
2024년 1월 30일 21:34 #111887

codingapple
키 마스터
```
뒤로가기 누르면 state가 리셋되어서 그만큼의 스크롤할 높이도 없어지는게 아닐까요
```
2024년 1월 30일 23:17 #111900

Marina
참가자
<div>settimeout을 써서 조금 뒤에 출력하도록 했는데도 페이지 변동이 안생겨요 ,</div>
<div>
</div>
2024년 1월 31일 09:38 #111925

codingapple
키 마스터
```
리액트 라우터 라이브러리 안에있는 ScrollRestoration 컴포넌트같은거 써봅시다
```
글쓴이

글

5 글 보임 - 1 에서 5 까지 (총 5 중에서)

답변은 로그인 후 가능합니다.

로그인

선세! 뒤로가기 눌렀을때 페이지 복원 질문이요

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png