0909 메인 페이지

MainScreen.js

@@ -10,17 +10,34 @@ import weekApi from './db/mainScreen.api';
 import { getDateStr } from './utils/dateFunction';
 
 const DetailItem = ({ item }) => {
+    let item_color
+    switch (item.type) {
+        case 1:
+            item_color = style.inputColor;
+            break;
+        case 2:
+            item_color = style.outputColor;
+            break;
+        case 3:
+            item_color = style.moveColor;
+            break;
+    }
     return (
-        <>
         <View style={{
-                flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey
+            padding: "5%", borderColor: '#d3d3d3', //light grey
             borderWidth: 1, borderTopWidth: 0,
         }}>
-                <Text style={[style.itemText, item.type === 1 ? style.inputColor : style.outputColor]}>{item.category}</Text>
+            <View style={{ flexDirection: "row" }}>
+                <Text style={[style.itemText, item_color]}>{item.category}</Text>
                 <Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
                 <Text style={[style.itemTextNum, style.Font]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text>
             </View>
-        </>
+            {item.asset ?
+                <Text style={[style.itemTextNum, style.Font]}>
+                    {'(' + item.asset + '>' + item.deposit_asset + ')'}
+                </Text>
+                : null}
+        </View>
     );
 };
 
@@ -33,18 +50,51 @@ const AssetItem = ({ item }) => {
     );
 };
 
+const getMarkedDates = (weeklyData) => {
+    if (weeklyData.length === 0) {
+        return null;
+    }
+
+    const markedData = weeklyData.map(data => {
+        return (
+            {
+                date: data.date,
+                dots: getDots(data.type_id)
+            }
+        );
+    })
+
+    return markedData
+}
+
+const getDots = (typeArray) => {
+    const tempDots = []
+    for (let i = 0; i < typeArray.length; i++) {
+        if (typeArray[i] === "1") {
+            tempDots.push({ color: "#7192d1" })
+        } else if (typeArray[i] === '2') {
+            tempDots.push({ color: "#d98b79" })
+        } else {
+            tempDots.push({ color: "white" })
+        }
+    }
+    return tempDots;
+}
+
 function MainScreen({ navigation }) {
     const day = new Date(getDateStr())
     const daysToSubtract = day.getDay()
-    const startingDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() - daysToSubtract)
-    const endDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() + (6 - daysToSubtract))
+    const initialStartingDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() - daysToSubtract)
+    const initialEndDate = new Date(day.getFullYear(), day.getMonth(), day.getDate() + (6 - daysToSubtract))
 
     const [modalOpen, setModalOpen] = useState(false);
     const [open, setOpen] = useState(false)
 
     const [selectedDate, setSelectedDate] = useState(getDateStr())
-    const [weeklyData, setWeeklyData] = useState([])
+    const [startingDate, setStartingDate] = useState(initialStartingDate)
+    const [endDate, setEndDate] = useState(initialEndDate)
     const [weekMoney, setWeekMoney] = useState({ input: 0, output: 0 })
+    const [markedDates, setMarkedDates] = useState([])
 
     const [singleMoney, setSingleMoney] = useState([])
 
@@ -53,23 +103,27 @@ function MainScreen({ navigation }) {
 
     useFocusEffect(
         React.useCallback(() => {
-            getWeeklyData(startingDate, endDate)
+            getWeeklyData(initialStartingDate, initialEndDate)
             getTotalMoney()
         }, [])
     );
 
+    const getWeeklyData = async (start, end) => {
+        if (getDateStr(start) !== getDateStr(startingDate)) {
+            console.log('weekchanged~~~~~~~~~~~~', start, end)
+            const { data, input, output } = await weekApi.getWeeklyData(start, end)
+            setStartingDate(start)
+            setWeekMoney({ input: input, output, output })
+            setMarkedDates(getMarkedDates(data))
+        }
+    }
+
     const getTotalMoney = async () => {
         const { total, assets_total } = await weekApi.getTotalData()
         setTotalMoney(total)
         setTotalAssetsMoney(assets_total)
     }
 
-    const getWeeklyData = async (start, end) => {
-        const { data, input, output } = await weekApi.getWeeklyData(start, end)
-        setWeeklyData(data)
-        setWeekMoney({ input: input, output, output })
-    }
-
     useEffect(() => {
         getSingleData()
     }, [selectedDate])
@@ -85,12 +139,21 @@ function MainScreen({ navigation }) {
                 Keyboard.dismiss();
             }}>
                 <View style={{ flex: 1 }}>
