From b983bdbcb3cd634bc421e6baf02728c65556ed24 Mon Sep 17 00:00:00 2001 From: Nayujin <00nyj@sookmyung.ac.kr> Date: Sat, 30 Sep 2023 19:09:28 +0900 Subject: [PATCH] =?UTF-8?q?[DESIGN]=20inbox=20detail=20=ED=81=B0=20?= =?UTF-8?q?=ED=8B=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BalloonBox.js | 27 +++++--- components/ReceivedMessage.js | 120 ++++++++++++++++++++++++---------- package.json | 2 + 3 files changed, 104 insertions(+), 45 deletions(-) diff --git a/components/BalloonBox.js b/components/BalloonBox.js index c24314e..db1a47e 100644 --- a/components/BalloonBox.js +++ b/components/BalloonBox.js @@ -1,29 +1,36 @@ import React from 'react'; import { View, Text, StyleSheet, Image } from 'react-native'; - +import Balloon from 'react-native-balloon'; const BalloonBox = ({ content }) => { return ( - {content} + + {content} + ); }; const styles = StyleSheet.create({ balloon: { - backgroundColor: '#7FB17F', - paddingHorizontal: 16, - paddingVertical: 10, - borderRadius: 20, - borderWidth: 1, - borderColor: '#7FB17F', alignSelf: 'flex-start', // 말풍선이 왼쪽으로 정렬되도록 설정 - marginVertical: 5, + width:'100%', }, text: { + padding:5, color: 'white', - fontSize: 16, + fontWeight:'bold', + fontSize: 20, }, + }); export default BalloonBox; diff --git a/components/ReceivedMessage.js b/components/ReceivedMessage.js index a175d5f..e79a4e6 100644 --- a/components/ReceivedMessage.js +++ b/components/ReceivedMessage.js @@ -1,5 +1,5 @@ import React, { useEffect, useRef, useState } from "react"; -import { StyleSheet, View, Text, Button, Image, TouchableOpacity, ScrollView } from "react-native"; +import { StyleSheet, View, Text, Button, Image, TouchableOpacity, ScrollView, ActivityIndicator, Dimensions } from "react-native"; import BalloonBox from '../components/BalloonBox'; import * as MediaLibrary from 'expo-media-library'; import * as Permissions from 'expo-permissions'; @@ -8,6 +8,11 @@ import { color, commomStyle, images } from '../theme.js'; import { useRoute } from "@react-navigation/native"; import axios from "axios"; import AsyncStorage from "@react-native-async-storage/async-storage"; +import Winfo from "./write/Winfo"; +import Wtitle from "./write/Wtitle"; +import Wtext from "./write/Wtext"; +import { StatusBar } from "expo-status-bar"; +const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window"); const ReceivedMessage = ({ navigation }) => { const [selectedButton, setSelectedButton] = useState('picture'); @@ -148,6 +153,8 @@ const ReceivedMessage = ({ navigation }) => { return ( + + {/* 첫번째 맨 위 사진 왼쪽, 말풍선 오른쪽 배치 */} @@ -163,6 +170,7 @@ const ReceivedMessage = ({ navigation }) => { {/* 그림, 모두, 편지 버튼 */} + { 편지 + + + + + + + + + + + + + + + + + + + + + {/* */} {/* 바뀔 View */} - {selectedButton === 'picture' && ( + {/* {selectedButton === 'picture' && ( @@ -226,7 +255,7 @@ const ReceivedMessage = ({ navigation }) => { {message[0].letterText} - )} + )} */} {/* 저장하기 버튼 */} @@ -238,14 +267,35 @@ const ReceivedMessage = ({ navigation }) => { const styles = StyleSheet.create({ container: { - flex: 1, + marginTop:40, + flex: 1, backgroundColor: color.bg, }, + letterContainer:{ + alignItems:'center', + }, + letter: { + backgroundColor: "white", + width: SCREEN_WIDTH-60, + height: SCREEN_HEIGHT-200, + borderRadius: 15, + borderWidth: 1, + position: 'relative', + marginTop: 60 + }, topContainer: { + // backgroundColor:'pink', flexDirection: 'row', - justifyContent: 'space-between', + // justifyContent:'center', paddingHorizontal: 20, - paddingTop: 20, + paddingTop: 10, + }, + backContainer:{ + backgroundColor:'#E8EDF4', + marginHorizontal: 15, + marginTop:15, + borderRadius: 15, + // borderWidth: 1, }, imageContainer: { width: 100, // 사진의 가로 크기 @@ -309,51 +359,51 @@ const styles = StyleSheet.create({ //marginTop: 0, }, balloonContainer: { - flex: 1, - justifyContent: 'center', - alignItems: 'flex-end', - paddingHorizontal: 20, + flex: 1, + justifyContent: 'center', + alignItems: 'flex-end', + paddingHorizontal: 20, }, buttonContainer: { - flexDirection: 'row', - justifyContent: 'space-between', - paddingHorizontal: 20, - marginTop: 20, - paddingBottom: 20, + flexDirection: 'row', + justifyContent: 'center', + marginTop: 10, + marginBottom:-50, }, button: { - backgroundColor: '#CCE0CC', + backgroundColor: '#E8F1F9', paddingHorizontal: 16, - paddingVertical: 8, + paddingVertical: 8, borderRadius: 20, borderWidth: 1, - borderColor: '#006400', - }, + borderColor: '#5E86B1', + margin:3, + }, buttonPressed: { - backgroundColor: 'green', // 눌렸을 때 초록색으로 변경 + backgroundColor: '#5E86B1', // 눌렸을 때 초록색으로 변경 }, buttonText: { - color: '#006400', - fontSize: 16, + color: '#3B628C', + fontSize: 16, }, bottomImageContainer: { - alignItems: 'center', - marginTop: 20, + alignItems: 'center', + marginTop: 20, }, saveButton: { - backgroundColor: '#f0f0f0', - paddingHorizontal: 14, - paddingVertical: 6, - borderRadius: 20, - borderWidth: 1, - borderColor: '#ccc', - alignSelf: 'center', - marginVertical: 10, + backgroundColor: '#f0f0f0', + paddingHorizontal: 14, + paddingVertical: 6, + borderRadius: 20, + borderWidth: 1, + borderColor: '#ccc', + alignSelf: 'center', + marginVertical: 10, }, saveButtonText: { - color: '#333', - fontSize: 14, - fontWeight: 'bold', + color: '#333', + fontSize: 14, + fontWeight: 'bold', }, }); diff --git a/package.json b/package.json index 36bfb54..554fd5d 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "axios": "^1.5.0", "date-fns": "^2.30.0", "expo": "^49.0.0", + "expo-font": "^11.6.0", "expo-media-library": "~15.4.1", "expo-permissions": "~14.2.1", "expo-status-bar": "~1.6.0", @@ -25,6 +26,7 @@ "react": "18.2.0", "react-native": "^0.72.4", "react-native-asset": "^2.1.1", + "react-native-balloon": "^1.0.0", "react-native-calendars": "^1.1300.0", "react-native-dropdown-picker": "^5.4.6", "react-native-global-props": "^1.1.5",