[Refactor][Reaction] 인사이트 반응하기 변경점 적용 (#265)

- 한번이라도 반응했으면 버튼 ui를 통해 해당 기록을 보여줍니다.

src/components/emoticons/ReactIconButton.tsx

@@ -1,7 +1,8 @@
+/* eslint-disable indent */
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { Animated, Easing } from 'react-native';
 import { SvgXml } from 'react-native-svg';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Pressable, Text, StyleSheet } from 'react-native';
 import { InsightAPI } from '../../utils/api/InsightAPI';
 import { FlyingView, ObjectConfig } from 'react-native-flying-objects';
@@ -12,16 +13,20 @@ interface ReactIconButtonProps {
   color: string;
   taps?: number;
   name: string;
+  clicked: boolean;
   insightId: number;
 }
 
-const ReactIconButton = ({ xml, color, taps, name, insightId }: ReactIconButtonProps) => {
+const ReactIconButton = ({ xml, color, taps, name, clicked, insightId }: ReactIconButtonProps) => {
   const opacityValue = useRef(new Animated.Value(0)).current;
   const [object, setObject] = useState<ObjectConfig[]>([]);
   const [text, setText] = useState<number>();
+  const [tab, setTab] = useState<boolean>(false);
+
   const { mutate: insightReact } = useMutation(InsightAPI.react, {
     onSuccess: (response) => {
       setText(response?.data.count);
+      setTab(true);
     },
   });
 
@@ -75,10 +80,13 @@ const ReactIconButton = ({ xml, color, taps, name, insightId }: ReactIconButtonP
       <Pressable onPress={handleClick}>
         <Animated.View
           style={{
-            backgroundColor: opacityValue.interpolate({
-              inputRange: [0, 1],
-              outputRange: [theme.colors.graphic.white, color],
-            }),
+            backgroundColor:
+              clicked || tab
+                ? color
+                : opacityValue.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [theme.colors.graphic.white, color],
+                  }),
             padding: 8,
             marginTop: 12,
             ...styles.Button,

src/screens/Feed/FeedItem.tsx

@@ -4,7 +4,7 @@ import MiniProfile from '../../components/profile/MiniProfile';
 import FeedLinkWithBookMark from './FeedLinkCard';
 import FeedVerticalDots from './FeedVerticalDots';
 import FeedTextContent from './FeedTextContent';
-import { REACTIONS } from './constant';
+import { REACTIONS } from '../detailedPost/constant';
 import ReactIconButton from '../../components/emoticons/ReactIconButton';
 import { useNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
@@ -71,6 +71,7 @@ const FeedItem = ({ insight, localId, onBookMarkClick }: FeedItemProps) => {
               xml={react.xml}
               color={react.color}
               taps={reaction[react.reaction]}
+              clicked={reaction[react.clicked]}
               name={react.name}
               insightId={id}
             />

src/screens/detailedPost/DetailedPostScreen.tsx

@@ -34,7 +34,7 @@ import removeEscapeSequences from '../../utils/helper/strings/removeEscapeSequen
 import { getUserId } from '../../utils/hooks/asyncStorage/Login';
 import CommentList from './CommentList';
 
-const COMMENT_LIMIT = 5;
+const COMMENT_LIMIT = 10;
 
 const DetailedPostScreen = ({ navigation, route }) => {
   const { insightId, initialInsight } = route.params;
@@ -191,6 +191,12 @@ const DetailedPostScreen = ({ navigation, route }) => {
     heart: 33,
     sad: 78,
     surprise: 45,
+    isClapClicked: false,
+    isHeartClicked: false,
+    isSadClicked: false,
+    isSurpriseClicked: false,
+    isFireClicked: false,
+    isEyesClicked: false,
   };
 
   if (isInsightError || isCountError || isChallengeRecordError) {

src/screens/detailedPost/DetailedPostSection.tsx

@@ -150,6 +150,7 @@ const DetailedPostSection = ({
                 xml={react.xml}
                 color={react.color}
                 taps={reaction[react.reaction]}
+                clicked={reaction[react.clicked]}
                 name={react.name}
                 insightId={insightId}
               />

src/screens/detailedPost/constant.ts

@@ -10,41 +10,47 @@ export const REACTIONS: Record<string, any>[] = [
   {
     name: 'CLAP',
     reaction: 'clap',
+    clicked: 'isClapClicked',
     xml: ClapRoundOffSmallXml,
     bezier: [0.5, 1.8, 0.4, 1.0],
     color: theme.colors.graphic.sky,
   },
   {
     name: 'HEART',
     reaction: 'heart',
+    clicked: 'isHeartClicked',
     xml: HeartRoundOffSmallXml,
     bezier: [0.5, 1.8, 0.4, 1.12],
     color: theme.colors.graphic.green,
   },
   {
     name: 'SAD',
     reaction: 'sad',
+    clicked: 'isSadClicked',
     xml: SadRoundOffSmallXml,
     bezier: [0.5, 1.8, 0.4, 1.24],
     color: theme.colors.graphic.purple,
   },
   {
     name: 'SURPRISE',
     reaction: 'surprise',
+    clicked: 'isSurpriseClicked',
     xml: SurpriseRoundOffSmallXml,
     bezier: [0.5, 1.8, 0.4, 1.36],
     color: theme.colors.graphic.coral,
   },
   {
     name: 'EYES',
     reaction: 'eyes',
+    clicked: 'isEyesClicked',
     xml: EyesRoundOffSmallXml,
     bezier: [0.5, 1.8, 0.4, 1.48],
     color: theme.colors.graphic.marine,
   },
   {
     name: 'FIRE',
     reaction: 'fire',
+    clicked: 'isFireClicked',
     xml: FireRoundOffSmallXml,
     bezier: [0.5, 1.8, 0.4, 1.6],
     color: theme.colors.graphic.orange,

src/types/Feed/Feedinsights.d.ts

@@ -28,6 +28,12 @@ interface Reaction {
   surprise: number;
   fire: number;
   eyes: number;
+  isClapClicked: boolean;
+  isHeartClicked: boolean;
+  isSadClicked: boolean;
+  isSurpriseClicked: boolean;
+  isFireClicked: boolean;
+  isEyesClicked: boolean;
 }
 
 interface InsightWriter {