From 9f963ae6d3350020f3c56d74c6c9d1966d3a834e Mon Sep 17 00:00:00 2001
From: cadi <dbtmdgns4296@naver.com>
Date: Thu, 2 Mar 2023 23:30:59 +0900
Subject: [PATCH 1/2] =?UTF-8?q?detailed=20post=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.tsx                                       |  12 +-
 src/components/bars/Toasts.tsx                |  22 +-
 src/components/bottomsheet/BSPostOptions.tsx  |  44 ++--
 .../bottomsheet/BottomSheetOption.tsx         |  20 +-
 src/components/buttons/ConditionalButton.tsx  |   2 +-
 src/components/comments/BSOthersComment.tsx   |   6 +-
 src/components/comments/Comment.tsx           |   2 +-
 src/components/comments/CommentInput.tsx      |  14 +-
 src/components/header/BottomSheetHeader.tsx   |  10 +-
 src/components/header/HeaderRightButton.tsx   |   1 -
 src/components/texts/CountingTextArea.tsx     |   3 +-
 .../Icons/Check/CheckPrimarySmall.ts          |   4 +
 src/screens/Feed/FeedScreen.tsx               |  17 +-
 src/screens/Main/ChallengesScreen.tsx         |   8 +-
 src/screens/Main/challenge/constant.ts        |   2 +-
 src/screens/Main/mypage/MyPageScreen.tsx      |   2 +-
 src/screens/Main/mypage/ProfileScreen.tsx     |   2 +-
 .../detailedPost/DetailReportSheetContent.tsx |  70 ++++++
 .../detailedPost/DetailedPostScreen.tsx       | 220 ++++++++++--------
 .../detailedPost/DetailedPostSection.tsx      |  59 +++--
 src/types/insight.d.ts                        |  11 +-
 src/types/insight/profile.d.ts                |  23 +-
 src/types/user.d.ts                           |  11 +
 src/utils/api/InsightAPI.ts                   |  33 ++-
 src/utils/api/user/block/UserBlock.ts         |  22 ++
 types.tsx                                     |   5 +
 26 files changed, 434 insertions(+), 191 deletions(-)
 create mode 100644 src/constants/Icons/Check/CheckPrimarySmall.ts
 create mode 100644 src/screens/detailedPost/DetailReportSheetContent.tsx
 create mode 100644 src/types/user.d.ts
 create mode 100644 src/utils/api/user/block/UserBlock.ts

diff --git a/App.tsx b/App.tsx
index 1a16ca67..666c1bd8 100644
--- a/App.tsx
+++ b/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);
 }
diff --git a/src/components/bars/Toasts.tsx b/src/components/bars/Toasts.tsx
index 9f4240c9..31815591 100644
--- a/src/components/bars/Toasts.tsx
+++ b/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>
     </>
   ),
diff --git a/src/components/bottomsheet/BSPostOptions.tsx b/src/components/bottomsheet/BSPostOptions.tsx
index cd25871b..52d4d147 100644
--- a/src/components/bottomsheet/BSPostOptions.tsx
+++ b/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}
+      />
     );
   }
 
diff --git a/src/components/bottomsheet/BottomSheetOption.tsx b/src/components/bottomsheet/BottomSheetOption.tsx
index e7f8ae2e..f0ecd55c 100644
--- a/src/components/bottomsheet/BottomSheetOption.tsx
+++ b/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,
   },
 });
diff --git a/src/components/buttons/ConditionalButton.tsx b/src/components/buttons/ConditionalButton.tsx
index 26dc9824..8c60aee6 100644
--- a/src/components/buttons/ConditionalButton.tsx
+++ b/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);
   }
 
diff --git a/src/components/comments/BSOthersComment.tsx b/src/components/comments/BSOthersComment.tsx
index 0127cff6..5cf3774c 100644
--- a/src/components/comments/BSOthersComment.tsx
+++ b/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',
         });
diff --git a/src/components/comments/Comment.tsx b/src/components/comments/Comment.tsx
index 0160dd67..e7a5a4a8 100644
--- a/src/components/comments/Comment.tsx
+++ b/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;
diff --git a/src/components/comments/CommentInput.tsx b/src/components/comments/CommentInput.tsx
index a637833b..ba81b653 100644
--- a/src/components/comments/CommentInput.tsx
+++ b/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,
   },
 });
