[#165] Feat: pull to refresh 적용 (#166)

nodak-v2 · Jul 14, 2024 · 4f9d120 · 4f9d120
1 parent 8e8fdee
commit 4f9d120
Show file tree

Hide file tree

Showing 7 changed files with 135 additions and 63 deletions.
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.4",
+    "react-simple-pull-to-refresh": "^1.3.3",
     "react-spinners": "^0.14.1",
     "react-toastify": "^10.0.5",
     "swiper": "^11.1.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(post)/result/[postId]/page.tsx b/src/app/(post)/result/[postId]/page.tsx
@@ -1,18 +1,33 @@
 'use client';
 
+import { useQueryClient } from '@tanstack/react-query';
+import { useParams } from 'next/navigation';
+import PullToRefresh from 'react-simple-pull-to-refresh';
+
 import CommentList from './_components/Comments/CommentList';
 import PostingMain from './_components/Posting';
 import PostingButton from './_components/Posting/PostingButton';
 
 const ResultPage = () => {
+  const { postId } = useParams() as { postId: string };
+  const queryClient = useQueryClient();
+
+  const handleRefresh = async () => {
+    await queryClient.invalidateQueries({ queryKey: ['posts', postId] });
+    await queryClient.invalidateQueries({ queryKey: ['votes', postId] });
+    await queryClient.invalidateQueries({ queryKey: ['comments', postId] });
+  };
+
   return (
-    <div className='flex h-full grow flex-col gap-4 overflow-y-auto'>
-      <div className='flex flex-col gap-[36px]'>
-        <PostingMain />
-        <PostingButton />
+    <PullToRefresh onRefresh={handleRefresh} pullingContent=''>
+      <div className='flex h-full grow flex-col gap-4 overflow-y-auto'>
+        <div className='flex flex-col gap-[36px]'>
+          <PostingMain />
+          <PostingButton />
+        </div>
+        <CommentList />
       </div>
-      <CommentList />
-    </div>
+    </PullToRefresh>
   );
 };
 

diff --git a/src/app/(post)/search/page.tsx b/src/app/(post)/search/page.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react';
 
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
+import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import { useGetPostListAPI } from '@/src/apis/postList';
 import { CATEGORY_MAP } from '@/src/app/(main)/constants';
@@ -22,10 +23,11 @@ const SearchPostPage = () => {
   const channel = (searchParams.get('channel') as ChannelType | null) ?? 'all';
 
   const [keyword, setKeyword] = useState('');
-  const { data: posts, fetchNextPage } = useGetPostListAPI(
-    keyword,
-    CATEGORY_MAP[channel],
-  );
+  const {
+    data: posts,
+    fetchNextPage,
+    refetch,
+  } = useGetPostListAPI(keyword, CATEGORY_MAP[channel]);
 
   const scrollRef = useInfiniteScroll(fetchNextPage);
 
@@ -37,6 +39,10 @@ const SearchPostPage = () => {
     setKeyword(input);
   };
 
+  const handleRefresh = async () => {
+    await refetch();
+  };
+
   return (
     <>
       <TopBar.Container>
@@ -48,19 +54,23 @@ const SearchPostPage = () => {
         <>
           <ChipContainer currentChannel={channel} defaultPath='/search' />
           <main className='flex h-full grow flex-col overflow-y-scroll'>
-            {posts.length ? (
-              posts.map((post, index) => (
-                <Link
-                  href={`/result/${post.postId}`}
-                  key={`${index}-${post.voteTitle}`}
-                >
-                  <PostItem post={post} />
-                </Link>
-              ))
-            ) : (
-              <EmptyPage href='/createPost' text='작성 글이 없습니다.' />
-            )}
-            <div ref={scrollRef} />
+            <PullToRefresh onRefresh={handleRefresh} pullingContent=''>
+              <ul>
+                {posts.length ? (
+                  posts.map((post, index) => (
+                    <Link
+                      href={`/result/${post.postId}`}
+                      key={`${index}-${post.voteTitle}`}
+                    >
+                      <PostItem post={post} />
+                    </Link>
+                  ))
+                ) : (
+                  <EmptyPage href='/createPost' text='작성 글이 없습니다.' />
+                )}
+                <div ref={scrollRef} />
+              </ul>
+            </PullToRefresh>
           </main>
         </>
       )}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -3,6 +3,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
+import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import { useGetPostListAPI } from '@/src/apis/postList';
 import { CATEGORY_MAP } from '@/src/app/(main)/constants';
@@ -22,12 +23,17 @@ const Main = () => {
   const channel = (searchParams.get('channel') as ChannelType | null) ?? 'all';
   const keyword = searchParams.get('keyword') as string;
 
-  const { data: posts, fetchNextPage } = useGetPostListAPI(
-    keyword,
-    CATEGORY_MAP[channel],
-  );
+  const {
+    data: posts,
+    fetchNextPage,
+    refetch,
+  } = useGetPostListAPI(keyword, CATEGORY_MAP[channel]);
   const scrollRef = useInfiniteScroll(fetchNextPage);
 
+  const handleRefresh = async () => {
+    await refetch();
+  };
+
   return (
     <>
       <TopBar.Container>
@@ -38,18 +44,22 @@ const Main = () => {
       </TopBar.Container>
       <ChipContainer currentChannel={channel} />
       <main className='flex h-full grow flex-col overflow-y-scroll'>
-        {posts.length ? (
-          posts.map((post, index) => (
-            <Link
-              href={`/result/${post.postId}`}
-              key={`${index}-${post.voteTitle}`}
-            >
-              <PostItem post={post} />
-            </Link>
-          ))
-        ) : (
-          <EmptyPage href='/createPost' text='작성 글이 없습니다.' />
-        )}
+        <PullToRefresh onRefresh={handleRefresh} pullingContent=''>
+          <ul>
+            {posts.length ? (
+              posts.map((post, index) => (
+                <Link
+                  href={`/result/${post.postId}`}
+                  key={`${index}-${post.voteTitle}`}
+                >
+                  <PostItem post={post} />
+                </Link>
+              ))
+            ) : (
+              <EmptyPage href='/createPost' text='작성 글이 없습니다.' />
+            )}
+          </ul>
+        </PullToRefresh>
 
         <div ref={scrollRef} />
       </main>

diff --git a/src/app/users/[userId]/_components/PostingList.tsx b/src/app/users/[userId]/_components/PostingList.tsx
@@ -1,5 +1,7 @@
+import { useQueryClient } from '@tanstack/react-query';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
+import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import { useGetProfileAPI } from '@/src/apis/profile';
 import PostItem from '@/src/app/_components/PostItem';
@@ -10,22 +12,32 @@ const Posting = () => {
   const { userId } = useParams() as { userId: string };
   const { posts } = useGetProfileAPI(userId);
 
+  const queryClient = useQueryClient();
+
+  const handleRefresh = async () => {
+    await queryClient.invalidateQueries({ queryKey: ['profile', userId] });
+  };
+
   return (
     <div className='flex h-full flex-col'>
       <span className='font-h4-sm px-4 text-gray-accent3'>작성 글</span>
       <div className='flex grow flex-col'>
-        {posts.length ? (
-          posts.map((post, index) => (
-            <Link
-              href={`/result/${post.postId}`}
-              key={`${index}-${post.voteTitle}`}
-            >
-              <PostItem post={post} isNickname={false} />
-            </Link>
-          ))
-        ) : (
-          <EmptyPage text={NO_POSTING_TEXT} />
-        )}
+        <PullToRefresh onRefresh={handleRefresh} pullingContent=''>
+          <ul>
+            {posts.length ? (
+              posts.map((post, index) => (
+                <Link
+                  href={`/result/${post.postId}`}
+                  key={`${index}-${post.voteTitle}`}
+                >
+                  <PostItem post={post} isNickname={false} />
+                </Link>
+              ))
+            ) : (
+              <EmptyPage text={NO_POSTING_TEXT} />
+            )}
+          </ul>
+        </PullToRefresh>
       </div>
     </div>
   );

diff --git a/src/app/users/profile/(posting)/_components/PostingList/index.tsx b/src/app/users/profile/(posting)/_components/PostingList/index.tsx
@@ -1,4 +1,6 @@
+import { useQueryClient } from '@tanstack/react-query';
 import Link from 'next/link';
+import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import PostItem from '@/src/app/_components/PostItem';
 import EmptyPage from '@/src/components/EmptyPage';
@@ -13,21 +15,30 @@ const PostingList = ({
   isNickname?: boolean;
 }) => {
   const posts = useGetPostHistory();
+  const queryClient = useQueryClient();
+
+  const handleRefresh = async () => {
+    await queryClient.invalidateQueries({ queryKey: ['postList'] });
+  };
 
   return (
     <div className='flex h-full flex-col'>
-      {posts.length ? (
-        posts.map((post, index) => (
-          <Link
-            href={`/result/${post.postId}`}
-            key={`${index}-${post.voteTitle}`}
-          >
-            <PostItem post={post} isNickname={isNickname} />
-          </Link>
-        ))
-      ) : (
-        <EmptyPage text={text} />
-      )}
+      <PullToRefresh onRefresh={handleRefresh} pullingContent=''>
+        <ul>
+          {posts.length ? (
+            posts.map((post, index) => (
+              <Link
+                href={`/result/${post.postId}`}
+                key={`${index}-${post.voteTitle}`}
+              >
+                <PostItem post={post} isNickname={isNickname} />
+              </Link>
+            ))
+          ) : (
+            <EmptyPage text={text} />
+          )}
+        </ul>
+      </PullToRefresh>
     </div>
   );
 };