[feat] api connect - outbox

SMWU-YSY · Sep 30, 2023 · 61daeb2 · 61daeb2
1 parent aee44ac
commit 61daeb2
Show file tree

Hide file tree

Showing 6 changed files with 138 additions and 93 deletions.
diff --git a/components/Outbox.js b/components/Outbox.js
@@ -1,7 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import React, {useEffect, useState} from 'react';
 import { StyleSheet, Text, View,
-		Dimensions, Pressable, ScrollView, Image } from 'react-native';
+		Dimensions, Pressable, ScrollView, Image, TouchableOpacity } from 'react-native';
 import { format } from "date-fns";
 import { Calendar } from 'react-native-calendars';
 import { color, commomStyle, images } from '../theme';
@@ -11,48 +11,87 @@ import AsyncStorage from '@react-native-async-storage/async-storage';
 const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get("window");
 
 export default function Outbox({navigation, route}) {
-	const [accessToken,setAccessToken]=useState(null);
+	const [accessToken,setAccessToken] = useState(null);
+	const [data, setData] = useState({});
+	const [posts, setPosts] = useState([]);
+	const [selectedData, setSelectedData] = useState([]);
+
 	const getData = async () => {
 		const storageData = JSON.parse(await AsyncStorage.getItem("accessToken"));
 
 		if(storageData) {
 			setAccessToken(storageData);
 		}
 	}
+
 	useEffect(()=>{
 		getData();
 	},[]);
+
 	useEffect(()=>{
 		// console.log(accessToken);
 		if(accessToken!=null){
 			getSentMessage();
 		}
-
 	},[accessToken]);
+
+	useEffect(() => {
+		if (selectedDate != null){
+			// console.log(selectedDate)
+			// console.log(selectedData)
+		}
+	}, [selectedDate, selectedData])
+
 	const getSentMessage=()=>{
 		axios.get("http://3.34.212.92:8080/api/message/outbox", 
 		{
 			headers: {
 				Authorization:`Bearer ${accessToken}`,
 			},
 			withCredentials:true,
-		}).then((response)=>{
-			// console.log(response.data.data);
-		}).catch((error)=>{
-			console.log(error);
+		}).then((response) => {
+			setData(response.data.data[0]);
 
-		})
-
+			// 날짜만
+			const dates = Object.keys(response.data.data[0]);
+			const newPosts = dates.map((date, index) => ({
+				id : posts.length + index,
+				date: date,
+			}))
+			setPosts(newPosts);
+
+			const currentDate = format(new Date(), "yyyy-MM-dd")
+			if (dates.includes(currentDate)){
+				setSelectedData(response.data.data[0][currentDate])
+			}
+			console.log(selectedData);
+		}).catch((error) => {
+			console.log(error);
+		})	
 	};
-	const onPress = () => navigation.navigate('detail', {date: selectedDate});
-	const [selectMarkDate, setSelectMarkDate] = useState(false);
 
