feat: follow state sync hook, store, api 추가

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);
 }

app/profile/[id]/page.tsx

@@ -10,7 +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 { useFollowingData } from '@/features/profile/hooks/use-following-data';
+import { useMemberFollowingState } from '@/hooks';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -25,27 +25,21 @@ export default function Profile({ params }: Mypage) {
     error: profileError,
   } = useProfileData(params.id);
 
-  const isMyProfile = profileData?.isMyProfile;
+  const { useSyncFollowingListState } = useMemberFollowingState();
+  useSyncFollowingListState([Number(params.id)]);
 
-  const {
-    data: followingData,
-    isLoading: isFollowingLoading,
-    error: followingError,
-  } = useFollowingData(params.id, isMyProfile);
+  const isMyProfile = profileData?.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 +60,7 @@ export default function Profile({ params }: Mypage) {
             </HeaderBar.LeftContent>
             <BackButton />
           </HeaderBar>
-          <OtherPage
-            profileData={profileData}
-            followingInitialValue={followingData?.isFollowing || false}
-          />
+          <OtherPage profileData={profileData} />
         </>
       )}
       <GlobalNavigationBar />

features/record-detail/components/cheer-bottom-sheet.tsx → 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 = {

features/record-detail/components/cheer-item.tsx → 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;

features/record-detail/components/cheer-progress.tsx → 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;

components/molecules/cheer/index.ts

@@ -0,0 +1,3 @@
+export * from './cheer-bottom-sheet';
+export * from './cheer-item';
+export * from './cheer-progress';

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';

components/molecules/profile-list/profile-list-item.tsx

@@ -1,14 +1,15 @@
 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';
 
 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>
   );

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,13 +21,21 @@ 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) {
       void fetchNextData();
     }
   };
 
+  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%',

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,

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,

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] =

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,