From 7a2a28be2377e14e43a0d51cef0ad1948edc43b1 Mon Sep 17 00:00:00 2001
From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com>
Date: Fri, 30 Aug 2024 01:01:59 +0900
Subject: [PATCH 1/7] =?UTF-8?q?feat:=20follow=20state=20sync=20hook,=20sto?=
 =?UTF-8?q?re,=20api=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/api/friend/route.ts           |  17 +++-
 hooks/apis/index.ts               |   2 +
 hooks/apis/use-follow-mutate.ts   |  29 +++++++
 hooks/apis/use-following-state.ts | 128 ++++++++++++++++++++++++++++++
 store/index.ts                    |   1 +
 store/member-following.ts         |  71 +++++++++++++++++
 6 files changed, 245 insertions(+), 3 deletions(-)
 create mode 100644 hooks/apis/use-follow-mutate.ts
 create mode 100644 hooks/apis/use-following-state.ts
 create mode 100644 store/member-following.ts

diff --git a/app/api/friend/route.ts b/app/api/friend/route.ts
index 8f5a1d0d..2d4a3740 100644
--- a/app/api/friend/route.ts
+++ b/app/api/friend/route.ts
@@ -2,13 +2,24 @@ import { NextRequest, NextResponse } from 'next/server';
 
 import { fetchData } from '@/apis/fetch-data';
 
-export type followingProps = {
+export type FollowRequestBody = {
   followingId: number;
 };
 
+export type FollowListRequestBody = {
+  friends: number[];
+};
+
 export async function PUT(request: NextRequest) {
-  const { followingId } = (await request.json()) as followingProps;
-  const data = await fetchData(`/friend`, 'PUT', { followingId });
+  const body = (await request.json()) as Promise<FollowRequestBody>;
+  const data = await fetchData(`/friend`, 'PUT', body);
+
+  return NextResponse.json(data);
+}
+
+export async function POST(request: NextRequest) {
+  const body = (await request.json()) as Promise<FollowListRequestBody>;
+  const data = await fetchData(`/friend`, 'POST', body);
 
   return NextResponse.json(data);
 }
diff --git a/hooks/apis/index.ts b/hooks/apis/index.ts
index cf01b756..0d073503 100644
--- a/hooks/apis/index.ts
+++ b/hooks/apis/index.ts
@@ -1 +1,3 @@
 export * from './use-current-member-info';
+export * from './use-follow-mutate';
+export * from './use-following-state';
diff --git a/hooks/apis/use-follow-mutate.ts b/hooks/apis/use-follow-mutate.ts
new file mode 100644
index 00000000..945c3e9e
--- /dev/null
+++ b/hooks/apis/use-follow-mutate.ts
@@ -0,0 +1,29 @@
+'use client';
+
+import { useMutation } from '@tanstack/react-query';
+
+export type RemoveCheer = {
+  reactionId: number;
+};
+
+const fetchFollow = async (followingId: number) => {
+  const res = await fetch(`/api/friend`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ followingId }),
+  });
+
+  return res.json();
+};
+
+export const useFollowMutate = () => {
+  const mutate = useMutation({
+    mutationFn: (followingId: number) => fetchFollow(followingId),
+  });
+
+  return {
+    ...mutate,
+  };
+};
diff --git a/hooks/apis/use-following-state.ts b/hooks/apis/use-following-state.ts
new file mode 100644
index 00000000..6ca81231
--- /dev/null
+++ b/hooks/apis/use-following-state.ts
@@ -0,0 +1,128 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useMemo } from 'react';
+
+import { Response } from '@/apis';
+import { useMemberFollowingStore } from '@/store';
+
+import { useFollowMutate } from './use-follow-mutate';
+
+export type FollowState = {
+  memberId: number;
+  isFollowing: boolean;
+};
+
+export type FollowStateResponse = Response<{ followingList: FollowState[] }>;
+
+const fetchFollowingList = async (friendsArr: number[]) => {
+  const res = await fetch(`/api/friend`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ friends: friendsArr }),
+  });
+
+  return res.json();
+};
+
+export const useMemberFollowingState = () => {
+  const {
+    safeGet,
+    set: storeSet,
+    useMemberIsFollowing,
+  } = useMemberFollowingStore();
+  const { mutate: debouncedFollowMutate } = useFollowMutate();
+
+  // NOTE: 단일 isFollowing state 조회
+  const getMemberFollowingState = async (friendId: number) => {
+    const storedData = safeGet(friendId);
+
+    if (!storedData._original) {
+      const { data } = (await fetchFollowingList([
+        friendId,
+      ])) as FollowStateResponse;
+
+      if (data?.followingList?.length) {
+        const isFollowing = data.followingList.find(
+          ({ memberId }) => memberId === friendId,
+        )?.isFollowing;
+
+        if (isFollowing === undefined) {
+          return storedData;
+        }
+        const _original = {
+          isFollowing,
+        };
+        const fetchingFollowingState = {
+          _original,
+          ..._original,
+        };
+
+        storeSet(friendId, fetchingFollowingState);
+        return fetchingFollowingState;
+      }
+    }
+
+    return storedData;
+  };
+
+  // NOTE: 리스트 isFollowing State 조회
+  const useSyncFollowingListState = (friendsArr: number[]) => {
+    const enabled = !!friendsArr.length;
+    const { data, refetch } = useQuery<FollowStateResponse>({
+      queryKey: ['useFollowingState', friendsArr],
+      queryFn: () => fetchFollowingList(friendsArr),
+      enabled,
+    });
+    const followingList = useMemo(
+      () => data?.data?.followingList ?? [],
+      [data],
+    );
+
+    useEffect(() => {
+      followingList.forEach(({ memberId, isFollowing }) => {
+        const fetchingFollowingState = {
+          isFollowing: isFollowing ?? false,
+        };
+        const storeFollowingState = {
+          _original: fetchingFollowingState,
+          ...fetchingFollowingState,
+        };
+
+        storeSet(memberId, storeFollowingState);
+      });
+    }, [followingList]);
+
+    return {
+      data,
+      refetch: () => enabled && refetch(),
+    };
+  };
+
+  // NOTE: toggle Follow State
+  const toggleFollow = async (friendId: number) => {
+    const currentFollowingState = await getMemberFollowingState(friendId);
+
+    if (!currentFollowingState._original) {
+      console.warn(`friendId:${friendId} 인 following 여부 정보가 없습니다.`);
+      return;
+    }
+
+    const nextFollowingState = {
+      _original: currentFollowingState._original,
+      isFollowing: !currentFollowingState.isFollowing,
+    };
+
+    storeSet(friendId, nextFollowingState);
+    debouncedFollowMutate(friendId);
+  };
+
+  return {
+    getMemberFollowingState,
+    useSyncFollowingListState,
+    useMemberIsFollowing,
+    toggleFollow,
+  };
+};
diff --git a/store/index.ts b/store/index.ts
index 2bf6207d..c07ab6f6 100644
--- a/store/index.ts
+++ b/store/index.ts
@@ -1,6 +1,7 @@
 export * from './bottom-sheet';
 export * from './calendar';
 export * from './dialog';
