스타일 적용중

App.js

@@ -80,7 +80,10 @@ function App() {
           name="MemoDetails"
           component={MemoDetails}
           options={{ title: "상세내용" }} />
-        <Stack.Screen name="DetailInfo" component={DetailInfo} />
+        <Stack.Screen
+          name="DetailInfo"
+          component={DetailInfo}
+          options={{ title: "일일내역" }} />
         <Stack.Screen
           name="EditOption"
           component={EditOption}

ChartM.js

@@ -15,8 +15,8 @@ const ChartItem = ({ item }) => {
         borderWidth: 1, borderTopWidth: 0,
       }}>
         <Text style={[style.itemText, style.Font]}>{item.name}</Text>
-        <Text style={[style.itemText, style.Font]}>{item.total}</Text>
-        <Text style={[style.itemText, style.Font]}>{item.percentage}%</Text>
+        <Text style={[style.itemTextNum, style.Font]}>{item.total}</Text>
+        <Text style={[style.itemTextNum, style.Font]}>{item.percentage}%</Text>
         <Text></Text>
       </View>
     </>
@@ -91,7 +91,7 @@ const ChartM = ({
               accessor={"total"}
               backgroundColor={"#ffffff"}
               absolute
-            /> : <Text style={{ fontSize: 30, textAlign: "center" }}> 지출 내역이 없습니다.</Text>
+            /> : <Text style={style.infoText}> 지출 내역이 없습니다.</Text>
         }
         <FlatList
           style={{ backgroundColor: "#FFFFFF" }}
@@ -105,10 +105,23 @@ const ChartM = ({
 }
 const style = StyleSheet.create({
   Font: {
-    fontSize: 20
+    fontSize: 20,
+    fontFamily: 'GowunDodum-Regular'
+  },
+  itemTextNum: {
+    flex: 1,
+    textAlign: "center",
+    fontFamily: 'GowunDodum-Regular'
   },
   itemText: {
-    paddingRight: "10%"
+    flex: 1,
+    fontFamily: 'GowunDodum-Regular'
+  },
+  infoText: {
+    fontSize: 30,
+    textAlign: "center",
+    marginTop: "20%",
+    fontFamily: 'GowunDodum-Regular'
   }
 });
 

ChartY.js

@@ -8,6 +8,7 @@ const screenWidth = Dimensions.get("window").width;
 const screenHeight = Dimensions.get("window").height;
 
 const ChartY = ({ resDataY, year, setYear }) => {
+
   const chartConfig = {
     backgroundGradientFrom: "#ffffff", //좌측 색
     backgroundGradientFromOpacity: 1,
@@ -18,7 +19,6 @@ const ChartY = ({ resDataY, year, setYear }) => {
     barPercentage: 0.5, // 그래프 width
     useShadowColorFromDataset: false,// optional, default is false
     fillShadowGradientOpacity: 1, // 좀 더 진하게만 할 뿐 단색 설정은 못하는 것 같음
-
   };
   const prevBtn = () => {
     setYear(year - 1)
@@ -27,38 +27,57 @@ const ChartY = ({ resDataY, year, setYear }) => {
     setYear(year + 1)
   }
 
+  const convertY = (y) => {
+    console.log('convert y=====', y)
+    let res = '';
+    if (y >= 1000000000) {
+      res = (y / 1000000000).toFixed(2) + "B"
+      console.log('단위변환중', res)
+    } else if (y >= 1000000) {
+      res = (y / 1000000).toFixed(2) + "M"
+      console.log('단위변환중', res)
+    } else if (y >= 1000) {
+      res = (y / 1000).toFixed(2) + "K"
+      console.log('단위변환중', res)
+    }
+    return res
+  }
+
   console.log('잠만확인', resDataY.temp1[0].datasets[0].data, '|', resDataY.temp2[0].datasets[0].data)
   let totalYI = (resDataY.temp1[0].datasets[0].data).reduce((acc, curr) => acc + curr, 0);
   let totalYO = (resDataY.temp2[0].datasets[0].data).reduce((acc, curr) => acc + curr, 0);
   console.log('합산 확인', totalYI, '|', totalYO)
+
   return (
     <>
       <View style={{ flexDirection: 'row' }}>
         <Button icon={
           <Ionicons name='chevron-back-sharp' onPress={prevBtn} size={15} color='black' />
         } type='clear' />
-        <Text>{year}년</Text>
+        <Text style={{ fontFamily: 'GowunDodum-Regular' }}>{year}년</Text>
         <Button icon={
           <Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={15} color='black' />
         } type='clear' />
       </View>
+      <View style={{ flexDirection: 'row', justifyContent: "space-around" }}>
+        <Text style={[{ color: '#1E90FF' }, style.Font]}>수입:  {(totalYI).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text>
+        <Text style={[{ color: '#dc143c' }, style.Font]}>지출:  {(totalYO).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 </Text>
+      </View>
       <View>
-        <Text style={style.Font}>수입:  {(totalYI).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text>
         <BarChart
           style={{ marginBottom: "2%", marginTop: "2%" }}
           data={resDataY.temp1[0]}
           width={screenWidth}
           height={screenHeight / 3}
-          chartConfig={{ ...chartConfig, fillShadowGradient: '#1E90FF' }}
+          chartConfig={{ ...chartConfig, fillShadowGradient: '#1E90FF', formatYLabel: convertY }}
           fromZero={true}
         />
-        <Text style={style.Font}>지출:  {(totalYO).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원 </Text>
         <BarChart
           style={{ marginTop: "2%" }}
           data={resDataY.temp2[0]}
           width={screenWidth}
           height={screenHeight / 3}
-          chartConfig={{ ...chartConfig, fillShadowGradient: '#DC143C' }}
+          chartConfig={{ ...chartConfig, fillShadowGradient: '#DC143C', formatYLabel: convertY }}
           fromZero={true}
         />
       </View>
@@ -69,7 +88,7 @@ const style = StyleSheet.create({
   Font: {
     textAlign: "center",
     fontSize: 20,
-    fontFamily: 'Jua-Regular'
+    fontFamily: 'GowunDodum-Regular'
   },
 });
 

DetailInfo.js

@@ -10,9 +10,9 @@ const DetailItem = ({ item }) => {
         flexDirection: "row", padding: "5%", borderColor: '#d3d3d3', //light grey
         borderWidth: 1, borderTopWidth: 0,
       }}>
-        <Text style={item.type === 1 ? style.inputColor : style.outputColor}>{item.category}</Text>
-        <Text style={[style.itemText, style.Font]}>{item.contents}</Text>
-        <Text style={[style.itemText, style.Font]}>{item.price}원</Text>
+        <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>
     </>
   );
@@ -47,8 +47,8 @@ const DetailInfo = ({ route }) => {
             data={resData}
             renderItem={renderDetail}
             keyExtractor={item => item.id}
-          /> : <View>
-            <Text style={{textAlign:"center", fontSize:20}}>내역이 없습니다.</Text>
+          /> : <View style={{ marginTop: "20%" }}>
+            <Text style={{ textAlign: "center", fontSize: 20 }}>내역이 없습니다.</Text>
           </View>
         }
 
@@ -67,10 +67,12 @@ const style = StyleSheet.create({
   outputColor: {
     color: '#dc143c'
   },
+  itemTextNum: {
+    flex: 1,
+    textAlign: "center"
+  },
   itemText: {
-    paddingRight: "10%",
-    paddingLeft: "20%",
-    // alignItems:"center"
+    flex: 1
   }
 });
 

components/ButtonsForm.js

 import React from 'react';
 import { ButtonGroup } from 'react-native-elements';
 import { StyleSheet, Text } from 'react-native';
+import { color } from 'react-native-elements/dist/helpers';
 
 const ButtonsForm = (props) => {
     const components = [];
 
-    for (let i = 0; i < props.group.length ; i++) {
-        components[i] = { element: () => <Text>{props.group[i]}</Text> }
+    for (let i = 0; i < props.group.length; i++) {
+        components[i] = {
+            element: () => <Text style={{
+                fontSize: 20,
+                fontFamily: 'GowunDodum-Regular'
+            }} > {props.group[i]}</Text >
+        }
     }
 
     return (
@@ -17,6 +23,7 @@ const ButtonsForm = (props) => {
             containerStyle={style.container}
             selectedButtonStyle={style.selectedButton}
             selectedTextStyle={style.selectedText}
+
         />
     );
 };
@@ -27,14 +34,15 @@ const style = StyleSheet.create({
         height: 50,
         flexDirection: 'row',
         alignItems: "center",
-        backgroundColor: "#f5f5f5",
-    },
-    text: {
-        color: "#808080",
-        fontSize: 24
+        backgroundColor: '#f5f5f5'
     },
+    // text: {
+    //     color: "#808080",
+    //     fontSize: 24,
+    //     fontFamily: 'GowunDodum-Regular'
+    // },
     selectedButton: {
-        backgroundColor: "#adadad",
+        backgroundColor: '#bfd3f2'
     },
     selectedText: {
         color: "#1467ff",

components/Calendar.js

@@ -103,7 +103,7 @@ function Calendar({
     if (!(item.date.getMonth() === month)) {
       color = '#a9a9a9'
     }
-    
+
     return (
       <DateItem dateitem={item} textColor={{ color }} onPress={() => navigation.navigate('DetailInfo', String(item.date.toJSON()).split(/T/)[0])} flatListHeight={flatListHeight / (Dates.length / 7)} />
     )
@@ -158,6 +158,7 @@ function Calendar({
           <Text style={style.DayText}>일</Text>
         </View>
         <FlatList
+          style={{ backgroundColor: "#FFFFFF" }}
           onLayout={onLayout}
           data={Dates}
           numColumns={7}
@@ -176,6 +177,7 @@ const style = StyleSheet.create({
   },
   Head: { //00년00월
     fontSize: 24,
+    fontFamily: 'GowunDodum-Regular'
   },
   Container: { //년월, 버튼 뷰에 적용
     justifyContent: "center",
@@ -198,7 +200,9 @@ const style = StyleSheet.create({
   DayText: {
     flex: 1,
     textAlign: 'center',
-    color: '#FFFFFF'
+    color: '#FFFFFF',
+    fontFamily: 'GowunDodum-Regular',
+    fontWeight: "bold"
   },
 });
 

db/chartData.api.js

 import { DEBUG, enablePromise } from 'react-native-sqlite-storage';
 import getDb from './moneyDB'
+import { getDate } from '../utils/dateFunction'
 
 DEBUG(true);
 enablePromise(true);
@@ -19,7 +20,7 @@ const outMoney = async ({ year, month }) => {
   return new Promise((res, rej) => {
     db.transaction(async (tx) => {
       console.log('차트 페이지');
-      const [txn, results] = await tx.executeSql(`SELECT category_id, category_name, sum(price) as total from (SELECT money.type_id, price, money.category_id, category_name FROM money inner JOIN categories on money.category_id = categories.category_id where date BETWEEN "${String(thisFirst.toJSON()).split(/T/)[0]}" and "${String(thisLast.toJSON()).split(/T/)[0]}") WHERE type_id=2 group by category_id`);
+      const [txn, results] = await tx.executeSql(`SELECT category_id, category_name, sum(price) as total from (SELECT money.type_id, price, money.category_id, category_name FROM money inner JOIN categories on money.category_id = categories.category_id where date BETWEEN "${getDate(thisFirst)}" and "${getDate(thisLast)}") WHERE type_id=2 group by category_id`);
       const temp = [];
       for (let i = 0; i < results.rows.length; i++) {
         console.log('chart', results.rows.item(i))

utils/dateFunction.js

-export function getDate () {
-    const date = new Date();
+export function getDate(item) {
+    let date = ''
+    if (item) {
+        date = new Date(item)
+    } else {
+        date = new Date()
+    }
     const tempY = date.getFullYear();
-    let tempM = date.getMonth()+1;
+    let tempM = date.getMonth() + 1;
     tempM = tempM > 9 ? tempM : "0" + tempM;
     let tempD = date.getDate();
     tempD = tempD > 9 ? tempD : "0" + tempD;