Dev

app-navigator.tsx

@@ -17,7 +17,7 @@ import {
   Setting,
   SignUp,
 } from '@pages';
-import {getLocalStorage, removeLocalStorage, useLoginStore} from '@store';
+import {getLocalStorage, useLoginStore} from '@store';
 import {useReissueMutation} from '@api';
 import {CreateChat, GlobalModal, Header} from '@src/components';
 import {
@@ -221,29 +221,29 @@ export default function AppNavigator({theme}: Props) {
             />
 
             <Tab.Screen
-              name="Setting"
-              component={Setting}
+              name="MyPage"
+              component={MyPage}
               options={{
-                tabBarLabel: 'Setting',
+                tabBarLabel: 'MyPage',
                 tabBarIcon: ({color}) => {
                   return (
-                    <TabIcon icon="cog" color={color}>
-                      설정
+                    <TabIcon icon="account" color={color}>
+                      마이페이지
                     </TabIcon>
                   );
                 },
               }}
             />
 
             <Tab.Screen
-              name="MyPage"
-              component={MyPage}
+              name="Setting"
+              component={Setting}
               options={{
-                tabBarLabel: 'MyPage',
+                tabBarLabel: 'Setting',
                 tabBarIcon: ({color}) => {
                   return (
-                    <TabIcon icon="account" color={color}>
-                      마이페이지
+                    <TabIcon icon="cog" color={color}>
+                      설정
                     </TabIcon>
                   );
                 },

src/api/instance.tsx

@@ -83,6 +83,7 @@ export const path = {
     register: '/riot/lol/account/register',
     refresh: '/riot/lol/account/refresh',
     user: (userId: string) => `/user/profile/${userId}`,
+    match: (userId: string) => `/riot/lol/account/match/${userId}`,
   },
   chatRoom: {
     create: '/chatroom/create',
@@ -101,6 +102,7 @@ export const hookKeys = {
   riot: {
     my: 'my-info',
     user: 'user-info',
+    match: 'riot-match',
   },
   chat: {
     all: 'chattings',

src/api/riot/get-riot-match.tsx

@@ -0,0 +1,89 @@
+import {getHeaders, hookKeys, instance, path} from '@api';
+import {Position} from '@src/util';
+import {useSuspenseInfiniteQuery} from '@tanstack/react-query';
+
+export type RiotMatchData = {
+  matchId: string;
+  matchType: string;
+  championName: string;
+  championImageUrl: string;
+  doubleKills: number;
+  firstBloodKill: boolean;
+  teamPosition: Omit<Position, 'ANY'>;
+  pentaKills: number;
+  assists: number;
+  deaths: number;
+  kills: number;
+  kda: number;
+  firstBloodAssist: boolean;
+  firstTowerAssist: boolean;
+  firstTowerKill: boolean;
+  goldPerMinute: number;
+  gameEndedInEarlySurrender: boolean;
+  gameEndedInSurrender: boolean;
+  timePlayed: number;
+  totalMinionsKilled: number;
+  win: boolean;
+  soloKills: number;
+  legendaryCount: number;
+  damagePerMinute: number;
+  dragonTakedowns: number;
+  epicMonsterSteals: number;
+  baronTakedowns: number;
+  voidMonsterKill: number;
+  perfectDragonSoulsTaken: number;
+  elderDragonMultikills: number;
+  killParticipation: number;
+  item1ImageUrl: string;
+  item2ImageUrl: string;
+  item3ImageUrl: string;
+  item4ImageUrl: string;
+  item5ImageUrl: string;
+  item6ImageUrl: string;
+  trinketImageUrl: string;
+  spell1ImageUrl: string;
+  spell2ImageUrl: string;
+  startTime: string;
+};
+
+async function getRiotMatch(userId: string, start = 0) {
+  const response = await instance.get<RiotMatchData[]>(
+    path.riot.match(userId),
+    {
+      headers: getHeaders(),
+      params: {start},
+    },
+  );
+  return response.data;
+}
+
+export function useRiotMatchInfiniteQuery(userId: string) {
+  const query = useSuspenseInfiniteQuery({
+    queryKey: [hookKeys.riot.match, userId],
+    queryFn: ({pageParam = 0}) => getRiotMatch(userId, pageParam),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      const allItems = allPages.flat();
+
+      // 마지막 페이지를 받기 전까지의 아이템 개수
+      const previousCount = allItems.length - lastPage.length;
+      // 현재까지 총 아이템 개수
+      const currentCount = allItems.length;
+
+      // 만약 아이템 수가 늘어나지 않았다면 더 이상 가져올 데이터가 없음
+      if (currentCount === previousCount) {
+        return undefined;
+      }
+
+      // 만약 이번에 받은 데이터가 5개 미만이면 끝
+      if (lastPage.length < 5) {
+        return undefined;
+      }
+
+      // 위 두 조건에 해당하지 않으면 현재 총 개수를 다음 start로 사용
+      return currentCount;
+    },
+  });
+
+  return query;
+}

src/api/riot/index.ts

@@ -2,3 +2,4 @@ export * from './get-riot-lol-account';
 export * from './patch-riot-account';
 export * from './post-riot-account';
 export * from './refresh-riot';
+export * from './get-riot-match';

src/components/chat/chatting.tsx

@@ -6,7 +6,7 @@ import {
   useChatRoomUsersQuery,
   usePreviousChatRoomInfinityQuery,
 } from '@src/api';
-import {IconButton} from 'react-native-paper';
+import {Button, IconButton} from 'react-native-paper';
 import {
   KeyboardAvoidingView,
   KeyboardEvents,
@@ -39,7 +39,7 @@ export default function ChattingPage(props: ChattingProps) {
   );
 }
 
-function ChattingComponent({route}: ChattingProps) {
+function ChattingComponent({route, navigation}: ChattingProps) {
   const roomId = route.params.roomId;
 
   const roomName = route.params.roomName;
@@ -76,12 +76,8 @@ function ChattingComponent({route}: ChattingProps) {
     [roomId, myId],
   );
 
-  const {messages, publishFileMessage, publishTextMessage} = useStomp(
-    roomId,
-    onConnectSubscribes,
-    OnConnectPublications,
-    flatListRef,
-  );
+  const {messages, publishFileMessage, publishTextMessage, leaveChatting} =
+    useStomp(roomId, onConnectSubscribes, OnConnectPublications, flatListRef);
 
   const messageQuery = usePreviousChatRoomInfinityQuery(roomId);
   console.log(
@@ -142,7 +138,9 @@ function ChattingComponent({route}: ChattingProps) {
           data={
             messageQuery.data?.pages
               ? [
-                  ...messageQuery.data.pages.flatMap(page => page.content),
+                  ...messageQuery.data.pages
+                    .flatMap(page => page.content)
+                    .reverse(),
                   ...messages,
                 ]
               : messages
@@ -170,6 +168,14 @@ function ChattingComponent({route}: ChattingProps) {
       </View>
 
       <View style={styles.inputContainer}>
+        <Button
+          mode="outlined"
+          onPress={() => {
+            leaveChatting();
+            navigation.navigate('MyChat');
+          }}>
+          채팅방 나가기
+        </Button>
         <PlusButton roomId={roomId} handleSendImage={publishFileMessage} />
         <TextInput
           editable

src/components/chat/my-chat.tsx

@@ -11,6 +11,7 @@ import {
 } from '@src/hooks';
 import MyChatLink from './my-chat-link';
 import {responsiveScreenHeight} from 'react-native-responsive-dimensions';
+import {useFocusEffect} from '@react-navigation/native';
 
 export default function MyChat() {
   return (
@@ -46,6 +47,10 @@ function MyChatComponent() {
 
   const {isRefetchingByUser, refetchByUser} = useRefreshByUser(refetch);
 
+  useFocusEffect(() => {
+    refetch();
+  });
+
   if (typeof data === 'undefined' || data?.pages[0].content.length === 0) {
     return (
       <View>

src/components/common/drawer/drawer-content.tsx

@@ -12,7 +12,7 @@ import {useNavigation} from '@react-navigation/native';
 import {ChatStackProps, ChattingRoomStackProps} from '@src/page';
 
 export function ChatUserDrawerContent({roomId, roomName}: ChatUserDrawer) {
-  const userQuery = useChatRoomUsersQuery(roomId, false);
+  const userQuery = useChatRoomUsersQuery(roomId);
   const {closeDrawer} = useDrawerStore();
   const navigation = useNavigation<ChatStackProps & ChattingRoomStackProps>();
   console.log('Drawer Navigation state: ', navigation.getState());

src/components/home/user-card.tsx

@@ -234,7 +234,7 @@ const styles = StyleSheet.create({
     fontSize: responsiveScreenFontSize(2),
   },
   championWinRateText: {
-    color: '#FF8085',
+    color: 'white',
     fontSize: responsiveScreenFontSize(2),
   },
 });

src/components/mypage/main/champion-info.tsx

@@ -20,7 +20,7 @@ export default function ChampionInfo({
 }: Props) {
   const {kills, assists, deaths, championImageUrl, winRate, wins, losses} =
     champion;
-  const killDeathRatio = ((kills + assists) / deaths).toFixed(2);
+  const killDeathRatio = (kills + assists) / deaths;
 
   return (
     <View style={styles.container}>
@@ -29,11 +29,23 @@ export default function ChampionInfo({
         source={{uri: championImageUrl}}
         style={styles.champion}
       />
-      <Text style={[styles.winRate, winRateStyle]}>{`${Math.floor(
-        winRate * 100,
-      )}%`}</Text>
+      <Text
+        style={[
+          styles.winRate,
+          winRateStyle,
+          winRate * 100 >= 60 && {color: 'red'},
+        ]}>{`${Math.floor(winRate * 100)}%`}</Text>
       <Text style={[winLoosesTextStyle]}>{`(${wins}W ${losses}L)`}</Text>
-      <Text style={[styles.kda, kdaTextStyle]}>{`${killDeathRatio} KDA`}</Text>
+      <Text
+        style={[
+          styles.kda,
+          kdaTextStyle,
+          killDeathRatio >= 3 && killDeathRatio <= 5 && {color: 'green'},
+          killDeathRatio > 5 && {color: 'red'},
+        ]}>
+        {killDeathRatio.toFixed(2)}
+      </Text>
+      <Text style={[styles.kdastring, kdaTextStyle]}>KDA</Text>
     </View>
   );
 }
@@ -50,11 +62,15 @@ const styles = StyleSheet.create({
     marginRight: 4,
   },
   winRate: {
-    color: 'red',
+    color: 'black',
     marginRight: 4,
   },
   kda: {
-    marginHorizontal: 4,
+    marginLeft: 4,
+    marginRight: 2,
+    color: 'black',
+  },
+  kdastring: {
     color: 'black',
   },
 });

src/components/mypage/main/header.tsx

@@ -58,7 +58,7 @@ export default function MypageHeader({
           {background && (
             <View style={styles.headerButtonBox}>
               <LinkButton
-                to={{screen: 'MyMatchDetailInfo'}}
+                to={{screen: 'MyMatchDetailInfo', params: {userId}}}
                 mode="contained"
                 labelStyle={styles.headerButtonText}
                 style={styles.headerButton}

src/components/mypage/main/kill-log.tsx

@@ -38,11 +38,19 @@ export default function KillLog({
           </View>
         ))}
       </View>
-      <Text style={styles.killDeatRatio}>
-        {Number.isNaN(killDeathRatio)
-          ? '0'
-          : `${killDeathRatio.toFixed(2)} : 1`}
-      </Text>
+      <View style={styles.killDeathRatioContainer}>
+        <Text
+          style={[
+            styles.killDeathRatio,
+            killDeathRatio >= 3 && killDeathRatio <= 5 && {color: 'green'},
+            killDeathRatio > 5 && {color: 'red'},
+          ]}>
+          {Number.isNaN(killDeathRatio) ? '0' : `${killDeathRatio.toFixed(2)}`}
+        </Text>
+        {!Number.isNaN(killDeathRatio) && (
+          <Text style={styles.killDeathRatio}> : 1</Text>
+        )}
+      </View>
     </View>
   );
 }
@@ -62,7 +70,11 @@ const styles = StyleSheet.create({
     fontWeight: 'bold',
     color: 'black',
   },
-  killDeatRatio: {
+  killDeathRatioContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+  },
+  killDeathRatio: {
     fontSize: responsiveFontSize(2),
     fontWeight: 'bold',
     color: 'black',

src/components/mypage/main/win-rate-circle.tsx

@@ -21,7 +21,11 @@ function WinRateCircle({wins, losses}: Props) {
 
   const circumference = 2 * Math.PI * radius;
   const strokeDashoffset = circumference - (circumference * percentage) / 100;
-  console.log(strokeDashoffset);
+
+  // percentage에 따른 원의 색상 결정
+  const circleColor =
+    percentage === 0 || Number.isNaN(percentage) ? 'red' : 'blue';
+
   return (
     <View style={styles.container}>
       <Svg
@@ -38,7 +42,7 @@ function WinRateCircle({wins, losses}: Props) {
             fill="none"
           />
           <Circle
-            stroke="blue"
+            stroke={circleColor}
             cx="60"
             cy="60"
             r={radius}