[Feature]: 제휴/행사 검색, 좋아요 토스트, 게시글 삭제 에러처리

src/api/councilAffiliate.js

@@ -137,14 +137,16 @@ export const deleteCouncilPost = async (postId, accessToken) => {
     if (response.data.code === 200) {
       console.log('deleteCouncilPost success');
       console.log(response.data);
-      // return response;
+      return response;
     } else {
       console.log('deleteCouncilPost error');
       console.log(response.data);
+      throw new Error(response.data.message || 'deleteCouncilPost failed');
     }
   } catch (error) {
     console.log('deleteCouncilPost error');
     console.log(error.response);
+    throw error;
   }
 };
 

src/components/common/ConfirmModal.js

@@ -0,0 +1,89 @@
+import { View, Text, StyleSheet, Modal, Pressable } from 'react-native';
+import colors from '../../style/colors';
+import typography from '../../style/typography';
+
+const ConfirmModal = ({
+  isVisible,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmText = '확인',
+  cancelText = '취소',
+}) => {
+  return (
+    <Modal
+      visible={isVisible}
+      transparent={true}
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <Pressable style={styles.overlay} onPress={onClose}>
+        <Pressable style={styles.card} onPress={() => {}}>
+          <Text style={styles.title}>{title}</Text>
+          {description ? (
+            <Text style={styles.description}>{description}</Text>
+          ) : null}
+          <Pressable style={styles.confirmButton} onPress={onConfirm}>
+            <Text style={styles.confirmText}>{confirmText}</Text>
+          </Pressable>
+          <Pressable style={styles.cancelButton} onPress={onClose}>
+            <Text style={styles.cancelText}>{cancelText}</Text>
+          </Pressable>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.4)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  card: {
+    width: 300,
+    backgroundColor: colors.common.white,
+    borderRadius: 20,
+    paddingTop: 32,
+    paddingBottom: 24,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+  },
+  title: {
+    ...typography.heading5,
+    color: colors.gray[850],
+    textAlign: 'center',
+    marginBottom: 8,
+  },
+  description: {
+    ...typography.body3Regular,
+    color: colors.gray[500],
+    textAlign: 'center',
+    marginBottom: 24,
+  },
+  confirmButton: {
+    width: '100%',
+    paddingVertical: 14,
+    borderRadius: 12,
+    backgroundColor: colors.blue[400],
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  confirmText: {
+    ...typography.heading6,
+    color: colors.common.white,
+  },
+  cancelButton: {
+    paddingVertical: 4,
+    alignItems: 'center',
+  },
+  cancelText: {
+    ...typography.body3Regular,
+    color: colors.gray[500],
+  },
+});
+
+export default ConfirmModal;

src/components/common/Toast.js

@@ -0,0 +1,94 @@
+import typography from '@/style/typography';
+import colors from '../../style/colors';
+import React, { useEffect, useRef } from 'react';
+import { Text, StyleSheet, Animated } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const TAB_BAR_HEIGHT = 49;
+
+const Toast = ({
+  message,
+  visible,
+  duration = 2000,
+  onHide,
+  hasNavBar = true,
+  tabBarHeight = TAB_BAR_HEIGHT,
+}) => {
+  const opacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(20)).current;
+  const insets = useSafeAreaInsets();
+
+  const bottomPosition = hasNavBar
+    ? insets.bottom + tabBarHeight + 22
+    : insets.bottom + 22;
+
+  useEffect(() => {
+    if (visible) {
+      Animated.parallel([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+        Animated.timing(translateY, {
+          toValue: 0,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start();
+
+      const timer = setTimeout(() => {
+        hideToast();
+      }, duration);
+
+      return () => clearTimeout(timer);
+    }
+  }, [visible]);
+
+  const hideToast = () => {
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: 20,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      onHide && onHide();
+    });
+  };
+
+  if (!visible) return null;
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { opacity, transform: [{ translateY }], bottom: bottomPosition },
+      ]}
+    >
+      <Text style={styles.text}>{message}</Text>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    alignSelf: 'center',
+    backgroundColor: colors.overlay.toast,
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 50,
+  },
+  text: {
+    color: colors.common.white,
+    ...typography.body4Regular,
+  },
+});
+
+export default Toast;

src/hooks/useToast.js

@@ -0,0 +1,17 @@
+import { useState } from 'react';
+
+const useToast = () => {
+  const [toastVisible, setToastVisible] = useState(false);
+  const [toastMessage, setToastMessage] = useState('');
+
+  const showToast = (message) => {
+    setToastMessage(message);
+    setToastVisible(true);
+  };
+
+  const hideToast = () => setToastVisible(false);
+
+  return { toastVisible, toastMessage, showToast, hideToast };
+};
+
+export default useToast;

