From 2304b998d8ba5f3d46c47a9821f391d9d4ac83aa Mon Sep 17 00:00:00 2001
From: "lkh14011424@gmail.com" <lkh14011424@gmail.com>
Date: Sun, 26 Jan 2025 12:17:03 +0900
Subject: [PATCH] =?UTF-8?q?[feat/#146]=20=ED=81=AC=EB=A3=A8=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EC=9D=B4=EC=8A=88=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Crew/CrewList.tsx              |  9 ++++--
 src/components/Crew/CrewRanking.tsx           | 28 +++++++++++--------
 .../Crew/MyCrew/MyCrewRankingContainer.tsx    |  2 +-
 src/layouts/CrewLayout.tsx                    |  9 ++++++
 src/layouts/index.ts                          |  1 +
 src/pages/Crew.tsx                            |  2 +-
 src/pages/MyCrew.tsx                          |  2 +-
 src/routes/Router.tsx                         |  3 +-
 8 files changed, 39 insertions(+), 17 deletions(-)
 create mode 100644 src/layouts/CrewLayout.tsx

diff --git a/src/components/Crew/CrewList.tsx b/src/components/Crew/CrewList.tsx
index 54d37eb..b0671a8 100644
--- a/src/components/Crew/CrewList.tsx
+++ b/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 && (
diff --git a/src/components/Crew/CrewRanking.tsx b/src/components/Crew/CrewRanking.tsx
index 0240565..9f422b4 100644
--- a/src/components/Crew/CrewRanking.tsx
+++ b/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) => (
diff --git a/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx b/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx
index f0c9004..8b558ea 100644
--- a/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx
+++ b/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 && (
diff --git a/src/layouts/CrewLayout.tsx b/src/layouts/CrewLayout.tsx
new file mode 100644
index 0000000..405fa02
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
index 9cb673c..9d08132 100644
--- a/src/layouts/index.ts
+++ b/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"
diff --git a/src/pages/Crew.tsx b/src/pages/Crew.tsx
index ba8839b..3ffe219 100644
--- a/src/pages/Crew.tsx
+++ b/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>
   )
diff --git a/src/pages/MyCrew.tsx b/src/pages/MyCrew.tsx
index 3e32bbe..2918604 100644
--- a/src/pages/MyCrew.tsx
+++ b/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 && (
diff --git a/src/routes/Router.tsx b/src/routes/Router.tsx
index 42e8c86..b9d1a44 100644
--- a/src/routes/Router.tsx
+++ b/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>