캘린더 배열 수정 중

Calendar.js

 import React, { useState, useEffect } from 'react';
 import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from 'react-native';
-import { Button } from 'react-native-elements';
+import { Button, normalize } from 'react-native-elements';
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
 import Ionicons from 'react-native-vector-icons/Ionicons';
+import DetailInfo from './DetailInfo';
 
-const DateItem = ({ dateitem, onPress, backgroundColor, textColor, flatListHeight }) => {
+const Stack = createStackNavigator();
+
+const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => {
   return (
     <TouchableOpacity onPress={onPress}
-     style={[style.dateContainer, backgroundColor, {height: flatListHeight}]}>
-      <Text style={textColor}>{dateitem}</Text>
-      <Text style={{color:'blue'}}>100,000</Text>
+      style={[style.dateContainer, { height: flatListHeight }]}>
+      <Text style={textColor}>{dateitem.idates}</Text>
+      {
+        dateitem.type &&
+        <View>
+          <Text style={{ color: '#1E90FF' }}>{dateitem.type.input ? dateitem.type.input : null}</Text>
+          <Text style={{ color: '#DC143C' }}>{dateitem.type.output ? dateitem.type.output : null}</Text>
+        </View>
+      }
     </TouchableOpacity>
   );
 };
+const INIT_Data = [
+  {
+    date: "2021-06-28",
+    type: { 'input': 10000, 'output': 1000 },
+  },
+  {
+    date: "2021-07-01",
+    type: { 'input': 50000, 'output': 3500 },
+  },
+  {
+    date: "2021-07-11",
+    type: { 'input': 100000, 'output': 2000 },
+  },
+  {
+    date: "2021-08-14",
+    type: { 'input': 15000, 'output': 2010 },
+  },
+];
 
-function Calendar() {
+const dateTostr = (date) => {
+  //console.log('didididid', date)
+  const dsy = date.getFullYear();
+  const dsm = ('0' + (date.getMonth() + 1)).slice(-2);
+  const dsd = ('0' + date.getDate()).slice(-2);
+  //console.log('return', dsy + '-' + dsm + '-' + dsd)
+  return dsy + '-' + dsm + '-' + dsd;
+
+}
+
+function Calendar({ navigation }) {
   const date = new Date();
   const [year, setYear] = useState(date.getFullYear());
   const [month, setMonth] = useState(date.getMonth());
@@ -32,28 +71,48 @@ function Calendar() {
 
   // 이번 달 달력에 쓰일 날짜들. 이전달 다음달 전부 포함
   const tempDates = [];
+  const testArr = [];
   if (thisFirstDay != 0) { // 첫째 날이 일요일이 아니라면
     for (let i = 0; i < thisFirstDay; i++) {
       tempDates.unshift(prevLastDate - i);
-    } // 이전 달의 마지막 날짜부터 1씩 감소시켜서 배열에 값 추가.
+      //testArr.unshift({ ay: year, am: month, ad: prevLastDate - i });
+      const re1 = dateTostr(new Date(year, month - 1, prevLastDate - i))
+      testArr.unshift({ fd: re1, sd: prevLastDate - i })
+    }
   }
   for (let i = 1; i <= thisLastDate; i++) { //이번 달 날짜 
     tempDates.push(i);
+    //testArr.push({ ay: year, am: month + 1, ad: i });
+    const re2 = dateTostr(new Date(year, month, i))
+    testArr.push({ fd: re2, sd: i })
   }
   for (let i = 1; i <= 6 - thisLastDay; i++) {
     tempDates.push(i);
+    //testArr.push({ ay: year, am: month + 2, ad: i });
+    const re3 = dateTostr(new Date(year, month + 1, i))
+    testArr.push({ fd: re3, sd: i})
   }
+  console.log('testArr', testArr);
   const dates = tempDates.map((element, index) => ({ key: `${index}`, idates: element }));
 
+  const testDates = testArr.map((obj, index) => ({ key: `${index}`, tdates: obj.sd }));
+  console.log('testDates', testDates)
+
+  const testID = dates.findIndex(obj => obj.idates == 28);
+  if (testID !== -1) {
+    //dates[testID] = { key: `${dates[testID].key}`, idates: dates[testID].idates, type: 'input', price: 10000 };
+    dates[testID] = { key: `${dates[testID].key}`, idates: dates[testID].idates, type: { "input": 10000, "output": 1000 } };
+    //console.log('타입확인', dates[testID]); //타입확인 {"idates": 28, "key": "1", "type": {"input": 10000, "output": 1000}}
+    //console.log('type', Object.keys(dates[testID].type)); //type ["input", "output"]
+    console.log('a', dates[testID].type.input)
+  }
+
   const thisfirstID = tempDates.indexOf(1); // 이번 달 1일
   const thislastID = tempDates.lastIndexOf(thisLastDate); // 이번 달 마지막 날짜 인덱스
 
   let istoday = false;
 
-  const [selectedKey, setSelectedKey] = useState(null);
-
   const renderDate = ({ item }) => {
-    const backgroundColor = item.key === selectedKey ? '#87ceeb' : '#FFFAFA';
     let color = '#000000';
     if (item.idates === date.getDate() && month === todayM && year === todayY) {
       istoday = true;
@@ -66,12 +125,10 @@ function Calendar() {
       color = '#a9a9a9'
     }
     return (
-      <DateItem dateitem={item.idates} onPress={() => setSelectedKey(item.key)} backgroundColor={{ backgroundColor }} textColor={{ color }} flatListHeight={flatListHeight / 5} />
+      <DateItem dateitem={item} textColor={{ color }} onPress={() => navigation.navigate('DetailInfo')} flatListHeight={flatListHeight / 5} />
     )
   }
-
   const prevBtn = () => {
-    setSelectedKey(null)
     if (month < 1) {
       setYear(year - 1)
       setMonth(11)
@@ -79,9 +136,7 @@ function Calendar() {
       setMonth(month - 1)
     }
   };
-
   const nextBtn = () => {
-    setSelectedKey(null)
     if (month > 10) {
       setYear(year + 1)
       setMonth(0)
@@ -89,15 +144,13 @@ function Calendar() {
       setMonth(month + 1)
     }
   }
-
   useEffect(() => {
     setMonth(todayM)
     setYear(todayY)
-    setSelectedKey(null)
   }, [])
 
-  const onLayout=(event)=> {
-    const {x, y, height, width} = event.nativeEvent.layout;
+  const onLayout = (event) => {
+    const { x, y, height, width } = event.nativeEvent.layout;
     setFlatListHeight(height)
   }
   return (
@@ -124,23 +177,21 @@ function Calendar() {
           <Text style={style.DayText}>토</Text>
           <Text style={style.DayText}>일</Text>
         </View>
-        <FlatList style={style.ListContainer}
-        onLayout={onLayout}
-          contentContainerStyle={style.wrapper}
+        <FlatList
+          onLayout={onLayout}
           data={dates}
           numColumns={7}
           renderItem={renderDate}
-          extraData={selectedKey} />
+        />
+        <Stack.Navigator>
+          <Stack.Screen name="DetailInfo" component={DetailInfo} />
+        </Stack.Navigator>
       </SafeAreaView>
     </>
   )
-}
+};
 
 const style = StyleSheet.create({
-  wrapper: {
-    alignItems: 'stretch',
-    alignContent: 'stretch'
-  },
   EntContainer: { //전체 (SafeAreaView)
     flex: 1,
     padding: 20
@@ -162,11 +213,13 @@ const style = StyleSheet.create({
     margin: 10
   },
   Days: {
-    flexDirection: 'row'
+    flexDirection: 'row',
+    backgroundColor: '#6495ED'
   },
   DayText: {
     flex: 1,
-    textAlign: 'center'
+    textAlign: 'center',
+    color: '#FFFFFF'
   },
 });