[REFACTOR] #70 - PropertyTab.js MVC패턴으로 수정

src/model/PropertyModel.js

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from "react";
+import { useCookies } from "react-cookie";
+import client from 'gamja-backend-client';
+
+const host = 'https://api.miruku.dog';
+
+const PropertyModel = () => {
+    const [cookies] = useCookies(['token']);
+    const [coins, setCoins] = useState([]);
+    const [allCoins, setAllCoins] = useState([]);
+    const [price, setPrice] = useState(0);
+
+    const title = ["코인명", "매입가", "현재가", "대비", "수량"];
+
+    const getConnection = () => {
+        return {
+            host: host,
+            headers: {
+                ...cookies.token ? {
+                'Authorization': `Bearer ${cookies.token}`
+                } : null
+            }
+        }
+    }
+
+    const getUserMoney = async () => {
+        await client.functional.user.me.getMyUser(
+          getConnection()
+          ).then((response) => {
+            // 사용자 보유 화폐
+            setPrice(response.user.balance);
+            console.log(response.user);
+        });
+    }
+
+    const getCoins = async () => {
+        await client.functional.coin.getCoins(
+            getConnection()
+        ).then(response => {
+            const allcoin = response.coins;
+            const myCoin = coins.map(coin => coin.name);
+            setAllCoins(allcoin.filter(coin => myCoin.includes(coin.name)));
+        });
+    }
+
+    const getMyCoins = async () => {
+        await client.functional.user.me.coins.getMyCoins(
+            getConnection()
+        ).then(response => {
+            const coin = response.coins.filter(coin => coin.amount > 0);
+            setCoins(coin);
+            getCoins();
+            getUserMoney();
+        });
+    }
+
+    useEffect(() => {
+        if (cookies.token) {
+            getMyCoins();
+        }
+    }, [cookies.token, coins]);
+
+    return {
+        cookies,
+        coins,
+        allCoins,
+        price,
+        title
+    };
+}
+export default PropertyModel;

src/view/components/property/PropertyTab.js

@@ -1,72 +1,20 @@
 // 자산 탭
-import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import palette from "../../styles/colorPalatte";
-import { useCookies } from "react-cookie";
-
-import client from 'gamja-backend-client';
 
 import walletIcon from '../../../assets/ic_wallet.png';
 import potatoImg from '../../../assets/img_potato_angry.png';
-
-const title = ["코인명", "매입가", "현재가", "대비", "수량"];
-
-const host = 'https://api.miruku.dog';
+import PropertyModel from "../../../model/PropertyModel";
 
 const PropertyTab = () => {
-  const [cookies] = useCookies(['token']);
-  const [coins, setCoins] = useState([]);
-  const [allCoins, setAllCoins] = useState([]);
-  const [price, setPrice] = useState(0);
+  const {
+    cookies,
+    coins,
+    allCoins,
+    price,
+    title
+  } = PropertyModel();
 
-  const getConnection = () => {
-    return {
-      host: host,
-      headers: {
-        ...cookies.token ? {
-          'Authorization': `Bearer ${cookies.token}`
-        } : null
-      }
-    }
-  }
-
-  const getUserMoney = async () => {
-    await client.functional.user.me.getMyUser(
-      getConnection()
-      ).then((response) => {
-        // 사용자 보유 화폐
-        setPrice(response.user.balance);
-        console.log(response.user);
-    });
-  }
-
-  const getCoins = async () => {
-    await client.functional.coin.getCoins(
-        getConnection()
-    ).then(response => {
-      const allcoin = response.coins;
-      const myCoin = coins.map(coin => coin.name);
-      setAllCoins(allcoin.filter(coin => myCoin.includes(coin.name)));
-    });
-  }
-
-  const getMyCoins = async () => {
-    await client.functional.user.me.coins.getMyCoins(
-      getConnection()
-    ).then(response => {
-      const coin = response.coins.filter(coin => coin.amount > 0);
-      setCoins(coin);
-      getCoins();
-      getUserMoney();
-    });
-  }
-
-  useEffect(() => {
-    if (cookies.token) {
-      getMyCoins();
-    }
-  }, [cookies.token, coins]);
-
   return(
     <Container>
       { cookies.token ? (
@@ -100,15 +48,13 @@ const PropertyTab = () => {
                       style={{ 
                         textAlign: 'right',
                         paddingRight: '80px'
-                        // paddingRight: '75px'
                       }}> 
                         {fmPurchasingPrice}
                     </CoinInfo>
                     <CoinInfo 
                       style={{ 
                         textAlign: 'right',
                         paddingRight: '160px'
-                        // paddingRight: '155px'
                       }}
                       fontColor={priceDiff}
                     >