-	const posts = [
-		{id: 0, date: "2023-09-17",},
-		{id: 1,	date: "2023-08-08",},
-		{id: 2,	date: "2023-08-14",},
-		{id: 3,	date: "2023-09-27",}
-	];
+	const onPressItem = (messageId) => {
+		return () => {
+			getMessageDetail(messageId);
+		};
+	}
+
+	const getMessageDetail = async (messageId) => {
+		console.log(messageId)
+		await axios.get(`http://3.34.212.92:8080/api/message/${messageId}`, 
+		{
+			headers: {
+				Authorization:`Bearer ${accessToken}`,
+			},
+			withCredentials:true,
+		}).then((response) => {
+			console.log(response.data.data[0])
+			navigation.navigate('detail', {day: selectedDate, data : response.data.data[0]});
+			// console.log(selectedData);
+		}).catch((error) => {
+			console.log(error);
+		})
+	}
 
 	const markedDates = posts.reduce((acc, current) => {
 		const formattedDate = format(new Date(current.date), 'yyyy-MM-dd');
@@ -74,6 +113,7 @@ export default function Outbox({navigation, route}) {
 
 	const onChangeSelect = (day) => {
 		setSelectedDate(day.dateString)
+		setSelectedData(data[day.dateString])
 	}
 
 	function isSelected(element) {
@@ -87,48 +127,36 @@ export default function Outbox({navigation, route}) {
 			<StatusBar style="auto" />
 			<Image source={images.blueTop} style={commomStyle.backgroundImage}/>
 			<View style={styles.letter}>
-			{/* <View style={{width: SCREEN_WIDTH-60,height: SCREEN_HEIGHT-200,alignItems: "center",backgroundColor: "red"}}> */}
-			<Calendar
-				style={styles.calendar} 
-				markedDates={markedSelectedDates}
-				theme={{
-					selectedDayBackgroundColor: color.b1,
-					arrowColor: color.b1,
-					dotColor: color.b1,
-					todayTextColor: color.b1,
-				}} 
-				onDayPress={onChangeSelect}
-			/>
-			{posts.find(isSelected) ?
-			<ScrollView style={styles.list}>
-				<View style={styles.oneLine}>
-					<Pressable style={styles.listPost} onPress={onPress}>
-						<Text style={styles.listPic}>
-							그림
-						</Text>
-					</Pressable>
-					<Pressable style={styles.listPost} onPress={onPress}>
-						<Text style={styles.listPic}>
-							그림
-						</Text>
-					</Pressable>
-				</View>
-
-				<View style={styles.oneLine}>
-					<Pressable style={styles.listPost} onPress={onPress}>
-						<Text style={styles.listPic}>
-							그림
-						</Text>
-					</Pressable>
-					<Pressable style={styles.listPost} onPress={onPress}>
-						<Text style={styles.listPic}>
-							그림
-						</Text>
-					</Pressable>
-				</View>
-
-			</ScrollView>
-			: <View style={styles.list}></View> }
+				<Calendar
+					style={styles.calendar} 
+					markedDates={markedSelectedDates}
+					theme={{
+						selectedDayBackgroundColor: color.b1,
+						arrowColor: color.b1,
+						dotColor: color.b1,
+						todayTextColor: color.b1,
+					}} 
+					onDayPress={onChangeSelect}
+				/>
+
+				{posts.find(isSelected) ?
+				<ScrollView style={styles.outerScrollView}>
+					<View style={styles.innerContainer}>
+					{Array.from({ length: Math.ceil(selectedData.length / 2) }).map((_, rowIndex) => (
+						<View key={rowIndex} style={styles.row}>
+						{selectedData.slice(rowIndex * 2, rowIndex * 2 + 2).map((item, index) => (
+							<TouchableOpacity key={index} style={styles.listPost} onPress={onPressItem(item.messageId)}>
+								<Text style={styles.listPic}>
+									{item.messageId}
+								</Text>
+							</TouchableOpacity>
+						))}
+						</View>
+					))}
+					</View>
+				</ScrollView>
+				: <View style={styles.outerScrollView}></View> 
+				}
 			</View>
 		</View>
 	);
@@ -160,21 +188,26 @@ const styles = StyleSheet.create({
 	},
 	letter:{
 		position: 'relative',
+		marginTop: 60
 	},
-	list: {
+	outerScrollView: {
 		flex: 1,
-		// backgroundColor: color.g3,
 		width: SCREEN_WIDTH-40,
 	},
-	oneLine: {
-		flexDirection: "row",
+	innerContainer: {
+		flexDirection: "column",
 		justifyContent: "space-between",
 		marginHorizontal: 10,
 		marginVertical: 10,
+		// alignItems: "center"
+	},
+	row: {
+		flexDirection: "row"
 	},
 	listPost: {
 		width: SCREEN_WIDTH/2.5,
 		height: 160,
+		margin: 5,
 		borderWidth: 1,
 	},
 	listPic: {

diff --git a/components/OutboxDetail.js b/components/OutboxDetail.js
@@ -1,7 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import React, {useEffect, useState} from 'react';
 import { StyleSheet, Text, 
-		View, Dimensions } from 'react-native';
+		View, Dimensions, Image } from 'react-native';
 import { color, commomStyle, images } from '../theme';
 import Dinfo from './detail/Dinfo';
 import Dtitle from './detail/Dtitle';
@@ -13,41 +13,33 @@ export default function OutboxDetail({ route }) {
 	const [member, setMember] = useState([{id: 0, name: '회원1'}, {id: 1, name: '회원2'}, {id: 2, name: '회원3'}])
 	const [notmember, setNotmember] = useState([{id: 0, tel: '01012341234'}])
 
+	const {day, data} = route.params;
+
 	return (
 		<View style={styles.container}>
 			<StatusBar style="auto" />
 			<View style={styles.letter}>
-				<Dinfo date={route.params.date}/>
-				<Dtitle />
+				<Dinfo day={day} weather={data.letterWeather}/>
+				<Dtitle title={data.letterTitle}/>
 
 				<View style={styles.letterPic}>
-					<Text>그림 O</Text>
+				<Image source={{ uri: data.letterImg }} style={styles.image} resizeMode='contain' />
 				</View>
 
-				<Dtext />
+				<Dtext text={data.letterText} extra={data.extra}/>
 
 				<View style={styles.letterTo}>
 					<Text style={{fontSize: 20, paddingLeft: 10, marginTop: 5, flex: 1}}>받은 사람</Text>
 
 					<View style={styles.memlist}>
-						{member.map((item) => (
-							<View key={item.id} style={[styles.text, styles.id]}>
-								<Text style={styles.text}>
-									{item.name}
-								</Text>
-							</View>
-						))}
-						{notmember.map((item) => (
-							<View style={[styles.text, styles.tel]}>
-								<Text key={item.id} style={styles.text}>
-									{item.tel}
-								</Text>
-							</View>
-						))}
+						<View style={[styles.text, styles.id]}>
+							<Text style={styles.text}>
+								{data.receiverNickname}
+							</Text>
+						</View>
 					</View>
 				</View>
 			</View>
-
 		</View>
 	);
 }
@@ -72,7 +64,11 @@ const styles = StyleSheet.create({
 		borderBottomWidth: 1,
 		borderBottomColor: "black",
 		alignItems: "center",
-		justifyContent: "center"
+		justifyContent: "center",
+	},
+	image: {
+		width: "100%",
+		height: "100%",
 	},
 	letterTo: {
 		flex: 2.5,

diff --git a/components/SendLetter.js b/components/SendLetter.js
@@ -64,8 +64,8 @@ export default function SendLetter({navigation, route}) {
 			} else if (error.response && error.response.data.message === "찾을 수 없는 아이디") {
 				console.log("no user");
 				Alert.alert(
-					"에러",
-					`존재하지 않는 아이디입니다.\n [ ${error.response.data.data} ]`,
+					"존재하지 않는 아이디",
+					`[ ${error.response.data.data} ]`,
 					[
 						{ text: "확인" }
 					]

diff --git a/components/detail/Dinfo.js b/components/detail/Dinfo.js
@@ -4,19 +4,27 @@ import { Fontisto } from '@expo/vector-icons';
 
 export default function Dinfo(props) {
 
-	const[sun, setSun] = useState(true);
+	const[sun, setSun] = useState(false);
 	const[cloud, setCloud] = useState(false);
 	const[rain, setRain] = useState(false);
 	const[snow, setSnow] = useState(false);
 
+	useEffect(() => {
+		// weatherValue에 따라 Pressable을 자동 설정하는 로직
+		setSun(props.weather === "sunny");
+		setCloud(props.weather === "cloudy");
+		setRain(props.weather === "rainy");
+		setSnow(props.weather === "snowy");
+	}, [props.weather]);
+
 	return (
 		<View style={styles.letterInfo}>
 			<View style={styles.letterDate}>
 				<Text style={{
 					fontSize: 18,
 					fontWeight: "600",
 				}}>
-					{props.date}
+					{props.day}
 				</Text>
 			</View>
 

diff --git a/components/detail/Dtext.js b/components/detail/Dtext.js
@@ -2,19 +2,27 @@ import React, {useEffect, useState} from 'react';
 import { ScrollView, StyleSheet, Text, View } from 'react-native';
 import { color, commomStyle, images } from '../../theme';
 
-export default function Dtext() {
+export default function Dtext(props) {
 
 	return (
 		<View style={styles.letterText}>
 			<ScrollView style={{flex: 1}}>
+				{/* <Text>편지 내용</Text> */}
 				<Text style={{fontSize: 23, 
 							paddingHorizontal: 14, 
 							paddingVertical: 8,
 
-				}}>안녕하세요. 저 ysy입니다. 오늘은 ~~~~했어요.</Text>
+				}}>{props.text}</Text>
 			</ScrollView>
+			{/* <ScrollView style={{flex: 1}}>
+				<Text>부가 메시지</Text>
+				<Text style={{fontSize: 23, 
+							paddingHorizontal: 14, 
+							paddingVertical: 8,
+							
+				}}>{props.extra}</Text>
+			</ScrollView> */}
 		</View>
-
 	);
 };
 

diff --git a/components/detail/Dtitle.js b/components/detail/Dtitle.js
@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {StyleSheet, Text, View} from 'react-native';
 
-export default function Dtitle() {
+export default function Dtitle(props) {
 
 	return (
 		<View style={styles.letterTitle}>
@@ -12,7 +12,7 @@ export default function Dtitle() {
 					marginLeft: 10,
 				}}
 			>
-				안녕하세요.
+				{props.title}
 			</Text>
 		</View>
 	);