diff --git a/src/components/header/BottomSheetHeader.tsx b/src/components/header/BottomSheetHeader.tsx
index b5d175e7..791c0374 100644
--- a/src/components/header/BottomSheetHeader.tsx
+++ b/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,
   },
 });
diff --git a/src/components/header/HeaderRightButton.tsx b/src/components/header/HeaderRightButton.tsx
index e838b462..4b6ffa44 100644
--- a/src/components/header/HeaderRightButton.tsx
+++ b/src/components/header/HeaderRightButton.tsx
@@ -34,7 +34,6 @@ const HeaderRightButton = (props: HeaderRightButtonProps) => {
         style={[
           {
             padding: 0,
-            marginRight: 15,
             flexDirection: 'row',
             justifyContent: 'center',
             alignItems: 'center',
diff --git a/src/components/texts/CountingTextArea.tsx b/src/components/texts/CountingTextArea.tsx
index e9c8d3e7..8841ff93 100644
--- a/src/components/texts/CountingTextArea.tsx
+++ b/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,
diff --git a/src/constants/Icons/Check/CheckPrimarySmall.ts b/src/constants/Icons/Check/CheckPrimarySmall.ts
new file mode 100644
index 00000000..a63a5136
--- /dev/null
+++ b/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>
+`;
diff --git a/src/screens/Feed/FeedScreen.tsx b/src/screens/Feed/FeedScreen.tsx
index 74400669..b2dddd76 100644
--- a/src/screens/Feed/FeedScreen.tsx
+++ b/src/screens/Feed/FeedScreen.tsx
@@ -1,16 +1,29 @@
-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', () => {
+      console.log('Screen is focused');
+      queryClient.invalidateQueries(FeedQueryKeys.getFeed());
+      // 실행하고자 하는 함수 또는 코드 작성
+    });
+
+    return unsubscribe;
+  }, [navigation]);
   // if (feedListIsLoading || challengeData.isLoading) {
   //   return <MainLottie />;
   // }
diff --git a/src/screens/Main/ChallengesScreen.tsx b/src/screens/Main/ChallengesScreen.tsx
index 175c7088..19cee425 100644
--- a/src/screens/Main/ChallengesScreen.tsx
+++ b/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
diff --git a/src/screens/Main/challenge/constant.ts b/src/screens/Main/challenge/constant.ts
index 5b3c27d8..61c197a0 100644
--- a/src/screens/Main/challenge/constant.ts
+++ b/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, '.');
 };
diff --git a/src/screens/Main/mypage/MyPageScreen.tsx b/src/screens/Main/mypage/MyPageScreen.tsx
index d4fc280f..f0c3185f 100644
--- a/src/screens/Main/mypage/MyPageScreen.tsx
+++ b/src/screens/Main/mypage/MyPageScreen.tsx
@@ -222,7 +222,7 @@ const MyPageScreen = ({ navigation, route }) => {
                 condition={cur['introduction']}
                 date={cur['achievedDate']
                   .slice(0, cur['achievedDate'].indexOf('T'))
-                  .replaceAll('-', '.')}
+                  .replace(/-/g, '.')}
               />
             );
           })}
diff --git a/src/screens/Main/mypage/ProfileScreen.tsx b/src/screens/Main/mypage/ProfileScreen.tsx
index efbeb0b5..a5e0bd62 100644
--- a/src/screens/Main/mypage/ProfileScreen.tsx
+++ b/src/screens/Main/mypage/ProfileScreen.tsx
@@ -251,7 +251,7 @@ const ProfileScreen = ({ navigation, route }) => {
               condition={cur['introduction']}
               date={cur['achievedDate']
                 .slice(0, cur['achievedDate'].indexOf('T'))
-                .replaceAll('-', '.')}
+                .replace(/-/g, '.')}
             />
           );
         })}
diff --git a/src/screens/detailedPost/DetailReportSheetContent.tsx b/src/screens/detailedPost/DetailReportSheetContent.tsx
new file mode 100644
index 00000000..1ec1f305
--- /dev/null
+++ b/src/screens/detailedPost/DetailReportSheetContent.tsx
@@ -0,0 +1,70 @@
+import { useBottomSheet } from '@gorhom/bottom-sheet';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Text } from 'react-native-paper';
+import BottomSheetHeader from '../../components/header/BottomSheetHeader';
+import HeaderRightButton from '../../components/header/HeaderRightButton';
+import CountingTextArea from '../../components/texts/CountingTextArea';
+import theme from '../../theme/light';
+import { backButtonModalClose } from '../../utils/helper/bottomSheetUtils/bottomSheetUtils';
+
+interface DetailReportSheetContentProps {
+  onHeaderLeftPress: () => void;
+  handleSheetComplete: () => void;
+  reasonText?: string;
+  setReasonText: (input: string) => void;
+  overflow: boolean;
+  limit: number;
+}
+
+const DetailReportSheetContent = ({
+  onHeaderLeftPress,
+  handleSheetComplete,
+  reasonText = '',
+  setReasonText,
+  overflow,
+  limit,
+}: DetailReportSheetContentProps) => {
+  const { close } = useBottomSheet();
+  backButtonModalClose(close);
+  return (
+    <View style={styles.contentContainer}>
+      <BottomSheetHeader
+        iconName={'arrowleft'}
+        onLeftButtonPress={onHeaderLeftPress}
+        title="기타 신고 사유"
+        headerRightButton={() => (
+          <HeaderRightButton
+            text="완료"
+            backGroundColor={overflow ? '#b0e817' : '#12131420'}
+            textColor={overflow ? 'black' : '#ffffff'}
+            disabled={!overflow ? true : false}
+            borderLine={false}
+            handlePress={handleSheetComplete}
+          />
+        )}
+      />
+      <CountingTextArea
+        inputValue={reasonText}
+        placeholder="신고사유를 입력해주세요."
+        setInputValue={setReasonText}
+        autoFocus={true}
+        limit={limit}
+        limitTextStyle={{ color: `${theme.colors.graphic.black}50` }}
+        style={{ height: 500 }}
+        height={340}
+      />
+    </View>
+  );
+};
+
+export default DetailReportSheetContent;
+
+const styles = StyleSheet.create({
+  contentContainer: {
+    width: '100%',
+    height: '80%',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+  },
+});
diff --git a/src/screens/detailedPost/DetailedPostScreen.tsx b/src/screens/detailedPost/DetailedPostScreen.tsx
index fe414e60..b53404b8 100644
--- a/src/screens/detailedPost/DetailedPostScreen.tsx
+++ b/src/screens/detailedPost/DetailedPostScreen.tsx
@@ -7,7 +7,7 @@ import {
   Platform,
   KeyboardAvoidingView,
 } from 'react-native';
-import React, { useEffect, useLayoutEffect, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import DetailedPostSection from './DetailedPostSection';
 import { useIncreaseView } from '../../utils/hooks/DetailedInsight/useIncreaseView';
 import { useTheme } from 'react-native-paper';
@@ -25,16 +25,15 @@ import { DetailedPostApi } from '../../utils/api/DetailedPostAPI';
 import BookMarkOffXml from '../../constants/Icons/DetailedPost/BookMarkOffXml';
 import BookMarkOnXml from '../../constants/Icons/DetailedPost/BookMarkOnXml';
 import ShareIconXml from '../../constants/Icons/DetailedPost/ShareIconXml';
-import ThreeDotsXml from '../../constants/Icons/DetailedPost/ThreeDotsXml';
 import SnackBar from '../../components/bars/SnackBar';
+import { FeedQueryKeys } from '../../utils/api/FeedAPI';
+import FeedVerticalDots from '../Feed/FeedVerticalDots';
 
 const DetailedPostScreen = ({ navigation, route }) => {
   const { insightId } = route.params;
-  const [currentChallenge, setCurrentChallenge] = useState('내가 참여중인 챌린지');
   const [views] = useIncreaseView(insightId);
   const [replyInfo, setReplyInfo] = useState<ReplyInfo | undefined>();
   const [representiveReplies, setRepresentiveReplies] = useState(0);
-  const [bookmarkOn, setBookmarkOn] = useState<boolean | undefined>(false);
   const [snackBarOn, setSnackBarOn] = useState<boolean>(false);
 
   const queryClient = useQueryClient();
@@ -48,7 +47,7 @@ const DetailedPostScreen = ({ navigation, route }) => {
   console.log('🚀 ~ file: DetailedPostScreen.tsx:43 ~ profile', profile);
 
   const followMutation = useMutation({
-    mutationFn: () => FollowAPI.follow(profile.data.authorId),
+    mutationFn: () => FollowAPI.follow(profile?.data?.authorId),
     onMutate: async () => {
       const key = InsightQueryKeys.getProfile({ insightId });
       await queryClient.cancelQueries({ queryKey: key });
@@ -83,8 +82,9 @@ const DetailedPostScreen = ({ navigation, route }) => {
   const handleBookmark = () => {
     DetailedPostApi.BookMark(insightId)
       .then((value) => {
-        setBookmarkOn(value?.bookmark);
         setSnackBarOn(true);
+        queryClient.invalidateQueries(InsightQueryKeys.getInsight({ insightId }));
+        queryClient.invalidateQueries(FeedQueryKeys.getFeed());
       })
       .catch((e) => {
         console.log(e);
@@ -108,10 +108,10 @@ const DetailedPostScreen = ({ navigation, route }) => {
       },
     },
   );
-
-  useEffect(() => {
-    setBookmarkOn(route?.params?.bookmark);
-  }, []);
+  const { data: getChallengeRecordResponse, isLoading: isChallengeRecordLoading } = useQuery(
+    InsightQueryKeys.getChallengeRecord({ insightId }),
+    () => InsightAPI.getChallengeRecord({ insightId }),
+  );
 
   useLayoutEffect(() => {
     navigation.setOptions({
@@ -119,29 +119,31 @@ const DetailedPostScreen = ({ navigation, route }) => {
         return (
           <View style={styles.headerRight}>
             <Pressable onPress={handleBookmark}>
-              <SvgXml xml={bookmarkOn ? BookMarkOnXml : BookMarkOffXml} />
+              <SvgXml xml={insightResponse?.data?.bookmark ? BookMarkOnXml : BookMarkOffXml} />
             </Pressable>
             <Pressable
               onPress={() =>
                 navigation.navigate('Share', {
-                  name: profile ? profile.data.nickname : 'null ',
-                  title: profile ? profile.data.title : 'null ',
-                  image: profile ? profile.data.image : 'null ',
-                  challenge: currentChallenge,
+                  name: profile ? profile?.data?.nickname : 'null ',
+                  title: profile ? profile?.data?.title : 'null ',
+                  image: profile ? profile?.data?.image : 'null ',
+                  challenge: getChallengeRecordResponse?.data?.challengeName ?? '',
                   insightText: insightResponse?.data?.contents ?? '',
                 })
               }
             >
               <SvgXml xml={ShareIconXml} />
             </Pressable>
-            <Pressable onPress={() => alert('three dots')}>
-              <SvgXml xml={ThreeDotsXml} />
-            </Pressable>
+            <FeedVerticalDots
+              userName={profile?.data?.nickname}
+              userId={profile?.data?.authorId}
+              insightId={insightId}
+            />
           </View>
         );
       },
     });
-  }, [profile, insightResponse, currentChallenge, bookmarkOn]);
+  }, [profile, insightResponse, getChallengeRecordResponse]);
 
   const handleMoreCommentsPress = () => {
     navigation.navigate('Comments', { insightId, contentWriterId: profile?.data.authorId });
@@ -164,27 +166,34 @@ const DetailedPostScreen = ({ navigation, route }) => {
               insightText={insightResponse?.data?.contents ?? ''}
               views={views}
               url={insightResponse?.data?.link?.url ?? ''}
-              currentChallenge={currentChallenge}
+              currentChallenge={getChallengeRecordResponse?.data?.challengeName}
               reaction={insightResponse.data.reaction}
               authorId={profile?.data?.authorId ?? -1}
+              recordText={`${getChallengeRecordResponse?.data?.order}/${getChallengeRecordResponse?.data?.total}번째 기록중`}
             />
           )}
 
           {isProfileLoading ? null : (
-            <Profile
-              nickname={profile?.data?.nickname ?? '-'}
-              title={profile?.data?.title ?? '-'}
-              self={profile?.data?.author ?? '-'}
-              follow={profile?.data?.following}
-              interests={profile?.data?.interests ?? []}
-              createdAt={profile?.data?.createdAt ?? '-'}
-              image={profile?.data?.image ?? ''}
-              followMutation={followMutation}
-              style={{
-                backgroundColor: theme.colors.graphic.white,
-                padding: 16,
+            <Pressable
+              onPress={() => {
+                navigation.navigate('Profile', { userId: profile?.data?.authorId });
               }}
-            />
+            >
+              <Profile
+                nickname={profile?.data?.nickname ?? '-'}
+                title={profile?.data?.title ?? '-'}
+                self={profile?.data?.author ?? '-'}
+                follow={profile?.data?.following}
+                interests={profile?.data?.interests ?? []}
+                createdAt={profile?.data?.createdAt ?? '-'}
+                image={profile?.data?.image ?? ''}
+                followMutation={followMutation}
+                style={{
+                  backgroundColor: theme.colors.graphic.white,
+                  padding: 16,
+                }}
+              />
+            </Pressable>
           )}
           <View
             style={{ ...styles.commentDivider, backgroundColor: theme.colors.brand.surface.main }}
@@ -204,65 +213,83 @@ const DetailedPostScreen = ({ navigation, route }) => {
                     color: `${theme.colors.graphic.black}4d`,
                   }}
                 >
-                  {getCommentResponse?.data.total}
+                  {getCommentResponse?.data.total !== 0 ? getCommentResponse?.data.total : ''}
                 </Text>
               </View>
-
-              <View style={{ backgroundColor: 'white', paddingBottom: 16 }}>
-                <>
-                  {getCommentResponse?.data.comments.map((cur) => {
-                    console.log(
-                      '🚀 ~ file: DetailedPostScreen.tsx:193 ~ {getCommentResponse?.data.comments.map ~ cur',
-                      cur,
-                    );
-
-                    const comment = [
-                      <Comment
-                        key={cur.id}
-                        content={cur.content}
-                        nickname={cur.writer.name}
-                        isInsightWriter={profile.data.authorId === cur.writer.id}
-                        commentId={cur.id}
-                        commentWriterId={cur.writer.id}
-                        title={cur.writer.title}
-                        createdAt={cur.createdAt}
-                        isReply={false}
-                        onReply={() => handleReplyClick({ id: cur.id, nickname: cur.writer.name })}
-                      />,
-                    ];
-                    const repies = cur.replies.map((reply) => (
-                      <Comment
-                        key={`${cur.id} reply ${reply.id}`}
-                        content={reply.content}
-                        nickname={reply.writer.name}
-                        isInsightWriter={profile.data.authorId === cur.writer.id}
-                        commentWriterId={reply.writer.id}
-                        createdAt={reply.createdAt}
-                        title={reply.writer.title}
-                        isReply={true}
-                        commentId={reply.id}
-                      />
-                    ));
-                    return comment.concat(repies);
-                  })}
-                  {getCommentResponse.data.total > representiveReplies && (
-                    <View
-                      style={{
-                        marginTop: 16,
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                      }}
-                    >
-                      <MoreCommentsButton
-                        onPress={handleMoreCommentsPress}
-                        number={getCommentResponse.data.total - representiveReplies}
-                        textColor={'white'}
-                        backgroundColor={`${theme.colors.graphic.black}cc`}
-                      />
-                    </View>
-                  )}
-                </>
-              </View>
+              {getCommentResponse?.data.total !== 0 ? (
+                <View style={{ backgroundColor: 'white', paddingBottom: 16 }}>
+                  <>
+                    {getCommentResponse?.data.comments.map((cur) => {
+                      const comment = [
+                        <Comment
+                          key={cur.id}
+                          content={cur.content}
+                          nickname={cur.writer.name}
+                          isInsightWriter={profile?.data?.authorId === cur.writer.id}
+                          commentId={cur.id}
+                          commentWriterId={cur.writer.id}
+                          title={cur.writer.title}
+                          createdAt={cur.createdAt}
+                          isReply={false}
+                          onReply={() =>
+                            handleReplyClick({ id: cur.id, nickname: cur.writer.name })
+                          }
+                        />,
+                      ];
+                      const repies = cur.replies.map((reply) => (
+                        <Comment
+                          key={`${cur.id} reply ${reply.id}`}
+                          content={reply.content}
+                          nickname={reply.writer.name}
+                          isInsightWriter={profile?.data?.authorId === cur.writer.id}
+                          commentWriterId={reply.writer.id}
+                          createdAt={reply.createdAt}
+                          title={reply.writer.title}
+                          isReply={true}
+                          commentId={reply.id}
+                        />
+                      ));
+                      return comment.concat(repies);
+                    })}
+                    {getCommentResponse && getCommentResponse.data.total > representiveReplies && (
+                      <View
+                        style={{
+                          marginTop: 16,
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                        }}
+                      >
+                        <MoreCommentsButton
+                          onPress={handleMoreCommentsPress}
+                          number={getCommentResponse.data.total - representiveReplies}
+                          textColor={'white'}
+                          backgroundColor={`${theme.colors.graphic.black}cc`}
+                        />
+                      </View>
+                    )}
+                  </>
+                </View>
+              ) : (
+                <View
+                  style={{
+                    backgroundColor: 'white',
+                    width: '100%',
+                    alignItems: 'center',
+                    height: 200,
+                  }}
+                >
+                  <Text
+                    style={{
+                      fontFamily: 'pretendard',
+                      fontSize: 16,
+                      color: `${theme.colors.graphic.black}50`,
+                      marginTop: 32,
+                    }}
+                  >
+                    아직 댓글이 없어요.
+                  </Text>
+                </View>
+              )}
             </>
           )}
         </ScrollView>
@@ -277,9 +304,9 @@ const DetailedPostScreen = ({ navigation, route }) => {
       </KeyboardAvoidingView>
       <View style={styles.snack}>
         <SnackBar
-          text={bookmarkOn ? '북마크에 저장했어요.' : '북마크에서 삭제했어요.'}
+          text={insightResponse?.data?.bookmark ? '북마크에 저장했어요.' : '북마크에서 삭제했어요.'}
           visible={snackBarOn}
-          duration={900}
+          duration={90}
           onDismiss={() => setSnackBarOn(false)}
         />
       </View>
@@ -314,4 +341,13 @@ const styles = StyleSheet.create({
     left: 16,
     right: 16,
   },
+  moreSheet: { height: 168 },
+  reportSheet: { height: 375 },
+  button: {
+    width: 'auto',
+    borderRadius: 100,
+    marginHorizontal: 16,
+    top: 16,
+  },
+  buttonText: { fontFamily: 'pretendardSemiBold', fontSize: 18 },
 });
diff --git a/src/screens/detailedPost/DetailedPostSection.tsx b/src/screens/detailedPost/DetailedPostSection.tsx
index 772ab268..44564b26 100644
--- a/src/screens/detailedPost/DetailedPostSection.tsx
+++ b/src/screens/detailedPost/DetailedPostSection.tsx
@@ -11,7 +11,8 @@ interface DetailedPostSectionProps {
   insightText: string;
   insightId: number;
   views: number | string;
-  currentChallenge: string;
+  currentChallenge?: string;
+  recordText?: string;
   url: string;
   reaction: Reaction;
   authorId: number;
@@ -22,6 +23,7 @@ const DetailedPostSection = ({
   insightId,
   views,
   currentChallenge,
+  recordText,
   url,
   reaction,
   authorId,
@@ -31,36 +33,58 @@ const DetailedPostSection = ({
 
   return (
     <View style={{ backgroundColor: '#F1F1E9' }}>
-      <View style={{ ...styles.top, borderColor: `${theme.colors.graphic.black}1a` }}>
-        <Text style={{ ...theme.fonts.text.caption1, color: `${theme.colors.graphic.black}80` }}>
-          {currentChallenge}
-        </Text>
-        <Pressable style={{ flexDirection: 'row' }}>
+      {currentChallenge && (
+        <View
+          style={{
+            ...styles.top,
+            borderColor: `${theme.colors.graphic.black}1a`,
+          }}
+        >
           <Text
+            numberOfLines={1}
             style={{
               ...theme.fonts.text.caption1,
-              paddingRight: 10,
+              flex: 1,
               color: `${theme.colors.graphic.black}80`,
+              overflow: 'hidden',
+              flexWrap: 'nowrap',
             }}
           >
-            6/12번째 기록 중
+            {currentChallenge}
           </Text>
-          <Octicons name="chevron-right" size={17} color={`${theme.colors.graphic.black}cc`} />
-        </Pressable>
-      </View>
+          <Pressable style={{ flexDirection: 'row' }}>
+            <Text
+              style={{
+                ...theme.fonts.text.caption1,
+                paddingRight: 10,
+                color: `${theme.colors.graphic.black}80`,
+              }}
+            >
+              {recordText}
+            </Text>
+            <Octicons name="chevron-right" size={17} color={`${theme.colors.graphic.black}cc`} />
+          </Pressable>
+        </View>
+      )}
+
       {/* 여기는 글 작성자의 프로필과 대표타이틀, 팔로워, 관심사등이 올라갈 부분. 임시적으로 팔로워, 팔로잉 페이지로 이동하는 버튼 만듦 */}
       <Pressable
         onPress={() => {
           // 지금은 임시적인 버튼이지만, 나중에는 글쓴이의 팔로우, 팔로잉 숫자에 붙어있을 navigate 함수임.
         }}
-      >
-        <Text>팔로우 팔로잉 페이지로 이동</Text>
-      </Pressable>
+      ></Pressable>
       <View style={styles.insightText}>
-        <Text style={[theme.fonts.text.body1.regular, { lineHeight: 28 }]}>{insightText}</Text>
+        <Text
+          style={[
+            theme.fonts.text.body1.regular,
+            { color: `${theme.colors.graphic.black}80`, lineHeight: 28 },
+          ]}
+        >
+          {insightText}
+        </Text>
       </View>
       <View style={styles.link}>
-        <LinkCard text={url}></LinkCard>
+        <LinkCard text={url} />
       </View>
       <View style={styles.emoticonBox}>
         <ScrollView horizontal style={{ overflow: 'visible' }}>
@@ -82,7 +106,6 @@ const DetailedPostSection = ({
         <Text
           style={{
             ...theme.fonts.text.caption1,
-            marginVertical: 9,
             color: `${theme.colors.graphic.black}cc`,
           }}
         >
@@ -114,7 +137,7 @@ const styles = StyleSheet.create({
   },
   emoticonBox: {
     marginTop: 16,
-    marginBottom: 24,
+    marginBottom: 16,
     marginHorizontal: 16,
   },
   insightView: {
diff --git a/src/types/insight.d.ts b/src/types/insight.d.ts
index d10f21b3..22e1b9c0 100644
--- a/src/types/insight.d.ts
+++ b/src/types/insight.d.ts
@@ -25,12 +25,21 @@ interface InsightGetReponse {
   code: number;
   data: Insight;
 }
-
+interface InsightReportRequest {
+  reportType: string;
+  reason?: string;
+  insightId: number;
+}
+interface InsightReportResponse {
+  message: string;
+  code: number;
+}
 interface Insight {
   id: number;
   contents: string;
   link: Link;
   reaction: Reaction;
+  bookmark: boolean;
 }
 
 interface Link {
diff --git a/src/types/insight/profile.d.ts b/src/types/insight/profile.d.ts
index bcb43e39..ffad2ae7 100644
--- a/src/types/insight/profile.d.ts
+++ b/src/types/insight/profile.d.ts
@@ -1,10 +1,10 @@
-export interface Profile {
+interface Profile {
   message: string;
   code: number;
   data: ProfileData;
 }
 
-export interface ProfileData {
+interface ProfileData {
   data: {
     authorId: number;
     nickname: string;
@@ -19,10 +19,25 @@ export interface ProfileData {
   code: number;
 }
 
-export interface InsightProfileRequest {
+interface InsightProfileRequest {
   insightId: number;
 }
 
-export interface Interest {
+interface Interest {
   name: string;
 }
+
+interface ChallengeRecordRequest {
+  insightId: number;
+}
+
+interface ChallengeRecordResponse {
+  message: string;
+  code: number;
+  data: {
+    challengeId: number;
+    challengeName: string;
+    order: number;
+    total: number;
+  };
+}
diff --git a/src/types/user.d.ts b/src/types/user.d.ts
new file mode 100644
index 00000000..d85794bc
--- /dev/null
+++ b/src/types/user.d.ts
@@ -0,0 +1,11 @@
+interface UserBlockRequest {
+  targetId: number;
+}
+
+interface UserBlockResponse {
+  message: string;
+  code: number;
+  data: {
+    blockedUserId: number;
+  };
+}
diff --git a/src/utils/api/InsightAPI.ts b/src/utils/api/InsightAPI.ts
index d18fd929..493066f5 100644
--- a/src/utils/api/InsightAPI.ts
+++ b/src/utils/api/InsightAPI.ts
@@ -1,6 +1,5 @@
 import axios from 'axios';
 
-import { InsightProfileRequest, ProfileData } from '../../types/insight/profile';
 import { getAccessToken } from '../hooks/asyncStorage/Login';
 import httpClient from './BaseHttpClient';
 
@@ -24,6 +23,7 @@ export const InsightQueryKeys = {
     request.cursor,
     request.limit,
   ],
+  getChallengeRecord: (request: ChallengeRecordRequest) => ['insight', request.insightId],
 };
 
 export const InsightAPI = {
@@ -151,4 +151,35 @@ export const InsightAPI = {
       console.error('api error: ', err);
     }
   },
+  getChallengeRecord: async (request: ChallengeRecordRequest) => {
+    const { insightId } = request;
+
+    try {
+      const token = await getAccessToken();
+      const { data } = await httpClient.get<ChallengeRecordResponse>(
+        `https://api-keewe.com/api/v1/insight/${insightId}/challenge-record`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        },
+      );
+      return data;
+    } catch (err) {
+      console.error('api error: ', err);
+    }
+  },
+  insightReport: async (params: InsightReportRequest) => {
+    const token = await getAccessToken();
+    const { data } = await httpClient.post<InsightReportResponse>(
+      'https://api-keewe.com/api/v1/report/insight',
+      params,
+      {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      },
+    );
+    return data;
+  },
 };
