feat: 내게시글, 참여게시글 탭 누를시 스크롤

go-cham · Aug 3, 2023 · 692c096 · 692c096
1 parent 62d0614
commit 692c096
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 5 deletions.
diff --git a/src/components/user/SelectMyPostType.tsx b/src/components/user/SelectMyPostType.tsx
@@ -1,4 +1,7 @@
+import { useSetAtom } from 'jotai';
+
 import { PostType } from '@/pages/user/UserPage';
+import { scrollRestorationAtom } from '@/states/scroll-restoration';
 
 interface SelectMyPostTypeProps {
   postType: PostType;
@@ -11,6 +14,8 @@ export default function SelectMyPostType({
   switchPostType,
   postingCount,
 }: SelectMyPostTypeProps) {
+  const setScrollRestoration = useSetAtom(scrollRestorationAtom);
+
   return (
     <div className="mx-[2.5rem] mb-[2.1rem] flex justify-between space-x-[1.2rem] overflow-hidden rounded-[2.35rem] bg-background-subBg-100">
       {['내 게시글', '참여한 게시글'].map((label) => {
@@ -26,11 +31,21 @@ export default function SelectMyPostType({
                 : 'text-text-explain-500'
             }`}
             onClick={() => {
-              sessionStorage.setItem(
-                'selectMyPostTypeLabel',
-                label === '내 게시글' ? 'my' : 'participating'
-              );
+              const selectedType =
+                label === '내 게시글' ? 'my' : 'participating';
+              sessionStorage.setItem('selectMyPostTypeLabel', selectedType);
               switchPostType(label === '내 게시글' ? 'my' : 'participating');
+
+              if (postType === selectedType) {
+                const id = `${selectedType}-posts`;
+                const el = document.getElementById(id);
+                if (el) {
+                  el.scrollTo({
+                    top: 0,
+                    behavior: 'smooth',
+                  });
+                }
+              }
             }}
           >
             {`${label} ${

diff --git a/src/hooks/useScrollRestoration.tsx b/src/hooks/useScrollRestoration.tsx
@@ -40,7 +40,7 @@ export default function useScrollRestoration<U extends HTMLElement>(
   useEffect(() => {
     if (!ref.current) return;
 
-    if (scrollRestoration && scrollRestoration[key]) {
+    if (scrollRestoration && scrollRestoration[key] !== undefined) {
       ref.current?.scrollTo(0, scrollRestoration[key]);
     }
   }, [ref.current]);

diff --git a/src/pages/user/UserPage.tsx b/src/pages/user/UserPage.tsx
@@ -71,6 +71,7 @@ function UserPage() {
       <ul
         className="hide-scrollbar flex flex-1 flex-col items-center space-y-[1.7rem] overflow-y-scroll px-[2.5rem] pb-[16rem]"
         ref={postType === 'my' ? myPostsScrollRef : participatingPostsScrollRef}
+        id={postType === 'my' ? 'my-posts' : 'participating-posts'}
       >
         {posts
           ? posts.map((post, index) => (