import React, { useEffect, useState } from 'react'; import { View, Text, StyleSheet, Keyboard, TouchableWithoutFeedback, Modal, Pressable, 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 }) => { 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 ( {item.category} {item.contents} {(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 {item.asset ? {'(' + item.asset + '>' + item.deposit_asset + ')'} : null} ); }; const AssetItem = ({ item }) => { return ( {item.name} {(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 원 ); }; 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 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 [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([]) const [totalMoney, setTotalMoney] = useState(0) const [totalAssetsMoney, setTotalAssetsMoney] = useState([]) useFocusEffect( React.useCallback(() => { getWeeklyData(initialStartingDate, initialEndDate) getTotalMoney() }, []) ); const getWeeklyData = async (start, end) => { if (getDateStr(start) !== getDateStr(startingDate)) { 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) } useEffect(() => { getSingleData() }, [selectedDate]) const getSingleData = async () => { const tempData = await weekApi.getData(selectedDate) setSingleMoney(tempData) } return ( <> { Keyboard.dismiss(); }}> {/* { 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) }}> 테스트 */} getWeeklyData(start, end)} onDateSelected={(date) => setSelectedDate(date)} markedDates={markedDates} /> 수입 {weekMoney.input} 지출 {weekMoney.output} <> { singleMoney.length !== 0 ? {singleMoney.length !== 0 && singleMoney.map((item, index) => )} : 내역이 없습니다. } 총 자산 {(totalMoney).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} {totalAssetsMoney.length !== 0 && totalAssetsMoney.map((item, index) => )} navigation.navigate('PostMoney')} style={style.submitButton} > 수입/지출 기록 setOpen(!open)} onClose={() => setOpen(!open)} > navigation.navigate('DeptPage')} /> navigation.navigate('MemoPage')} /> setModalOpen(false)} /> ) } const style = StyleSheet.create({ weekData: { flexDirection: "row", justifyContent: "space-around", backgroundColor: "#adbfdb", paddingBottom: 10, }, TextInput: { borderColor: 'skyblue', height: 40, margin: 12, borderWidth: 1 }, totalMoney: { fontSize: 35, }, Font: { fontFamily: 'GowunDodum-Regular', fontSize: 18 }, inputColor: { color: '#1E90FF' }, outputColor: { color: '#dc143c' }, moveColor: { color: '#646d75' }, itemTextNum: { flex: 1, textAlign: "center", }, itemText: { flex: 1, }, submitButton: { backgroundColor: '#bfd3f2', margin: 10, height: 50, alignItems: 'center', justifyContent: 'center', }, modalToggle: { padding: 10, borderRadius: 10, alignSelf: 'flex-start', marginTop: -40, //위치를 center로 }, modalClose: { alignSelf: 'center', alignItems: 'flex-start', marginTop: 150, marginBottom: 50, }, modalContent: { flex: 1, }, Contents: { alignItems: "center", margin: 20 } }); export default MainScreen;