[feat] #87 아티클 즐겨찾기 함수 전역 상태로 변경

src/components/article/ArticleFlatList.tsx

@@ -7,14 +7,14 @@ import { RootStackParamList } from "../router/Router";
 import StarIcon from "@/assets/icons/Star.svg";
 
 import UserIcon from "@/assets/icons/User.svg";
+import useStore from "@/store/store";
 
 const ArticleFlatList: React.FC<ArticleFlatListProps> = ({
   articles,
   myFavoriteArticles,
-  setFavorite,
 }) => {
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
-
+  const favoriteFunc = useStore().favoriteFunc;
   return (
     <>
       {articles.length ? (
@@ -38,7 +38,6 @@ const ArticleFlatList: React.FC<ArticleFlatListProps> = ({
                     images: el.images,
                     favorite_count: el.favorite_count,
                   },
-                  setFavorite,
                 })
               }
             >
@@ -75,7 +74,7 @@ const ArticleFlatList: React.FC<ArticleFlatListProps> = ({
                   </View>
                   <Text style={{ fontSize: 12 }}>{el.favorite_count}</Text>
                   <TouchableOpacity
-                    onPress={() => setFavorite(el.id, !!isFavorite)}
+                    onPress={() => favoriteFunc(el.id, !!isFavorite)}
                   >
                     <StarIcon
                       color={isFavorite ? "#FFD73F" : "#ddd"}

src/pages/articles/ArticleDetail.tsx

@@ -18,22 +18,23 @@ const { width: screenWidth } = Dimensions.get("window");
 
 import StarIcon from "@/assets/icons/Star.svg";
 import { ScrollView } from "react-native-gesture-handler";
+import useStore from "@/store/store";
 const backIcon = require("@/assets/icons/Back.png");
 
 export const ArticleDetail = () => {
   const navigation = useNavigation();
   const route = useRoute();
 
-  const { id, iconState, data, setFavorite } = route.params as {
+  const { id, iconState, data } = route.params as {
     id: number;
     iconState: boolean;
     data: ArticleDetail;
-    setFavorite: (articleId: number, mode: boolean) => void;
   };
 
   const [isFavorite, setIsFavorite] = useState(iconState);
+  const favoriteFunc = useStore().favoriteFunc;
   const handleFavorite = async () => {
-    setFavorite(id, isFavorite);
+    favoriteFunc(id, isFavorite);
     setIsFavorite(!isFavorite);
   };
 

src/pages/articles/Articles.tsx

@@ -10,6 +10,7 @@ import {
   getFavoriteArticleIdSpb,
   setFavoriteSpb,
 } from "@/supaBase/api/article";
+import useStore from "@/store/store";
 
 const menu = require("@/assets/icons/menu.png");
 const profile = { uri: "https://picsum.photos/200/300" };
@@ -25,11 +26,13 @@ const Articles = () => {
     { title: "최신순", value: "LATEST" },
     { title: "좋아요순", value: "FAVORITE" },
   ];
+  const setFavoriteFunc = useStore().setFavoriteFunc;
 
   useFocusEffect(
     React.useCallback(() => {
       getArticles();
       getFavoriteArticles();
+      setFavoriteFunc(setFavorite);
     }, [])
   );
 
@@ -79,7 +82,6 @@ const Articles = () => {
         <ArticleFlatList
           articles={articles}
           myFavoriteArticles={myFavoriteArticles}
-          setFavorite={setFavorite}
         />
       </ScrollView>
     </SafeAreaView>

src/store/store.js

@@ -2,6 +2,8 @@ import { create } from "zustand";
 
 const useStore = create((set) => ({
   userInfo: {},
+  favoriteFunc: null,
+  setFavoriteFunc: (func) => set({ favoriteFunc: func }),
   setUserData: (newUserData) => set({ userInfo: newUserData }),
 }));
 

src/types/article.ts

@@ -24,7 +24,6 @@ type ArticleDetail = {
 interface ArticleFlatListProps {
   articles: Article[];
   myFavoriteArticles: ArticleFavoriteAId[];
-  setFavorite: (articleId: number, mode: boolean) => void;
 }
 
 interface ArticlesReponse {