Feat/landing notification onboarding improvements: 랜딩페이지 수정, 앱 내 채팅 알림 제거, 온보딩 관련 업데이트

src/components/connect/FilterCategory.js

@@ -13,6 +13,10 @@ const FilterCategory = ({
 	onBoardingMBTI = false,
 	selected = false,
 }) => {
+	useEffect(() => {
+		setIsActive(selected);
+	}, [selected]);
+
 	const [isActive, setIsActive] = useState(selected);
 	const [isPressed, setIsPressed] = useState(false);
 
@@ -24,7 +28,7 @@ const FilterCategory = ({
 		if (mbtiCount !== null) {
 			if (onBoardingMBTI) {
 				if (!isActive && mbtiCount >= 1) {
-					return;
+					onPress(text);
 				}
 				setIsActive((prev) => !prev);
 				onPress(text);

src/components/notification/NotificationCard.js

@@ -4,7 +4,6 @@ import * as SecureStore from "expo-secure-store";
 
 import { CustomTheme } from "@styles/CustomTheme";
 
-import IconChat24 from "@components/Icon24/IconChat24";
 import IconAddFriend24 from "@components/Icon24/IconAddFriend24";
 import IconHeart24 from "@components/Icon24/IconHeart24";
 import { useNavigation } from "@react-navigation/native";
@@ -22,9 +21,7 @@ const NotificationCard = ({
 	const [isRead, setIsRead] = useState(false);
 
 	let iconSvg;
-	if (type === "CHATROOM") {
-		iconSvg = <IconChat24 />;
-	} else if (type === "CONNECT") {
+	if (type === "CONNECT") {
 		iconSvg = <IconAddFriend24 />;
 	} else if (type === "POST") {
 		iconSvg = <IconHeart24 />;

src/pages/home/NotificationPage.js

@@ -19,7 +19,10 @@ const NotificationPage = () => {
 		try {
 			const deviceId = await SecureStore.getItemAsync("deviceId");
 			const response = await getNotifications(deviceId);
-			setNotificationData(response.data.reverse());
+			const filteredData = response.data.filter(
+				(item) => item.type !== "CHATROOM",
+			);
+			setNotificationData(filteredData.reverse());
 			await SecureStore.setItemAsync(
 				"readNotificationCount",
 				response.data.length.toString(),

src/pages/login/LandingPage.jsx

@@ -26,21 +26,27 @@ const LandingPage = () => {
 	const navigation = useNavigation();
 
 	const [currentIndex, setCurrentIndex] = useState(0);
+	const [imageWidth, setImageWidth] = useState(null);
 
 	const screenWidth = Dimensions.get("window").width;
+	const screenHeight = Dimensions.get("window").height;
+	const isSmallScreen = screenHeight < 700;
 
 	const pages = [
 		{
 			id: "1",
 			title: t("connectTitle"),
 			content: t("connectContent"),
 			image: require("src/assets/images/landing/landing_connect.png"),
+			imagePlus: require("src/assets/images/landing/profile.png"),
 		},
 		{
 			id: "2",
 			title: t("chatTitle"),
 			content: t("chatContent"),
 			image: require("src/assets/images/landing/landing_chat.png"),
+			imagePlus: require("src/assets/images/landing/chat_bubble.png"),
+			chat: true,
 		},
 		{
 			id: "3",
@@ -72,6 +78,23 @@ const LandingPage = () => {
 		2: <IconLandingCommunity />,
 	};
 
+	const getImageStyle = (item) => {
+		let style = { height: imageWidth - 38 };
+
+		if (isSmallScreen) {
+			style = { ...style, top: 100, height: imageWidth - 50 };
+		}
+
+		if (item.chat) {
+			style = { ...style, top: 210 };
+			if (isSmallScreen) {
+				style = { ...style, top: 150 };
+			}
+		}
+
+		return style;
+	};
+
 	const renderItem = ({ item }) => (
 		<View
 			style={[
@@ -88,7 +111,14 @@ const LandingPage = () => {
 				</View>
 				{icon[currentIndex]}
 			</View>
-			<View style={[LandingStyles.center, { marginTop: 30 }]}>
+
+			<View
+				style={[LandingStyles.center, { marginTop: 30 }]}
+				onLayout={(event) => {
+					const { width } = event.nativeEvent.layout;
+					setImageWidth(width);
+				}}
+			>
 				<Image
 					style={{
 						width: screenWidth - 60,
@@ -107,6 +137,13 @@ const LandingPage = () => {
 					start={{ x: 0, y: 1 }}
 					end={{ x: 0, y: 0 }}
 				/>
+				{item.imagePlus && imageWidth && (
+					<Image
+						style={[LandingStyles.imagePlus, getImageStyle(item)]}
+						source={item.imagePlus}
+						contentFit="contain"
+					/>
+				)}
 			</View>
 		</View>
 	);

src/pages/login/LandingStyles.jsx

@@ -27,6 +27,11 @@ const LandingStyles = StyleSheet.create({
 	textContent: {
 		...fontSub16,
 	},
+	imagePlus: {
+		position: "absolute",
+		width: "100%",
+		top: 124,
+	},
 	gradient: {
 		position: "absolute",
 		bottom: 0,

src/pages/login/LoginPage.js

@@ -13,6 +13,7 @@ import * as Device from "expo-device";
 import { useTranslation } from "react-i18next";
 import * as SecureStore from "expo-secure-store";
 import * as Sentry from "@sentry/react-native";
+import * as Notifications from "expo-notifications";
 
 import { CustomTheme } from "@styles/CustomTheme";
 import LoginStyles from "@pages/login/LoginStyles";
@@ -92,7 +93,8 @@ const LoginPage = () => {
 				navigation.navigate("Nickname");
 			}
 
-			await createNotificationToken(accessToken, deviceId);
+			const token = (await Notifications.getExpoPushTokenAsync()).data;
+			await createNotificationToken(token, deviceId);
 		} catch (error) {
 			Sentry.captureException(error);
 			console.error(

src/pages/onboarding/ProfileHobbyPage.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
 	View,
 	Text,
@@ -10,7 +10,7 @@ import { useNavigation } from "@react-navigation/native";
 import { useTranslation } from "react-i18next";
 
 import ProfileHobbyStyles from "@pages/onboarding/ProfileHobbyStyles";
-import { CustomTheme } from "@styles/CustomTheme.js";
+import { CustomTheme } from "@styles/CustomTheme";
 import { useOnboarding } from "src/states/OnboardingContext.js";
 
 import ArrowRight from "@components/common/ArrowRight";
@@ -20,16 +20,21 @@ import ApplyButton from "@components/common/ApplyButton";
 
 const ProfileHobbyPage = () => {
 	const { t } = useTranslation();
-
 	const navigation = useNavigation();
+	const { onboardingData, updateOnboardingData } = useOnboarding();
+
 	const [selectedHobby, setSelectedHobby] = useState([]);
 
+	useEffect(() => {
+		if (onboardingData.hobbies && selectedHobby.length === 0) {
+			setSelectedHobby(onboardingData.hobbies);
+		}
+	}, [onboardingData.hobbies]);
+
 	const handleGoBack = () => {
 		navigation.goBack();
 	};
 
-	const { onboardingData, updateOnboardingData } = useOnboarding();
-
 	const hobby = t("hobbyOptions", { returnObjects: true });
 	const size = 3;
 	const hobbyRows = [];
@@ -45,10 +50,9 @@ const ProfileHobbyPage = () => {
 		}
 	};
 
-	const handleDataSave = () => {
+	useEffect(() => {
 		updateOnboardingData({ hobbies: selectedHobby });
-		navigation.navigate("ProfileLanguage");
-	};
+	}, [selectedHobby]);
 
 	const { height: screenHeight } = Dimensions.get("window");
 	const isSmallScreen = screenHeight < 700;
@@ -79,6 +83,7 @@ const ProfileHobbyPage = () => {
 								text={type}
 								hobbyCount={selectedHobby.length}
 								onPress={() => handleSelectHobby(type)}
+								selected={selectedHobby.includes(type)}
 							/>
 						))}
 					</View>
@@ -92,7 +97,7 @@ const ProfileHobbyPage = () => {
 			>
 				<ApplyButton
 					text={t("nextButton")}
-					onPress={handleDataSave}
+					onPress={() => navigation.navigate("ProfileLanguage")}
 					disabled={selectedHobby.length === 0}
 				/>
 			</View>

src/pages/onboarding/ProfileLanguagePage.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
 	View,
 	Text,
@@ -11,7 +11,7 @@ import { useTranslation } from "react-i18next";
 import * as Sentry from "@sentry/react-native";
 
 import ProfileLanguageStyles from "@pages/onboarding/ProfileLanguageStyles";
-import { CustomTheme } from "@styles/CustomTheme.js";
+import { CustomTheme } from "@styles/CustomTheme";
 import { useOnboarding } from "src/states/OnboardingContext.js";
 import { updateMyProfile } from "config/api";
 
@@ -22,20 +22,27 @@ import ApplyButton from "@components/common/ApplyButton";
 
 const ProfileLanguagePage = () => {
 	const { t } = useTranslation();
-
 	const navigation = useNavigation();
 
-	const handleGoBack = () => {
-		navigation.goBack();
-	};
-
 	const { onboardingData, updateOnboardingData } = useOnboarding();
 
+	const [selectedLanguages, setSelectedLanguages] = useState("");
 	const languages = t("languages", { returnObjects: true });
 	const [isCheckedList, setIsCheckedList] = useState(
 		new Array(languages.length).fill(false),
 	);
 
+	const handleGoBack = () => {
+		navigation.goBack();
+	};
+
+	useEffect(() => {
+		if (onboardingData.languages && selectedLanguages.length === 0) {
+			setSelectedLanguages(onboardingData.languages);
+			setIsCheckedList(onboardingData.checkLanguages);
+		}
+	}, [onboardingData.languages]);
+
 	const handlePress = (index) => {
 		setIsCheckedList((prevState) => {
 			const newState = [...prevState];
@@ -44,19 +51,21 @@ const ProfileLanguagePage = () => {
 		});
 	};
 
-	const handleDataSave = async () => {
-		const selectedLanguages = isCheckedList.reduce(
-			(selected, isChecked, index) => {
-				if (isChecked) {
-					selected.push(languages[index]);
-				}
-				return selected;
-			},
-			[],
-		);
-
-		updateOnboardingData({ languages: selectedLanguages });
+	useEffect(() => {
+		const tmp = isCheckedList.reduce((selected, isChecked, index) => {
+			if (isChecked) {
+				selected.push(languages[index]);
+			}
+			return selected;
+		}, []);
+
+		updateOnboardingData({
+			languages: tmp,
+			checkLanguages: isCheckedList,
+		});
+	}, [isCheckedList]);
 
+	const handleDataSave = async () => {
 		const formData = new FormData();
 		formData.append("username", onboardingData.username);
 		formData.append("country", onboardingData.country);

src/pages/onboarding/ProfileMbtiPage.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
 	View,
 	Text,
@@ -10,7 +10,7 @@ import { useNavigation } from "@react-navigation/native";
 import { useTranslation } from "react-i18next";
 
 import ProfileMbtiStyles from "@pages/onboarding/ProfileMbtiStyles";
-import { CustomTheme } from "@styles/CustomTheme.js";
+import { CustomTheme } from "@styles/CustomTheme";
 import { useOnboarding } from "src/states/OnboardingContext.js";
 
 import ArrowRight from "@components/common/ArrowRight";
@@ -20,16 +20,21 @@ import ApplyButton from "@components/common/ApplyButton";
 
 const ProfileMBTIPage = () => {
 	const { t } = useTranslation();
-
 	const navigation = useNavigation();
+	const { onboardingData, updateOnboardingData } = useOnboarding();
+
 	const [selectedMBTI, setSelectedMBTI] = useState("");
 
+	useEffect(() => {
+		if (onboardingData.mbti) {
+			setSelectedMBTI(onboardingData.mbti);
+		}
+	}, [onboardingData.mbti]);
+
 	const handleGoBack = () => {
 		navigation.goBack();
 	};
 
-	const { onboardingData, updateOnboardingData } = useOnboarding();
-
 	const mbti = t("mbtiOptions", { returnObjects: true });
 	const size = 3;
 	const mbtiRows = [];
@@ -45,12 +50,11 @@ const ProfileMBTIPage = () => {
 		}
 	};
 
-	const handleDataSave = () => {
+	useEffect(() => {
 		updateOnboardingData({
 			mbti: selectedMBTI !== t("mbtiOptions")[15] ? selectedMBTI : "",
 		});
-		navigation.navigate("ProfileHobby");
-	};
+	}, [selectedMBTI]);
 
 	const { height: screenHeight } = Dimensions.get("window");
 	const isSmallScreen = screenHeight < 700;
@@ -83,6 +87,7 @@ const ProfileMBTIPage = () => {
 									mbtiCount={selectedMBTI.length}
 									onPress={() => handleSelectMBTI(type)}
 									onBoardingMBTI="true"
+									selected={selectedMBTI === type}
 								/>
 							))}
 						</View>
@@ -97,7 +102,7 @@ const ProfileMBTIPage = () => {
 			>
 				<ApplyButton
 					text={t("nextButton")}
-					onPress={handleDataSave}
+					onPress={() => navigation.navigate("ProfileHobby")}
 					disabled={selectedMBTI.length === 0}
 				/>
 			</View>