Commit 4664fbfb authored by YoonDongMin's avatar YoonDongMin
Browse files

부채

parent 9433e4e0
......@@ -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')}
/>
<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 }}
style={{ ...style.modalToggle, ...style.modalClose }} //...은 중괄호를 풀어서 합치려고 이용함
onPress={() => setModalOpen(false)}
/>
<ReviewForm addReview = {addReview} />
<DeptPage />
</View>
</Modal>
<Ionicons
name='add'
size={24}
style={style.modalToggle}
onPress={() => setModalOpen(true)}
/>
<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: {
......
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
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
}
......
......@@ -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>
)
}
......
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}) {
//item은 앞의 text를 받음
export default function TodoItem({ item, pressHandler }) {
return(
<TouchableOpacity onPress= {() => pressHandler(item.key)}>
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({
const styles = StyleSheet.create({
item: {
padding:16,
marginTop:16,
borderColor: '#bbb',
borderWidth : 1,
padding: 16,
marginTop: 16,
borderColor: '#bbb', //light grey
borderWidth: 1,
borderStyle: 'd',
borderStyle: 'dashed',
borderRadius: 10
borderStyle: 'dashed', //little line
borderRadius: 10,
flexDirection: 'row' //같은 행에 있도록
},
itemText: {
marginLeft: 10,
}
})
\ No newline at end of file
})
\ No newline at end of file
......@@ -2,12 +2,30 @@ 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);
......@@ -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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment