[Refactor][상세게시글] 게시글 기능 추가 및 전체 토스트메세지 기능 개선

App.tsx

@@ -1,4 +1,4 @@
-import { NavigationContainer, RouteProp } from '@react-navigation/native';
+import { NavigationContainer } from '@react-navigation/native';
 import { StatusBar } from 'expo-status-bar';
 import React from 'react';
 import HeaderBackButton from './src/components/header/HeaderBackButton';
@@ -15,12 +15,11 @@ import useCachedResources from './src/utils/hooks/useCachedResources';
 
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { createStackNavigator } from '@react-navigation/stack';
-import { View, Text } from 'react-native';
+import { View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
-import { Provider as PaperProvider, useTheme } from 'react-native-paper';
+import { Provider as PaperProvider } from 'react-native-paper';
 import OnboardingIntroHeaderButton from './src/components/buttons/OnboardingIntroHeaderButton';
 import { RootScreen } from './src/navigation';
-//import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import ChallengeSubjectCreationScreen from './src/screens/challenge/ChallengeSubjectCreationScreen';
 import ServiceIntroOneScreen from './src/screens/onboarding/ServiceIntroOneScreen';
 import ServiceIntroTwoScreen from './src/screens/onboarding/ServiceIntroTwoScreen';
@@ -33,9 +32,6 @@ import InsightSampleScreen from './src/screens/onboarding/InsightSampleScreen';
 import Tabs from './src/screens/Main/Tabs';
 import ShareScreen from './src/screens/detailedPost/ShareScreen';
 import CommentsScreen from './src/screens/detailedPost/CommentsScreen';
-import { TransitionPresets } from '@react-navigation/stack';
-import HomeScreen from './src/screens/Home/HomeScreen';
-import FeedScreen from './src/screens/Feed/FeedScreen';
 import ProfileEditScreen from './src/screens/Main/mypage/ProfileEditScreen';
 import NicknameEditingScreen from './src/screens/Main/mypage/NicknameEditingScreen';
 import IntroductionEditingScreen from './src/screens/Main/mypage/IntroductionEditingScreen';
@@ -346,6 +342,4 @@ export default function App() {
       </>
     );
   }
-  console.log('🚀 ~ file: App.tsx:348 ~ App ~ route', route);
-  console.log('🚀 ~ file: App.tsx:348 ~ App ~ route', route);
 }

src/components/bars/Toasts.tsx

@@ -2,6 +2,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import React from 'react';
 import { BaseToast, ErrorToast } from 'react-native-toast-message';
 import { Toast } from 'react-native-toast-message/lib/src/Toast';
