diff --git a/src/components/Crew/CrewList.tsx b/src/components/Crew/CrewList.tsx index 57dcfa3..4f9a5ab 100644 --- a/src/components/Crew/CrewList.tsx +++ b/src/components/Crew/CrewList.tsx @@ -19,7 +19,7 @@ const SORT_LIST = [ const CrewList = (): ReactElement => { const navigate = useNavigate() - const { myGroupData, ranks, myRank, refetchAll } = useMyGroup() + const { myGroupData, ranks, myRank, refetchAll, isLoading: isGroupLoading } = useMyGroup() const [isDropdownOpen, setIsDropdownOpen] = useState(false) // Dropdown 외부 클릭 감지 메모이제이션 const dropdownRef = useRef(null) @@ -162,6 +162,7 @@ const CrewList = (): ReactElement => {
{myGroupData && Object.keys(myGroupData).length > 0 && (
{/* 1, 2, 3등 랭킹 */}
- - - + {topThree[0] && } + {topThree[1] && } + {topThree[2] && }
{/* 전체 랭킹 목록 */} diff --git a/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx b/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx index 5398cf0..347843b 100644 --- a/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx +++ b/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx @@ -10,6 +10,7 @@ import dayjs from "dayjs" import NoRanksImage from "@/assets/images/mycrew-no-ranks.png" interface MyCrewRankingContainerProps { + isLoading: boolean myGroupData: MyGroupData ranks: groupUserRank[] myRank: groupUserRank | undefined @@ -18,7 +19,7 @@ interface MyCrewRankingContainerProps { } export default function MyCrewRankingContainer(props: MyCrewRankingContainerProps) { - const { myGroupData, ranks, myRank, openCreateModal, openInviteModal } = props + const { isLoading, myGroupData, ranks, myRank, openCreateModal, openInviteModal } = props return (
@@ -63,12 +64,14 @@ export default function MyCrewRankingContainer(props: MyCrewRankingContainerProp {ranks.length > 0 && myRank ? ( ) : ( -
-
- -
표시할 랭킹이 없습니다.
+ !isLoading && ( +
+
+ +
표시할 랭킹이 없습니다.
+
-
+ ) )}
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx index 351f24a..9d3ea10 100644 --- a/src/components/SideNav.tsx +++ b/src/components/SideNav.tsx @@ -57,7 +57,7 @@ export default function SideNav(): React.ReactElement { ) return ( -