Merge branch 'develop' of github.com:pickly-team/pickly-frontend into…

… develop

src/RNListener.tsx

@@ -13,7 +13,7 @@ declare global {
 }
 
 const RNListener = () => {
-  const { memberId, login, setUserInfo } = useAuthStore();
+  const { memberId, login } = useAuthStore();
 
   useEffect(() => {
     if (window.ReactNativeWebView) {
@@ -29,7 +29,7 @@ const RNListener = () => {
     }
   });
 
-  useGETUserProfile({ loginId: memberId }, setUserInfo);
+  useGETUserProfile({ loginId: memberId });
 
   return null;
 };

src/auth/api/profile.ts

@@ -1,6 +1,6 @@
 import client from '@/common/service/client';
 import { navigatePath } from '@/constants/navigatePath';
-import { UserInfo } from '@/store/auth';
+import useAuthStore, { UserInfo } from '@/store/auth';
 import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
@@ -29,17 +29,17 @@ export const GET_USER_PROFILE = (params: GetAPIRequest) => [
   params.loginId,
 ];
 
-export const useGETUserProfile = (
-  params: GetAPIRequest,
-  setUserInfo: (userInfo: UserInfo) => void,
-) => {
+export const useGETUserProfile = (params: GetAPIRequest) => {
   const router = useNavigate();
+  const { setUserInfo } = useAuthStore();
   return useQuery(GET_USER_PROFILE(params), () => getUserProfile(params), {
     enabled: params.loginId !== 0,
     onSuccess: (data) => {
-      setUserInfo({ ...data, profileEmoji: data.profileEmoji || '🐶' });
+      setUserInfo((userInfo) => ({ ...userInfo, ...data }));
       if (data.nickname === '') router(navigatePath.USER);
     },
     onError: (e) => console.log(e),
+    cacheTime: 10 * 60 * 1000,
+    staleTime: 10 * 60 * 1000,
   });
 };

src/friend/api/friends.tsx

@@ -9,6 +9,7 @@ import client from '@/common/service/client';
 import useToast from '@/common-ui/Toast/hooks/useToast';
 import useSearchStore from '@/store/search';
 import { GET_FRIEND_PROFILE } from '@/members/api/member';
+import { GET_USER_PROFILE } from '@/auth/api/profile';
 
 // 팔로우 리스트 API
 export interface GETFollowingListResponse {
@@ -175,16 +176,17 @@ export const usePOSTFollowUserQuery = ({
         message: '팔로잉 중인 친구의 알림만 받을 수 있습니다',
         mode: 'SUCCESS',
       });
-      queryClient.invalidateQueries(GET_FOLLOWER_LIST_KEY({ memberId }));
-      queryClient.invalidateQueries(GET_FOLLOWING_LIST_KEY({ memberId }));
+      queryClient.refetchQueries(GET_USER_PROFILE({ loginId: memberId }));
+      queryClient.refetchQueries(GET_FOLLOWER_LIST_KEY({ memberId }));
+      queryClient.refetchQueries(GET_FOLLOWING_LIST_KEY({ memberId }));
       queryClient.setQueryData<FollowingCount>(
         GET_FOLLOWING_COUNT_KEY({ memberId }),
         (followingCount) => {
           if (followingCount) return followingCount + 1;
           return 1;
         },
       );
-      queryClient.invalidateQueries(
+      queryClient.refetchQueries(
         GET_FRIEND_PROFILE({
           loginId: memberId,
           memberId: selectedMemberId,
@@ -254,9 +256,10 @@ export const useDELETEUnFollowQuery = ({
         message: '팔로잉 중인 친구의 알림만 받을 수 있습니다',
         mode: 'SUCCESS',
       });
-      queryClient.invalidateQueries(GET_FOLLOWER_LIST_KEY({ memberId }));
-      queryClient.invalidateQueries(GET_FOLLOWING_LIST_KEY({ memberId }));
-      queryClient.invalidateQueries(
+      queryClient.refetchQueries(GET_USER_PROFILE({ loginId: memberId }));
+      queryClient.refetchQueries(GET_FOLLOWER_LIST_KEY({ memberId }));
+      queryClient.refetchQueries(GET_FOLLOWING_LIST_KEY({ memberId }));
+      queryClient.refetchQueries(
         GET_FRIEND_PROFILE({
           loginId: memberId,
           memberId: selectedMemberId,

src/friend/ui/FriendTypeSelect.tsx

@@ -2,11 +2,7 @@ import styled from '@emotion/styled';
 import Button from '@/common-ui/Button';
 import { css } from '@emotion/react';
 import { theme } from '@/styles/theme';
-
-export enum FriendType {
-  Follower = 'Follower',
-  Following = 'Following',
-}
+import { FriendType } from '@/store/friend';
 
 interface FriendTypeSelectProps {
   value: FriendType;

src/friend/ui/Friends.tsx

@@ -1,7 +1,6 @@
-import { useState } from 'react';
 import FriendFollowingItem from '@/friend/ui/friend/FriendFollowingItem';
 import FriendFollowerItem from '@/friend/ui/friend/FriendFollowerItem';
-import FriendTypeSelect, { FriendType } from '@/friend/ui/FriendTypeSelect';
+import FriendTypeSelect from '@/friend/ui/FriendTypeSelect';
 import styled from '@emotion/styled';
 import getRem from '@/utils/getRem';
 import useAuthStore from '@/store/auth';
@@ -12,6 +11,7 @@ import {
   useGETFollowingListQuery,
 } from '../api/friends';
 import BlankItem from '@/common-ui/BlankItem';
+import useFriendStore, { FriendType } from '@/store/friend';
 
 const Friends = () => {
   const { memberId } = useAuthStore();
@@ -24,9 +24,7 @@ const Friends = () => {
     memberId,
   });
 
-  const [selectedType, setSelectedType] = useState<FriendType>(
-    FriendType.Follower,
-  );
+  const { selectedType, setSelectedType } = useFriendStore();
 
   const followers = followerData?.pages.flatMap((page) => page.contents) ?? [];
   const followings =

src/members/ui/BasicInfoBox.tsx

@@ -7,22 +7,14 @@ import getRem from '@/utils/getRem';
 import TriggerBottomSheet from '@/common-ui/BottomSheet/TriggerBottomSheet';
 import IconButton from '@/common/ui/IconButton';
 import { navigatePath } from '@/constants/navigatePath';
+import { useGETUserProfile } from '@/auth/api/profile';
+import useAuthStore from '@/store/auth';
+import useFriendStore, { FriendType } from '@/store/friend';
+
+const BasicInfoBox = () => {
+  const { memberId } = useAuthStore();
+  const { data: userInfo } = useGETUserProfile({ loginId: memberId });
 
-const BasicInfoBox = ({
-  memberId,
-  profileEmoji,
-  nickname,
-  bookmarksCount,
-  followersCount,
-  followeesCount,
-}: {
-  memberId: number;
-  profileEmoji: string;
-  nickname: string;
-  bookmarksCount: number;
-  followersCount: number;
-  followeesCount: number;
-}) => {
   const numberFormatter = new Intl.NumberFormat('en', { notation: 'compact' });
 
   const router = useNavigate();
@@ -34,15 +26,17 @@ const BasicInfoBox = ({
     router(navigatePath.BLOCK_USER);
   };
 
+  const { setSelectedType } = useFriendStore();
+
+  const onClickFollowers = () => setSelectedType(FriendType.Follower);
+  const onClickFollowings = () => setSelectedType(FriendType.Following);
+
   return (
     <>
       <Container>
         <ProfileNameRow>
           <NicknameColumn>
-            <Text.Span fontSize={1.5}>{nickname}</Text.Span>
-            {/* <LinkContainer to={`/user/${memberId}/edit`}>
-              <Icon name={'circle-pencil'} size={'l'} />
-            </LinkContainer> */}
+            <Text.Span fontSize={1.5}>{userInfo?.nickname ?? ''}</Text.Span>
           </NicknameColumn>
           <MoreButtonContainer>
             <TriggerBottomSheet>
@@ -63,26 +57,32 @@ const BasicInfoBox = ({
         </ProfileNameRow>
         <ProfileInfoRow>
           <ProfileImage>
-            <Text.Span fontSize={3}>{profileEmoji}</Text.Span>
+            <Text.Span fontSize={3}>{userInfo?.profileEmoji ?? ''}</Text.Span>
           </ProfileImage>
           <ProfileStatsColumn>
             <Link to={'/'}>
               <ProfileStatColumn>
-                <Text.Span>{numberFormatter.format(bookmarksCount)}</Text.Span>
+                <Text.Span>
+                  {numberFormatter.format(userInfo?.bookmarksCount ?? 0)}
+                </Text.Span>
                 <Text.Span>북마크</Text.Span>
               </ProfileStatColumn>
             </Link>
 
-            <Link to={'/friend'}>
+            <Link onClick={onClickFollowers} to={'/friend'}>
               <ProfileStatColumn>
-                <Text.Span>{numberFormatter.format(followersCount)}</Text.Span>
+                <Text.Span>
+                  {numberFormatter.format(userInfo?.followersCount ?? 0)}
+                </Text.Span>
                 <Text.Span>팔로워</Text.Span>
               </ProfileStatColumn>
             </Link>
 
-            <Link to={'/friend'}>
+            <Link onClick={onClickFollowings} to={'/friend'}>
               <ProfileStatColumn>
-                <Text.Span>{numberFormatter.format(followeesCount)}</Text.Span>
+                <Text.Span>
+                  {numberFormatter.format(userInfo?.followeesCount ?? 0)}
+                </Text.Span>
                 <Text.Span>팔로잉</Text.Span>
               </ProfileStatColumn>
             </Link>

src/pages/ProfilePage.tsx

@@ -44,7 +44,7 @@ const ProfilePage = () => {
   return (
     <Layout>
       {/** 유저 정보 */}
-      <BasicInfoBox memberId={1} {...userInfo} />
+      <BasicInfoBox />
       <LBody>
         {/** 좋아요, 카테고리, 댓글 수 */}
         <StatsBox

src/store/auth.ts

@@ -16,7 +16,7 @@ interface Auth {
   token: string;
   memberId: number;
   userInfo: UserInfo;
-  setUserInfo: (userInfo: UserInfo) => void;
+  setUserInfo: (fn: (userInfo: UserInfo) => UserInfo) => void;
   login: ({ token, memberId }: { token: string; memberId: number }) => void;
 }
 
@@ -35,9 +35,8 @@ const useAuthStore = create<Auth>()(
         followeesCount: 0,
         bookmarksCount: 0,
       },
-      setUserInfo: (userInfo) => {
-        set({ userInfo });
-      },
+      setUserInfo: (fn: (userInfo: UserInfo) => UserInfo) =>
+        set((state) => ({ userInfo: fn(state.userInfo) })),
       login: ({ token, memberId }) => {
         set({ isLogin: true, token, memberId });
       },

src/store/friend.ts

@@ -0,0 +1,20 @@
+import { create } from 'zustand';
+
+export enum FriendType {
+  Follower = 'Follower',
+  Following = 'Following',
+}
+
+interface FriendStore {
+  selectedType: FriendType;
+  setSelectedType: (mode: FriendType) => void;
+}
+
+const useFriendStore = create<FriendStore>((set) => ({
+  selectedType: FriendType.Follower,
+  setSelectedType: (selectedType) => {
+    set({ selectedType });
+  },
+}));
+
+export default useFriendStore;