0709 money 입력 페이지 스테이트 생성

App.js

@@ -6,6 +6,7 @@ import Ionicons from 'react-native-vector-icons/Ionicons';
 import Monthly from './Monthly';
 import Analy from './Analy';
 import MoneyDB from './MoneyDB';
+import PostMoney from './PostMoney';
 
 function MainScreen({ navigation }) {
   const [number, onChangeNumber] = React.useState(null);
@@ -59,7 +60,7 @@ function App() {
         }}>
         <Tab.Screen name="Main" component={MainScreen} />
         <Tab.Screen name="Monthly" component={Monthly} />
-        <Tab.Screen name="Analy" component={MoneyDB} />
+        <Tab.Screen name="Analy" component={PostMoney} />
       </Tab.Navigator>
     </NavigationContainer>
   );

PostMoney.js

+import React, { useState } from 'react';
+import { View, Text, StyleSheet, Button } from 'react-native';
+import InputBox from './components/InputBox';
+import ButtonsForm from './components/ButtonsForm';
+import SelectForm from './components/SelectForm';
+import StyledButton from './components/StyledButton';
+
+const INIT_ASSET_TYPE = [
+    {
+        asset_id: '1',
+        asset_name: '농협',
+    },
+    {
+        asset_id: '2',
+        asset_name: '신한',
+    },
+]
+
+const INIT_CATEGORIES = [
+    {
+        category_id: '1',
+        category_name: '식비',
+    },
+    {
+        category_id: '2',
+        category_name: '문화',
+    },
+    {
+        category_id: '3',
+        category_name: '교통비',
+    },
+    {
+        category_id: '4',
+        category_name: '기타',
+    },
+]
+
+const PostMoney = () => {
+    const [selectedIndex, setSelectedIndex] = useState(0)
+    const [contents, setContents] = useState('')
+    const [price, setPrice] = useState(0)
+    const [asset_type, setAsset_type] = useState(INIT_ASSET_TYPE)
+    const [selected_asset_type, setSelected_asset_type] = useState(INIT_ASSET_TYPE[0])
+    const [categories, setCategories] = useState(INIT_CATEGORIES)
+    const [selected_cat, setSelected_cat] = useState(INIT_CATEGORIES[0])
+
+    console.log('입력 데이터 : ', selectedIndex, contents, price, selected_asset_type, selected_cat)
+
+    return (
+        <View>
+            <View>
+                <ButtonsForm
+                    onPress={(index) => setSelectedIndex(index)}
+                    selectedIndex={selectedIndex}
+                    group={["수입", "지출", "이동"]} />
+                <InputBox
+                    inputTitle="내용"
+                    placeholder="내용을 입력하세요"
+                    onChangeText={
+                        (contents) => setContents(contents)
+                    }
+                    maxLength={30}
+                />
+                <InputBox
+                    inputTitle="금액"
+                    placeholder="금액을 입력하세요"
+                    onChangeText={
+                        (price) => setPrice(price)
+                    }
+                    keyboardType="numeric"
+                    maxLength={30}
+                />
+                <SelectForm
+                    inputTitle="자산"
+                    categories={asset_type}
+                    selectedValue={selected_asset_type}
+                    onValueChange={(itemValue, itemIndex) => setSelected_asset_type(itemValue)}
+                />
+                <SelectForm
+                    inputTitle="구분"
+                    categories={categories}
+                    selectedValue={selected_cat}
+                    onValueChange={(itemValue, itemIndex) => setSelected_cat(itemValue)}
+                />
+            </View>
+            <View style={style.buttonRow}>
+                <StyledButton
+                    name="저장하기"
+                    onPress={() => console.log('저장버튼')}
+                    style={style.submitButton}
+                />
+                <StyledButton
+                    name="취소"
+                    onPress={() => console.log('취소버튼')}
+                    style={style.cancelButton}
+                />
+            </View>
+        </View>
+    )
+}
+
+const style = StyleSheet.create({
+    Font: {
+        fontSize: 24
+    },
+    buttonRow: {
+        flexDirection: 'row',
+        alignItems: "center",
+        marginHorizontal: 10,
+        marginVertical: 3,
+    },
+    submitButton: {
+        flex: 3,
+        height: 50,
+    },
+    cancelButton: {
+        flex: 1,
+        height: 50,
+    }
+});
+
+export default PostMoney;
\ No newline at end of file

components/ButtonsForm.js

+import React from 'react';
+import { ButtonGroup } from 'react-native-elements';
+import { StyleSheet, Text } from 'react-native';
+
+const ButtonsForm = (props) => {
+
+    const component1 = () => <Text>{props.group[0]}</Text>
+    const component2 = () => <Text>{props.group[1]}</Text>
+    const component3 = () => <Text>{props.group[2]}</Text>
+
+    return (
+        <ButtonGroup
+            onPress={props.onPress}
+            selectedIndex={props.selectedIndex}
+            buttons={[{ element: component1 }, { element: component2 }, { element: component3 }]}
+            containerStyle={style.container}
+            selectedButtonStyle={style.selectedButton}
+            selectedTextStyle={style.selectedText}
+        />
+    );
+};
+
+const style = StyleSheet.create({
+    container: {
+        height: 50,
+        flexDirection: 'row',
+        alignItems: "center",
+        backgroundColor: "#f5f5f5",
+    },
+    text: {
+        color: "#808080",
+        fontSize: 24
+    },
+    selectedButton: {
+        backgroundColor: "#adadad",
+    },
+    selectedText: {
+        color: "#1467ff",
+        fontWeight: "bold",
+    },
+})
+
+export default ButtonsForm
\ No newline at end of file

