Team-Project-5 · Jake-Kim38 · Dec 3, 2023 · Dec 5, 2023
diff --git a/components/BoardItem.js b/components/BoardItem.js
@@ -1,6 +1,15 @@
 import styled from "styled-components/native";
 import { Fontisto } from "@expo/vector-icons";
-import { Dimensions, TouchableOpacity, Text, StyleSheet } from "react-native";
+import {
+  Dimensions,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  Image,
+} from "react-native";
+import { Asset } from "expo-asset";
+import * as FileSystem from "expo-file-system";
+import { useEffect, useState } from "react";
 
 const screenWidth = Dimensions.get("window").width;
 
@@ -14,18 +23,46 @@ const BoardItem = ({
   id,
   like,
   reply,
+  images,
 }) => {
+  const [localUri, setLocalUri] = useState(null);
+
+  useEffect(() => {
+    async function downloadImage() {
+      const url = images[0];
+      const { uri } = await FileSystem.downloadAsync(
+        url,
+        FileSystem.documentDirectory + "image.jpg"
+      );
+      const asset = Asset.fromURI(uri);
+      await asset.downloadAsync();
+      setLocalUri(asset.localUri);
+    }
+
+    downloadImage();
+  }, []);
+
   return (
     <ItemContainer>
       <ContentArea>
-        <ImageArea></ImageArea>
+        {localUri ? (
+          <Image
+            source={{ uri: localUri }}
+            style={{ width: 200, height: 200 }}
+          />
+        ) : null}
         <TextArea>
           <StationText>{station}</StationText>
           <TitleText>{title}</TitleText>
           <AuthorText>{author}</AuthorText>
         </TextArea>
         <InfoBox>
-          <Fontisto name="heart-alt" size={20} color="black" />
+          <Fontisto
+            name="heart-alt"
+            size={20}
+            color="black"
+            onPress={() => console.log(images[0])}
+          />
           <Text style={stlyes.text}>{like}</Text>
           <TouchableOpacity
             onPress={() =>
@@ -54,6 +91,10 @@ const stlyes = StyleSheet.create({
   text: {
     marginLeft: 3,
   },
+  image: {
+    width: 106,
+    height: 49,
+  },
 });
 
 const ItemContainer = styled.View`
@@ -70,10 +111,9 @@ const ContentArea = styled.View`
   align-items: center;
 `;
 
-const ImageArea = styled.View`
+const ImageArea = styled.Image`
   width: 106px;
   height: 49px;
-  background-color: black;
 `;
 
 const TextArea = styled.View`

diff --git a/components/BottomNavigator.js b/components/BottomNavigator.js
@@ -10,6 +10,7 @@ import Profile from "../screens/Profile";
 import Board from "../screens/Board";
 import Post from "../screens/Post";
 import SpecificPost from "../screens/SpecificPost";
+import Modify from "../screens/Modify";
 
 const Tab = createBottomTabNavigator();
 
@@ -128,6 +129,15 @@ const BottomNavigator = () => {
           tabBarStyle: { display: "none" },
         }}
       />
+      <Tab.Screen
+        name="Modify"
+        component={Modify}
+        options={{
+          tabBarButton: () => null,
+          tabBarVisible: false,
+          tabBarStyle: { display: "none" },
+        }}
+      />
     </Tab.Navigator>
   );
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,7 +18,9 @@
     "@react-navigation/native-stack": "^6.9.17",
     "axios": "^1.6.2",
     "expo": "~49.0.15",
+    "expo-asset": "^8.10.1",
     "expo-constants": "^14.4.2",
+    "expo-file-system": "^15.6.0",
     "expo-font": "~11.4.0",
     "expo-image-picker": "^14.5.0",
     "expo-media-library": "^15.6.0",

diff --git a/screens/Board.js b/screens/Board.js
@@ -25,6 +25,7 @@ const Board = ({ navigation }) => {
     await Axios.get("http://172.20.10.2:8000/api/board")
       .then((response) => {
         setBoardItems(response.data.boards);
+        console.log(response.data.boards);
       })
       .catch((error) => {
         console.log(error.message);
@@ -48,10 +49,6 @@ const Board = ({ navigation }) => {
     AxiosBoard();
   }, []);
 
-  useEffect(() => {
-    AxiosBoard();
-  }, [boardItems]);
-
   useEffect(() => {
     const result = boardItems.reverse().map((item, index) => {
       return (
@@ -61,12 +58,12 @@ const Board = ({ navigation }) => {
           station={item.subwayStation.name}
           id={item.id}
           author={item.user.nickname}
-          image={item.content.split("\n")[0]}
           content={item.content.split("\n")[0]}
           navigator={navigation}
           like={item.likeCount}
           time={item.createDate}
           reply={item.replies}
+          images={item.imageUrls}
         />
       );
     });

diff --git a/screens/Post.js b/screens/Post.js
@@ -68,15 +68,34 @@ const Post = ({ navigation }) => {
     thirdImage,
     station
   ) => {
-    const mycontent = `${content}\n${firstImage}\n${secondImage}\n${thirdImage}`;
-    await Axios.post("http://172.20.10.2:8000/api/board", {
+    let formData = new FormData();
+
+    let boardData = {
       board: {
         title: title,
-        content: mycontent,
+        content: content,
+      },
+    };
+    formData.append("boardData", JSON.stringify(boardData));
+    formData.append("stationName", station);
+    let images = [firstImage, secondImage, thirdImage];
+    images.forEach((image, index) => {
+      if (image) {
+        let file = {
+          uri: image,
+          type: "image/jpeg",
+          name: `image${index + 1}.jpg`,
+        };
+        formData.append("images", file);
+      }
+    });
+    await Axios.post("http://172.20.10.2:8000/api/board", formData, {
+      headers: {
+        "Content-Type": "multipart/form-data",
       },
-      subwayStationName: station,
     })
       .then((response) => {
+        console.log(response.data);
         if (response.data.status === 200) {
           Alert.alert(
             "글 작성 완료",
@@ -109,7 +128,7 @@ const Post = ({ navigation }) => {
         }
       })
       .catch((error) => {
-        console.log(error);
+        console.log(error.message);
       });
   };
 

diff --git a/yarn.lock b/yarn.lock
@@ -3322,7 +3322,7 @@ expo-application@~5.3.0:
   resolved "https://registry.npmjs.org/expo-application/-/expo-application-5.3.1.tgz"
   integrity sha512-HR2+K+Hm33vLw/TfbFaHrvUbRRNRco8R+3QaCKy7eJC2LFfT05kZ15ynGaKfB5DJ/oqPV3mxXVR/EfwmE++hoA==
 
-expo-asset@~8.10.1:
+expo-asset@^8.10.1, expo-asset@~8.10.1:
   version "8.10.1"
   resolved "https://registry.npmjs.org/expo-asset/-/expo-asset-8.10.1.tgz"
   integrity sha512-5VMTESxgY9GBsspO/esY25SKEa7RyascVkLe/OcL1WgblNFm7xCCEEUIW8VWS1nHJQGYxpMZPr3bEfjMpdWdyA==
@@ -3343,10 +3343,24 @@ expo-constants@^14.4.2, expo-constants@~14.4.2:
     "@expo/config" "~8.1.0"
     uuid "^3.3.2"
 
-expo-file-system@~15.4.0, expo-file-system@~15.4.4:
-  version "15.4.4"
-  resolved "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.4.tgz"
-  integrity sha512-F0xS88D85F7qVQ61r0qBnzh6VW/s6iIl+VaQEEi2nAIOQHw1JIEj4yCXPLTtbyn5VmArbe2dSL3KYz1V+BLkKA==
+expo-file-system@^15.6.0:
+  version "15.6.0"
+  resolved "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.6.0.tgz"
+  integrity sha512-a2hvSWPQLgzw6/u7QuVjVs44Zqgkq3EQJ94tUpw9GbAxj2RsdS3tPnzakBb3Mc6VoQ2Aop6FIgSKeYCeYJAzsg==
+  dependencies:
+    uuid "^3.4.0"
+
+expo-file-system@~15.4.0:
+  version "15.4.5"
+  resolved "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.5.tgz"
+  integrity sha512-xy61KaTaDgXhT/dllwYDHm3ch026EyO8j4eC6wSVr/yE12MMMxAC09yGwy4f7kkOs6ztGVQF5j7ldRzNLN4l0Q==
+  dependencies:
+    uuid "^3.4.0"
+
+expo-file-system@~15.4.4:
+  version "15.4.5"
+  resolved "https://registry.npmjs.org/expo-file-system/-/expo-file-system-15.4.5.tgz"
+  integrity sha512-xy61KaTaDgXhT/dllwYDHm3ch026EyO8j4eC6wSVr/yE12MMMxAC09yGwy4f7kkOs6ztGVQF5j7ldRzNLN4l0Q==
   dependencies:
     uuid "^3.4.0"