+                    {/* <Pressable onPress={() => {
+                        let startD = new Date(startingDate.getFullYear(), startingDate.getMonth(), startingDate.getDate() - 7)
+                        let endD = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() - 7)
+                        getWeeklyData(startD, endD);
+                        setStartingDate(startD)
+                        setEndDate(endD)
+                    }}>
+                        <Text>테스트</Text>
+                    </Pressable> */}
                     <WeeklyCalendar
                         selectedDate={selectedDate}
                         startingDate={startingDate}
                         onWeekChanged={(start, end) => getWeeklyData(start, end)}
-                        onDateSelected={(date) => setSelectedDate(getDateStr(date))}
-                        weeklyData={weeklyData}
+                        onDateSelected={(date) => setSelectedDate(date)}
+                        markedDates={markedDates}
                     />
                     <View style={style.weekData}>
                         <Text style={[style.Font, { color: 'white' }]}>수입 {weekMoney.input}</Text>
@@ -166,7 +229,7 @@ const style = StyleSheet.create({
     weekData: {
         flexDirection: "row",
         justifyContent: "space-around",
-        backgroundColor: "#6b768a",
+        backgroundColor: '#adbfdb',
         paddingBottom: 10,
     },
     TextInput: {
@@ -188,6 +251,9 @@ const style = StyleSheet.create({
     outputColor: {
         color: '#dc143c'
     },
+    moveColor: {
+        color: '#646d75'
+    },
     itemTextNum: {
         flex: 1,
         textAlign: "center",

PostMoney.js

 import React, { useState, useEffect } from 'react';
-import { View, StyleSheet} from 'react-native';
+import { View, StyleSheet, Keyboard, TouchableWithoutFeedback } from 'react-native';
 import InputBox from './components/InputBox';
 import ButtonsForm from './components/ButtonsForm';
 import SelectForm from './components/SelectForm';
@@ -37,6 +37,8 @@ const PostMoney = ({ navigation }) => {
     const [subcategories, setSubcategories] = useState([])
     const [selected_subcat, setSelected_subcat] = useState(INIT_SUBCATEGORY)
 
+    
+    const [disabled, setDisabled] = useState(true)
     const [success, setSuccess] = useState(false)
     
     useEffect(() => {
@@ -46,10 +48,23 @@ const PostMoney = ({ navigation }) => {
         initData()
     }, [selectedIndex])
 
+    useEffect(() => {
+        let isProper = false
+        if (selectedIndex === 2) {
+            isProper = [contents, price, selected_asset_type.value, selected_deposit_asset_type.value, selected_cat.value].every( elem => elem !== '')
+        } else {
+            isProper = [contents, price, selected_asset_type.value, selected_cat.value].every( elem => elem !== '')
+        }
+
+        if (isProper) {
+            setDisabled(false)
+        } else {
+            setDisabled(true)
+        }
+
+    }, [contents, price, selected_asset_type, selected_deposit_asset_type, selected_cat, selected_subcat])
+
     const initData = () => {
-        setDate(getDateStr())
-        setContents('')
-        setPrice('')
         setSelected_asset_type(INIT_ASSETSTYPE)
         setSelected_cat(INIT_CATEGORY)
         setSelected_subcat(INIT_SUBCATEGORY)
@@ -106,15 +121,17 @@ const PostMoney = ({ navigation }) => {
     }
 
     if (success) {
-        initData()
-        setSuccess(false)
+        navigation.goBack()
     }
 
     return (
-        <View>
+        <TouchableWithoutFeedback onPress={() => {
+            Keyboard.dismiss();
+        }}>
+            <View style={{ flex: 1 }}>
                 <View>
                     <ButtonsForm
-                    onPress={(index) => setSelectedIndex(index)}
+                        onPress={(index) => {setSelectedIndex(index); Keyboard.dismiss();}}
                         selectedIndex={selectedIndex}
                         group={["수입", "지출", "이동"]} />
                     <DatePicker
@@ -175,14 +192,16 @@ const PostMoney = ({ navigation }) => {
                         name="저장하기"
                         onPress={insertData}
                         style={style.submitButton}
+                        disabled={disabled}
                     />
                     <StyledButton
                         name="취소"
-                    onPress={() => console.log('취소버튼')}
+                        onPress={() => navigation.goBack()}
                         style={style.cancelButton}
                     />
                 </View>
             </View>
+        </TouchableWithoutFeedback>
     )
 }
 

components/StyledButton.js

 import React from 'react';
 import { StyleSheet, Pressable, Text } from 'react-native';
 
-const StyledButton = (props) => {
+const StyledButton = ({
+    name,
+    onPress,
+    style,
+    disabled, 
+}) => {
     return (
         <Pressable
             style={({ pressed }) => [
                 {
-                    backgroundColor: pressed ? '#437dd9' : '#4e8ff5',
+                    backgroundColor: disabled ? '#9c9c9c' : pressed ? '#adbfdb' : '#bfd3f2',
                 },
-                style.pressableStyle,
-                props.style
+                styles.pressableStyle,
+                style
             ]}
-            onPress={props.onPress}>
-            <Text style={style.buttonText}>{props.name}</Text>
+            onPress={onPress}
+            disabled={disabled}>
+            <Text style={styles.buttonText}>{name}</Text>
         </Pressable>
     );
 };
 
-const style = StyleSheet.create({
+const styles = StyleSheet.create({
     pressableStyle: {
         alignItems: "center",
         justifyContent: "center",

components/WeeklyCalendar.js

@@ -7,44 +7,9 @@ const WeeklyCalendar = ({
     startingDate,
     onWeekChanged,
     onDateSelected,
-    weeklyData = [],
+    markedDates,
     customDatesStyles
 }) => {
-    const [markedDates, setmarkedDates] = useState([])
-    
-    useEffect(() => {
-        getMarkedDates()
-    }, [weeklyData])
-
-    const getMarkedDates = () => {
-        if(weeklyData.length === 0) {
-            return null;
-        }
-
-        const markedData = weeklyData.map(data => {
-            return (
-                {
-                    date: data.date,
-                    dots: getDots(data.type_id)
-                }
-            );
-        })
-
-        setmarkedDates(markedData)
-    }
-
-    const getDots = (typeArray) => {
-        const tempDots = []
-        for (let i = 0; i < typeArray.length; i++) {
-            if (typeArray[i] === "1") {
-                tempDots.push({ color: "#93bdcc", selectedColor: "#7b9e7c", })
-            } else {
-                tempDots.push({ color: "#d98b79", })
-            }
-        }
-        return tempDots;
-    }
-
     return (
         <View>
             <CalendarStrip
@@ -52,18 +17,17 @@ const WeeklyCalendar = ({
                 daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
                 style={{ height: 130, paddingTop: 20, paddingBottom: 10 }}
                 calendarHeaderStyle={{ color: 'white' }}
-                calendarColor={'#6b768a'}
+                calendarColor={'#adbfdb'}
                 dateNumberStyle={{ color: 'white' }}
                 dateNameStyle={{ color: 'white' }}
                 iconContainer={{ flex: 0.1 }}
                 customDatesStyles={customDatesStyles}
-                updateWeek
+                updateWeek = {false}
                 highlightDateNameStyle={{ color: 'white' }}
                 highlightDateNumberStyle={{ color: 'white' }}
-                highlightDateContainerStyle={{ backgroundColor: 'black' }}
-                // markedDates={markedDates}
-                // datesBlacklist={datesBlacklistFunc}
-                // startingDate={startingDate}
+                highlightDateContainerStyle={{ backgroundColor: '#6b768a' }}
+                markedDates={markedDates||[]}
+                startingDate={startingDate}
                 selectedDate={selectedDate}
                 onWeekChanged={onWeekChanged}
                 onDateSelected={onDateSelected}

db/mainScreen.api.js

@@ -31,20 +31,20 @@ const getWeeklyData = async (start, end) => {
         })
         await db.transaction(async (tx) => {
             const [txn2, res] = await tx.executeSql(
-                `SELECT type_id, sum(price) as price from money 
-                where date BETWEEN "${getDateStr(start)}" and "${getDateStr(end)}" 
-                group by type_id ;`
+                `SELECT type_id, sum(price) as price 
+                FROM money 
+                WHERE date BETWEEN "${getDateStr(start)}" and "${getDateStr(end)}" 
+                GROUP BY type_id ;`
             );
             for (let i = 0; i < res.rows.length; i++) {
                 if (res.rows.item(i).type_id === 1) {
                     input = res.rows.item(i).price;
                 } else if (res.rows.item(i).type_id === 2) {
                     output = res.rows.item(i).price;
-                } else {
-                    console.log("이동")
                 }
             }
         })
+        console.log('실행실행실행')
         resolve({ data: temp, input: input, output: output })
     })
 }
@@ -54,10 +54,47 @@ const getData = async (findDate) => {
     return new Promise((resolve, reject) => {
         db.transaction(async (tx) => {
             console.log("get single data");
-            const [txn, results] = await tx.executeSql(`SELECT money.type_id, category_name, contents, price FROM money inner JOIN categories on money.category_id = categories.category_id WHERE date="${getDateStr(findDate)}"`);
+            const [txn, results] = await tx.executeSql(`
+            SELECT money.type_id, category_name, assets_name, contents, price 
+            FROM money 
+            inner JOIN categories on money.category_id = categories.category_id 
+            inner JOIN assets_type on money.assets_id = assets_type.assets_id 
+            WHERE date="${getDateStr(findDate)}"
+            `);
             const temp = [];
             for (let i = 0; i < results.rows.length; i++) {
-                temp.push({ id: results.rows.item(i).id, category: results.rows.item(i).category_name, contents: results.rows.item(i).contents, price: results.rows.item(i).price, type: results.rows.item(i).type_id })
+                if (results.rows.item(i).type_id === 3) {
+                    let asset_type = results.rows.item(i).assets_name;
+                    let deposit_asset = results.rows.item(i).assets_name;
+                    let price = 0;
+                    if (results.rows.item(i).price > 0) {
+                        deposit_asset = results.rows.item(i).assets_name;
+                        asset_type = results.rows.item(i + 1).assets_name;
+                        price = results.rows.item(i).price;
+                    } else {
+                        asset_type = results.rows.item(i).assets_name;
+                        deposit_asset = results.rows.item(i + 1).assets_name;
+                        price = -results.rows.item(i).price;
+                    }
+                    temp.push({
+                        id: results.rows.item(i).id,
+                        category: results.rows.item(i).category_name,
+                        asset: asset_type,
+                        deposit_asset: deposit_asset,
+                        contents: results.rows.item(i).contents,
+                        price: price,
+                        type: results.rows.item(i).type_id
+                    })
+                    i++;
+                } else {
+                    temp.push({
+                        id: results.rows.item(i).id,
+                        category: results.rows.item(i).category_name,
+                        contents: results.rows.item(i).contents,
+                        price: results.rows.item(i).price,
+                        type: results.rows.item(i).type_id
+                    })
+                }
             }
             resolve(temp);
         })
@@ -71,18 +108,38 @@ const getTotalData = async () => {
         let total = 0;
         const temp = [];
         await db.transaction(async (tx) => {
-            const [txn, results] = await tx.executeSql("SELECT money.assets_id as id, assets_name, sum(price) as price from money left JOIN assets_type on money.assets_id = assets_type.assets_id group by money.assets_id");
+            const [txn, results] = await tx.executeSql("SELECT type_id, sum(price) as price from money group by type_id");
             for (let i = 0; i < results.rows.length; i++) {
-                temp.push({ id: results.rows.item(i).id, name: results.rows.item(i).assets_name, price: results.rows.item(i).price })
+                if (results.rows.item(i).type_id === 2) {
+                    total -= results.rows.item(i).price
+                } else {
+                    total += results.rows.item(i).price
+                }
             }
         })
         await db.transaction(async (tx) => {
-            const [txn, results] = await tx.executeSql("SELECT sum(price) as price from money");
+            const [txn, results] = await tx.executeSql(`
+            select id, group_concat(type_id, '|') as type_id, assets_name, group_concat(price, '|') as price
+            from (SELECT money.assets_id as id, type_id, assets_name, sum(price) as price 
+                from money 
+                left JOIN assets_type on money.assets_id = assets_type.assets_id
+                group by money.assets_id, type_id) 
+            group by id`);
             for (let i = 0; i < results.rows.length; i++) {
-                total = results.rows.item(i).price
+                let tempAssetTotal = 0;
+                const type_id_array = results.rows.item(i).type_id.split('|');
+                const price_array = results.rows.item(i).price.split('|');
+                for (let j = 0; j < type_id_array.length; j++) {
+                    if (type_id_array[j] === '2') {
+                        tempAssetTotal -= Number(price_array[j])
+                    } else {
+                        tempAssetTotal += Number(price_array[j])
+                    }
+                }
+                temp.push({ id: results.rows.item(i).id, name: results.rows.item(i).assets_name, price: tempAssetTotal })
             }
         })
-        resolve({ total: total, assets_total: temp});
+        resolve({ total: total, assets_total: temp });
     })
 };