feat: 홈 카드 스와이프 제스처 추가

team-diverse · Sep 27, 2024 · 90b65c8 · 90b65c8
1 parent 59598af
commit 90b65c8
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 39 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,8 +34,11 @@
 		"deprecated-react-native-prop-types": "^5.0.0",
 		"expo": "^51.0.26",
 		"expo-checkbox": "~3.0.0",
+		"expo-clipboard": "~6.0.3",
 		"expo-device": "~6.0.2",
 		"expo-file-system": "~17.0.1",
+		"expo-haptics": "~13.0.1",
+		"expo-image": "~1.12.15",
 		"expo-image-picker": "~15.0.5",
 		"expo-insights": "~0.7.0",
 		"expo-linear-gradient": "~13.0.2",
@@ -70,17 +73,15 @@
 		"react-native-screens": "3.31.1",
 		"react-native-simple-modal": "^9.0.1",
 		"react-native-svg": "15.2.0",
+		"react-native-swipe-gestures": "^1.0.5",
 		"react-native-tab-view": "^3.5.2",
 		"react-native-web": "~0.19.10",
 		"reanimated-bottom-sheet": "^1.0.0-alpha.22",
 		"rn-range-slider": "^2.2.2",
 		"sha1-file": "^3.0.0",
 		"text-encoding": "^0.7.0",
 		"typescript": "~5.3.3",
-		"uuid": "^9.0.1",
-		"expo-clipboard": "~6.0.3",
-		"expo-haptics": "~13.0.1",
-		"expo-image": "~1.12.15"
+		"uuid": "^9.0.1"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.24.0",

diff --git a/src/pages/home/HomePage.js b/src/pages/home/HomePage.js
@@ -11,6 +11,7 @@ import {
 import { useNavigation, useFocusEffect } from "@react-navigation/native";
 import * as SecureStore from "expo-secure-store";
 import { useTranslation } from "react-i18next";
+import GestureRecognizer from "react-native-swipe-gestures";
 
 import HomeStyles from "@pages/home/HomeStyles";
 import {
@@ -212,44 +213,54 @@ const HomePage = () => {
 					<HomeArrow style={{ transform: [{ scaleX: -1 }] }} />
 				</TouchableOpacity>
 
-				{showNewCard ? (
-					<View style={HomeStyles.homecardContainer}>
-						<View style={HomeStyles.homecard}>
-							<HomeCardBack
-								memberId={id}
-								fileId={profileImg?.id}
-								name={username}
-								onPress={() => setShowNewCard(false)}
-							/>
+				<GestureRecognizer
+					onSwipeLeft={!showMoreProfiles ? handleNextProfile : null}
+					onSwipeRight={
+						currentProfileIndex !== 0 ? handlePrevProfile : null
+					}
+					style={{
+						zIndex: 10,
+					}}
+				>
+					{showNewCard ? (
+						<View style={HomeStyles.homecardContainer}>
+							<View style={HomeStyles.homecard}>
+								<HomeCardBack
+									memberId={id}
+									fileId={profileImg?.id}
+									name={username}
+									onPress={() => setShowNewCard(false)}
+								/>
+							</View>
 						</View>
-					</View>
-				) : showMoreProfiles ? (
-					<View style={HomeStyles.homecardContainer}>
-						<View style={HomeStyles.homecard}>
-							<HomeCardLast />
+					) : showMoreProfiles ? (
+						<View style={HomeStyles.homecardContainer}>
+							<View style={HomeStyles.homecard}>
+								<HomeCardLast />
+							</View>
 						</View>
-					</View>
-				) : (
-					<View style={HomeStyles.homecardContainer}>
-						<View style={HomeStyles.homecard}>
-							<HomeCardFront
-								memberId={id}
-								fileId={profileImg?.id}
-								tags={tags}
-								introduction={bio}
-								name={username}
-								country={country}
-								onPress={() => setShowNewCard(true)}
-								isLikedOnPress={() => {
-									heart[id]
-										? handleDeleteHeart()
-										: handleCreateHeart();
-								}}
-								isLikedActive={heart[id]}
-							/>
+					) : (
+						<View style={HomeStyles.homecardContainer}>
+							<View style={HomeStyles.homecard}>
+								<HomeCardFront
+									memberId={id}
+									fileId={profileImg?.id}
+									tags={tags}
+									introduction={bio}
+									name={username}
+									country={country}
+									onPress={() => setShowNewCard(true)}
+									isLikedOnPress={() => {
+										heart[id]
+											? handleDeleteHeart()
+											: handleCreateHeart();
+									}}
+									isLikedActive={heart[id]}
+								/>
+							</View>
 						</View>
-					</View>
-				)}
+					)}
+				</GestureRecognizer>
 				<View style={HomeStyles.backgroundHomecard}>
 					<HomeCard />
 				</View>