Merge: main 배포 (#116)

* Feat: 카테고리 목록 Persist 저장 (#115) * Fix: 포스트 이미지 lazy loading 수정 * Refactor: 사용 안하는 패키지 모듈 제거 --------- Co-authored-by: Cho-Ik-Jun <[email protected]> Co-authored-by: Seung Min Lee <[email protected]> Co-authored-by: Jaewoong Hwang <[email protected]> Co-authored-by: Jaewoong Hwang <[email protected]> Co-authored-by: kim-hyunjoo <[email protected]> Co-authored-by: kim-hyunjoo <[email protected]> --------- Co-authored-by: Cho-Ik-Jun <[email protected]> Co-authored-by: Seung Min Lee <[email protected]> Co-authored-by: Jaewoong Hwang <[email protected]> Co-authored-by: Jaewoong Hwang <[email protected]> Co-authored-by: kim-hyunjoo <[email protected]> Co-authored-by: kim-hyunjoo <[email protected]>
prgrms-fe-devcourse · Jul 17, 2024 · 35df5b3 · 35df5b3
1 parent cf1cccb
commit 35df5b3
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 38 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tanstack/query-async-storage-persister": "^5.51.1",
     "@tanstack/react-query": "^5.15.0",
     "@tanstack/react-query-devtools": "^5.37.1",
+    "@tanstack/react-query-persist-client": "^5.51.1",
     "@types/lodash": "^4.14.202",
     "@types/styled-components": "^5.1.34",
     "axios": "^1.6.3",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 import { ThemeProvider } from 'styled-components';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClient } from '@tanstack/react-query';
 import { useLocation } from 'react-router-dom';
 import { lightTheme, darkTheme } from '@/Styles/Theme';
 import GlobalStyle from '@/Styles/Global';
@@ -8,28 +8,43 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import Header from './Components/Common/Header';
 import { useDarkModeStore } from './Stores';
 import DarkMode from './Components/DarkMode';
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 
 const queryClient = new QueryClient({
   defaultOptions: {
-    queries: { retry: 0 },
+    queries: { retry: 0, refetchOnMount: false },
   },
 });
 
+const asyncStoragePersister = createAsyncStoragePersister({
+  storage: window.localStorage,
+});
+
 const App = () => {
   const { isDarkMode } = useDarkModeStore();
   const { pathname } = useLocation();
 
   return (
     <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
-      <QueryClientProvider client={queryClient}>
+      <PersistQueryClientProvider
+        client={queryClient}
+        persistOptions={{
+          persister: asyncStoragePersister,
+          dehydrateOptions: {
+            shouldDehydrateQuery: (query) =>
+              query.options.meta?.persist === true,
+          },
+        }}
+      >
         <GlobalStyle />
         <Header
           activeHeader={pathname !== '/login' && pathname !== '/signup'}
         />
         <RouteManager />
         <DarkMode />
         <ReactQueryDevtools initialIsOpen />
-      </QueryClientProvider>
+      </PersistQueryClientProvider>
     </ThemeProvider>
   );
 };

diff --git a/src/Components/Base/Avatar/index.tsx b/src/Components/Base/Avatar/index.tsx
@@ -1,7 +1,8 @@
-import { ForwardedRef, forwardRef, useState } from 'react';
+import { ForwardedRef, forwardRef, useEffect, useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import { AvatarProp } from './type';
 import { StyledImage, StyledAvatar, StyledWrapper } from './style';
+import DEFAULT_USER_IMAGE_SRC from '@/Constants/defaultUserImage';
 
 const Avatar = forwardRef(
   (
@@ -24,12 +25,11 @@ const Avatar = forwardRef(
       rootMargin: '50px 0px',
     });
 
-    if (inView && !loadedSrc) {
-      setLoadedSrc(
-        src ||
-          'https://user-images.githubusercontent.com/17202261/101670093-195d9180-3a96-11eb-9bd4-9f31cbe44aea.png',
-      );
-    }
+    useEffect(() => {
+      if (inView) {
+        setLoadedSrc(src || DEFAULT_USER_IMAGE_SRC);
+      }
+    }, [inView]);
 
     return (
       <StyledWrapper

diff --git a/src/Components/Common/PostCard/index.tsx b/src/Components/Common/PostCard/index.tsx
@@ -1,20 +1,20 @@
-/* eslint-disable no-underscore-dangle */
 import { useTheme } from 'styled-components';
 import Icon from '@/Components/Base/Icon';
 import Button from '@/Components/Base/Button';
-import DEFAULT_USER_IMAGE_SRC from '@/Constants/defaultUserImage';
 import {
   StyledPostCardWrapper,
   StyledPostCardHeader,
   StyledPostCardBody,
-  StyledProfileAvatar,
   StyledProfileName,
   StyledProfileContainer,
   HeartIconStyle,
   StyledPostCardTitle,
   StyledPostCardImage,
 } from './style';
 import { PostCardProps } from './type';
+import Avatar from '@/Components/Base/Avatar';
+import { useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 
 const PostCard = ({
   postId,
@@ -37,6 +37,18 @@ const PostCard = ({
 }: PostCardProps) => {
   const { colors } = useTheme();
 
+  const [loadedSrc, setLoadedSrc] = useState('');
+  const { ref: inViewRef, inView } = useInView({
+    triggerOnce: true,
+    rootMargin: '50px 0px',
+  });
+
+  useEffect(() => {
+    if (inView) {
+      setLoadedSrc(imageUrl);
+    }
+  }, [inView]);
+
   const followBtnBgColor = isFollower ? colors.read : colors.follow;
   const followBtnHoverBgColor = isFollower
     ? 'rgba(0, 149, 246, 0.7)'
@@ -62,10 +74,10 @@ const PostCard = ({
     >
       <StyledPostCardHeader>
         <StyledProfileContainer>
-          {/* 아바타 컴포넌트 삽입 필요 */}
-          <StyledProfileAvatar
-            src={authorThumbnail || DEFAULT_USER_IMAGE_SRC}
-            alt="프로필 아바타"
+          <Avatar
+            src={authorThumbnail || ''}
+            className="user-avatar"
+            size={40}
             onClick={onUserAvatarClick}
           />
           <StyledProfileName onClick={onUserNameClick}>
@@ -95,9 +107,12 @@ const PostCard = ({
         />
       </StyledPostCardHeader>
       <StyledPostCardTitle>{content}</StyledPostCardTitle>
-      <StyledPostCardBody onClick={onImageClick}>
+      <StyledPostCardBody
+        ref={inViewRef}
+        onClick={onImageClick}
+      >
         <StyledPostCardImage
-          src={imageUrl}
+          src={loadedSrc}
           alt="포스트 카드 이미지"
           $objectFit={objectFit}
         />

diff --git a/src/Components/Common/PostCard/style.ts b/src/Components/Common/PostCard/style.ts
@@ -33,12 +33,6 @@ export const StyledProfileContainer = styled.div`
   color: ${({ theme }) => theme.colors.textReverse};
 `;
 
-export const StyledProfileAvatar = styled.img`
-  width: 4rem;
-  height: 4rem;
-  border-radius: 50%;
-`;
-
 export const StyledProfileName = styled.span`
   cursor: pointer;
 `;

diff --git a/src/Pages/HomePage/index.tsx b/src/Pages/HomePage/index.tsx
@@ -89,7 +89,9 @@ const HomePage = () => {
   const { data: channelList, isSuccess: isChannelListSuccess } = useQuery({
     queryKey: [QUERY_KEYS.CHANNEL_LIST],
     queryFn: getChannels,
-    enabled: !isCheckAuthLoading,
+    staleTime: Infinity,
+    gcTime: Infinity,
+    meta: { persist: true },
   });
 
   const channelNameList = channelList
@@ -118,8 +120,7 @@ const HomePage = () => {
     getNextPageParam: (lastPage, allPages) => {
       return lastPage?.length !== 0 ? allPages.length * 10 : undefined;
     },
-    enabled:
-      !isCheckAuthLoading && isChannelListSuccess && currentChannelId !== '',
+    enabled: isChannelListSuccess && currentChannelId !== '',
   });
 
   useEffect(() => {

diff --git a/src/Services/Auth/index.ts b/src/Services/Auth/index.ts
@@ -67,10 +67,8 @@ export const logout = async () => {
 export const checkAuth = async () => {
   try {
     const res = await axiosAuthInstance.get<UserType>(DOMAIN.AUTH_USER);
-
     return res.data;
   } catch (e) {
-    handleError(e);
     return null;
   }
 };