+export * from './member-following';
 export * from './modal';
 export * from './toast';
 export * from './withdrawal-reason';
diff --git a/store/member-following.ts b/store/member-following.ts
new file mode 100644
index 00000000..1ffb95a9
--- /dev/null
+++ b/store/member-following.ts
@@ -0,0 +1,71 @@
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+type OmittedOriginal<TType> = Omit<TType, '_original'>;
+
+export type MemberFollowingState = {
+  _original: OmittedOriginal<MemberFollowingState> | null;
+  isFollowing: boolean;
+};
+
+// member ID별 고유한 쿼리 키
+const getQueryKey = (memberId: number) => ['followingState', String(memberId)];
+
+// initialFollowingState = false로 설정
+// _original : 서버에서 맨 처음 받아온 데이터
+const initialFollowingState: MemberFollowingState = {
+  _original: null,
+  isFollowing: false,
+};
+
+/**
+ * @description 멤버별 팔로잉/팔로우 여부 관리하는 store
+ */
+export const useMemberFollowingStore = () => {
+  const qc = useQueryClient();
+
+  // member ID에 대해 팔로잉 여부 데이터 set
+  const set = (memberId: number, isFollowingState: MemberFollowingState) => {
+    qc.setQueryData(getQueryKey(memberId), () => isFollowingState);
+  };
+
+  // member ID에 대해 팔로잉 여부 데이터 get
+  const get = (memberId: number) =>
+    qc.getQueryData<MemberFollowingState>(getQueryKey(memberId));
+
+  // member ID에 대해 안전한 팔로잉 여부 데이터 get -> 없을 시에 initialFollowingState 반환
+  const safeGet = (memberId: number) => {
+    const stored = get(memberId);
+    if (!stored) {
+      set(memberId, { ...initialFollowingState });
+      return { ...initialFollowingState };
+    }
+    return stored;
+  };
+
+  // 여러개의 member ID에 대한 팔로잉 여부 데이터 동기화
+  const sync = (data: Map<number, MemberFollowingState>) => {
+    data.forEach((isFollowingState, memberId) =>
+      set(memberId, isFollowingState),
+    );
+    return data.size;
+  };
+
+  // member ID에 대한 팔로잉 여부 데이터를 가져오는 훅
+  const useMemberIsFollowing = (memberId: number) => {
+    const { data } = useQuery<MemberFollowingState>({
+      queryKey: getQueryKey(memberId),
+      queryFn: () => safeGet(memberId),
+      initialData: safeGet(memberId),
+      staleTime: Infinity,
+    });
+
+    return data;
+  };
+
+  return {
+    set,
+    safeGet,
+    sync,
+    useMemberIsFollowing,
+  };
+};

From cec73c794de2710220c442ac6282e2bd1659fbe4 Mon Sep 17 00:00:00 2001
From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com>
Date: Fri, 30 Aug 2024 01:17:41 +0900
Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 hooks/apis/use-follow-mutate.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/hooks/apis/use-follow-mutate.ts b/hooks/apis/use-follow-mutate.ts
index 945c3e9e..6ea62095 100644
--- a/hooks/apis/use-follow-mutate.ts
+++ b/hooks/apis/use-follow-mutate.ts
@@ -2,10 +2,6 @@
 
 import { useMutation } from '@tanstack/react-query';
 
