[feat/#146] 크루 관련 이슈 수정

src/components/Crew/CrewList.tsx

@@ -9,7 +9,7 @@ import SortCrewIcon from "@assets/icons/crew-sort-icon.svg?react"
 import { ReactElement, useCallback, useEffect, useRef, useState, useMemo } from "react"
 import { modals } from "../Modal/Modals"
 import MyCrewRankingContainer from "./MyCrew/MyCrewRankingContainer"
-import { useNavigate, useSearchParams } from "react-router-dom"
+import { useLocation, useNavigate, useSearchParams } from "react-router-dom"
 import RoutePath from "@/constants/routes.json"
 import SearchIcon from "@assets/icons/crew-search-icon.svg?react"
 
@@ -20,6 +20,7 @@ const SORT_LIST = [
 
 const CrewList = (): ReactElement => {
   const navigate = useNavigate()
+  const location = useLocation()
   const { myGroupData, ranks, myRank, refetchAll, isLoading: isGroupLoading } = useMyGroup()
   const [isDropdownOpen, setIsDropdownOpen] = useState<boolean>(false)
   // Dropdown 외부 클릭 감지 메모이제이션
@@ -117,7 +118,7 @@ const CrewList = (): ReactElement => {
           <div className="flex flex-grow flex-col items-center justify-center">
             <img src={EmptyCrewImage} alt="empty crew" />
             <div className="text-center text-[14px] font-semibold leading-[22px]">
-              {"만들어진 크루가 아직 없습니다."}
+              {keyword ? "검색된 크루가 없습니다." : "만들어진 크루가 아직 없습니다."}
             </div>
           </div>
         )
@@ -170,6 +171,10 @@ const CrewList = (): ReactElement => {
     }
   }, [openJoinCrewModal, searchParams, setSearchParams])
 
+  useEffect(() => {
+    refetchAll()
+  }, [location.pathname])
+
   return (
     <div className="flex h-full w-full flex-col">
       {myGroupData && Object.keys(myGroupData).length > 0 && !params.keyword && (

src/components/Crew/CrewRanking.tsx

@@ -46,21 +46,27 @@ const RankPillar = ({ rank, name, score, height }: any) => {
           {rank}등
         </div>
       </div>
-      <div className="text-[20px] font-semibold leading-[28px]">{name}</div>
-      <div className="text-[15px] font-normal leading-6">자세 경고 {score}회</div>
+      <div className="text-[20px] font-semibold leading-[28px]">{name ?? "-"}</div>
+      <div className="text-[15px] font-normal leading-6">
+        {score != null ? `자세 경고 ${score ? `${score}회` : "없음"}` : ""}
+      </div>
     </div>
   )
 }
 
 const RankCard = ({ rank, name, score, isMe }: any) => (
   <div
-    className={`flex items-center justify-between py-1 pl-3 pr-4 ${isMe ? "rounded-full bg-[#DCEBFD]" : ""} h-[40px]`}
+    className={`flex items-center justify-between gap-4 py-1 pl-3 pr-4 ${
+      isMe ? "rounded-full bg-[#DCEBFD]" : ""
+    } h-[40px]`}
   >
-    <div className="flex items-center gap-4">
-      <div className="flex h-8 w-8 items-center justify-center font-normal text-zinc-900">{rank}</div>
-      <span className={isMe ? "font-medium text-[#1A75FF]" : ""}>{isMe ? "나" : name}</span>
+    <div className="flex items-center gap-4 overflow-hidden">
+      <div className="flex h-8 w-8 flex-none items-center justify-center font-normal text-zinc-900">{rank ?? "?"}</div>
+      <span className={`truncate ${isMe ? "font-medium text-[#1A75FF]" : ""}`}>{isMe ? "나" : name}</span>
     </div>
-    <span className="text-[13px] font-normal text-zinc-400">자세경고 {score}회</span>
+    <span className="flex-none text-[13px] font-normal text-zinc-400">{`자세경고 ${
+      score ? `${score}회` : "없음"
+    }`}</span>
   </div>
 )
 
@@ -71,16 +77,16 @@ const CrewRanking = ({ rankings, myRank }: { rankings: any[]; myRank: any }) =>
     <div className="flex h-full gap-12">
       {/* 1, 2, 3등 랭킹 */}
       <div className="flex h-full flex-1 items-end gap-3">
-        {topThree[0] && <RankPillar rank={1} name={topThree[0].name} score={topThree[0].score} height="220px" />}
-        {topThree[1] && <RankPillar rank={2} name={topThree[1].name} score={topThree[1].score} height="180px" />}
-        {topThree[2] && <RankPillar rank={3} name={topThree[2].name} score={topThree[2].score} height="158px" />}
+        <RankPillar rank={1} name={topThree[0]?.name} score={topThree[1]?.score} height="220px" />
+        <RankPillar rank={2} name={topThree[1]?.name} score={topThree[1]?.score} height="180px" />
+        <RankPillar rank={3} name={topThree[2]?.name} score={topThree[2]?.score} height="158px" />
       </div>
 
       {/* 전체 랭킹 목록 */}
       <div className="flex flex-1 flex-col overflow-hidden">
         <div className="flex h-full flex-col overflow-hidden bg-white">
           <div className="flex-shrink-0">
-            <RankCard rank={myRank.rank} name={myRank.name} score={myRank.score} isMe={true} />
+            <RankCard rank={myRank?.rank} name={myRank?.name} score={myRank?.score} isMe={true} />
           </div>
           <div className="scrollbar-hide flex-grow overflow-y-auto">
             {rankings.map((rank, index) => (

src/components/Crew/MyCrew/MyCrewRankingContainer.tsx

@@ -81,7 +81,7 @@ export default function MyCrewRankingContainer(props: MyCrewRankingContainerProp
 
         {/*  랭킹 표시  */}
         <div className="mt-4 h-[220px]">
-          {ranks.length > 0 && myRank ? (
+          {ranks.length > 0 ? (
             <CrewRanking rankings={ranks} myRank={myRank} />
           ) : (
             !isLoading && (

src/layouts/CrewLayout.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom"
+
+export default function CrewLayout() {
+  return (
+    <div className="flex min-h-full min-w-[1216px] bg-[#F9F9FD] px-28 py-12">
+      <Outlet />
+    </div>
+  )
+}

src/layouts/index.ts

@@ -1,3 +1,4 @@
 export { default as Layout } from "./BaseLayout"
 export { default as AnalysisLayout } from "./AnalysisLayout"
 export { default as MonitoringLayout } from "./MonitoringLayout"
+export { default as CrewLayout } from "./CrewLayout"

src/pages/Crew.tsx

@@ -2,7 +2,7 @@ import CrewList from "@/components/Crew/CrewList"
 
 export default function Crew() {
   return (
-    <div className="h-full w-full">
+    <div className="flex w-full">
       <CrewList />
     </div>
   )

src/pages/MyCrew.tsx

@@ -162,7 +162,7 @@ export default function MyCrew() {
       <div className="mt-6 h-[280px] w-full rounded-[12px] border-[1px] border-solid border-gray-200 bg-white px-8 py-[30px]">
         {/*  랭킹 표시  */}
         <div className="h-[220px]">
-          {ranks.length > 0 && myRank ? (
+          {ranks.length > 0 ? (
             <CrewRanking rankings={ranks} myRank={myRank} />
           ) : (
             !isLoading && (

src/routes/Router.tsx

@@ -1,5 +1,6 @@
 import Modals from "@/components/Modal/Modals"
 import RoutePath from "@/constants/routes.json"
+import { CrewLayout } from "@/layouts"
 import AnalysisLayout from "@/layouts/AnalysisLayout"
 import BaseLayout from "@/layouts/BaseLayout"
 import HomeLayout from "@/layouts/HomeLayout"
@@ -39,7 +40,7 @@ const Router: React.FC = () => {
               <Route path={RoutePath.ANALYSIS} element={<AnalysisDashboard />} />
             </Route>
 
-            <Route element={<AnalysisLayout />}>
+            <Route element={<CrewLayout />}>
               <Route path={RoutePath.CREW} element={<Crew />} />
             </Route>