0808 메인 페이지

App.js

@@ -43,7 +43,6 @@ function Home() {
       <Tab.Screen name="Main" component={MainScreen} />
       <Tab.Screen name="Monthly" component={Monthly} />
       <Tab.Screen name="Analy" component={Analy} />
-      <Tab.Screen name="PostMoney" component={PostMoney} />
     </Tab.Navigator>
   )
 }
@@ -86,6 +85,11 @@ function App() {
           component={EditOption}
           options={{ title: "편집" }}
         />
+        <Stack.Screen
+          name="PostMoney"
+          component={PostMoney}
+          options={{ title: "추가" }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

MainScreen.js

-import React, {useState} from 'react';
-import { View, Text, TextInput, StyleSheet, Button, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native';
+import React, { useEffect, useState } from 'react';
+import { View, Text, TextInput, StyleSheet, Button, Keyboard, TouchableWithoutFeedback, Modal, Pressable, FlatList, ScrollView } from 'react-native';
+import { useFocusEffect } from '@react-navigation/native';
 import { SpeedDial } from 'react-native-elements';
 import WeeklyCalendar from './components/WeeklyCalendar';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import DeptPage from './DeptPage';
+import weekApi from './db/mainScreen.api';
+import { getDateStr } from './utils/dateFunction';
+
+const DetailItem = ({item}) => {
+    return (
+        <>
+            <View style={{
+                flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey
+                borderWidth: 1, borderTopWidth: 0,
+            }}>
+                <Text style={[style.itemText, item.type === 1 ? style.inputColor : style.outputColor]}>{item.category}</Text>
+                <Text style={[style.itemTextNum, style.Font]}>{item.contents}</Text>
+                <Text style={[style.itemTextNum, style.Font]}>{item.price}원</Text>
+            </View>
+        </>
+    );
+};
+
+const AssetItem = ({item}) => {
+    return (
+        <View style={{ flexDirection: "row", width: 180 }}>
+            <Text style={[style.Font, { width: "40%", textAlign: 'left' }]}>{item.name}</Text>
+            <Text style={[style.Font, { width: "60%", textAlign: 'right' }]}>{item.price} 원</Text>
+        </View>
+    );
+};
 
 function MainScreen({ navigation }) {
-    const [number, onChangeNumber] = useState(null);
+    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 [modalOpen, setModalOpen] = useState(false);
-    // const [reviews, setReviews] = useState([
-    //   { title: 'aa', rating: 5, body: 'bb', key: '1' },
-    // ]);
+
     const [open, setOpen] = useState(false)
 
+    const [selectedDate, setSelectedDate] = useState(getDateStr())
+    const [weeklyData, setWeeklyData] = useState([])
+    const [weekMoney, setWeekMoney] = useState({ input: 0, output: 0 })
+
+    const [singleMoney, setSingleMoney] = useState([])
+
+    const [totalMoney, setTotalMoney] = useState(0)
+    const [totalAssetsMoney, setTotalAssetsMoney] = useState([])
+
+    useFocusEffect(
+        React.useCallback(() => {
+            getWeeklyData(startingDate, endDate)
+            getTotalMoney()
+        }, [])
+      );
+
+    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 })
+        console.log('=============week changed')
+    }
+
+    useEffect(() => {
+        getSingleData()
+    }, [selectedDate])
+
+    const getSingleData = async () => {
+        const tempData = await weekApi.getData(selectedDate)
+        setSingleMoney(tempData)
+    }
+
     return (
         <>
             <TouchableWithoutFeedback onPress={() => {
                 Keyboard.dismiss();
             }}>
                 <View style={{ flex: 1 }}>
-                    <WeeklyCalendar />
-
-                    <View >
-                        <Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
-                        <Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
-                        <TextInput
-                            style={style.TextInput}
-                            onChangeText={onChangeNumber}
-                            keyboardType="numeric"
+                    <WeeklyCalendar
+                        selectedDate={selectedDate}
+                        startingDate={startingDate}
+                        onWeekChanged={(start, end) => getWeeklyData(start, end)}
+                        onDateSelected={(date) => setSelectedDate(getDateStr(date))}
+                        weeklyData={weeklyData}
                     />
-                        <Text>입력한 숫자 보기: {number} </Text>
+                    <View style={style.weekData}>
+                        <Text style={[style.Font, { color: 'white' }]}>수입 {weekMoney.input}</Text>
+                        <Text style={[style.Font, { color: 'white' }]}>지출 {weekMoney.output}</Text>
                     </View>
-
-                    <Button
-                        title="월별 페이지로 이동"
-                        onPress={() => navigation.navigate('Monthly')}
-                    />
+                    <ScrollView nestedScrollEnabled={true} horizontal={false} >
+                        <>
+                            <View>
+                                {
+                                    singleMoney.length != 0 ?
+                                        <View>
+                                            {singleMoney.length !== 0 && singleMoney.map((item, index) => <DetailItem item={item} key={index}/>)}
+                                        </View>
+                                        : <View style={{ marginTop: 10, marginBottom: 50 }}>
+                                            <Text style={{ textAlign: "center", fontSize: 20, fontFamily: 'GowunDodum-Regular' }}>내역이 없습니다.</Text>
+                                        </View>
+                                }
+                            </View>
+                            <View style={style.Contents}>
+                                <Text style={[style.Font, { fontWeight: 'bold' }]}>총 자산</Text>
+                                <Text style={style.totalMoney}><FontAwesome name="won" style={style.totalMoney} /> {totalMoney}</Text>
+                                <View style={{ marginTop: 5 }}>
+                                    {totalAssetsMoney.length !== 0 && totalAssetsMoney.map((item, index) => <AssetItem item={item} key={index}/>)}
+                                </View>
+                            </View>
+                            <Pressable
+                                onPress={() => navigation.navigate('PostMoney')}
+                                style={style.submitButton}
+                            >
+                                <Text style={[style.Font, { color: 'white' }]}>수입/지출 기록</Text>
+                            </Pressable>
+                        </>
+                    </ScrollView>
                     <SpeedDial
                         isOpen={open}
                         icon={{ name: 'edit', color: '#fff' }} //연필모양
@@ -76,14 +166,43 @@ function MainScreen({ navigation }) {
 
 
 const style = StyleSheet.create({
+    weekData: {
+        flexDirection: "row",
+        justifyContent: "space-around",
+        backgroundColor: "#6b768a",
+        paddingBottom: 10,
+    },
     TextInput: {
         borderColor: 'skyblue',
         height: 40,
         margin: 12,
         borderWidth: 1
     },
+    totalMoney: {
+        fontSize: 35,
+    },
     Font: {
-        fontSize: 24
+        fontSize: 18
+    },
+    inputColor: {
+        color: '#1E90FF'
+    },
+    outputColor: {
+        color: '#dc143c'
+    },
+    itemTextNum: {
+        flex: 1,
+        textAlign: "center",
+    },
+    itemText: {
+        flex: 1,
+    },
+    submitButton: {
+        backgroundColor: "#6b768a",
+        margin: 10,
+        height: 50,
+        alignItems: 'center',
+        justifyContent: 'center',
     },
     modalToggle: {
 
@@ -102,9 +221,8 @@ const style = StyleSheet.create({
         flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
     },
     Contents: {
-        justifyContent: "center",
         alignItems: "center",
-        margin: 10
+        margin: 20
     }
 });
 

PostMoney.js

@@ -6,7 +6,7 @@ import SelectForm from './components/SelectForm';
 import StyledButton from './components/StyledButton';
 import DatePicker from './components/DatePicker';
 import moneyApi from './db/postMoney.api';
-import { getDate } from './utils/dateFunction'
+import { getDateStr } from './utils/dateFunction'
 
 const INIT_ASSETSTYPE = {
     id: 1,
@@ -26,7 +26,7 @@ const INIT_SUBCATEGORY = {
 
 const PostMoney = ({navigation}) => {
     const [selectedIndex, setSelectedIndex] = useState(0)
-    const [date, setDate] = useState(getDate())
+    const [date, setDate] = useState(getDateStr())
     const [contents, setContents] = useState('')
     const [price, setPrice] = useState('')
     const [asset_type, setAsset_type] = useState([])
@@ -47,7 +47,7 @@ const PostMoney = ({navigation}) => {
     }, [selectedIndex])
 
     const initData = () => {
-        setDate(getDate())
+        setDate(getDateStr())
         setContents('')
         setPrice('')
         setSelected_asset_type(INIT_ASSETSTYPE)

components/DatePicker.js

 import React, { useState } from "react";
 import { Button, View, Text, StyleSheet, Pressable } from "react-native";
 import DateTimePickerModal from "react-native-modal-datetime-picker";
+import { getDateStr } from '../utils/dateFunction';
 
 const DatePicker = (props) => {
     const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
@@ -14,8 +15,8 @@ const DatePicker = (props) => {
     };
 
     const handleConfirm = (date) => {
-        console.log("A date has been picked: ", String(date.toJSON()).split(/T/)[0]);
-        props.setDate(String(date.toJSON()).split(/T/)[0])
+        console.log("A date has been picked: ", getDateStr(date));
+        props.setDate(getDateStr(date))
         hideDatePicker();
     };
 

components/SelectForm.js

@@ -99,7 +99,7 @@ const SelectForm = ({
                         <Text style={style.textStyle}>
                             {selectedData.value ?
                                 selectedSubData?.value ?
-                                    selectedData.value + ' < ' + selectedSubData.value
+                                    selectedData.value + ' > ' + selectedSubData.value
                                     : selectedData.value
                                 : placeholder}
                         </Text>

components/WeeklyCalendar.js

-import React, { Component } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 import { View, Text, Button, StyleSheet } from 'react-native';
 import CalendarStrip from 'react-native-calendar-strip';
 // import moment from 'moment';
+import { getDateStr } from '../utils/dateFunction';
 
-const WeeklyCalendar = (props) => {
+const WeeklyCalendar = ({
+    selectedDate,
+    startingDate,
+    onWeekChanged,
+    onDateSelected,
+    weeklyData = [],
+    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
-                scrollable
-                calendarAnimation={{ type: 'sequence', duration: 30 }}
+                calendarAnimation={{ type: 'parallel', duration: 30 }}
                 daySelectionAnimation={{ type: 'background', duration: 300, highlightColor: '#9265DC' }}
-                style={{ height: 200, paddingTop: 20, paddingBottom: 10 }}
+                style={{ height: 130, paddingTop: 20, paddingBottom: 10 }}
                 calendarHeaderStyle={{ color: 'white' }}
-                calendarColor={'#3343CE'}
+                calendarColor={'#6b768a'}
                 dateNumberStyle={{ color: 'white' }}
                 dateNameStyle={{ color: 'white' }}
                 iconContainer={{ flex: 0.1 }}
-                // customDatesStyles={this.state.customDatesStyles}
+                customDatesStyles={customDatesStyles}
+                updateWeek
                 highlightDateNameStyle={{ color: 'white' }}
-                highlightDateNumberStyle={{ color: 'yellow' }}
+                highlightDateNumberStyle={{ color: 'white' }}
                 highlightDateContainerStyle={{ backgroundColor: 'black' }}
-                // markedDates={this.state.markedDates}
-                // datesBlacklist={this.datesBlacklistFunc}
-                // selectedDate={this.state.selectedDate}
-                // onDateSelected={this.onDateSelected}
+                // markedDates={markedDates}
+                // datesBlacklist={datesBlacklistFunc}
+                // startingDate={startingDate}
+                selectedDate={selectedDate}
+                onWeekChanged={onWeekChanged}
+                onDateSelected={onDateSelected}
                 useIsoWeekday={false}
             />
         </View>

db/mainScreen.api.js

+import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
+import getDb from './moneyDB'
+import { getDateStr } from '../utils/dateFunction';
+
+DEBUG(true);
+enablePromise(true);
+
+const getWeeklyData = async (start, end) => {
+    const db = await getDb();
+    return new Promise(async (resolve, reject) => {
+        const temp = [];
+        let input = 0;
+        let output = 0;
+        await db.transaction(async (tx) => {
+            const [txn, results] = await tx.executeSql(
+                `select date, group_concat(type_id, '|') as type_id
+                from (SELECT date, type_id 
+                from money 
+                where date BETWEEN "${getDateStr(start)}" and "${getDateStr(end)}" 
+                group by date, type_id ) group by date`
+            );
+
+            for (let i = 0; i < results.rows.length; i++) {
+                const tempDate = results.rows.item(i).date;
+                let tempType_id = [];
+                if (results.rows.item(i).type_id) {
+                    tempType_id = results.rows.item(i).type_id.split('|');
+                }
+                temp.push({ date: tempDate, type_id: tempType_id })
+            }
+        })
+        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 ;`
+            );
+            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("이동")
+                }
+            }
+        })
+        resolve({ data: temp, input: input, output: output })
+    })
+}
+
+const getData = async (findDate) => {
+    const db = await getDb();
+    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 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 })
+            }
+            resolve(temp);
+        })
+    })
+};
+
+const getTotalData = async () => {
+    const db = await getDb();
+    return new Promise(async (resolve, reject) => {
+        console.log("get total Money");
+        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");
+            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 })
+            }
+        })
+        await db.transaction(async (tx) => {
+            const [txn, results] = await tx.executeSql("SELECT sum(price) as price from money");
+            for (let i = 0; i < results.rows.length; i++) {
+                total = results.rows.item(i).price
+            }
+        })
+        resolve({ total: total, assets_total: temp});
+    })
+};
+
+const weekApi = {
+    getWeeklyData,
+    getData,
+    getTotalData,
+}
+
+export default weekApi;
\ No newline at end of file

utils/dateFunction.js

-export function getDate () {
-    const date = new Date();
+export function getDateStr (item) {
+    let date = ''
+    if (item){
+        date = new Date(item)
+    } else {
+        date = new Date()
+    }
     const tempY = date.getFullYear();
     let tempM = date.getMonth()+1;
     tempM = tempM > 9 ? tempM : "0" + tempM;
     let tempD = date.getDate();
     tempD = tempD > 9 ? tempD : "0" + tempD;
-    console.log(`${tempY}-${tempM}-${tempD}`)
     return `${tempY}-${tempM}-${tempD}`
 }
\ No newline at end of file