diff --git a/src/utils/api/user/block/UserBlock.ts b/src/utils/api/user/block/UserBlock.ts
new file mode 100644
index 00000000..6675624e
--- /dev/null
+++ b/src/utils/api/user/block/UserBlock.ts
@@ -0,0 +1,22 @@
+import { getAccessToken } from '../../../hooks/asyncStorage/Login';
+import axios from 'axios';
+
+export const UserBlockQueryKeys = {
+  getFeed: () => ['block'],
+};
+
+export const UserBlockAPI = {
+  userBlock: async (params: UserBlockRequest) => {
+    const { targetId } = params;
+    const token = await getAccessToken();
+    return axios
+      .post<UserBlockResponse>(`https://api-keewe.com/api/v1/user/block/${targetId}`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      })
+      .then((res) => {
+        return res.data.data;
+      });
+  },
+};
diff --git a/types.tsx b/types.tsx
index 8a670c0d..9b6d10b7 100644
--- a/types.tsx
+++ b/types.tsx
@@ -33,6 +33,8 @@ export type RootStackParamList = {
   ChallengeJoin: undefined;
   ChallengeJoinApproved: undefined;
   ServiceIntroOne: undefined;
+  ServiceIntroTwo: undefined;
+  ServiceIntroThree: undefined;
   InterestChoose: undefined;
   BottomSheetExperimental: undefined;
   InsightSample: undefined;
@@ -49,6 +51,9 @@ export type RootStackParamList = {
   Profile: undefined;
   Title: undefined;
   UserFollowers: undefined;
+  IntroductionEditing: undefined;
+  InterestEditing: undefined;
+  TempSheet: undefined;
   FollowTopTabs: {
     userId: number;
     nickname: string;

From 54c5d5386d12dcd08da9aad1c8b6005b71776aad Mon Sep 17 00:00:00 2001
From: cadi <dbtmdgns4296@naver.com>
Date: Thu, 2 Mar 2023 23:43:04 +0900
Subject: [PATCH 2/2] =?UTF-8?q?console.log=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/screens/Feed/FeedScreen.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/screens/Feed/FeedScreen.tsx b/src/screens/Feed/FeedScreen.tsx
index b2dddd76..b6683e41 100644
--- a/src/screens/Feed/FeedScreen.tsx
+++ b/src/screens/Feed/FeedScreen.tsx
@@ -17,9 +17,7 @@ const FeedScreen = ({ navigation }) => {
 
   useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
-      console.log('Screen is focused');
       queryClient.invalidateQueries(FeedQueryKeys.getFeed());
-      // 실행하고자 하는 함수 또는 코드 작성
     });
 
     return unsubscribe;