feature : [게시글 생성] API 연동 및 이미지 AWS S3 업로드 (#83)

* refactor: front api 분리, ArticleCreateCategorySelect 생성, loginState memberId 추가

- memberId mock 사용.

* refactor: front api 분리

* refactor: articleDetail api 분리

* refactor: image -> photo 변경

front/src/components/ArticleCreateCategorySelect.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { StyleSheet, Text, TouchableOpacity } from "react-native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
+import { articleSelectedCategoryState } from "../states/articleState";
+import { useRecoilValue } from "recoil";
+import { ArticleCreateScreenNavigationProp } from "../types/types";
+
+export default function ArticleCreateCategorySelect() {
+  const selectedCategory = useRecoilValue(articleSelectedCategoryState);
+  const navigation = useNavigation<ArticleCreateScreenNavigationProp>();
+
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={() => navigation.navigate("CategoryChoiceScreen")}
+    >
+      <Text style={styles.buttonText}>
+        {selectedCategory === "" ? "카테고리" : selectedCategory}
+      </Text>
+      <MaterialCommunityIcons
+        name="chevron-down"
+        size={22}
+        color="black"
+        style={styles.selectCategoryArrowIcon}
+      />
+    </TouchableOpacity>
+  );
+}
+
+const styles = StyleSheet.create({
+  button: {
+    flex: 1,
+    flexDirection: "row",
+    height: "100%",
+    alignItems: "center",
+    justifyContent: "space-between",
+  },
+  buttonText: {
+    fontSize: 18,
+    textAlign: "left",
+  },
+  selectCategoryArrowIcon: {
+    alignItems: "center",
+  },
+});

front/src/components/ArticleDetailFavorite.tsx

@@ -3,7 +3,7 @@
  */
 
 import React, { useEffect, useRef, useState } from "react";
-import { Alert, Animated, StyleSheet, View } from "react-native";
+import { Animated, StyleSheet, View } from "react-native";
 import axios from "axios";
 import { AntDesign } from "@expo/vector-icons";
 import { ArticleDetailFavoriteProp } from "../types/types";

front/src/components/ArticleDetailImageViewSlider.tsx

@@ -3,18 +3,19 @@
  */
 
 import React from "react";
-import ImageBox from "./ImageBox";
+
 import { StyleSheet } from "react-native";
 import ImageViewSliderDot from "./ImageViewSliderDot";
 import Swiper from "react-native-swiper";
 import ActiveDot from "./ActiveDot";
+import ImageBox from "./ImageBox";
 
 interface ImageSliderProps {
-  images: string[];
+  photos: string[];
 }
 
 export default function ArticleDetailImageViewSlider({
-  images,
+  photos,
 }: ImageSliderProps) {
   return (
     <Swiper
@@ -26,7 +27,7 @@ export default function ArticleDetailImageViewSlider({
       centerContent={true}
       style={styles.container}
     >
-      {images.map((imageURISource, index) => (
+      {photos.map((imageURISource, index) => (
         <ImageBox imageURI={imageURISource} key={index} marginBottom={50} />
       ))}
     </Swiper>