부채

App.js

@@ -7,16 +7,20 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import Monthly from './Monthly';
 import Analy from './Analy';
 import MoneyDB from './MoneyDB';
+import DeptPage from './DeptPage';
 import ReviewForm from './screens/reviewForm';
+import { SpeedDial } from 'react-native-elements';
+
 
 
 
 function MainScreen({ navigation }) {
-  const [number, onChangeNumber] = React.useState(null);
+  const [number, onChangeNumber] = useState(null);
   const [modalOpen, setModalOpen] = useState(false);
-  const [reviews, setReviews] = useState([
-    { title: 'aa', rating: 5, body: 'bb', key: '1' },
-  ]);
+  // const [reviews, setReviews] = useState([
+  //   { title: 'aa', rating: 5, body: 'bb', key: '1' },
+  // ]);
+  const [open, setOpen] = useState(false)
 
   const addReview = (review) => {
     review.key = Math.random().toString();
@@ -50,26 +54,42 @@ function MainScreen({ navigation }) {
             title="월별 페이지로 이동"
             onPress={() => navigation.navigate('Monthly')}
           />
-                    <Modal visible={modalOpen} animationType='slide'>
-            <View style={style.modalContent}>
-              <Ionicons
-                name='close'
-                size={24}
-                style={{ ...style.modalToggle, ...style.modalClose }}
-                onPress={() => setModalOpen(false)}
-              />
-              <ReviewForm addReview = {addReview} />
-            </View>
-          </Modal>
-          <Ionicons
-            name='add'
-            size={24}
-            style={style.modalToggle}
-            onPress={() => setModalOpen(true)}
-          />
+          <SpeedDial
+            isOpen={open}
+            icon={{ name: 'edit', color: '#fff' }} //연필모양
+            openIcon={{ name: 'close', color: '#fff' }} //x모양
+            onOpen={() => setOpen(!open)}
+            onClose={() => setOpen(!open)}
+          >
+            <SpeedDial.Action
+              icon={{ name: 'add', color: '#fff' }}
+              title="부채"
+              onPress={() => setModalOpen(true)}
+            />
+            <SpeedDial.Action
+              icon={{ name: 'delete', color: '#fff' }}
+              title="Delete"
+              onPress={() => setModalOpen(true)}
+            />
+
+          </SpeedDial>
+          <Modal visible={modalOpen} animationType='slide'>
+              <View style={style.modalContent}>
+                <Ionicons
+                  name='close'
+                  color='red'
+                  size={24}
+                  style={{ ...style.modalToggle, ...style.modalClose }} //...은 중괄호를 풀어서 합치려고 이용함
+                  onPress={() => setModalOpen(false)}
+                />
+                <DeptPage />
+              </View>
+            </Modal>
+          <MoneyDB />
+
         </View>
-      </TouchableWithoutFeedback>
 
+      </TouchableWithoutFeedback>
     </>
   )
 }
@@ -113,18 +133,17 @@ const style = StyleSheet.create({
   modalToggle: {
     marginBottom: 10,
     borderWidth: 1,
-    borderColor: '#f2f2f2',
+    borderColor: 'grey', //grey
     padding: 10,
     borderRadius: 10,
-    alignSelf: 'center',
+    alignSelf: 'center', //위치를 center로
   },
   modalClose: {
     marginTop: 20,
     marginBottom: 0,
   },
   modalContent: {
-    flex: 1,
-
+    flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
   },
 
   TextInput: {

DeptPage.js

+import React, { useState } from 'react';
+import { StyleSheet, Text, View, FlatList, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
+import Header from './components/header';
+import TodoItem from './components/todoItem';
+import AddTodo from './components/addTodo';
+import Sandbox from './components/sandbox';
+
+
+export default function DeptPage() {
+    const [todos, setTodos] = useState([
+        { text: 'buy coffee', key: '1' },
+        { text: 'create an app', key: '2' },
+        { text: 'play on the swithch', key: '3' }
+    ]);
+
+    const pressHandler = (key) => {
+        setTodos((prevTodos) => {
+            return prevTodos.filter(todo => todo.key != key);
+        });
+    }
+
+    //이 함수로 내용 추가를 함 Addtodo함수에서 이용
+    const submitHandler = (text) => {
+        //alert를 사용하기위해 조건문 지정
+        if (text.length > 3) {
+            setTodos((prevTodos) => {
+                return [
+                    { text: text, key: Math.random().toString() },
+                    ...prevTodos  //앞의 todos에 추가하여 내용을 더 추가함
+                ];
+            });
+        } else { //3글자 보다 작으면 alert
+            Alert.alert('OOPs!', '3글짜 이상!', [
+                { text: 'Understood', onPress: () => console.log('alert closed') }//understood 버튼 누르면 alert꺼짐
+            ]);
+        }
+    }
+
+    return (
+        // <Sandbox />
+        <TouchableWithoutFeedback onPress={() => {
+            Keyboard.dismiss();
+            console.log('dismissed keyboard');
+        }}>
+
+            <View Style={styles.container}>
+                <Header />
+                <View style={styles.content}>
+                    <AddTodo submitHandler={submitHandler} />
+                    <View style={styles.list}>
+                        <FlatList
+                            data={todos}
+                            renderItem={({ item }) => (
+                                <TodoItem item={item} pressHandler={pressHandler} />
+                            )}
+                        />
+                    </View>
+                </View>
+            </View>
+        </TouchableWithoutFeedback>
+    );
+}
+
+
+//content는 내용이 추가되면 계속 커진다
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: '#fff',
+    },
+    content: {
+        padding: 40,
+    },
+    list: {
+        marginTop: 20, //top에서부터 거리
+    }
+});
\ No newline at end of file

components/addTodo.js

 import React, {useState} from 'react';
-import {StyleSheet, Text,View, TextInput, Button} from 'react-native';
+import {StyleSheet, Text,View, TextInput, Button} from 'react-native'; //추가하기 때문에TextInput, Button을 import 함
+
 
 export default function AddTodo({submitHandler}) {
-    const [text, setText] = useState('');
+    const [text, setText] = useState(''); //empty string
 
     const changeHandler = (val) => {
         setText(val);
@@ -12,10 +13,10 @@ export default function AddTodo({submitHandler}) {
         <View>
             <TextInput
                 style = {styles.input}
-                placeholder = 'new todo...'
-                onChangeText={changeHandler}
+                placeholder = 'new todo...' //처음에 나오는 text
+                onChangeText={changeHandler} //value 받은 것 저장
             />
-            <Button onPress= {() =>submitHandler(text)} title = 'add todo' color = 'coral' />
+            <Button onPress= {() =>submitHandler(text)} title = '입력' color = 'coral' />
         </View>
     )
 }
@@ -25,7 +26,7 @@ const styles = StyleSheet.create({
         marginBottom: 10,
         paddingHorizontal: 8,
         paddingVertical:6,
-        borderBottomColor: '#ddd',
+        borderBottomColor: '#ddd', //light grey
         borderBottomWidth: 1
 
     }

components/header.js

@@ -4,7 +4,7 @@ import {StyleSheet, Text, View} from 'react-native';
 export default function Header() {
     return(
         <View style={styles.header}>
-            <Text style = {styles.title}>My Todos</Text>
+            <Text style = {styles.title}>부채</Text>
         </View>
     )
 }

components/todoItem.js

 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
 
-export default function TodoItem({item, pressHandler}) {
-    
-    return(
-        <TouchableOpacity onPress= {() => pressHandler(item.key)}>
+//item은 앞의 text를 받음
+export default function TodoItem({ item, pressHandler }) {
+
+    return (
+        <TouchableOpacity onPress={() => pressHandler(item.key)}>
             <View style={styles.item}>
-                <MaterialIcons name= 'delete' size={18} color= '#333'/>
-                <Text style = {styles.item}>{item.text}</Text> 
+                <Ionicons name='trash-outline' size={15} color='#333' />
+                <Text style={styles.itemText}>{item.text}</Text>
             </View>
-            
-            
         </TouchableOpacity>
     )
 
-    }
+}
 
-    const styles = StyleSheet.create({
-        item: {
-            padding:16,
-            marginTop:16,
-            borderColor: '#bbb',
-            borderWidth : 1,
-            borderStyle: 'd',
-            borderStyle: 'dashed',
-            borderRadius: 10
-        }
-    })
+const styles = StyleSheet.create({
+    item: {
+        padding: 16,
+        marginTop: 16,
+        borderColor: '#bbb', //light grey
+        borderWidth: 1,
+        borderStyle: 'd',
+        borderStyle: 'dashed', //little line
+        borderRadius: 10,
+        flexDirection: 'row' //같은 행에 있도록
+    },
\ No newline at end of file
+    itemText: {
+        marginLeft: 10,
+    }
+})
\ No newline at end of file

screens/reviewForm.js

@@ -2,17 +2,35 @@ import React from 'react';
 import { StyleSheet, Button, TextInput, View, Text } from 'react-native';
 import { globalStyles } from '../styles/global.js'
 import { Formik } from 'formik';
+import * as yup from 'yup';
+
+const ReviewSchema = yup.object({
+    title: yup.string()
+        .required()
+        .min(4),
+    body: yup.string()
+        .required()
+        .min(8),
+    rating: yup.string()
+        .required()
+        .test('is-num-1-5', 'Rating must be a number 1 -5', (val) => {
+            return parseInt(val) < 6 && passInt(val) > 0;
+        })
+})
+
+
 
 export default function ReviewForm(addReview) {
     return (
-        <View style={globalStyles.container}>
+        <View style={globalStyles.container} >
             <Formik
                 initialValues={{ title: '', body: '', rating: '' }}
+                validationSchema={ReviewSchema}
                 onSubmit={(values) => {
                     addReview(values);
-                    
 
-                }} 
+
+                }}
 
             >
                 {(props) => (
@@ -38,14 +56,15 @@ export default function ReviewForm(addReview) {
                             placeholder='Rating (1-5)'
                             onChangeText={props.handleChange('rating')}
                             value={props.values.rating}
+                            keyboardType = 'numeric'
                         />
 
-                        <Button title = 'submit' color = 'maroon' onPress = {props.handleSubmit}/>
+                        <Button title='submit' color='maroon' onPress={props.handleSubmit} />
                     </View>
                 )}
 
             </Formik>
 
-        </View>
+        </View >
     )
 }
\ No newline at end of file