From 1ec169303e2458990ddae280d200312fad0cff09 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Wed, 9 Oct 2024 12:21:48 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat(my-rank):=20=EB=82=B4=20=EB=9E=AD?= =?UTF-8?q?=ED=82=B9=20=EC=A1=B0=ED=9A=8C=20api=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/my-rank/my-rank.api.ts | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 src/apis/my-rank/my-rank.api.ts diff --git a/src/apis/my-rank/my-rank.api.ts b/src/apis/my-rank/my-rank.api.ts new file mode 100644 index 0000000..e457262 --- /dev/null +++ b/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 => { + const response = await axiosClient.get(getMyRankPath()); + return response.data; +}; + +export const useGetMyRank = () => { + return useQuery({ + queryKey: UserQueryKey, + queryFn: getMyRank, + }); +}; From 8862848b83d17978d08fc2dfad8099c5c0550343 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Wed, 9 Oct 2024 12:22:04 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat(my-rank):=20=EB=82=B4=20=EB=9E=AD?= =?UTF-8?q?=ED=82=B9=20=EC=A1=B0=ED=9A=8C=20response=20type=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/my-rank/my-rank.response.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/apis/my-rank/my-rank.response.ts diff --git a/src/apis/my-rank/my-rank.response.ts b/src/apis/my-rank/my-rank.response.ts new file mode 100644 index 0000000..6de201c --- /dev/null +++ b/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; From 6f5278c2b2ff08271287382cc514cff5903d7817 Mon Sep 17 00:00:00 2001 From: Dobbymin Date: Wed, 9 Oct 2024 12:30:40 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Refactor(rank):=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20=EB=B0=8F=20css=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/rank/components/all/index.tsx | 1 - src/pages/rank/components/my/index.tsx | 79 ++++++++++++++---------- src/pages/rank/components/user/index.tsx | 5 +- 3 files changed, 49 insertions(+), 36 deletions(-) diff --git a/src/pages/rank/components/all/index.tsx b/src/pages/rank/components/all/index.tsx index 9c1ab39..0f2f280 100644 --- a/src/pages/rank/components/all/index.tsx +++ b/src/pages/rank/components/all/index.tsx @@ -25,7 +25,6 @@ const AllRank = () => { })); setUserRanks(allUserData); setLoading(false); - // console.log('rank data: ', allUserData); }; fetchUserRanking(); diff --git a/src/pages/rank/components/my/index.tsx b/src/pages/rank/components/my/index.tsx index c4ec0d0..7ecf470 100644 --- a/src/pages/rank/components/my/index.tsx +++ b/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 ( <> - - + + 내 순위 - - - - 1위 - - - - + + + + {data?.data.rank}위 + + + + - - {userInfo?.nickname} - - - {userInfo?.tierInfo.tier} - + + {data?.data.nickname} + + + {data?.data.tierInfo.tier} + - - + + ); }; 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; +`; diff --git a/src/pages/rank/components/user/index.tsx b/src/pages/rank/components/user/index.tsx index b8ac737..2fb83d0 100644 --- a/src/pages/rank/components/user/index.tsx +++ b/src/pages/rank/components/user/index.tsx @@ -24,7 +24,6 @@ const UserRank: React.FC = ({ user, index }) => { = ({ user, index }) => { gap='1rem' > {tierInfo} - + {currentExp}