-export type RemoveCheer = {
-  reactionId: number;
-};
-
 const fetchFollow = async (followingId: number) => {
   const res = await fetch(`/api/friend`, {
     method: 'PUT',

From 31f6c713d63420f2df9603b30ee1952b553e61c8 Mon Sep 17 00:00:00 2001
From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com>
Date: Fri, 30 Aug 2024 01:21:20 +0900
Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20?=
 =?UTF-8?q?=EC=83=81=ED=83=9C=20=EC=8B=B1=ED=81=AC,=20handle=20click=20fol?=
 =?UTF-8?q?low=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/profile/[id]/page.tsx                     | 17 +------
 .../profile-list/profile-list-item.tsx        | 49 ++++++++++++-------
 .../molecules/profile-list/profile-list.tsx   | 17 ++++++-
 features/follow/apis/use-follower-list.tsx    | 15 ++++++
 features/follow/apis/use-following-list.tsx   | 15 ++++++
 .../apis/use-profile-search.tsx               | 15 ++++++
 features/profile/apis/fetch-following-data.ts | 10 ----
 features/profile/hooks/use-following-data.tsx | 16 ------
 features/profile/types/follow.ts              |  3 --
 features/profile/types/index.ts               |  1 -
 10 files changed, 94 insertions(+), 64 deletions(-)
 delete mode 100644 features/profile/apis/fetch-following-data.ts
 delete mode 100644 features/profile/hooks/use-following-data.tsx
 delete mode 100644 features/profile/types/follow.ts

diff --git a/app/profile/[id]/page.tsx b/app/profile/[id]/page.tsx
index d2a5639f..43525b32 100644
--- a/app/profile/[id]/page.tsx
+++ b/app/profile/[id]/page.tsx
@@ -10,7 +10,6 @@ import { SettingButton } from '@/components/molecules';
 import { useProfileData } from '@/features/profile';
 import { MyProfile } from '@/features/profile/components/organisms/my-page';
 import { OtherPage } from '@/features/profile/components/organisms/other-page';
-import { useFollowingData } from '@/features/profile/hooks/use-following-data';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -27,25 +26,16 @@ export default function Profile({ params }: Mypage) {
 
   const isMyProfile = profileData?.isMyProfile;
 
-  const {
-    data: followingData,
-    isLoading: isFollowingLoading,
-    error: followingError,
-  } = useFollowingData(params.id, isMyProfile);
-
   if (profileError) {
     return <div>멤버가 존재하지 않아요.</div>;
   }
-  if (isProfileLoading || isFollowingLoading) {
+  if (isProfileLoading) {
     return <LoadingArea />;
   }
 
   if (!profileData) {
     return <div>Profile data is not available.</div>;
   }
-  if (followingError) {
-    return <div>Error fetching following data.</div>;
-  }
 
   return (
     <article className={containerStyle}>
@@ -66,10 +56,7 @@ export default function Profile({ params }: Mypage) {
             </HeaderBar.LeftContent>
             <BackButton />
           </HeaderBar>
-          <OtherPage
-            profileData={profileData}
-            followingInitialValue={followingData?.isFollowing || false}
-          />
+          <OtherPage profileData={profileData} followingInitialValue={false} />
         </>
       )}
       <GlobalNavigationBar />
diff --git a/components/molecules/profile-list/profile-list-item.tsx b/components/molecules/profile-list/profile-list-item.tsx
index a9ba371c..1b9d6729 100644
--- a/components/molecules/profile-list/profile-list-item.tsx
+++ b/components/molecules/profile-list/profile-list-item.tsx
@@ -1,6 +1,7 @@
 import Link from 'next/link';
 
 import { Button } from '@/components/atoms';
+import { useMemberFollowingState } from '@/hooks';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 import { MemberProfile } from '@/types';
@@ -8,7 +9,7 @@ import { MemberProfile } from '@/types';
 import { ProfileImage } from '../profile-image';
 
 type FollowListItem = {
-  isFollow: boolean;
+  isMyProfile?: boolean;
   onClick?: () => void;
   onClickFollow?: () => void;
 } & MemberProfile;
@@ -17,8 +18,15 @@ export const ProfileListItem = ({
   nickname,
   introduction,
   profileImageUrl,
-  isFollow,
+  isMyProfile,
 }: FollowListItem) => {
+  const { useMemberIsFollowing, toggleFollow } = useMemberFollowingState();
+  const { isFollowing } = useMemberIsFollowing(memberId);
+
+  const handleClickFollow = () => {
+    void toggleFollow(memberId);
+  };
+
   return (
     <div className={containerStyle}>
       <Link href={`/profile/${memberId}`} className={linkStyle}>
@@ -37,21 +45,28 @@ export const ProfileListItem = ({
         </div>
       </Link>
 
-      {isFollow ? (
-        <Button
-          size="small"
-          label="팔로잉"
-          variant="outlined"
-          buttonType="assistive"
-          className={followButtonStyle}
-        />
-      ) : (
-        <Button
-          size="small"
-          label="팔로우"
-          variant="outlined"
-          className={followButtonStyle}
-        />
+      {!isMyProfile && (
+        <>
+          {isFollowing ? (
+            <Button
+              size="small"
+              label="팔로잉"
+              variant="outlined"
+              buttonType="assistive"
+              className={followButtonStyle}
+              onClick={handleClickFollow}
+            />
+          ) : (
+            <Button
+              size="small"
+              label="팔로우"
+              variant="outlined"
+              buttonType="primary"
+              className={followButtonStyle}
+              onClick={handleClickFollow}
+            />
+          )}
+        </>
       )}
     </div>
   );
diff --git a/components/molecules/profile-list/profile-list.tsx b/components/molecules/profile-list/profile-list.tsx
index 67b8c806..edcfc6d6 100644
--- a/components/molecules/profile-list/profile-list.tsx
+++ b/components/molecules/profile-list/profile-list.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import React from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 import { LoadingArea } from '@/components/atoms';
+import { useCurrentMemberInfo } from '@/hooks';
 import { MemberProfile } from '@/types';
 
 import { ProfileListItem } from './profile-list-item';
@@ -21,6 +21,8 @@ export const ProfileList = ({
   isLoading,
   isFetchingNextPage,
 }: ProfileList) => {
+  const { data: myData } = useCurrentMemberInfo();
+
   const handleRangeChanged = (range: { endIndex: number }) => {
     const currentContentsLastIndex = data.length - 1;
     if (range.endIndex >= currentContentsLastIndex - 3) {
@@ -28,6 +30,12 @@ export const ProfileList = ({
     }
   };
 
+  const getIsMyProfile = (memberId: number) => {
+    if (!myData?.data) return false;
+    const myMemberId = myData?.data.id;
+    return myMemberId === memberId;
+  };
+
   if (isLoading) {
     return <ProfileListSkeleton />;
   }
@@ -37,7 +45,12 @@ export const ProfileList = ({
       overscan={500}
       useWindowScroll
       rangeChanged={handleRangeChanged}
-      itemContent={(_, item) => <ProfileListItem isFollow={true} {...item} />}
+      itemContent={(_, item) => (
+        <ProfileListItem
+          {...item}
+          isMyProfile={getIsMyProfile(item.memberId)}
+        />
+      )}
       style={{
         width: '100%',
         height: '100%',
diff --git a/features/follow/apis/use-follower-list.tsx b/features/follow/apis/use-follower-list.tsx
index 3e09b57c..5052b958 100644
--- a/features/follow/apis/use-follower-list.tsx
+++ b/features/follow/apis/use-follower-list.tsx
@@ -1,6 +1,9 @@
 'use client';
 
 import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import { useMemberFollowingState } from '@/hooks';
 
 import { ProfileFollow } from '../types';
 
@@ -32,6 +35,18 @@ export const useFollowerList = (memberId: number) => {
   const flattenData =
     query.data?.pages.flatMap(({ data }) => data?.contents ?? []) ?? [];
 
+  const lastPageCount = query.data?.pages.length ?? 0;
+  const lastMemberIdList = useMemo(
+    () =>
+      query.data?.pages[lastPageCount - 1].data?.contents?.flatMap(
+        ({ memberId }) => memberId,
+      ) ?? [],
+    [lastPageCount, query.data?.pages],
+  );
+
+  const { useSyncFollowingListState } = useMemberFollowingState();
+  useSyncFollowingListState(lastMemberIdList);
+
   return {
     ...query,
     flattenData,
diff --git a/features/follow/apis/use-following-list.tsx b/features/follow/apis/use-following-list.tsx
index b0b330c8..cd437bc2 100644
--- a/features/follow/apis/use-following-list.tsx
+++ b/features/follow/apis/use-following-list.tsx
@@ -1,6 +1,9 @@
 'use client';
 
 import { keepPreviousData, useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import { useMemberFollowingState } from '@/hooks';
 
 import { ProfileFollow } from '../types';
 
@@ -32,6 +35,18 @@ export const useFollowingList = (memberId: number) => {
   const flattenData =
     query.data?.pages.flatMap(({ data }) => data?.contents ?? []) ?? [];
 
+  const lastPageCount = query.data?.pages.length ?? 0;
+  const lastMemberIdList = useMemo(
+    () =>
+      query.data?.pages[lastPageCount - 1].data?.contents?.flatMap(
+        ({ memberId }) => memberId,
+      ) ?? [],
+    [lastPageCount, query.data?.pages],
+  );
+
+  const { useSyncFollowingListState } = useMemberFollowingState();
+  useSyncFollowingListState(lastMemberIdList);
+
   return {
     ...query,
     flattenData,
diff --git a/features/profile-search/apis/use-profile-search.tsx b/features/profile-search/apis/use-profile-search.tsx
index 92b2cd5d..03e0cee8 100644
--- a/features/profile-search/apis/use-profile-search.tsx
+++ b/features/profile-search/apis/use-profile-search.tsx
@@ -1,6 +1,9 @@
 'use client';
 
 import { useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import { useMemberFollowingState } from '@/hooks';
 
 import { ProfileSearch } from '../types';
 
@@ -31,6 +34,18 @@ export const useProfileSearch = (nameQuery: string) => {
     query.data?.pages.flatMap(({ data }) => data?.memberInfoResponses ?? []) ??
     [];
 
+  const lastPageCount = query.data?.pages.length ?? 0;
+  const lastMemberIdList = useMemo(
+    () =>
+      query.data?.pages[lastPageCount - 1].data?.memberInfoResponses?.flatMap(
+        ({ memberId }) => memberId,
+      ) ?? [],
+    [lastPageCount, query.data?.pages],
+  );
+
+  const { useSyncFollowingListState } = useMemberFollowingState();
+  useSyncFollowingListState(lastMemberIdList);
+
   return {
     ...query,
     flattenData,
diff --git a/features/profile/apis/fetch-following-data.ts b/features/profile/apis/fetch-following-data.ts
deleted file mode 100644
index cb64d7fa..00000000
--- a/features/profile/apis/fetch-following-data.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FollowingProps } from '@/features/profile';
-
-export async function fetchFollowingData(id: number): Promise<FollowingProps> {
-  const response = await fetch(`/api/friend/${id}`);
-  if (!response.ok) {
-    throw new Error('Failed to fetch friend data');
-  }
-
-  return (await response.json()) as FollowingProps;
-}
diff --git a/features/profile/hooks/use-following-data.tsx b/features/profile/hooks/use-following-data.tsx
deleted file mode 100644
index bf7fdae6..00000000
--- a/features/profile/hooks/use-following-data.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { FollowingProps } from '@/features/profile';
-
-import { fetchFollowingData } from '../apis/fetch-following-data';
-
-export const useFollowingData = (id: number, isMyProfile?: boolean) => {
-  return useQuery<FollowingProps['data']>({
-    queryKey: ['followingStatus', id],
-    queryFn: () =>
-      fetchFollowingData(id).then((data) => {
-        return data.data;
-      }),
-    enabled: isMyProfile !== undefined && !isMyProfile,
-  });
-};
diff --git a/features/profile/types/follow.ts b/features/profile/types/follow.ts
deleted file mode 100644
index 36748b5d..00000000
--- a/features/profile/types/follow.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { Response } from '@/apis';
-
-export type FollowingProps = Response<{ isFollowing: boolean }>;
diff --git a/features/profile/types/index.ts b/features/profile/types/index.ts
index 30ee5b8f..7c9f5ba4 100644
--- a/features/profile/types/index.ts
+++ b/features/profile/types/index.ts
@@ -1,3 +1,2 @@
-export * from './follow';
 export * from './profile';
 export * from './profile-edit-image';

From a419ccebb4e96173e4ca68c597dea85094d84655 Mon Sep 17 00:00:00 2001
From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com>
Date: Fri, 30 Aug 2024 01:34:12 +0900
Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EB=A7=88=EC=9D=B4=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=8C=94=EB=A1=9C=EC=9A=B0=20=EC=83=81?=
 =?UTF-8?q?=ED=83=9C=20=EC=8B=B1=ED=81=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/profile/[id]/page.tsx                     |  6 +++++-
 .../components/atoms/follow-button.tsx        | 21 ++++++++-----------
 .../components/organisms/other-page.tsx       | 11 ++--------
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/app/profile/[id]/page.tsx b/app/profile/[id]/page.tsx
index 43525b32..5f4dfcab 100644
--- a/app/profile/[id]/page.tsx
+++ b/app/profile/[id]/page.tsx
@@ -10,6 +10,7 @@ import { SettingButton } from '@/components/molecules';
 import { useProfileData } from '@/features/profile';
 import { MyProfile } from '@/features/profile/components/organisms/my-page';
 import { OtherPage } from '@/features/profile/components/organisms/other-page';
+import { useMemberFollowingState } from '@/hooks';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -24,6 +25,9 @@ export default function Profile({ params }: Mypage) {
     error: profileError,
   } = useProfileData(params.id);
 
+  const { useSyncFollowingListState } = useMemberFollowingState();
+  useSyncFollowingListState([Number(params.id)]);
+
   const isMyProfile = profileData?.isMyProfile;
 
   if (profileError) {
@@ -56,7 +60,7 @@ export default function Profile({ params }: Mypage) {
             </HeaderBar.LeftContent>
             <BackButton />
           </HeaderBar>
-          <OtherPage profileData={profileData} followingInitialValue={false} />
+          <OtherPage profileData={profileData} />
         </>
       )}
       <GlobalNavigationBar />
diff --git a/features/profile/components/atoms/follow-button.tsx b/features/profile/components/atoms/follow-button.tsx
index 29ffe5b5..219ccc19 100644
--- a/features/profile/components/atoms/follow-button.tsx
+++ b/features/profile/components/atoms/follow-button.tsx
@@ -1,28 +1,25 @@
 'use client';
 
 import { Button } from '@/components/atoms';
+import { useMemberFollowingState } from '@/hooks';
 import { css } from '@/styled-system/css';
 
-import { useFollow } from '../../hooks';
-
 type FollowButtonProps = {
   followingId: number;
-  followingInitialValue: boolean;
 };
 
-export function FollowButton({
-  followingId,
-  followingInitialValue,
-}: FollowButtonProps) {
-  const { isFollowing, handleFollowing } = useFollow({
-    followingId,
-    followingInitialValue,
-  });
+export function FollowButton({ followingId }: FollowButtonProps) {
+  const { useMemberIsFollowing, toggleFollow } = useMemberFollowingState();
+  const { isFollowing } = useMemberIsFollowing(followingId);
 
   const buttonText = isFollowing ? '팔로잉' : '팔로우';
   const buttonVariant = isFollowing ? 'outlined' : 'solid';
   const buttonType = isFollowing ? 'assistive' : 'primary';
 
+  const handleClickFollow = () => {
+    void toggleFollow(followingId);
+  };
+
   return (
     <Button
       size="small"
@@ -30,7 +27,7 @@ export function FollowButton({
       variant={buttonVariant}
       buttonType={buttonType}
       className={css({ width: '100%' })}
-      onClick={handleFollowing}
+      onClick={handleClickFollow}
     />
   );
 }
diff --git a/features/profile/components/organisms/other-page.tsx b/features/profile/components/organisms/other-page.tsx
index 53c7b670..ff181ca8 100644
--- a/features/profile/components/organisms/other-page.tsx
+++ b/features/profile/components/organisms/other-page.tsx
@@ -16,13 +16,9 @@ import { ProfileContainer } from './profile-container';
 
 type OtherPageProps = {
   profileData: ProfileProps['data'];
-  followingInitialValue: boolean;
 };
 
-export function OtherPage({
-  profileData,
-  followingInitialValue,
-}: OtherPageProps) {
+export function OtherPage({ profileData }: OtherPageProps) {
   const [selectedTab, setSelectedTab] = useState<ProfileType>('record');
 
   return (
@@ -30,10 +26,7 @@ export function OtherPage({
       <section className={profileContainer}>
         <ProfileContainer profileData={profileData} />
         <div className={buttonContainer}>
-          <FollowButton
-            followingInitialValue={followingInitialValue}
-            followingId={profileData.memberId}
-          />
+          <FollowButton followingId={profileData.memberId} />
         </div>
       </section>
       <Tab type="primary">

From b859242f67e74f929c3d8c956ccc5526ee9e2cfc Mon Sep 17 00:00:00 2001
From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com>
Date: Fri, 30 Aug 2024 01:58:51 +0900
Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?=
 =?UTF-8?q?=EB=B9=8C=EB=93=9C=20=EC=97=90=EB=9F=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 features/main/components/calendar/molecules/calendar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/features/main/components/calendar/molecules/calendar.tsx b/features/main/components/calendar/molecules/calendar.tsx
index cd728635..265bf69e 100644
--- a/features/main/components/calendar/molecules/calendar.tsx
+++ b/features/main/components/calendar/molecules/calendar.tsx
@@ -15,7 +15,7 @@ import { flex } from '@/styled-system/patterns';
 import { CalendarItem, DayLabels } from '../atoms';
 import { CalendarHeader } from './calendar-header';
 
-export const Calendar = ({ targetId }: { targetId: number }) => {
+export const Calendar = ({ targetId }: { targetId?: number }) => {
   const setSwimCount = useSetAtom(calendarSwimCountAtom);
   const { data, isFetching } = useCalendarData(targetId);
   const [squares, startPoint, endPoint, isDateToday] =

From a1b27f30d20a565e6a113a4184352c4e3b9d3653 Mon Sep 17 00:00:00 2001
From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com>
Date: Fri, 30 Aug 2024 02:28:14 +0900
Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20=EC=9D=91=EC=9B=90=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/cheer}/cheer-bottom-sheet.tsx                    | 2 +-
 .../components => components/molecules/cheer}/cheer-item.tsx   | 3 +--
 components/molecules/cheer/index.ts                            | 2 ++
 components/molecules/index.ts                                  | 1 +
 features/record-detail/components/index.ts                     | 2 --
 features/record-detail/sections/detail-cheer-fab.tsx           | 3 ++-
 features/record-detail/sections/detail-cheer-modal.tsx         | 3 ++-
 7 files changed, 9 insertions(+), 7 deletions(-)
 rename {features/record-detail/components => components/molecules/cheer}/cheer-bottom-sheet.tsx (95%)
 rename {features/record-detail/components => components/molecules/cheer}/cheer-item.tsx (96%)
 create mode 100644 components/molecules/cheer/index.ts

diff --git a/features/record-detail/components/cheer-bottom-sheet.tsx b/components/molecules/cheer/cheer-bottom-sheet.tsx
similarity index 95%
rename from features/record-detail/components/cheer-bottom-sheet.tsx
rename to components/molecules/cheer/cheer-bottom-sheet.tsx
index 279501b5..95f798ee 100644
--- a/features/record-detail/components/cheer-bottom-sheet.tsx
+++ b/components/molecules/cheer/cheer-bottom-sheet.tsx
@@ -1,8 +1,8 @@
 import { Button } from '@/components/atoms';
 import { BottomSheet, BottomSheetProps } from '@/components/molecules';
+import { DetailCheerItemSelected } from '@/features/record-detail';
 import { flex, grid } from '@/styled-system/patterns';
 
-import { DetailCheerItemSelected } from '../types';
 import { CheerItem } from './cheer-item';
 
 type CheerBottomSheet = {
diff --git a/features/record-detail/components/cheer-item.tsx b/components/molecules/cheer/cheer-item.tsx
similarity index 96%
rename from features/record-detail/components/cheer-item.tsx
rename to components/molecules/cheer/cheer-item.tsx
index 83728824..91d1f112 100644
--- a/features/record-detail/components/cheer-item.tsx
+++ b/components/molecules/cheer/cheer-item.tsx
@@ -1,7 +1,6 @@
+import { DetailCheerItem } from '@/features/record-detail';
 import { css, cva } from '@/styled-system/css';
 
-import { DetailCheerItem } from '../types';
-
 type CheerItem = {
   isSelected?: boolean;
   onClick?: () => void;
diff --git a/components/molecules/cheer/index.ts b/components/molecules/cheer/index.ts
new file mode 100644
index 00000000..6ae792b8
--- /dev/null
+++ b/components/molecules/cheer/index.ts
@@ -0,0 +1,2 @@
+export * from './cheer-bottom-sheet';
+export * from './cheer-item';
diff --git a/components/molecules/index.ts b/components/molecules/index.ts
index cf445732..b735538b 100644
--- a/components/molecules/index.ts
+++ b/components/molecules/index.ts
@@ -1,4 +1,5 @@
 export * from './bottom-sheet';
+export * from './cheer';
 export * from './dialog';
 export * from './global-navigation-bar';
 export * from './header-bar';
diff --git a/features/record-detail/components/index.ts b/features/record-detail/components/index.ts
index 88bbd2cd..aab1fba5 100644
--- a/features/record-detail/components/index.ts
+++ b/features/record-detail/components/index.ts
@@ -1,5 +1,3 @@
-export * from './cheer-bottom-sheet';
-export * from './cheer-item';
 export * from './cheer-modal';
 export * from './cheer-progress';
 export * from './date-picker';
diff --git a/features/record-detail/sections/detail-cheer-fab.tsx b/features/record-detail/sections/detail-cheer-fab.tsx
index b2b0e575..a6c3d6ab 100644
--- a/features/record-detail/sections/detail-cheer-fab.tsx
+++ b/features/record-detail/sections/detail-cheer-fab.tsx
@@ -2,11 +2,12 @@
 
 import { useState } from 'react';
 
+import { CheerBottomSheet } from '@/components/molecules';
 import { useBottomSheet, useToast } from '@/hooks';
 import { css } from '@/styled-system/css';
 
 import { useCheer, useCheerEligibility, useCheerPreviewList } from '../apis';
-import { CheerBottomSheet, CheerProgress } from '../components';
+import { CheerProgress } from '../components';
 import { initialCheerList } from '../data';
 import { DetailCheerItemSelected, RecordDetailType } from '../types';
 
diff --git a/features/record-detail/sections/detail-cheer-modal.tsx b/features/record-detail/sections/detail-cheer-modal.tsx
index 63465492..90f224d9 100644
--- a/features/record-detail/sections/detail-cheer-modal.tsx
+++ b/features/record-detail/sections/detail-cheer-modal.tsx
@@ -2,12 +2,13 @@
 
 import { useState } from 'react';
 
+import { CheerItem } from '@/components/molecules';
 import { useDragScroll, useModal } from '@/hooks';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
 import { useCheerPreviewList } from '../apis';
-import { CheerItem, CheerModal } from '../components';
+import { CheerModal } from '../components';
 import { RecordDetailType } from '../types';
 
 export const DetailCheerModalSection = ({

From cbb0a558268cb486c4dc9cd8b51b125df91314d9 Mon Sep 17 00:00:00 2001
From: Jiyoung Jung <72294509+Jungjjeong@users.noreply.github.com>
Date: Fri, 30 Aug 2024 03:04:58 +0900
Subject: [PATCH 7/7] =?UTF-8?q?feat:=20use=20cheer=20modal=20=ED=9B=85=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../molecules/cheer}/cheer-progress.tsx       |   3 +-
 components/molecules/cheer/index.ts           |   1 +
 features/record-detail/components/index.ts    |   1 -
 .../sections/detail-cheer-fab.tsx             |  75 +++--------
 hooks/index.ts                                |   1 +
 hooks/use-cheer-bottom-sheet.ts               | 116 ++++++++++++++++++
 6 files changed, 134 insertions(+), 63 deletions(-)
 rename {features/record-detail/components => components/molecules/cheer}/cheer-progress.tsx (97%)
 create mode 100644 hooks/use-cheer-bottom-sheet.ts

diff --git a/features/record-detail/components/cheer-progress.tsx b/components/molecules/cheer/cheer-progress.tsx
similarity index 97%
rename from features/record-detail/components/cheer-progress.tsx
rename to components/molecules/cheer/cheer-progress.tsx
index f9635558..a98e4a58 100644
--- a/features/record-detail/components/cheer-progress.tsx
+++ b/components/molecules/cheer/cheer-progress.tsx
@@ -2,11 +2,10 @@
 
 import { useEffect, useState } from 'react';
 
+import { DetailCheerItem } from '@/features/record-detail';
 import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
-import { DetailCheerItem } from '../types';
-
 type CheerProgress = {
   isOpen: boolean;
   onChangeOpen: (isOpen: boolean) => void;
diff --git a/components/molecules/cheer/index.ts b/components/molecules/cheer/index.ts
index 6ae792b8..2dd59cdb 100644
--- a/components/molecules/cheer/index.ts
+++ b/components/molecules/cheer/index.ts
@@ -1,2 +1,3 @@
 export * from './cheer-bottom-sheet';
 export * from './cheer-item';
+export * from './cheer-progress';
diff --git a/features/record-detail/components/index.ts b/features/record-detail/components/index.ts
index aab1fba5..b6c8d243 100644
--- a/features/record-detail/components/index.ts
+++ b/features/record-detail/components/index.ts
@@ -1,5 +1,4 @@
 export * from './cheer-modal';
-export * from './cheer-progress';
 export * from './date-picker';
 export * from './edit-button';
 export * from './swim-description-item';
diff --git a/features/record-detail/sections/detail-cheer-fab.tsx b/features/record-detail/sections/detail-cheer-fab.tsx
index a6c3d6ab..e4640bb3 100644
--- a/features/record-detail/sections/detail-cheer-fab.tsx
+++ b/features/record-detail/sections/detail-cheer-fab.tsx
@@ -1,34 +1,30 @@
 'use client';
 
-import { useState } from 'react';
-
-import { CheerBottomSheet } from '@/components/molecules';
-import { useBottomSheet, useToast } from '@/hooks';
+import { CheerBottomSheet, CheerProgress } from '@/components/molecules';
+import { useCheerBottomSheet, useToast } from '@/hooks';
 import { css } from '@/styled-system/css';
 
-import { useCheer, useCheerEligibility, useCheerPreviewList } from '../apis';
-import { CheerProgress } from '../components';
-import { initialCheerList } from '../data';
-import { DetailCheerItemSelected, RecordDetailType } from '../types';
+import { useCheerEligibility, useCheerPreviewList } from '../apis';
+import { RecordDetailType } from '../types';
 
 export const DetailCheerFabSection = ({ data }: { data: RecordDetailType }) => {
-  const { mutate: mutateCheer } = useCheer();
+  const { toast } = useToast();
+
   const { refetch: refetchCheer } = useCheerPreviewList(data.id);
   const { data: eligibilityData } = useCheerEligibility(
     data.id,
     data.isMyMemory,
   );
-
-  const [cheerList, setCheerList] = useState(initialCheerList);
-  const [selectedCheerItem, setSelectedCheerItem] =
-    useState<DetailCheerItemSelected>();
-
-  const { toast } = useToast();
   const {
-    isOpen: isOpenBottomSheet,
-    open: openBottomSheet,
-    close: closeBottomSheet,
-  } = useBottomSheet();
+    cheerList,
+    selectedCheerItem,
+    handleClickCheerItem,
+    handleClickSendCheer,
+    handleChangeSelectedItem,
+    isOpenBottomSheet,
+    closeBottomSheet,
+    openBottomSheet,
+  } = useCheerBottomSheet({ memoryId: data.id, onRefetch: refetchCheer });
 
   const handleClickFab = () => {
     if (!eligibilityData?.isRegistrable) {
@@ -38,47 +34,6 @@ export const DetailCheerFabSection = ({ data }: { data: RecordDetailType }) => {
 
     openBottomSheet();
   };
-
-  const handleClickCheerItem = (index: number) => {
-    setCheerList((prev) =>
-      prev.map((item, idx) =>
-        idx === index
-          ? { ...item, isSelected: !item.isSelected }
-          : { ...item, isSelected: false },
-      ),
-    );
-  };
-
-  const handleClickSendCheer = () => {
-    const selectedCheerItem = cheerList.find(({ isSelected }) => isSelected);
-    if (!selectedCheerItem) return;
-
-    mutateCheer(
-      {
-        emoji: selectedCheerItem.emoji,
-        comment: selectedCheerItem.comment,
-        memoryId: data.id,
-      },
-      {
-        onSuccess: ({ status, code, message }) => {
-          if (status === 400 || code === 'REACTION_4') {
-            alert(message);
-            return;
-          }
-
-          void refetchCheer();
-          setSelectedCheerItem(selectedCheerItem);
-          closeBottomSheet();
-        },
-      },
-    );
-  };
-
-  const handleChangeSelectedItem = (isOpen: boolean) => {
-    if (isOpen) return;
-    setSelectedCheerItem(undefined);
-  };
-
   const { isMyMemory } = data;
 
   return (
diff --git a/hooks/index.ts b/hooks/index.ts
index 2292ce89..f24ac7b8 100644
--- a/hooks/index.ts
+++ b/hooks/index.ts
@@ -1,5 +1,6 @@
 export * from './apis';
 export * from './use-bottom-sheet';
+export * from './use-cheer-bottom-sheet';
 export * from './use-dialog';
 export * from './use-drag-scroll';
 export * from './use-intersection-observer';
diff --git a/hooks/use-cheer-bottom-sheet.ts b/hooks/use-cheer-bottom-sheet.ts
new file mode 100644
index 00000000..1b7c7f1b
--- /dev/null
+++ b/hooks/use-cheer-bottom-sheet.ts
@@ -0,0 +1,116 @@
+'use client';
+
+import { RefetchOptions } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import { DetailCheerItemSelected } from '@/features/record-detail';
+import { useCheer } from '@/features/record-detail/apis';
+
+import { useBottomSheet } from './use-bottom-sheet';
+
+const initialCheerList = [
+  {
+    emoji: '🔥',
+    comment: '오늘도 힘내요!',
+    isSelected: false,
+  },
+  {
+    emoji: '🦭',
+    comment: '물개세요?',
+    isSelected: false,
+  },
+  {
+    emoji: '🏊',
+    isSelected: false,
+  },
+  {
+    emoji: '👏',
+    isSelected: false,
+  },
+  {
+    emoji: '🏊‍♂️',
+    comment: '진정한 수영인으로 인정합니다',
+    isSelected: false,
+  },
+  {
+    emoji: '🏊‍♂️',
+    comment: '다음에 같이 수영해요',
+    isSelected: false,
+  },
+  {
+    emoji: '😲',
+    comment: '대단해요!',
+    isSelected: false,
+  },
+];
+
+type UseCheerBottomSheet = {
+  memoryId: number;
+  onRefetch: (options?: RefetchOptions) => Promise<unknown>;
+};
+export const useCheerBottomSheet = ({
+  memoryId,
+  onRefetch,
+}: UseCheerBottomSheet) => {
+  const { mutate: mutateCheer } = useCheer();
+  const [cheerList, setCheerList] = useState(initialCheerList);
+  const [selectedCheerItem, setSelectedCheerItem] =
+    useState<DetailCheerItemSelected>();
+
+  const {
+    isOpen: isOpenBottomSheet,
+    open: openBottomSheet,
+    close: closeBottomSheet,
+  } = useBottomSheet();
+
+  const handleClickCheerItem = (index: number) => {
+    setCheerList((prev) =>
+      prev.map((item, idx) =>
+        idx === index
+          ? { ...item, isSelected: !item.isSelected }
+          : { ...item, isSelected: false },
+      ),
+    );
+  };
+
+  const handleClickSendCheer = () => {
+    const selectedCheerItem = cheerList.find(({ isSelected }) => isSelected);
+    if (!selectedCheerItem) return;
+
+    mutateCheer(
+      {
+        emoji: selectedCheerItem.emoji,
+        comment: selectedCheerItem.comment,
+        memoryId,
+      },
+      {
+        onSuccess: ({ status, code, message }) => {
+          if (status === 400 || code === 'REACTION_4') {
+            alert(message);
+            return;
+          }
+
+          setSelectedCheerItem(selectedCheerItem);
+          closeBottomSheet();
+          void onRefetch?.();
+        },
+      },
+    );
+  };
+
+  const handleChangeSelectedItem = (isOpen: boolean) => {
+    if (isOpen) return;
+    setSelectedCheerItem(undefined);
+  };
+
+  return {
+    cheerList,
+    selectedCheerItem,
+    handleClickCheerItem,
+    handleClickSendCheer,
+    handleChangeSelectedItem,
+    isOpenBottomSheet,
+    openBottomSheet,
+    closeBottomSheet,
+  };
+};