src/screens/Affiliation/AffiliationDetailScreen.js

@@ -24,6 +24,8 @@ import { AFFILIATION_RECOMMEND_DATA } from '../../constants/DummyData';
 import PlaceHolderRepresentativeImage from '../../../assets/placeHolderImage.svg';
 import BadgeIcon from '../../../assets/badgeIcon.svg';
 import CouponIcon from '../../../assets/couponIcon.svg';
+import Toast from '../../components/common/Toast';
+import useToast from '../../hooks/useToast';
 import {
   getStudentAffiliateDetail,
   getStudentAffiliateRecommendList,
@@ -46,6 +48,7 @@ const AffiliationDetailScreen = ({ navigation, route }) => {
   const [isEmpty, setIsEmpty] = useState(true);
   const [recommendData, setRecommendData] = useState([]);
   const [imagesLoaded, setImagesLoaded] = useState({}); // 각 이미지의 로딩 상태 추적
+  const { toastVisible, toastMessage, showToast, hideToast } = useToast();
   const [isFirstImageLoaded, setIsFirstImageLoaded] = useState(false); // 첫 번째 이미지 로딩 상태
   const shimmerAnim = useRef(new Animated.Value(0)).current;
 
@@ -276,6 +279,7 @@ const AffiliationDetailScreen = ({ navigation, route }) => {
                     if (detailData) {
                       setDetailData({ ...detailData, liked: newLikedState });
                     }
+                    showToast(newLikedState ? '관심 목록에 추가되었어요!' : '관심 목록에서 삭제되었어요.');
                   } catch (error) {
                     // 실패 시 롤백
                     setIsLiked(!newLikedState);
@@ -389,6 +393,11 @@ const AffiliationDetailScreen = ({ navigation, route }) => {
           </View>
         )}
       </ScrollView>
+      <Toast
+        message={toastMessage}
+        visible={toastVisible}
+        onHide={hideToast}
+      />
     </SafeAreaView>
   );
 };
@@ -553,10 +562,6 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
   },
-  recommendTitle: {
-    ...typography.body4Bold,
-    color: colors.gray[850],
-  },
   placeType: {
     ...typography.caption2Regular,
     color: colors.gray[700],
@@ -573,7 +578,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     marginLeft: -2,
-    alignItems: 'flex-start',
   },
   detailDistanceWrapper: {
     flexDirection: 'row',

src/screens/Affiliation/AffiliationLikedScreen.js

@@ -24,6 +24,8 @@ import { AFFILIATION_RECOMMEND_DATA } from '../../constants/DummyData';
 import PlaceHolderRepresentativeImage from '../../../assets/placeHolderImage.svg';
 import BadgeIcon from '../../../assets/badgeIcon.svg';
 import CouponIcon from '../../../assets/couponIcon.svg';
+import Toast from '../../components/common/Toast';
+import useToast from '../../hooks/useToast';
 import {
   getStudentAffiliateDetail,
   getStudentAffiliateRecommendList,
@@ -46,6 +48,7 @@ const AffiliationLikedScreen = ({ navigation, route }) => {
   const [isEmpty, setIsEmpty] = useState(true);
   const [recommendData, setRecommendData] = useState([]);
   const [imagesLoaded, setImagesLoaded] = useState({}); // 각 이미지의 로딩 상태 추적
+  const { toastVisible, toastMessage, showToast, hideToast } = useToast();
   const [isFirstImageLoaded, setIsFirstImageLoaded] = useState(false); // 첫 번째 이미지 로딩 상태
   const shimmerAnim = useRef(new Animated.Value(0)).current;
 
@@ -276,6 +279,7 @@ const AffiliationLikedScreen = ({ navigation, route }) => {
                     if (detailData) {
                       setDetailData({ ...detailData, liked: newLikedState });
                     }
+                    showToast(newLikedState ? '관심 목록에 추가되었어요!' : '관심 목록에서 삭제되었어요.');
                   } catch (error) {
                     // 실패 시 롤백
                     setIsLiked(!newLikedState);
@@ -389,6 +393,11 @@ const AffiliationLikedScreen = ({ navigation, route }) => {
           </View>
         )}
       </ScrollView>
+      <Toast
+        message={toastMessage}
+        visible={toastVisible}
+        onHide={hideToast}
+      />
     </SafeAreaView>
   );
 };