캘린더 틀 완성

Calendar.js

@@ -3,10 +3,12 @@ import { SafeAreaView, StyleSheet, View, Text, FlatList, TouchableOpacity } from
 import { Button } from 'react-native-elements';
 import Ionicons from 'react-native-vector-icons/Ionicons';
 
-const DateItem = ({ dateitem, onPress, backgroundColor, textColor }) => {
+const DateItem = ({ dateitem, onPress, backgroundColor, textColor, flatListHeight }) => {
   return (
-    <TouchableOpacity onPress={onPress} style={[style.dateContainer, backgroundColor]}>
+    <TouchableOpacity onPress={onPress}
+     style={[style.dateContainer, backgroundColor, {height: flatListHeight}]}>
       <Text style={textColor}>{dateitem}</Text>
+      <Text style={{color:'blue'}}>100,000</Text>
     </TouchableOpacity>
   );
 };
@@ -17,6 +19,7 @@ function Calendar() {
   const [month, setMonth] = useState(date.getMonth());
   const todayM = date.getMonth();
   const todayY = date.getFullYear();
+  const [flatListHeight, setFlatListHeight] = useState(400)
 
   const prevLast = new Date(year, month, 0); //이전 달의 마지막 날
   const thisFirst = new Date(year, month, 1); //이번 달의 첫째 날
@@ -50,7 +53,7 @@ function Calendar() {
   const [selectedKey, setSelectedKey] = useState(null);
 
   const renderDate = ({ item }) => {
-    const backgroundColor = item.key === selectedKey ? '#87ceeb' : '#ffffff';
+    const backgroundColor = item.key === selectedKey ? '#87ceeb' : '#FFFAFA';
     let color = '#000000';
     if (item.idates === date.getDate() && month === todayM && year === todayY) {
       istoday = true;
@@ -63,11 +66,12 @@ function Calendar() {
       color = '#a9a9a9'
     }
     return (
-      <DateItem dateitem={item.idates} onPress={() => setSelectedKey(item.key)} backgroundColor={{ backgroundColor }} textColor={{ color }} />
+      <DateItem dateitem={item.idates} onPress={() => setSelectedKey(item.key)} backgroundColor={{ backgroundColor }} textColor={{ color }} flatListHeight={flatListHeight / 5} />
     )
   }
 
   const prevBtn = () => {
+    setSelectedKey(null)
     if (month < 1) {
       setYear(year - 1)
       setMonth(11)
@@ -77,6 +81,7 @@ function Calendar() {
   };
 
   const nextBtn = () => {
+    setSelectedKey(null)
     if (month > 10) {
       setYear(year + 1)
       setMonth(0)
@@ -91,9 +96,13 @@ function Calendar() {
     setSelectedKey(null)
   }, [])
 
+  const onLayout=(event)=> {
+    const {x, y, height, width} = event.nativeEvent.layout;
+    setFlatListHeight(height)
+  }
   return (
     <>
-      <SafeAreaView>
+      <SafeAreaView style={style.EntContainer}>
         <View style={style.Container}>
           <Text style={style.Head}>{year} 년 {month + 1} 월</Text>
           <View style={style.Buttons}>
@@ -106,34 +115,47 @@ function Calendar() {
             } type='clear' />
           </View>
         </View>
-        <FlatList ListHeaderComponent={
         <View style={style.Days}>
-            <Text>월</Text>
-            <Text>화</Text>
-            <Text>수</Text>
-            <Text>목</Text>
-            <Text>금</Text>
-            <Text>토</Text>
-            <Text>일</Text>
+          <Text style={style.DayText}>월</Text>
+          <Text style={style.DayText}>화</Text>
+          <Text style={style.DayText}>수</Text>
+          <Text style={style.DayText}>목</Text>
+          <Text style={style.DayText}>금</Text>
+          <Text style={style.DayText}>토</Text>
+          <Text style={style.DayText}>일</Text>
         </View>
-        } data={dates} renderItem={renderDate} numColumns={7} extraData={selectedKey} />
+        <FlatList style={style.ListContainer}
+        onLayout={onLayout}
+          contentContainerStyle={style.wrapper}
+          data={dates}
+          numColumns={7}
+          renderItem={renderDate}
+          extraData={selectedKey} />
       </SafeAreaView>
     </>
   )
 }
 
 const style = StyleSheet.create({
-  Head: {
+  wrapper: {
+    alignItems: 'stretch',
+    alignContent: 'stretch'
+  },
+  EntContainer: { //전체 (SafeAreaView)
+    flex: 1,
+    padding: 20
+  },
+  Head: { //00년00월
     fontSize: 24,
   },
-  Container: {
+  Container: { //년월, 버튼 뷰에 적용
     justifyContent: "center",
     alignItems: "center",
   },
-  dateContainer: {
-    //height:300,
-    //backgroundColor: '#FFFFFF',
-    margin: 10
+  dateContainer: { //각 date에 적용 (Text 태그), DateItem 컴포넌트에 적용
+    flex: 1,
+    borderWidth: 0.8,
+    borderColor: '#DCDCDC'
   },
   Buttons: {
     flexDirection: 'row',
@@ -142,6 +164,10 @@ const style = StyleSheet.create({
   Days: {
     flexDirection: 'row'
   },
+  DayText: {
+    flex: 1,
+    textAlign: 'center'
+  },
 });
 
 export default Calendar;
\ No newline at end of file