피드 UX 개선 게시글 이동 방식 변경 및 스크롤 위치 복원

src/components/common/Post/PostBody.tsx

@@ -1,4 +1,5 @@
 import { useRef, useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import BookInfoCard from '../../feed/BookInfoCard';
 import type { PostBodyProps } from '@/types/post';
 import lookmore from '../../../assets/feed/lookmore.svg';
@@ -12,13 +13,13 @@ const PostBody = ({
   feedId,
   contentUrls = [],
 }: PostBodyProps) => {
+  const navigate = useNavigate();
   const hasImage = contentUrls.length > 0;
   const contentRef = useRef<HTMLDivElement>(null);
   const [isTruncated, setIsTruncated] = useState(false);
 
   const handlePostClick = (feedId: number) => {
-    // 새 탭에서 피드 상세 페이지 열기
-    window.open(`/feed/${feedId}`, '_blank');
+    navigate(`/feed/${feedId}`);
   };
 
   useEffect(() => {

src/components/common/Post/PostFooter.tsx

@@ -9,6 +9,7 @@ import { postSaveFeed } from '@/api/feeds/postSave';
 import { postFeedLike } from '@/api/feeds/postFeedLike';
 import { usePreventDoubleClick } from '@/hooks/usePreventDoubleClick';
 import { Container } from './PostFooter.styled';
+import { useNavigate } from 'react-router-dom';
 
 interface PostFooterProps {
   likeCount: number;
@@ -33,6 +34,7 @@ const PostFooter = ({
   isDetail = false,
   onSaveToggle,
 }: PostFooterProps) => {
+  const navigate = useNavigate();
   const [liked, setLiked] = useState(isLiked);
   const [likeCount, setLikeCount] = useState<number>(initialLikeCount);
   const [saved, setSaved] = useState(isSaved);
@@ -106,14 +108,18 @@ const PostFooter = ({
 
   const handleComment = () => {
     if (isDetail) return;
-    window.open(`/feed/${feedId}`, '_blank');
+    navigate(`/feed/${feedId}`);
   };
 
   return (
     <Container isDetail={isDetail}>
       <div className="left">
         <div className="count">
-          <img src={liked ? activeLike : like} onClick={handleLike} style={{ opacity: isLikeLoading ? 0.6 : 1 }} />
+          <img
+            src={liked ? activeLike : like}
+            onClick={handleLike}
+            style={{ opacity: isLikeLoading ? 0.6 : 1 }}
+          />
           <div>{likeCount}</div>
         </div>
         <div className="count comment">

src/hooks/useFeedCache.ts

@@ -0,0 +1,82 @@
+import { useState, useEffect } from 'react';
+import type { PostData } from '@/types/post';
+
+const FEED_CACHE_KEY = 'feed_page_cache';
+const FEED_CACHE_TTL = 10 * 60 * 1000; // 10분
+
+export interface FeedCache {
+  activeTab: string;
+  totalFeedPosts: PostData[];
+  myFeedPosts: PostData[];
+  totalNextCursor: string;
+  myNextCursor: string;
+  totalIsLast: boolean;
+  myIsLast: boolean;
+  scrollY: number;
+  timestamp: number;
+}
+
+type FeedCachePayload = Omit<FeedCache, 'scrollY' | 'timestamp'>;
+
+function readCache(): FeedCache | null {
+  try {
+    const raw = sessionStorage.getItem(FEED_CACHE_KEY);
+    if (!raw) return null;
+    const cache = JSON.parse(raw) as FeedCache;
+    if (Date.now() - cache.timestamp < FEED_CACHE_TTL) return cache;
+  } catch {
+    // ignore
+  }
+  return null;
+}
+
+export function writeFeedCache(payload: FeedCachePayload): void {
+  const cache: FeedCache = {
+    ...payload,
+    scrollY: window.scrollY,
+    timestamp: Date.now(),
+  };
+  sessionStorage.setItem(FEED_CACHE_KEY, JSON.stringify(cache));
+}
+
+export function useFeedCache() {
+  const [initialCache] = useState<FeedCache | null>(readCache);
+
+  useEffect(() => {
+    if (!initialCache) return;
+    const y = initialCache.scrollY;
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        window.scrollTo(0, y);
+      });
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+
+    const handleScroll = () => {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        try {
+          const raw = sessionStorage.getItem(FEED_CACHE_KEY);
+          if (!raw) return;
+          const cache = JSON.parse(raw) as FeedCache;
+          cache.scrollY = window.scrollY;
+          sessionStorage.setItem(FEED_CACHE_KEY, JSON.stringify(cache));
+        } catch {
+          // ignore
+        }
+      }, 100);
+    };
+
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      clearTimeout(timeout);
+    };
+  }, []);
+
+  return { initialCache };
+}