[feat/#46] 디자인 수정사항 반영, 크루 백화 현상 수정

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<boolean>(false)
   // Dropdown 외부 클릭 감지 메모이제이션
   const dropdownRef = useRef<HTMLDivElement>(null)
@@ -162,6 +162,7 @@ const CrewList = (): ReactElement => {
     <div className="flex h-full w-full flex-col">
       {myGroupData && Object.keys(myGroupData).length > 0 && (
         <MyCrewRankingContainer
+          isLoading={isGroupLoading}
           myGroupData={myGroupData}
           ranks={ranks}
           myRank={myRank}

src/components/Crew/CrewRanking.tsx

@@ -76,9 +76,9 @@ 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">
-        <RankPillar rank={1} name={topThree[0].name} score={topThree[0].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" />
+        {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" />}
       </div>
 
       {/* 전체 랭킹 목록 */}

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 (
     <div className="mb-12">
       <MyCrewHeader openCreateModal={openCreateModal} />
@@ -63,12 +64,14 @@ export default function MyCrewRankingContainer(props: MyCrewRankingContainerProp
           {ranks.length > 0 && myRank ? (
             <CrewRanking rankings={ranks} myRank={myRank} />
           ) : (
-            <div className="flex justify-center">
-              <div className="flex w-fit flex-col items-center gap-2">
-                <img src={NoRanksImage} />
-                <div>표시할 랭킹이 없습니다.</div>
+            !isLoading && (
+              <div className="flex justify-center">
+                <div className="flex w-fit flex-col items-center gap-2">
+                  <img src={NoRanksImage} />
+                  <div>표시할 랭킹이 없습니다.</div>
+                </div>
               </div>
-            </div>
+            )
           )}
         </div>
       </div>

src/components/SideNav.tsx

@@ -57,7 +57,7 @@ export default function SideNav(): React.ReactElement {
   )
 
   return (
-    <aside className="w-[224px] flex-none bg-zinc-900">
+    <aside className="w-[224px] flex-none border-r-[1px] border-zinc-700 bg-zinc-900">
       <div className="flex h-full flex-col justify-between text-white">
         {/* Top Section */}
         <div>
@@ -77,7 +77,7 @@ export default function SideNav(): React.ReactElement {
           </div>
 
           {/* Navigation Links */}
-          <nav className="mt-10">
+          <nav className="mr-4 mt-10">
             <ul>
               {navItems.map(({ icon: Icon, label, link }) => {
                 const isActive = location.pathname.includes(link)
@@ -96,9 +96,6 @@ export default function SideNav(): React.ReactElement {
 
         {/* Bottom Section */}
         <div className="p-6">
-          {/* Divider */}
-          <div className="mb-6 border-t" style={{ borderColor: "#373C42" }} />
-
           {/* Footer Links */}
           <div className="mb-12">
             <ul>

src/pages/MonitoringPage.tsx

@@ -42,7 +42,7 @@ const MonitoringPage: React.FC = () => {
     <div className="relative flex h-full w-full overflow-hidden">
       {/* Main content area */}
       <div className={`flex-grow transition-all duration-300 ${isSidebarOpen && !isPopupOpen ? "pr-[232px]" : ""}`}>
-        <div className="relative flex h-full items-center justify-center">
+        <div className="relative flex h-full items-center justify-center p-3">
           <div className="aspect-video w-full max-w-[1280px]">
             <PoseDetector />
           </div>

src/pages/MyCrew.tsx

@@ -123,12 +123,14 @@ export default function MyCrew() {
           {ranks.length > 0 && myRank ? (
             <CrewRanking rankings={ranks} myRank={myRank} />
           ) : (
-            <div className="flex h-full items-center justify-center">
-              <div className="flex w-fit flex-col items-center gap-2">
-                <img src={NoRanksImage} />
-                <div>표시할 랭킹이 없습니다.</div>
+            !isLoading && (
+              <div className="flex h-full items-center justify-center">
+                <div className="flex w-fit flex-col items-center gap-2">
+                  <img src={NoRanksImage} />
+                  <div>표시할 랭킹이 없습니다.</div>
+                </div>
               </div>
-            </div>
+            )
           )}
         </div>
       </div>