Merge pull request #89 from DDD-Community/feat/#46

[feat/#46] 자세 랭킹 없는 경우 이미지 표시, PostureCrew에 가입한 그룹 없는 경우 표시, 모니터링 화면 스타일 수정
DDD-Community · Sep 25, 2024 · 7fea665 · 7fea665
2 parents 7e20864 + 8a51ec9
commit 7fea665
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 15 deletions.
diff --git a/src/assets/images/mycrew-no-ranks.png b/src/assets/images/mycrew-no-ranks.png
diff --git a/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx b/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx
@@ -7,6 +7,7 @@ import RoutePath from "@/constants/routes.json"
 import MyCrewHeader from "./MyCrewHeader"
 import { groupUserRank, MyGroupData } from "@/api"
 import dayjs from "dayjs"
+import NoRanksImage from "@/assets/images/mycrew-no-ranks.png"
 
 interface MyCrewRankingContainerProps {
   myGroupData: MyGroupData
@@ -58,7 +59,18 @@ export default function MyCrewRankingContainer(props: MyCrewRankingContainerProp
         </div>
 
         {/*  랭킹 표시  */}
-        <div className="mt-4">{ranks.length > 0 && myRank && <CrewRanking rankings={ranks} myRank={myRank} />}</div>
+        <div className="mt-4">
+          {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>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </div>
   )

diff --git a/src/components/Posture/Controls.tsx b/src/components/Posture/Controls.tsx
@@ -8,21 +8,21 @@ const Controls: React.FC<{
   return (
     <div className="absolute bottom-0 flex w-full items-center justify-center gap-[16px] p-[50px] text-white">
       <button
-        className="flex w-[260px] items-center justify-center rounded rounded-full bg-white bg-opacity-80 px-10 py-3 font-semibold leading-[32px] text-zinc-900"
+        className="flex w-[230px] items-center justify-center rounded rounded-full bg-white bg-opacity-80 px-10 py-3 font-semibold leading-[32px] text-zinc-900"
         onClick={handleShowPopup}
       >
         <div className="flex flex-row items-center gap-2">
           <GuideIcon />
-          <span>가이드 다시 볼게요!</span>
+          <span>가이드 다시 보기</span>
         </div>
       </button>
       <button
-        className="flex w-[260px] items-center justify-center rounded rounded-full bg-[#1A75FF] bg-opacity-80 px-10 py-3 font-semibold leading-[32px] text-white"
+        className="flex w-[230px] items-center justify-center rounded rounded-full bg-[#1A75FF] px-10 py-3 font-semibold leading-[32px] text-white"
         onClick={getInitSnap}
       >
         <div className="flex flex-row items-center gap-2">
           <PostureCheckIcon />
-          바른자세를 취했어요!
+          스냅샷 촬영하기
         </div>
       </button>
     </div>

diff --git a/src/components/Posture/PostrueCrew.tsx b/src/components/Posture/PostrueCrew.tsx
@@ -14,6 +14,10 @@ import RankingGuideToolTip from "@assets/images/ranking-guide.png"
 import SelectBox from "@components/SelectBox"
 import { ReactElement, useCallback, useEffect, useRef, useState } from "react"
 import { modals } from "../Modal/Modals"
+import useMyGroup from "@/hooks/useMyGroup"
+import EmptyGroupImage from "@/assets/images/crew-empty.png"
+import { useNavigate } from "react-router-dom"
+import RoutePath from "@/constants/routes.json"
 
 interface IPostureCrew {
   groupUserId: number
@@ -131,6 +135,8 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
   const { notification, setNotification } = useNotification()
   const updateNotiMutation = useModifyNoti()
   const { hasPermission } = usePushNotification()
+  const { myGroupData } = useMyGroup()
+  const navigate = useNavigate()
 
   const onClickCloseSideNavButton = (): void => {
     toggleSidebar()
@@ -227,12 +233,12 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
           </div>
         </div>
         <div>
-          {isConnected === "loading" && <p>서버와 연결 중입니다.</p>}
-          {isConnected === "disconnected" && <p>서버와 연결 끊어졌습니다.</p>}
-          {isConnected === "success" && crews.length === 0 && (
+          {isConnected === "loading" && myGroupData && <p>서버와 연결 중입니다.</p>}
+          {isConnected === "disconnected" && myGroupData && <p>서버와 연결 끊어졌습니다.</p>}
+          {isConnected === "success" && myGroupData && crews.length === 0 && (
             <p className="text-center text-gray-500">접속자가 없습니다.</p>
           )}
-          {isConnected === "success" && crews.length > 0 && (
+          {isConnected === "success" && myGroupData && crews.length > 0 && (
             <ul className="space-y-2">
               {crews.map((user, index) => (
                 <li key={index} className="flex h-14 w-[200px] items-center justify-between rounded-full bg-white">
@@ -253,17 +259,35 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
               ))}
             </ul>
           )}
+          {!myGroupData && (
+            <div className="flex flex-col items-center justify-center rounded-2xl bg-zinc-100 px-4 py-8">
+              <div className="text-center text-sm font-medium">
+                아직 가입한
+                <br />
+                크루가 없어요
+              </div>
+              <img src={EmptyGroupImage} />
+              <button
+                className="flex w-[144px] justify-center rounded-full bg-[#1A75FF] py-[10px] text-sm font-semibold text-white"
+                onClick={() => {
+                  navigate(RoutePath.CREW)
+                }}
+              >
+                크루 가입하기
+              </button>
+            </div>
+          )}
         </div>
       </div>
       <div className="mt-auto pb-[7px] pl-0.5">
         <button className="pb-[10px]" onClick={onClickReTakeSnapShot}>
-          <div className="flex gap-[10px]">
+          <div className="flex items-center gap-[10px]">
             <PostureRetakeIcon />
             <div>스냅샷 재촬영</div>
           </div>
         </button>
         <button onClick={onClickPostureGuide}>
-          <div className="flex gap-[10px]">
+          <div className="flex items-center gap-[10px]">
             <PostureGuide />
             <div>바른자세 가이드</div>
           </div>

diff --git a/src/components/Posture/PostureMessage.tsx b/src/components/Posture/PostureMessage.tsx
@@ -31,9 +31,9 @@ const PostureMessage: React.FC<{
 
   return (
     <div
-      className={`absolute top-0 flex w-full items-center justify-center rounded-t-3xl bg-[#1A1B1D] bg-opacity-75 py-[27px] text-lg font-medium ${
-        !hasPermission ? "text-orange-400" : "text-white"
-      }`}
+      className={`absolute top-0 flex w-full items-center justify-center rounded-t-3xl backdrop-blur ${
+        isSnapShotSaved ? "bg-[#1A1B1D] bg-opacity-60" : "bg-[#1A75FF66] bg-opacity-40"
+      } py-[27px] text-lg font-medium ${!hasPermission ? "text-orange-400" : "text-white"}`}
     >
       {!hasPermission
         ? "브라우저의 카메라 권한을 허용해주세요."

diff --git a/src/pages/MyCrew.tsx b/src/pages/MyCrew.tsx
@@ -6,6 +6,7 @@ import FlagIcon from "@assets/icons/crew-my-crew-header-flag.svg?react"
 import CrewLeader from "@assets/icons/crew-my-crew-leader-icon.svg?react"
 import SendInvitationIcon from "@assets/icons/crew-send-invitation.svg?react"
 import CrewUserIcon from "@assets/icons/crew-user-icon.svg?react"
+import NoRanksImage from "@/assets/images/mycrew-no-ranks.png"
 import dayjs from "dayjs"
 import { modals } from "@/components/Modal/Modals"
 import { useNavigate } from "react-router-dom"
@@ -119,7 +120,16 @@ 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 && <CrewRanking rankings={ranks} myRank={myRank} />}
+          {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>
+              </div>
+            </div>
+          )}
         </div>
       </div>