feature: [게시글 생성] 상,하단 컴포넌트

front/app.json

@@ -19,6 +19,9 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
+    },
+    "android": {
+      "softwareKeyboardLayoutMode": "pan"
     }
   }
 }

front/package.json

@@ -17,19 +17,20 @@
     "@react-navigation/stack": "^5.6.2",
     "expo": "~38.0.8",
     "expo-image-picker": "^8.3.0",
+    "expo-permissions": "~9.0.1",
     "expo-status-bar": "^1.0.2",
     "moment": "^2.27.0",
     "react": "~16.11.0",
     "react-dom": "~16.11.0",
     "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.1.tar.gz",
     "react-native-gesture-handler": "~1.6.1",
+    "react-native-keyboard-aware-scroll-view": "^0.9.1",
     "react-native-modal": "^11.5.6",
     "react-native-reanimated": "~1.9.0",
     "react-native-safe-area-context": "~3.0.7",
     "react-native-screens": "~2.9.0",
     "react-native-web": "~0.11.7",
-    "recoil": "^0.0.10",
-    "expo-permissions": "~9.0.1"
+    "recoil": "^0.0.10"
   },
   "devDependencies": {
     "@babel/core": "^7.8.6",

front/src/components/ArticleCreateNavigation.tsx

@@ -14,24 +14,24 @@ export default function ArticleCreateNavigation() {
   return (
     <Stack.Navigator>
       <Stack.Screen
-        name="ArticleCreateHome"
+        name="ArticleCreateScreen"
         component={ArticleCreateScreen}
         options={{
-          title: "글 쓰기",
+          title: "글쓰기",
         }}
       />
       <Stack.Screen
-        name="ArticleCreateForm"
+        name="ArticleContentsFormScreen"
         component={ArticleContentsFormScreen}
         options={{
-          title: "내용 입력",
+          title: "내용",
         }}
       />
       <Stack.Screen
         name="CategoryChoiceScreen"
         component={CategoryChoiceScreen}
         options={{
-          title: "카테고리 선택",
+          title: "카테고리",
         }}
       />
     </Stack.Navigator>

front/src/components/ArticleCreateOptionsModal.tsx

@@ -35,7 +35,7 @@ export default function ArticleCreateOptionsModal() {
         >
           <View style={styles.content}>
             <Button
-              title={"글 쓰기"}
+              title={"글쓰기"}
               onPress={() => {
                 navigation.navigate("글쓰기");
                 setModalVisible(false);

front/src/components/ArticleCreateScreenModal.tsx

@@ -0,0 +1,106 @@
+/**
+ * @author lxxjn0
+ */
+import React from "react";
+import { useNavigation } from "@react-navigation/native";
+import { useRecoilState } from "recoil/dist";
+import {
+  Modal,
+  View,
+  Text,
+  TouchableHighlight,
+  StyleSheet,
+} from "react-native";
+import { articleModalActivationState } from "../states/articleState";
+import { ArticleCreateModalNavigationProp } from "../types/types";
+
+interface ArticleCreateScreenModalProps {
+  resetCreateScreen: Function;
+}
+
+export default function ArticleCreateScreenModal({
+  resetCreateScreen,
+}: ArticleCreateScreenModalProps) {
+  const navigation = useNavigation<ArticleCreateModalNavigationProp>();
+  const [articleModalState, setArticleModalState] = useRecoilState(
+    articleModalActivationState,
+  );
+
+  return (
+    <Modal
+      animationType={"fade"}
+      transparent={true}
+      visible={articleModalState}
+      onRequestClose={() => setArticleModalState(false)}
+    >
+      <View style={styles.container}>
+        <View style={styles.modalContainer}>
+          <Text style={styles.modalText}>
+            페이지를 나가면 작성 중인 내용이 삭제됩니다.{"\n"}
+            페이지를 나가시겠습니까?
+          </Text>
+          <View style={styles.buttonContainer}>
+            <TouchableHighlight
+              style={styles.button}
+              onPress={() => setArticleModalState(false)}
+            >
+              <Text style={styles.buttonText}>돌아가기</Text>
+            </TouchableHighlight>
+            <TouchableHighlight
+              style={styles.button}
+              onPress={() => {
+                resetCreateScreen();
+                setArticleModalState(false);
+                navigation.goBack();
+              }}
+            >
+              <Text style={styles.buttonText}>나가기</Text>
+            </TouchableHighlight>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  modalContainer: {
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 25,
+    alignItems: "center",
+    shadowColor: "black",
+    shadowOffset: {
+      width: 3,
+      height: 5,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 5,
+    elevation: 3,
+  },
+  modalText: {
+    marginBottom: 20,
+    textAlign: "center",
+  },
+  buttonContainer: {
+    flexDirection: "row",
+  },
+  button: {
+    backgroundColor: "#dfd3c3",
+    borderRadius: 20,
+    marginHorizontal: 5,
+    padding: 10,
+    elevation: 2,
+  },
+  buttonText: {
+    color: "white",
+    fontWeight: "bold",
+    textAlign: "center",
+    marginHorizontal: 10,
+  },
+});

front/src/components/ArticlePriceForm.tsx

@@ -6,25 +6,25 @@ import React from "react";
 import { StyleSheet, TextInput } from "react-native";
 import { useRecoilState } from "recoil/dist";
 import { articlePriceState } from "../states/articleState";
+import { insertComma, removeComma } from "../replacePriceWithComma";
 
 export default function ArticlePriceForm() {
   const [price, setPrice] = useRecoilState(articlePriceState);
 
   return (
     <TextInput
       style={styles.form}
-      placeholder={"가격 입력"}
+      placeholder={"가격"}
       keyboardType={"number-pad"}
       maxLength={10}
-      onChangeText={(text) => setPrice(Number(text))}
-      value={price === 0 ? "" : price.toString()}
+      onChangeText={(priceValue) => setPrice(Number(removeComma(priceValue)))}
+      value={price === 0 ? "" : insertComma(price.toString())}
     />
   );
 }
 
 const styles = StyleSheet.create({
   form: {
-    fontSize: 30,
-    paddingLeft: 15,
+    fontSize: 18,
   },
 });

front/src/components/ArticleTitleForm.tsx

@@ -13,7 +13,7 @@ export default function ArticleTitleForm() {
   return (
     <TextInput
       style={styles.form}
-      placeholder={"제목 입력"}
+      placeholder={"제목"}
       keyboardType={"default"}
       maxLength={30}
       onChangeText={(text) => setTitle(text)}
@@ -24,7 +24,6 @@ export default function ArticleTitleForm() {
 
 const styles = StyleSheet.create({
   form: {
-    fontSize: 30,
-    paddingLeft: 15,
+    fontSize: 18,
   },
 });

front/src/components/BottomTabNavigation.tsx

@@ -27,7 +27,7 @@ export default function BottomTabNavigation() {
           tabBarIcon: ({ color }) => (
             <MaterialCommunityIcons
               name="home-outline"
-              size={26}
+              size={24}
               color={color}
             />
           ),

front/src/components/CategoryItem.tsx

@@ -4,10 +4,10 @@
 
 import React from "react";
 import { StyleSheet, Text, View } from "react-native";
-import { CategoryItemProps } from "../types/types";
 import { useRecoilState } from "recoil/dist";
 import { useNavigation } from "@react-navigation/native";
 import { articleSelectedCategoryState } from "../states/articleState";
+import { CategoryItemProps } from "../types/types";
 
 export default function CategoryItem({ title }: CategoryItemProps) {
   const navigation = useNavigation();