내 랭킹 조회 기능 구현 (#188)

내 랭킹 조회 기능 구현

src/apis/my-rank/my-rank.api.ts

@@ -0,0 +1,19 @@
+import { MyRankResponse } from './my-rank.response';
+import { axiosClient } from '@/apis/AxiosClient';
+import { useQuery } from '@tanstack/react-query';
+
+const getMyRankPath = () => '/api/user/my-ranking';
+
+const UserQueryKey = [getMyRankPath()];
+
+const getMyRank = async (): Promise<MyRankResponse> => {
+  const response = await axiosClient.get(getMyRankPath());
+  return response.data;
+};
+
+export const useGetMyRank = () => {
+  return useQuery<MyRankResponse, Error>({
+    queryKey: UserQueryKey,
+    queryFn: getMyRank,
+  });
+};

src/apis/my-rank/my-rank.response.ts

@@ -0,0 +1,17 @@
+import ApiResponse from '../ApiResponse';
+
+export type MyRankData = {
+  id: number;
+  nickname: string;
+  profileImageUrl: string;
+  email: string;
+  tierInfo: {
+    tier: string;
+    totalExp: number;
+    currentExp: number;
+  };
+  role: 'USER' | 'ADMIN';
+  rank: number;
+};
+
+export type MyRankResponse = ApiResponse<MyRankData>;

src/pages/rank/components/all/index.tsx

@@ -25,7 +25,6 @@ const AllRank = () => {
       }));
       setUserRanks(allUserData);
       setLoading(false);
-      // console.log('rank data: ', allUserData);
     };
 
     fetchUserRanking();

src/pages/rank/components/my/index.tsx

@@ -1,49 +1,64 @@
 import { TextContainer } from '../../styles';
-import * as S from './styles';
+import { useGetMyRank } from '@/apis/my-rank/my-rank.api';
 import Profile from '@/assets/main/ZZAN-Profile.png';
 import { getTierDetails } from '@/constants/data/tierSchema';
-import { useInfoStore } from '@/store/useInfoStore';
-import * as Base from '@/styles/baseStyles';
+import { Box, Image, Text } from '@chakra-ui/react';
+import styled from '@emotion/styled';
 
 const MyRank = () => {
-  const { userInfo } = useInfoStore();
+  const { data } = useGetMyRank();
 
-  const tierDetails = userInfo?.tierInfo
-    ? getTierDetails(userInfo?.tierInfo.tier)
+  const tierDetails = data?.data.tierInfo
+    ? getTierDetails(data?.data.tierInfo.tier)
     : { color: 'var(--color-class-02)' };
   return (
     <>
-      <S.MyRankLayout>
-        <Base.Text
-          fontSize='var(--font-size-xl)'
-          fontWeight='700'
-          color='#457A82'
-        >
+      <MyRankLayout>
+        <Text fontSize='var(--font-size-xl)' fontWeight='700' color='#457A82'>
           내 순위
-        </Base.Text>
-        <S.RankInfoContainer>
-          <S.RankPosition>
-            <Base.Text fontWeight='700'>1위</Base.Text>
-          </S.RankPosition>
-          <S.RankProfile>
-            <S.RankProfileImg width='4.5rem' src={Profile} />
-          </S.RankProfile>
+        </Text>
+        <RankInfoContainer>
+          <RankPosition>
+            <Text fontWeight='700'>{data?.data.rank}위</Text>
+          </RankPosition>
+          <Box display='flex'>
+            <Image width='4.5rem' src={Profile} />
+          </Box>
           <TextContainer>
-            <Base.Text fontSize='var(--font-size-xl)' fontWeight='650'>
-              {userInfo?.nickname}
-            </Base.Text>
-            <Base.Text
-              color={tierDetails?.color}
-              fontWeight='700'
-              fontSize='1.2rem'
-            >
-              {userInfo?.tierInfo.tier}
-            </Base.Text>
+            <Text fontSize='var(--font-size-xl)' fontWeight='650'>
+              {data?.data.nickname}
+            </Text>
+            <Text color={tierDetails?.color} fontWeight='700' fontSize='1.2rem'>
+              {data?.data.tierInfo.tier}
+            </Text>
           </TextContainer>
-        </S.RankInfoContainer>
-      </S.MyRankLayout>
+        </RankInfoContainer>
+      </MyRankLayout>
     </>
   );
 };
 
 export default MyRank;
+
+export const MyRankLayout = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-green-06);
+  border-bottom: 1px solid #bdc5cd;
+`;
+
+export const RankInfoContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  justify-content: space-between;
+  gap: 0.6rem;
+  padding: 1rem 0.5rem;
+`;
+
+export const RankPosition = styled.div`
+  width: 3rem;
+  text-align: center;
+  white-space: nowrap;
+`;

src/pages/rank/components/user/index.tsx

@@ -24,7 +24,6 @@ const UserRank: React.FC<UserRankProps> = ({ user, index }) => {
       <S.UserRankContainer>
         <Box
           display='flex'
-          // justifyContent='space-between'
           alignItems='center'
           textAlign='center'
           bgColor='#fff'
@@ -52,14 +51,14 @@ const UserRank: React.FC<UserRankProps> = ({ user, index }) => {
             gap='1rem'
           >
             <Text
-              maxWidth='150px'
+              maxWidth='170px'
               fontWeight='700'
               fontSize='0.8rem'
               color={tierColor}
             >
               {tierInfo}
             </Text>
-            <Text maxWidth='150px' fontSize='0.8rem' color={tierColor}>
+            <Text maxWidth='200px' fontSize='0.7rem' color={tierColor}>
               {currentExp}
             </Text>
           </Box>