[FIX][QA] insight Date 수정 및 타인의 title screen접근시 로직 추가 (#261)

- insight Date 수정 및 타인의 title screen접근시 로직 추가

src/screens/settings/SettingsScreen.tsx

@@ -122,16 +122,19 @@ const SettingsScreen = () => {
         rightButtonText="확인"
         leftButtonPress={() => setIsLogoutModalVisible(false)}
         rightButtonPress={handleLogOut}
+        rightButtonColor={theme.colors.system.error}
       />
       <TwoButtonModal
         dismissable={true}
         visible={isWithdrawalModalVisible}
         onDismiss={() => setIsWithdrawalModalVisible(false)}
         mainTitle="탈퇴하시겠습니까?"
+        subTitle="탈퇴하면 키위 서비스에서 탈퇴되고, 모든 기록이 사라져요."
         leftButtonText="취소"
         rightButtonText="확인"
         leftButtonPress={() => setIsWithdrawalModalVisible(false)}
         rightButtonPress={handleWithdrawal}
+        rightButtonColor={theme.colors.system.error}
       />
     </SafeAreaView>
   );

src/screens/title/TitleScreen.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, Text, View, ScrollView, SafeAreaView, Pressable } from 'react-native';
-import React, { useState, useRef, useCallback, useLayoutEffect, useMemo } from 'react';
+import React, { useState, useRef, useCallback, useLayoutEffect, useMemo, useEffect } from 'react';
 import { useTitles } from '../../utils/hooks/title/useTitles';
 import TitleSticker from './TitleSticker';
 import { useTheme } from 'react-native-paper';
@@ -12,9 +12,10 @@ import filter from '../../../assets/svgs/filter';
 import { SvgXml } from 'react-native-svg';
 
 const TitleScreen = ({ route, navigation }) => {
-  const userId = route.params?.userId ?? getUserId().then((id) => id);
+  const paramsId = route.params?.userId;
+  const [isSelf, setIsSelf] = useState<boolean>(false);
   const isEnteredByProfileEdit: boolean = route.params?.isEnteredByProfileEdit ?? false;
-  const [userTitles] = useTitles(userId);
+  const [userTitles] = useTitles(paramsId);
   const [repTitleId, setRepTitleId] = useState<number | undefined>(route?.params?.repTitleId);
   const [nickname] = useState<string>(route?.params?.nickname);
   const [image] = useState(route?.params?.image);
@@ -56,6 +57,10 @@ const TitleScreen = ({ route, navigation }) => {
   };
 
   const handleBackPress = () => {
+    if (!isEnteredByProfileEdit || isSelf) {
+      navigation.goBack();
+      return;
+    }
     const res = navigation.getState().routes.filter((route) => route.name === 'ProfileEdit')[0];
     const mergedRouteParams = {
       ...res.params,
@@ -83,6 +88,11 @@ const TitleScreen = ({ route, navigation }) => {
     });
   }, [route, repTitleId, selectedTitle, title]);
 
+  useEffect(() => {
+    const userId = getUserId();
+    setIsSelf(paramsId == userId);
+  }, [paramsId, getUserId]);
+
   return (
     <SafeAreaView style={{ flex: 1 }}>
       <ScrollView style={styles.mainContainer} contentContainerStyle={{ paddingBottom: 100 }}>
@@ -123,7 +133,7 @@ const TitleScreen = ({ route, navigation }) => {
                       isEnteredByProfileEdit={isEnteredByProfileEdit}
                       key={titleMeta.id}
                       achievedTitles={userTitles.achievedTitles}
-                      repTitleId={repTitleId ?? userTitles.repTitleId}
+                      repTitleId={isSelf ? repTitleId ?? userTitles.repTitleId : undefined}
                       titleMeta={titleMeta}
                       handleChangeTitle={() => {
                         if (!isEnteredByProfileEdit) {

src/screens/title/TitleSticker.tsx

@@ -2,13 +2,12 @@ import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
 import React from 'react';
 import { Title, TitleMeta } from '../../types/title/title';
 import { useTheme } from 'react-native-paper';
-import { useNavigation } from '@react-navigation/native';
 import { modifyDateForTitleSticker } from '../../utils/helper/title/modifyDate';
 
 interface TitleStickerProp {
   achievedTitles: Title['data']['achievedTitles'];
   titleMeta: TitleMeta;
-  repTitleId: number | null;
+  repTitleId?: number | null;
   isEnteredByProfileEdit: boolean;
   source?: AchievedTitle;
   handleChangeTitle: () => void;

src/utils/string/timeInterval.ts

@@ -2,7 +2,10 @@ export const getTimeInterval = (interval: number) => {
   const minutes = Math.floor(interval / 1000 / 60);
   const hours = Math.floor(interval / 1000 / 60 / 60);
   const days = Math.floor(interval / 1000 / 60 / 60 / 24);
-  const months = Math.floor(interval / 1000 / 60 / 60 / 24 / 12);
+  const months = Math.floor(interval / 1000 / 60 / 60 / 24 / 30);
+  if (minutes < 10) {
+    return '방금 전';
+  }
   if (minutes < 60) {
     return `${minutes}분 전`;
   }