From b2df00f481a596123c4c1f251631513b2ae626ae Mon Sep 17 00:00:00 2001 From: Jake-Kim38 Date: Mon, 4 Dec 2023 01:02:43 +0900 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=82=AC=EC=A7=84=20=EC=B2=A8?= =?UTF-8?q?=EB=B6=80=20=EB=AF=B8=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BoardItem.js | 36 ++++++++++++++++++++++++++++++----- components/BottomNavigator.js | 10 ++++++++++ screens/Board.js | 7 ++----- screens/Post.js | 29 +++++++++++++++++++++++----- 4 files changed, 67 insertions(+), 15 deletions(-) diff --git a/components/BoardItem.js b/components/BoardItem.js index 69221b1..067c496 100644 --- a/components/BoardItem.js +++ b/components/BoardItem.js @@ -1,6 +1,12 @@ 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"; const screenWidth = Dimensions.get("window").width; @@ -14,18 +20,35 @@ const BoardItem = ({ id, like, reply, + images, }) => { + const data = { + fileName: `${images[0]}`, + height: 49, + type: "image/jpg", + uri: images[0], + width: 106, + }; return ( - + 게시글 이미지 - + console.log(data.thumbnail.uri)} + /> {like} @@ -54,6 +77,10 @@ const stlyes = StyleSheet.create({ text: { marginLeft: 3, }, + image: { + width: 106, + height: 49, + }, }); const ItemContainer = styled.View` @@ -70,10 +97,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/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); }); }; From 32a8b19b6e35911c0c089deb85a81d8031e002ae Mon Sep 17 00:00:00 2001 From: Jake-Kim38 Date: Tue, 5 Dec 2023 20:00:04 +0900 Subject: [PATCH 2/2] =?UTF-8?q?chore:=20=EC=82=AC=EC=A7=84=20=EC=B2=A8?= =?UTF-8?q?=EB=B6=80=20=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BoardItem.js | 40 +++++++++++++++++++++++++++------------- package-lock.json | 30 +++++++++++++++++++++++++++--- package.json | 2 ++ yarn.lock | 24 +++++++++++++++++++----- 4 files changed, 75 insertions(+), 21 deletions(-) diff --git a/components/BoardItem.js b/components/BoardItem.js index 067c496..377160d 100644 --- a/components/BoardItem.js +++ b/components/BoardItem.js @@ -7,6 +7,9 @@ import { 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; @@ -22,21 +25,32 @@ const BoardItem = ({ reply, images, }) => { - const data = { - fileName: `${images[0]}`, - height: 49, - type: "image/jpg", - uri: images[0], - width: 106, - }; + 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}