diff --git a/components/BoardItem.js b/components/BoardItem.js index 69221b1..377160d 100644 --- 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 ( - + {localUri ? ( + + ) : null} - + console.log(images[0])} + /> {like} @@ -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 index 75e9170..6fd2fb7 100644 --- 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" }, }} /> + null, + tabBarVisible: false, + tabBarStyle: { display: "none" }, + }} + /> ); }; diff --git a/package-lock.json b/package-lock.json index b887780..16c79b7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,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", @@ -7864,6 +7866,17 @@ "url-parse": "^1.5.9" } }, + "node_modules/expo-asset/node_modules/expo-file-system": { + "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" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/expo-constants": { "version": "14.4.2", "resolved": "https://registry.npmjs.org/expo-constants/-/expo-constants-14.4.2.tgz", @@ -7877,9 +7890,9 @@ } }, "node_modules/expo-file-system": { - "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==", + "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" }, @@ -8060,6 +8073,17 @@ "resolved": "https://registry.npmjs.org/expo-status-bar/-/expo-status-bar-1.6.0.tgz", "integrity": "sha512-e//Oi2WPdomMlMDD3skE4+1ZarKCJ/suvcB4Jo/nO427niKug5oppcPNYO+csR6y3ZglGuypS+3pp/hJ+Xp6fQ==" }, + "node_modules/expo/node_modules/expo-file-system": { + "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" + }, + "peerDependencies": { + "expo": "*" + } + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", diff --git a/package.json b/package.json index 30fc816..3291407 100644 --- 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 index c97015e..c6023d0 100644 --- 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 index f38f32b..cac87a3 100644 --- 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 index d416140..fd5fe6b 100644 --- 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"