병합 후 수정

ChartM.js

@@ -30,15 +30,15 @@ const ChartM = ({
   setMonth
 }) => {
   const chartConfig = {
-    backgroundGradientFrom: "#abbcd6", 
+    backgroundGradientFrom: "#abbcd6",
     backgroundGradientFromOpacity: 0.5,
-    backgroundGradientTo: "#E6DDC5", 
+    backgroundGradientTo: "#E6DDC5",
     backgroundGradientToOpacity: 0.2,
     color: (opacity = 1) => `rgba(0, 93, 232, ${opacity})`,
     strokeWidth: 2, // optional, default 3
     barPercentage: 0.5, // 그래프 width
     useShadowColorFromDataset: false,// optional, default is false
-    fillShadowGradientOpacity: 1, 
+    fillShadowGradientOpacity: 1,
 
   };
 
@@ -65,13 +65,13 @@ const ChartM = ({
   }
   return (
     <>
-      <View style={{ flexDirection: 'row' }}>
+      <View style={{ flexDirection: 'row', justifyContent: "center", alignItems: "center"}}>
         <Button icon={
-          <Ionicons name='chevron-back-sharp' onPress={prevBtn} size={15} color='black' />
+          <Ionicons name='chevron-back-sharp' onPress={prevBtn} size={20} color='black' />
         } type='clear' />
-        <Text>{year}.{month + 1}</Text>
+        <Text style={{ fontFamily: 'GowunDodum-Regular', fontSize:20 }}>{year}.{month + 1}</Text>
         <Button icon={
-          <Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={15} color='black' />
+          <Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={20} color='black' />
         } type='clear' />
       </View>
       <View>
@@ -80,7 +80,7 @@ const ChartM = ({
             < PieChart
               data={resDataM}
               width={screenWidth}
-              height={screenHeight / 3} 
+              height={screenHeight / 3}
               chartConfig={chartConfig}
               accessor={"total"}
               backgroundColor={"#ffffff"}

ChartY.js

@@ -12,7 +12,7 @@ const ChartY = ({ resDataY, year, setYear }) => {
   const chartConfig = {
     backgroundGradientFrom: "#ffffff",
     backgroundGradientFromOpacity: 1,
-    backgroundGradientTo: "#ffffff", 
+    backgroundGradientTo: "#ffffff",
     backgroundGradientToOpacity: 1,
     color: (opacity = 1) => `rgba(48, 48, 48, ${opacity})`,
     strokeWidth: 2, // optional, default 3
@@ -44,13 +44,13 @@ const ChartY = ({ resDataY, year, setYear }) => {
 
   return (
     <>
-      <View style={{ flexDirection: 'row' }}>
+      <View style={{ flexDirection: 'row', justifyContent: "center", alignItems: "center" }}>
         <Button icon={
-          <Ionicons name='chevron-back-sharp' onPress={prevBtn} size={15} color='black' />
+          <Ionicons name='chevron-back-sharp' onPress={prevBtn} size={20} color='black' />
         } type='clear' />
-        <Text style={{ fontFamily: 'GowunDodum-Regular' }}>{year}년</Text>
+        <Text style={{ fontFamily: 'GowunDodum-Regular', fontSize:20 }}>{year}년</Text>
         <Button icon={
-          <Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={15} color='black' />
+          <Ionicons name='chevron-forward-sharp' onPress={nextBtn} size={20} color='black' />
         } type='clear' />
       </View>
       <View style={{ flexDirection: 'row', justifyContent: "space-around" }}>

MainScreen.js

@@ -18,7 +18,7 @@ const DetailItem = ({ item }) => {
             }}>
                 <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>
+                <Text style={[style.itemTextNum, style.Font]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}원</Text>
             </View>
         </>
     );
@@ -28,7 +28,7 @@ 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>
+            <Text style={[style.Font, { width: "60%", textAlign: 'right' }]}>{(item.price).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} 원</Text>
         </View>
     );
 };
@@ -111,7 +111,7 @@ function MainScreen({ navigation }) {
                             </View>
                             <View style={style.Contents}>
                                 <Text style={[style.Font, { fontWeight: 'bold' }]}>총 자산</Text>
-                                <Text style={style.totalMoney}><FontAwesome name="won" style={style.totalMoney} /> {totalMoney}</Text>
+                                <Text style={style.totalMoney}><FontAwesome name="won" style={style.totalMoney} /> {(totalMoney).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</Text>
                                 <View style={{ marginTop: 5 }}>
                                     {totalAssetsMoney.length !== 0 && totalAssetsMoney.map((item, index) => <AssetItem item={item} key={index} />)}
                                 </View>

PostMoney.js

@@ -55,16 +55,6 @@ const PostMoney = ({ navigation }) => {
         setSelected_subcat(INIT_SUBCATEGORY)
     }
 
-    console.log(
-        'type: ', selectedIndex,
-        '| date: ', date,
-        '| contents: ', contents,
-        '| price: ', price,
-        '| selected_asset_type: ', selected_asset_type.id,
-        '| 이동일 때 ', (selectedIndex === 2 ? { ['selected_deposit_asset_type']: selected_deposit_asset_type.id } : null),
-        '| selected_cat: ', selected_cat.id,
-        '| selected_subcat: ', selected_subcat.id)
-
     const insertData = async () => {
         try {
             let type = selectedIndex + 1;

components/Calendar.js

@@ -12,8 +12,8 @@ const DateItem = ({ dateitem, textColor, onPress, flatListHeight }) => {
       {
         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>
+          <Text style={{ color: '#1E90FF' }}>{dateitem.type.input ? (dateitem.type.input).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : null}</Text>
+          <Text style={{ color: '#DC143C' }}>{dateitem.type.output ? (dateitem.type.output).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") : null}</Text>
         </View>
       }
     </TouchableOpacity>
@@ -34,17 +34,17 @@ function Calendar({
   const [flatListHeight, setFlatListHeight] = useState(400)
 
   const prevLast = new Date(year, month, 0);
-  const thisFirst = new Date(year, month, 1); 
-  const thisLast = new Date(year, month + 1, 0); 
+  const thisFirst = new Date(year, month, 1);
+  const thisLast = new Date(year, month + 1, 0);
 
   const thisFirstDay = thisFirst.getDay();
-  const prevLastDate = prevLast.getDate(); 
-  const thisLastDate = thisLast.getDate(); 
-  const thisLastDay = thisLast.getDay(); 
+  const prevLastDate = prevLast.getDate();
+  const thisLastDate = thisLast.getDate();
+  const thisLastDay = thisLast.getDay();
 
   const Dates = [];
   const DBDates = [];
-  if (thisFirstDay !== 0) { 
+  if (thisFirstDay !== 0) {
     for (let i = 0; i < thisFirstDay; i++) {
       Dates.unshift({ date: new Date(year, month - 1, prevLastDate - i) })
     }

components/todoItem.js

@@ -8,12 +8,9 @@ function TodoItem({ item, onDeleteHandle }) {
             <Ionicons name='trash-outline' size={15} color='#333' onPress={onDeleteHandle} />
             <Text style={styles.itemText}>{item.date}</Text>
             <Text style={styles.itemText}>{item.message}</Text>
-            <Text style={styles.itemText}>{item.money}</Text>
-            <Text style={styles.itemText}>{item.remained_money}</Text>
+            {item.money ? <Text style={styles.itemText}>{(item.repayment).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")} / {(item.money).toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</Text> : null}
         </View>
-
     )
-
 }
 
 const styles = StyleSheet.create({
@@ -23,13 +20,14 @@ const styles = StyleSheet.create({
         borderColor: '#bbb',
         borderWidth: 1,
         borderStyle: 'd',
-        borderStyle: 'dashed', 
+        borderStyle: 'dashed',
         borderRadius: 10,
-        flexDirection: 'row' 
+        flexDirection: 'row'
     },
     itemText: {
         fontFamily: 'GowunDodum-Regular',
         marginLeft: 10,
+        fontSize: 15
     }
 })
 

db/deptPage.api.js

@@ -7,21 +7,17 @@ enablePromise(true);
 
 const insertDept = async (deptData) => {
     const db = await getDb();
-    const { date, loan, message, money, remained_money } = deptData 
+    const { date, loan, message, money, repayment } = deptData 
     return new Promise((resolve, reject) => {
         db.transaction((tx) => {
             tx.executeSql('INSERT INTO dept (repayment_date, loan, loan_name, principal, repayment) VALUES (?,?,?,?,?);',
-                [date, loan, message, money, remained_money], 
+                [date, loan, message, money, repayment], 
                 (error) => console.log(error))
             resolve('데이터 삽입 완료');
         })
     })
 };
 
-
-
-
-
 const selectLoan = async (title) => {
     const db = await getDb();
     return new Promise((resolve, reject) => {
@@ -35,7 +31,7 @@ const selectLoan = async (title) => {
                 const tempRepayment = results.rows.item(i).repayment;
                 const tempRe_date = results.rows.item(i).repayment_date;
                 const tempLoan_name = results.rows.item(i).loan_name;
-                temp.push({ id: tempId, date: tempRe_date, loan: tempLoan, message: tempLoan_name, money: tempPrincipal, remained_money: tempRepayment });
+                temp.push({ id: tempId, date: tempRe_date, loan: tempLoan, message: tempLoan_name, money: tempPrincipal, repayment: tempRepayment });
             }
             resolve(temp);
 
@@ -56,12 +52,12 @@ const deleteDept = async (id) => {
 
 const updateDept = async (deptData, id) => {
     const db = await getDb();
-    const { date, message, money, remained_money } = deptData
+    const { date, message, money, repayment } = deptData
     console.log(date, message, id)
     return new Promise((resolve, reject) => {
         db.transaction((tx) => {
             tx.executeSql(`UPDATE dept set repayment_date =?, loan_name=?, principal=?, repayment=? where dept_id =${id};`,
-                [date, message, money, remained_money],
+                [date, message, money, repayment],
                 (error) => console.log(error))
             resolve('데이터 변경 완료');
         })

screens/DeptDetails.js

@@ -15,17 +15,17 @@ function DeptDetails({ route, navigation }) {
     const [date, setDate] = useState(getDates())
     const [message, setMessage] = useState('')
     const [money, setMoney] = useState('')
-    const [remained_money, setRemained_money] = useState('')
+    const [repayment, setRepayment] = useState('')
 
     useEffect(() => {
         setDate(String(item.date))
         setMessage(item.message)
         setMoney(String(item.money))
-        setRemained_money(String(item.remained_money))
+        setRepayment(String(item.repayment))
     }, [])
 
     const onUpdateHandle = async () => {
-        await deptApi.updateDept({ date, message, money, remained_money }, item.id)
+        await deptApi.updateDept({ date, message, money, repayment }, item.id)
         loadLoan()
         navigation.navigate('DeptPage')
     }
@@ -48,17 +48,17 @@ function DeptDetails({ route, navigation }) {
                         }
                     />
                     <InputBox
-                        inputTitle="금액"
+                        inputTitle="원금"
                         value={money}
                         onChangeText={
                             (money) => setMoney(money)
                         }
                     />
                     <InputBox
-                        inputTitle="남은 금액"
-                        value={remained_money}
+                        inputTitle="갚은 금액"
+                        value={repayment}
                         onChangeText={
-                            (remained_money) => setRemained_money(remained_money)
+                            (repayment) => setRepayment(repayment)
                         }
                     />
                 </View>

screens/DeptForm.js

@@ -15,15 +15,10 @@ const ReviewSchema = yup.object({
         .min(2),
     money: yup.number()
         .required(),
-    remained_money: yup.number()
+    repayment: yup.number()
         .required()
 })
 
-const getDates = () => {
-    const date = new Date();
-    return (getDateStr(date))
-}
-
 function DeptForm({ addInfo }) {
     return (
         <TouchableWithoutFeedback onPress={() => {
@@ -31,7 +26,7 @@ function DeptForm({ addInfo }) {
         }}>
             <View style={globalStyles.container} >
                 <Formik
-                    initialValues={{ date: '', message: '', money: '', remained_money: '' }}
+                    initialValues={{ date: getDateStr(), message: '', money: '', repayment: '' }}
                     validationSchema={ReviewSchema}
                     onSubmit={(values) => {
                         addInfo(values);
@@ -41,7 +36,7 @@ function DeptForm({ addInfo }) {
                         <View>
                             <DatePicker
                                 inputTitle='날짜'
-                                date={values.date || getDates()}
+                                date={values.date}
                                 setDate={handleChange('date')}
                             />
                             <InputBox
@@ -50,15 +45,15 @@ function DeptForm({ addInfo }) {
                                 value={values.message}
                             />
                             <InputBox
-                                inputTitle="금액"
+                                inputTitle="원금"
                                 onChangeText={handleChange('money')}
                                 value={values.money}
                                 keyboardType="numeric"
                             />
                             <InputBox
-                                inputTitle="남은금액"
-                                onChangeText={handleChange('remained_money')}
-                                value={values.remained_money}
+                                inputTitle="갚은 금액"
+                                onChangeText={handleChange('repayment')}
+                                value={values.repayment}
                                 keyboardType="numeric"
                             />
 

screens/MemoForm.js

@@ -16,11 +16,6 @@ const ReviewSchema = yup.object({
 
 })
 
-const getDates = () => {
-    const date = new Date();
-    return (getDateStr(date))
-}
-
 function MemoForm({ addInfo }) {
     return (
         <TouchableWithoutFeedback onPress={() => {
@@ -28,7 +23,7 @@ function MemoForm({ addInfo }) {
         }}>
             <View style={globalStyles.container} >
                 <Formik
-                    initialValues={{ date: '', message: '' }}
+                    initialValues={{ date: getDateStr(), message: '' }}
                     validationSchema={ReviewSchema}
                     onSubmit={(values) => {
                         addInfo(values);
@@ -39,7 +34,7 @@ function MemoForm({ addInfo }) {
                         <View>
                             <DatePicker
                                 inputTitle='날짜'
-                                date={values.date || getDates()}
+                                date={values.date}
                                 setDate={handleChange('date')}
                             />
                             <InputBox