+import theme from '../../theme/light';
 const toastConfig = {
   /*
     Overwrite 'success' type,
@@ -45,11 +46,24 @@ const toastConfig = {
     I can consume any custom `props` I want.
     They will be passed when calling the `show` method (see below)
   */
-  tomatoToast: ({ text1, props }) => (
+  snackbar: ({ text1, props }) => (
     <>
-      <View style={{ height: 60, width: '100%', backgroundColor: 'tomato' }}>
-        <Text>{text1}</Text>
-        <Text>{props.uuid}</Text>
+      <View
+        style={{
+          width: 343,
+          height: 60,
+          borderRadius: 8,
+          paddingHorizontal: 10,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          backgroundColor: `${theme.colors.graphic.black}cc`,
+          alignContent: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text style={{ marginLeft: 15, fontFamily: 'pretendard', fontSize: 14, color: '#FFFFFF' }}>
+          {text1}
+        </Text>
       </View>
     </>
   ),

src/components/bottomsheet/BSPostOptions.tsx

@@ -1,17 +1,15 @@
-import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Pressable, ScrollView, StyleSheet, Text } from 'react-native';
 import React, { useState } from 'react';
 import { useTheme } from 'react-native-paper';
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types';
 import { Feather } from '@expo/vector-icons';
 import ConditionalButton from '../buttons/ConditionalButton';
-import BottomSheetHeader from '../header/BottomSheetHeader';
-import HeaderRightButton from '../header/HeaderRightButton';
-import CountingTextArea from '../texts/CountingTextArea';
 import TwoButtonModal from '../modal/TwoButtonModal';
 import { blockUser } from '../../utils/api/user/profile/block';
 import { reportInsight, reportType } from '../../utils/api/report/insight/insightReport';
 import SnackBar from '../bars/SnackBar';
 import { Toast } from 'react-native-toast-message/lib/src/Toast';
+import DetailReportSheetContent from '../../screens/detailedPost/DetailReportSheetContent';
 
 interface BSPostOptionsProps {
   modalRef: React.RefObject<BottomSheetModalMethods>;
@@ -48,14 +46,14 @@ const BSPostOptions = ({ modalRef, userId, userName, insightId }: BSPostOptionsP
     blockUser(userId)
       .then(() => {
         Toast.show({
-          type: 'success',
+          type: 'snackbar',
           text1: '사용자를 차단했어요.',
           position: 'bottom',
         });
       })
       .catch((res) => {
         Toast.show({
-          type: 'success',
+          type: 'snackbar',
           text1: res,
           position: 'bottom',
         });
@@ -78,7 +76,7 @@ const BSPostOptions = ({ modalRef, userId, userName, insightId }: BSPostOptionsP
           modalRef.current?.dismiss();
         }, 100);
         Toast.show({
-          type: 'success',
+          type: 'snackbar',
           text1: '인사이트를 신고했어요.',
           position: 'bottom',
         });
@@ -88,30 +86,14 @@ const BSPostOptions = ({ modalRef, userId, userName, insightId }: BSPostOptionsP
 
   if (selectedReport === -1) {
     return (
-      <View style={styles.contentContainer}>
-        <BottomSheetHeader
-          onLeftButtonPress={handleExitText}
-          title="기타 신고 사유"
-          iconName="arrowleft"
-          headerRightButton={() => (
-            <HeaderRightButton
-              text="완료"
-              backGroundColor={reportText.length ? '#b0e817' : '#12131420'}
-              textColor={reportText.length ? 'black' : '#ffffff'}
-              disabled={!reportText.length}
-              borderLine={false}
-              handlePress={handleReportSubmit}
-            />
-          )}
-        />
-        <CountingTextArea
-          inputValue={reportText}
-          placeholder="인사이트를 얻은 링크"
-          setInputValue={setReportText}
-          autoFocus={true}
-          limit={150}
-        />
-      </View>
+      <DetailReportSheetContent
+        reasonText={reportText}
+        setReasonText={setReportText}
+        handleSheetComplete={handleReportSubmit}
+        onHeaderLeftPress={handleExitText}
+        overflow={reportText !== undefined && reportText.length > 0 && reportText.length <= 150}
+        limit={150}
+      />
     );
   }
 

src/components/bottomsheet/BottomSheetOption.tsx

@@ -4,15 +4,26 @@ import { useTheme } from 'react-native-paper';
 
 interface BottomSheetOptionProps {
   title: string;
+  select?: boolean;
+  leftIcon?: JSX.Element;
   onPress: () => void;
 }
 
-const BottomSheetOption = ({ title, onPress }: BottomSheetOptionProps) => {
+const BottomSheetOption = ({ title, select, leftIcon, onPress }: BottomSheetOptionProps) => {
   const theme = useTheme();
   return (
     <Pressable onPress={onPress}>
       <View style={styles.title}>
-        <Text style={theme.fonts.text.body1.regular}>{title}</Text>
+        <Text
+          style={{
+            fontFamily: 'pretendard',
+            fontSize: 14,
+            color: select ? theme.colors.brand.onprimary.container : theme.colors.graphic.black,
+          }}
+        >
+          {title}
+        </Text>
+        {leftIcon}
       </View>
     </Pressable>
   );
@@ -22,7 +33,10 @@ export default BottomSheetOption;
 
 const styles = StyleSheet.create({
   title: {
-    justifyContent: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     padding: 16,
+    height: 56,
   },
 });

src/components/buttons/ConditionalButton.tsx

@@ -38,7 +38,7 @@ const ConditionalButton = ({
   const [offset, setOffset] = useState(0);
 
   function handleLayout(event: LayoutChangeEvent) {
-    const { y: yCoordinate, height } = event.nativeEvent.layout;
+    const { y: yCoordinate = 0, height = 0 } = event.nativeEvent.layout;
     setOffset(fullHeightOfScreen - yCoordinate - height);
   }
 

src/components/comments/BSOthersComment.tsx

@@ -53,14 +53,14 @@ const BSOthersComment = ({
     blockUser(userId)
       .then(() => {
         Toast.show({
-          type: 'success',
+          type: 'snackbar',
           text1: '사용자를 차단했어요.',
           position: 'bottom',
         });
       })
       .catch((res) => {
         Toast.show({
-          type: 'success',
+          type: 'snackbar',
           text1: res,
           position: 'bottom',
         });
@@ -83,7 +83,7 @@ const BSOthersComment = ({
           modalRef.current?.dismiss();
         }, 100);
         Toast.show({
-          type: 'success',
+          type: 'snackbar',
           text1: '인사이트를 신고했어요.',
           position: 'bottom',
         });

src/components/comments/Comment.tsx

@@ -31,7 +31,7 @@ const Comment = ({
   isReply = false,
   onReply,
   highlight,
-  commentWriterId,
+  commentWriterId = 0,
   commentId,
 }: CommentsProps) => {
   const opacityValue = useRef(new Animated.Value(0)).current;

src/components/comments/CommentInput.tsx

@@ -42,13 +42,22 @@ const CommentInput = ({ insightId, replyInfo, onCancelReply, onCreate }: Comment
           <View style={styles.reply}>
             <Text
               style={{
+                ...styles.replyText,
                 ...theme.fonts.text.body2.regular,
                 color: `${theme.colors.graphic.black}30`,
               }}
             >
               {replyInfo.nickname}님에게 답글 남기는 중
             </Text>
-            <Pressable onPress={handleCancelReply}>
+            <Pressable
+              style={{
+                height: 'auto',
+                width: 48,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+              onPress={handleCancelReply}
+            >
               <SvgXml xml={ClearSmallXml} />
             </Pressable>
           </View>
@@ -121,9 +130,10 @@ const styles = StyleSheet.create({
     height: 44,
     width: '100%',
     backgroundColor: `${theme.colors.brand.surface.container2}`,
+  },
+  replyText: {
     paddingTop: 12,
     paddingBottom: 12,
-    paddingRight: 20,
     paddingLeft: 20,
   },
 });

src/components/header/BottomSheetHeader.tsx

@@ -19,13 +19,7 @@ const BottomSheetHeader = ({
   const theme = useTheme();
   return (
     <View style={styles.container}>
-      <AntDesign
-        style={{ marginLeft: 4 }}
-        name={iconName || 'close'}
-        size={24}
-        color="black"
-        onPress={onLeftButtonPress}
-      />
+      <AntDesign name={iconName || 'close'} size={24} color="black" onPress={onLeftButtonPress} />
       <Text style={{ ...theme.fonts.text.body1.bold, ...styles.text }}>{title}</Text>
       {headerRightButton()}
     </View>
@@ -45,6 +39,6 @@ const styles = StyleSheet.create({
   },
   text: {
     fontSize: 16,
-    marginLeft: 38,
+    marginLeft: 24,
   },
 });

src/components/header/HeaderRightButton.tsx

@@ -34,7 +34,6 @@ const HeaderRightButton = (props: HeaderRightButtonProps) => {
         style={[
           {
             padding: 0,
-            marginRight: 15,
             flexDirection: 'row',
             justifyContent: 'center',
             alignItems: 'center',

src/components/texts/CountingTextArea.tsx

@@ -9,7 +9,7 @@ interface CountingTextAreaProps {
   setInputValue: (input: string) => void;
   limit?: number;
   style?: any;
-  height?: number;
+  height?: any;
   autoFocus?: boolean;
   limitTextStyle?: any;
 }
@@ -88,6 +88,7 @@ const styles = StyleSheet.create({
     fontSize: 16,
     height: '100%',
     textAlignVertical: 'top',
+    fontFamily: 'pretendard',
   },
   letterNumber: {
     flex: 1,

src/constants/Icons/Check/CheckPrimarySmall.ts

@@ -0,0 +1,4 @@
+export default `<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.74268 12.1741L10.2778 16.7126L18.2577 8.53711" stroke="#486006" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;

src/screens/Feed/FeedScreen.tsx

@@ -1,16 +1,27 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import FeedList from './FeedList';
 import { useInfiniteFeed } from '../../utils/hooks/feedInifiniteScroll/useInfiniteFeed';
 import FeedScreenChallenge from '../../components/challenge/FeedScreenChallenge';
 import { useScrollToTop } from '@react-navigation/native';
 import GoToUploadButton from '../../components/buttons/GoToUploadButton';
-const FeedScreen = () => {
+import { useQueryClient } from '@tanstack/react-query';
+import { FeedQueryKeys } from '../../utils/api/FeedAPI';
+
+const FeedScreen = ({ navigation }) => {
   const scrollViewRef = useRef<any>(null);
+  const queryClient = useQueryClient();
   useScrollToTop(scrollViewRef);
 
   const { feedList, feedListIsLoading, touchBookMark, fetchNextPage, feedListQueryClient } =
     useInfiniteFeed('https://api-keewe.com/api/v1/insight');
 
+  useEffect(() => {
+    const unsubscribe = navigation.addListener('focus', () => {
+      queryClient.invalidateQueries(FeedQueryKeys.getFeed());
+    });
+
+    return unsubscribe;
+  }, [navigation]);
   // if (feedListIsLoading || challengeData.isLoading) {
   //   return <MainLottie />;
   // }

src/screens/Main/ChallengesScreen.tsx

@@ -12,10 +12,6 @@ import { timeConverter } from './challenge/constant';
 import TwoButtonModal from '../../components/modal/TwoButtonModal';
 
 const ChallengesScreen = ({ navigation, route }) => {
-  // const { data: check, isLoading: isCheckLoading } = useQuery(
-  //   ['challenge'],
-  //   ChallengeAPI.participationCheck,
-  // );
   const [modalVisible, setModalVisible] = useState<boolean>(false);
   const hideModal = () => setModalVisible(false);
 
@@ -103,7 +99,7 @@ const ChallengesScreen = ({ navigation, route }) => {
         <>
           <View style={{ backgroundColor: theme.colors.brand.surface.main, ...styles.divider }} />
           <View style={styles.title}>
-            <Text style={{ fontFamily: 'pretendardSemiBold', fontSize: 16 }}>종료된 첼린지</Text>
+            <Text style={{ fontFamily: 'pretendardSemiBold', fontSize: 16 }}>종료된 챌린지</Text>
             <Text
               style={{
                 fontFamily: 'pretendardSemiBold',
@@ -140,7 +136,7 @@ const ChallengesScreen = ({ navigation, route }) => {
         <>
           <View style={{ backgroundColor: theme.colors.brand.surface.main, ...styles.divider }} />
           <View style={styles.title}>
-            <Text style={{ fontFamily: 'pretendardSemiBold', fontSize: 16 }}>모든 첼린지</Text>
+            <Text style={{ fontFamily: 'pretendardSemiBold', fontSize: 16 }}>모든 챌린지</Text>
           </View>
           {challengeCurrent?.map((current, index) => (
             <CurrentChallengeProfile

src/screens/Main/challenge/constant.ts

@@ -55,5 +55,5 @@ export const INTEREST_ICONS = {
 };
 
 export const timeConverter = (time: string) => {
-  return time.replaceAll('-', '.');
+  return time.replace(/-/g, '.');
 };