Skip to content

GitLab

"client/src/git@compmath.korea.ac.kr:students/bora-it.git" did not exist on "f06686cb6897c813ae5ede0d06732c70e3084ca7"
Commit a03931d9 authored by Choi Ga Young's avatar Choi Ga Young
Browse files

Merge remote-tracking branch 'origin/Dongmin' into rkyoung

parents 3d64de39 049713f4
Hide whitespace changes
Inline Side-by-side
App.js
View file @ a03931d9
import React, { useState } from 'react';
import { StyleSheet, View, Text, TextInput, Button } from 'react-native';
import React from 'react';
import { StyleSheet } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
......@@ -9,6 +9,10 @@ import Analy from './Analy';
import PostMoney from './PostMoney';
import MainScreen from './MainScreen';
import DetailInfo from './DetailInfo';
import DeptPage from './DeptPage';
import InfoDetails from './screens/InfoDetails';
import MemoPage from './MemoPage';
import MemoDetails from './screens/MemoDetails';
const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
......@@ -28,11 +32,6 @@ function Home() {
} else if (route.name === 'Analy') {
iconName = focused ? 'bar-chart' : 'bar-chart-outline';
}
// else if (route.name === 'Calendar') {
// iconName = focused ? 'calendar-sharp' : 'calendar-sharp';
// }
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
......@@ -42,7 +41,6 @@ function Home() {
}}>
<Tab.Screen name="Main" component={MainScreen} />
<Tab.Screen name="Monthly" component={Monthly} />
{/*<Tab.Screen name="Calendar" component={Calendar} />*/}
<Tab.Screen name="Analy" component={Analy} />
<Tab.Screen name="PostMoney" component={PostMoney} />
</Tab.Navigator>
......@@ -52,8 +50,35 @@ function Home() {
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen options={{ headerShown: false }} name="Home" component={Home} />
<Stack.Navigator screenOptions={{
headerStyle: {
backgroundColor: '#eee'
},
headerTitleStyle: {
fontWeight: 'bold',
},
headerTitleAlign: 'center'
}} >
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }} />
<Stack.Screen
name="DeptPage"
component={DeptPage}
options={{ title: "부채", headerStyle: { backgroundColor: 'coral' } }} />
<Stack.Screen
name="InfoDetails"
component={InfoDetails}
options={{ title: "상세정보" }} />
<Stack.Screen
name="MemoPage"
component={MemoPage}
options={{ title: "메모", headerStyle: { backgroundColor: 'coral' } }} />
<Stack.Screen
name="MemoDetails"
component={MemoDetails}
options={{ title: "상세내용" }} />
<Stack.Screen name="DetailInfo" component={DetailInfo} />
</Stack.Navigator>
</NavigationContainer>
......@@ -61,6 +86,7 @@ function App() {
}
const style = StyleSheet.create({
TextInput: {
borderColor: 'skyblue',
height: 40,
......
DeptPage.js 0 → 100644
View file @ a03931d9
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, Alert, TouchableWithoutFeedback, Keyboard } from 'react-native';
import TodoItem from './components/todoItem';
import InfoForm from './screens/InfoForm';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Infodetails from './screens/InfoDetails'
import ButtonsForm from './components/ButtonsForm';
import { TabView } from 'react-native-elements';
function DeptPage({ navigation }) {
const [selectedIndex, setSelectedIndex] = useState(0)
const [modallOpen, setModallOpen] = useState(false);
const [todo, setTodo] = useState([
{ date: '7/10', person: 'Mark', money: '100만원', remained_money: '10만원남음', key: '1' },
{ date: '7/10', person: 'John', money: '100만원', remained_money: '10만원남음', key: '2' },
{ date: '7/10', person: 'Steve', money: '100만원', remained_money: '10만원남음', key: '3' }
]);
const [todos, setTodos] = useState([
{ date: '7/10', person: '수빈이', money: '100만원', remained_money: '10만원남음', key: '1' },
{ date: '7/10', person: '수현이', money: '100만원', remained_money: '10만원남음', key: '2' },
{ date: '7/10', person: '가영이', money: '100만원', remained_money: '10만원남음', key: '3' }
]);
const addInfo = (info) => {
info.key = Math.random().toString(); //앞에 key를 받아올수있도록 생성
setTodos((currentInfos) => {
return [info, ...currentInfos]; //새로운 정보와 지금까지 정보를 합친다
});
setModallOpen(false); //modal이 보여지지 않게
}
const pressHandler = (key) => {
setTodos((prevTodos) => {
return prevTodos.filter(todo => todo.key != key);
});
}
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View Style={style.container}>
<ButtonsForm
onPress={(index) => setSelectedIndex(index)}
selectedIndex={selectedIndex}
group={["빌려준금액", "빌린금액"]} />
<View>
<View style={{ width: '100%', height: '75%' }}>
<TabView value={selectedIndex} onChange={setSelectedIndex} >
<TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList
data={todo}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
<TodoItem item={item} pressHandler={pressHandler} />
</TouchableOpacity>
)}
/>
</TabView.Item>
<TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList
data={todos}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('InfoDetails', item)}>
<TodoItem item={item} pressHandler={pressHandler} />
</TouchableOpacity>
)}
/>
</TabView.Item>
</TabView>
</View>
<Ionicons
name='add'
size={24}
style={style.modalToggle} //...은 중괄호를 풀어서 합치려고 이용함
onPress={() => setModallOpen(true)}
/>
</View>
<View>
<Modal visible={modallOpen} animationType='slide'>
<View style={style.modalContent}>
<Ionicons
name='close'
size={24}
style={style.modalToggle}
onPress={() => setModallOpen(false)}
/>
<InfoForm addInfo={addInfo} />
</View>
</Modal>
</View>
</View>
</TouchableWithoutFeedback >
);
}
const style = StyleSheet.create({
container: {
flex: 1,
width: '100%',
},
modalToggle: {
borderWidth: 1,
borderColor: 'gray', //gray
padding: 5,
borderRadius: 10,
alignSelf: 'center', //위치를 center로
},
modalContent: {
flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
},
TextInput: {
borderColor: 'skyblue',
height: 40,
margin: 12,
borderWidth: 1
},
Font: {
fontSize: 24
}
});
export default DeptPage;
MainScreen.js
View file @ a03931d9
import React from 'react';
import { View, Text, TextInput, StyleSheet, Button } from 'react-native';
import { View, Text, TextInput, StyleSheet, Button, Keyboard, TouchableWithoutFeedback, Modal } from 'react-native';
import { SpeedDial } from 'react-native-elements';
import WeeklyCalendar from './components/WeeklyCalendar';
import InsertCat from './InsertCat';
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 [open, setOpen] = useState(false)
return (
<>
<View>
<WeeklyCalendar />
<Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
<Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
<TextInput
style={style.TextInput}
onChangeText={onChangeNumber}
keyboardType="numeric"
/>
<Text>입력한 숫자 보기: {number} </Text>
</View>
<Button
title="월별 페이지로 이동"
onPress={() => navigation.navigate('Monthly')}
/>
<InsertCat />
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={{ flex: 1 }}>
<WeeklyCalendar />
<View >
<Text style={style.Font}>여기는 메인 페이지 입니다.</Text>
<Text style={style.Font}>아래는 input 테스트를 위한 것입니다.</Text>
<TextInput
style={style.TextInput}
onChangeText={onChangeNumber}
keyboardType="numeric"
/>
<Text>입력한 숫자 보기: {number} </Text>
</View>
<Button
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={() => navigation.navigate('DeptPage')}
/>
<SpeedDial.Action
icon={{ name: 'add', color: '#fff' }}
title="메모"
onPress={() => navigation.navigate('MemoPage')}
/>
</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>
</View>
</TouchableWithoutFeedback>
</>
)
}
const style = StyleSheet.create({
TextInput: {
borderColor: 'skyblue',
......@@ -36,6 +83,27 @@ const style = StyleSheet.create({
},
Font: {
fontSize: 24
},
modalToggle: {
padding: 10,
borderRadius: 10,
alignSelf: 'flex-start',
marginTop: -40, //위치를 center로
},
modalClose: {
alignSelf: 'center',
alignItems: 'flex-start',
marginTop: 150,
marginBottom: 50,
},
modalContent: {
flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
},
Contents: {
justifyContent: "center",
alignItems: "center",
margin: 10
}
});
......
MemoPage.js 0 → 100644
View file @ a03931d9
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, TouchableOpacity, Modal, TouchableWithoutFeedback, Keyboard } from 'react-native';
import TodoItem from './components/todoItem';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { NavigationContainer } from '@react-navigation/native';
import MemoDetails from './screens/MemoDetails';
import MemoForm from './screens/MemoForm';
import ButtonsForm from './components/ButtonsForm';
import { TabView } from 'react-native-elements';
function MemoPage({ navigation }) {
const [selectedIndex, setSelectedIndex] = useState(0)
const [modalOpen, setModalOpen] = useState(false);
const [todo, setTodo] = useState([
{ date: '매달10일', person: '식비', money: '100만원', key: '1' },
{ date: '매달20일', person: '휴대폰요금', money: '100만원', key: '2' },
{ date: '매달24일', person: '생활비', money: '100만원', key: '3' }
]);
const addInfo = (info) => {
info.key = Math.random().toString(); //앞에 key를 받아올수있도록 생성
setTodo((currentInfos) => {
return [info, ...currentInfos]; //새로운 정보와 지금까지 정보를 합친다
});
setModalOpen(false); //modal이 보여지지 않게
}
const pressHandler = (key) => {
setTodo((prevTodos) => {
return prevTodos.filter(todo => todo.key != key);
});
}
const [todos, setTodos] = useState([
{ date: '매달10일', person: '농협', money: '100만원', key: '1' },
{ date: '매달20일', person: '삼성전자', money: '100만원', key: '2' },
{ date: '매달30일', person: '비트코인', money: '100만원', key: '3' }
]);
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View Style={style.container}>
<ButtonsForm
onPress={(index) => setSelectedIndex(index)}
selectedIndex={selectedIndex}
group={["적금", "생활비"]} />
<View>
<View style={{ width: '100%', height: '75%' }}>
<TabView value={selectedIndex} onChange={setSelectedIndex} >
<TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList
data={todos}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('MemoDetails', item)}>
<TodoItem item={item} pressHandler={pressHandler} />
</TouchableOpacity>
)}
/>
</TabView.Item>
<TabView.Item style={{ width: '100%', height: '100%' }}>
<FlatList
data={todo}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => navigation.navigate('MemoDetails', item)}>
<TodoItem item={item} pressHandler={pressHandler} />
</TouchableOpacity>
)}
/>
</TabView.Item>
</TabView>
</View>
<Ionicons
name='add'
size={24}
style={style.modalToggle} //...은 중괄호를 풀어서 합치려고 이용함
onPress={() => setModalOpen(true)}
/>
</View>
<View>
<Modal visible={modalOpen} animationType='slide'>
<View style={style.modalContent}>
<Ionicons
name='close'
size={24}
style={style.modalToggle}
onPress={() => setModalOpen(false)}
/>
<MemoForm addInfo={addInfo} />
</View>
</Modal>
</View>
</View>
</TouchableWithoutFeedback >
);
}
const style = StyleSheet.create({
container: {
flex: 1,
width: '100%',
},
modalToggle: {
borderWidth: 1,
borderColor: 'gray', //gray
padding: 5,
borderRadius: 10,
alignSelf: 'center', //위치를 center로
},
modalContent: {
flex: 1, //이후 유용한 키보드를 추가하려고 ex)dismissing keyboard
},
TextInput: {
borderColor: 'skyblue',
height: 40,
margin: 12,
borderWidth: 1
},
Font: {
fontSize: 24
}
});
export default MemoPage;
components/ButtonsForm.js
View file @ a03931d9
......@@ -40,4 +40,4 @@ const style = StyleSheet.create({
},
})
export default ButtonsForm
\ No newline at end of file
export default ButtonsForm
components/InputBox.js
View file @ a03931d9
......@@ -51,4 +51,4 @@ const style = StyleSheet.create({
},
})
export default InputBox
\ No newline at end of file
export default InputBox
components/StyledButton.js
View file @ a03931d9
......@@ -29,4 +29,4 @@ const style = StyleSheet.create({
},
})
export default StyledButton
\ No newline at end of file
export default StyledButton
components/todoItem.js 0 → 100644
View file @ a03931d9
import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
function TodoItem({ item, pressHandler }) {
return (
<View style={styles.item}>
<Ionicons name='trash-outline' size={15} color='#333' onPress={() => pressHandler(item.key)} />
<Text style={styles.itemText}>{item.date}</Text>
<Text style={styles.itemText}>{item.person}</Text>
<Text style={styles.itemText}>{item.money}</Text>
<Text style={styles.itemText}>{item.remained_money}</Text>
</View>
)
}
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' //같은 행에 있도록
},
itemText: {
marginLeft: 10,
}
})
export default TodoItem;
\ No newline at end of file
index.js
View file @ a03931d9
......@@ -5,5 +5,4 @@
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
screens/InfoDetails.js 0 → 100644
View file @ a03931d9
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global';
import InputBox from '../components/InputBox';
import StyledButton from '../components/StyledButton';
function InfoDetails({ route }) {
const [date, setDate] = useState('')
const [person, setPerson] = useState('')
const [money, setMoney] = useState('')
const [remained_money, setRemained_money] = useState('')
useEffect(() => {
setDate(route.params?.date)
setPerson(route.params?.person)
setMoney(route.params?.money)
setRemained_money(route.params?.remained_money)
}, [])
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={{ flex: 1 }}>
<View>
<InputBox
inputTitle="날짜"
value={date}
onChangeText={
(date) => setDate(date)
}
/>
<InputBox
inputTitle="누구에게"
value={person}
onChangeText={
(person) => setPerson(person)
}
/>
<InputBox
inputTitle="금액"
value={money}
onChangeText={
(money) => setMoney(money)
}
/>
<InputBox
inputTitle="남은 금액"
value={remained_money}
onChangeText={
(remaied_money) => setRemained_money(remained_money)
}
/>
</View>
<View style={style.buttonRow}>
<StyledButton
name="수정"
onPress={() => console.log('수정버튼')}
style={style.submitButton}
/>
<StyledButton
name="저장"
onPress={() => console.log('취소버튼')}
style={style.cancelButton}
/>
</View>
</View>
</TouchableWithoutFeedback>
)
}
const style = StyleSheet.create({
buttonRow: {
flexDirection: 'row',
alignItems: "center",
marginHorizontal: 10,
marginVertical: 3,
},
submitButton: {
flex: 1,
height: 50,
},
cancelButton: {
flex: 1,
height: 50,
}
});
export default InfoDetails;
\ No newline at end of file
screens/MemoDetails.js 0 → 100644
View file @ a03931d9
import React, { useState } from 'react';
import { StyleSheet, View, Text, Button, Pressable, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global';
import InputBox from '../components/InputBox';
import StyledButton from '../components/StyledButton';
function MemoDetails({ route }) {
const [date, setDate] = useState('')
const [person, setPerson] = useState('')
const [money, setMoney] = useState('')
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={{ flex: 1 }}>
<View>
<InputBox
inputTitle="날짜"
placeholder={route.params?.date}
onChangeText={
(date) => setDate(date)
}
/>
<InputBox
inputTitle="내용"
placeholder={route.params?.person}
onChangeText={
(person) => setPerson(person)
}
/>
<InputBox
inputTitle="금액"
placeholder={route.params?.money}
onChangeText={
(money) => setMoney(moeny)
}
/>
</View>
<View style={style.buttonRow}>
<StyledButton
name="수정"
onPress={() => console.log('수정버튼')}
style={style.submitButton}
/>
<StyledButton
name="저장"
onPress={() => console.log('취소버튼')}
style={style.cancelButton}
/>
</View>
</View>
</TouchableWithoutFeedback>
)
}
const style = StyleSheet.create({
buttonRow: {
flexDirection: 'row',
alignItems: "center",
marginHorizontal: 10,
marginVertical: 3,
},
submitButton: {
flex: 1,
height: 50,
},
cancelButton: {
flex: 1,
height: 50,
}
});
export default MemoDetails;
\ No newline at end of file
screens/MemoForm.js 0 → 100644
View file @ a03931d9
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global.js'
import { Formik } from 'formik';
import * as yup from 'yup';
const ReviewSchema = yup.object({
date: yup.string() //string만 받는다
.required() //아무것도 입력안했하면 안받음
.min(4), //최소4글짜
person: yup.string()
.required()
.min(2),
money: yup.string()
.required(),
})
function MemoForm({ addInfo }) {
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={globalStyles.container} >
<Formik
initialValues={{ date: '', person: '', money: ''}}
validationSchema={ReviewSchema}
onSubmit={(values) => {//위의 4개의 val들을 전달
addInfo(values);
}}
>
{({ handleChange, handleSubmit, values }) => (
<View>
<TextInput
style={globalStyles.input}
placeholder='날짜'
onChangeText={handleChange('date')} //우리가 바꾸려는 val
value={values.date}
/>
<TextInput
style={globalStyles.input}
placeholder='내용'
onChangeText={handleChange('person')}
value={values.person}
/>
<TextInput
style={globalStyles.input}
placeholder='금액'
onChangeText={handleChange('money')}
value={values.money}
keyboardType='numeric'
/>
<Button title='입력' color='maroon' onPress={handleSubmit} />
</View>
)}
</Formik>
</View >
</TouchableWithoutFeedback>
)
}
export default MemoForm;
\ No newline at end of file
screens/infoForm.js 0 → 100644
View file @ a03931d9
import React from 'react';
import { StyleSheet, Button, TextInput, View, Text, TouchableWithoutFeedback, Keyboard } from 'react-native';
import { globalStyles } from '../styles/global.js'
import { Formik } from 'formik';
import * as yup from 'yup';
const ReviewSchema = yup.object({
date: yup.string() //string만 받는다
.required() //아무것도 입력안했하면 안받음
.min(4), //최소4글짜
person: yup.string()
.required()
.min(2),
money: yup.string()
.required(),
remained_money: yup.string()
.required()
})
function InfoForm({ addInfo }) {
return (
<TouchableWithoutFeedback onPress={() => {
Keyboard.dismiss();
}}>
<View style={globalStyles.container} >
<Formik
initialValues={{ date: '', person: '', money: '', remained_money: '' }}
validationSchema={ReviewSchema}
onSubmit={(values) => {//위의 4개의 val들을 전달
addInfo(values);
}}
>
{({ handleChange, handleSubmit, values }) => (
<View>
<TextInput
style={globalStyles.input}
placeholder='날짜'
onChangeText={handleChange('date')} //우리가 바꾸려는 val
value={values.date}
/>
<TextInput
style={globalStyles.input}
placeholder='누구에게'
onChangeText={handleChange('person')}
value={values.person}
/>
<TextInput
style={globalStyles.input}
placeholder='금액'
onChangeText={handleChange('money')}
value={values.money}
keyboardType='numeric'
/>
<TextInput
style={globalStyles.input}
placeholder='남은 금액'
onChangeText={handleChange('remained_money')}
value={values.remained_money}
keyboardType='numeric'
/>
<Button title='입력' color='maroon' onPress={handleSubmit} />
</View>
)}
</Formik>
</View >
</TouchableWithoutFeedback>
)
}
export default InfoForm;
\ No newline at end of file
styles/global.js 0 → 100644
View file @ a03931d9
import {StyleSheet} from 'react-native';
export const globalStyles = StyleSheet.create({
container: {
flex:1,
padding:24,
},
titleText: {
fontFamily: 'nunito-bold',
fontSize:18,
color: '#333'
},
paragraph: {
marginVertical: 8,
lineHeight:20,
},
input: {
borderWidth: 1,
borderColor: '#ddd',
padding: 10,
fontSize: 18,
borderRadius:6,
}
})
\ 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