refactor: 팔로워 팔로잉 상태 유지 및 페이지 이동에도 반영하기 위해 zustand로 관리

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