components/DatePicker.js

+import { DatePickerAndroid } from 'react-native';
+
+const DatePicker = (props) => {
+    return (
+        <View>
+            <Text style={{ fontSize: 18, marginLeft: 10, marginTop: 10 }}>Arrival/Departure:</Text>
+            <DatePicker
+                style={{ padding: 10 }}
+                date={this.state.date_in}
+                mode="date"
+                format="YYYY-MM-DD"
+                minDate="2016-05-01"
+                maxDate="2016-06-01"
+                showIcon={false}
+                customStyles={{
+                    dateInput: {
+                        alignItems: 'flex-start',
+                        padding: 5
+                    },
+                }}
+                onDateChange={(date_in) => { this.setState({ date_in: date_in }); }} />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+})
+
+export default DatePicker
\ No newline at end of file

components/InputBox.js

+import React from 'react';
+import { StyleSheet, Text, View, TextInput } from 'react-native';
+
+const InputBox = (props) => {
+    return (
+        <View style={style.container}>
+            <View style={style.inputTitleArea}>
+                <Text style={style.inputTitle}>{props.inputTitle}</Text>
+            </View>
+            <TextInput
+                underlineColorAndroid="transparent"
+                placeholder={props.placeholder}
+                placeholderTextColor="#808080"
+                keyboardType={props.keyboardType}
+                onChangeText={props.onChangeText}
+                returnKeyType={props.returnKeyType}
+                numberOfLines={props.numberOfLines}
+                multiline={props.multiline}
+                onSubmitEditing={props.onSubmitEditing}
+                style={style.textStyle}
+                blurOnSubmit={false}
+                value={props.value}
+            />
+        </View>
+    );
+};
+
+const style = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: "center",
+        marginHorizontal: 10,
+        marginVertical: 3,
+        borderWidth: 1.5,
+        borderStyle: "solid",
+        borderColor: "#1467ff",
+        borderRadius: 5,
+        backgroundColor: "#f5f5f5",
+    },
+    inputTitleArea: {
+        flex: 1,
+    },
+    inputTitle: {
+        alignSelf: "center",
+        color: "#1467ff",
+        fontSize: 20,
+    },
+    textStyle: {
+        flex: 3,
+        fontSize: 20,
+    },
+})
+
+export default InputBox
\ No newline at end of file

components/SelectForm.js

+import React from 'react';
+import { StyleSheet, Picker, View, Text } from 'react-native';
+import { ListItem, Icon } from 'react-native-elements'
+
+const SelectForm = (props) => {
+    return (
+        <View style={styles.container}>
+            <View style={styles.inputTitleArea}>
+                <Text style={styles.inputTitle}>{props.inputTitle}</Text>
+            </View>
+            <Picker
+                selectedValue={props.selectedValue}
+                style={styles.selectStyle}
+                onValueChange={props.onValueChange}
+            >
+                {props.categories.map((index, item)=>{
+                    return(
+                        <Picker.Item label={item.category_name} value={item.category_name} />
+                    )
+                })}
+            </Picker>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: "center",
+        marginHorizontal: 10,
+        marginVertical: 3,
+        borderWidth: 1.5,
+        borderStyle: "solid",
+        borderColor: "#1467ff",
+        borderRadius: 5,
+        backgroundColor: "#f5f5f5",
+    },
+    inputTitleArea: {
+        flex: 1,
+    },
+    inputTitle: {
+        alignSelf: "center",
+        color: "#1467ff",
+        fontSize: 20,
+    },
+    selectStyle: {
+        flex: 3,
+        fontSize: 20,
+    },
+})
+
+export default SelectForm
\ No newline at end of file

components/StyledButton.js

+import React from 'react';
+import { StyleSheet, Pressable, Text, View } from 'react-native';
+
+const StyledButton = (props) => {
+    return (
+        <Pressable
+            style={({ pressed }) => [
+                {
+                    backgroundColor: pressed ? '#437dd9' : '#4e8ff5',
+                },
+                style.pressableStyle,
+                props.style
+            ]}
+            onPress={props.onPress}>
+            <Text style={style.buttonText}>{props.name}</Text>
+        </Pressable>
+    );
+};
+
+const style = StyleSheet.create({
+    pressableStyle: {
+        alignItems: "center",
+        justifyContent: "center",
+        marginRight: 3,
+        borderRadius: 2,
+    },
+    buttonText: {
+        fontSize: 20,
+    },
+})
+
+export default StyledButton
\ No newline at end of file