Merge remote-tracking branch 'origin/develop' into feat/#46

DDD-Community · Sep 25, 2024 · 9ccf8e5 · 9ccf8e5
2 parents bc7a4f2 + 8601243
commit 9ccf8e5
Show file tree

Hide file tree

Showing 19 changed files with 244 additions and 282 deletions.
diff --git a/src/api/notification.ts b/src/api/notification.ts
@@ -8,14 +8,10 @@ export interface notification {
   duration?: duration
 }
 
-export const getNotification = async (): Promise<notification | null> => {
+export const getNotification = async (): Promise<{ data: notification }> => {
   try {
     const res = await axiosInstance.get(`/pose-notifications`)
-
-    if (!res.data?.data) return null
-
-    const { id, duration } = res.data.data
-    return { id, duration }
+    return res.data
   } catch (e) {
     throw e
   }
@@ -24,19 +20,18 @@ export const getNotification = async (): Promise<notification | null> => {
 export const registerNotification = async (notification: notification): Promise<notification> => {
   try {
     const res = await axiosInstance.post(`/pose-notifications`, { ...notification })
-    const { id, duration } = res.data.data
-    return { id, duration }
+    return res.data.data
   } catch (e) {
     throw e
   }
 }
 
-export const updateNotification = async (notification: notification): Promise<notification> => {
-  try {
-    const res = await axiosInstance.patch(`/pose-notifications/${notification.id}`, { ...notification })
-    const { id, isActive, duration } = res.data.data
-    return { id, isActive, duration }
-  } catch (e) {
-    throw e
-  }
-}
+// export const updateNotification = async (notification: notification): Promise<notification> => {
+//   try {
+//     const res = await axiosInstance.patch(`/pose-notifications/${notification.id}`, { ...notification })
+//     const { id, isActive, duration } = res.data.data
+//     return { id, isActive, duration }
+//   } catch (e) {
+//     throw e
+//   }
+// }
diff --git a/src/components/Crew/CrewRanking.tsx b/src/components/Crew/CrewRanking.tsx
@@ -1,41 +1,57 @@
 import Crew1stCrownIcon from "@assets/icons/crew-1st-crown.svg?react"
 
 const RankPillar = ({ rank, name, score, height }: any) => {
-  const rankStyleMap: { gap: string; bgColor: string; fontSize: string }[] = [
+  const rankStyleMap: { gap: number | string; bgColor: string; fontSize: string; fontWeight: string }[] = [
     {
-      gap: "6",
+      gap: 24,
       bgColor: "#8BBAFE",
       fontSize: "32px",
+      fontWeight: "600",
     },
     {
-      gap: "6",
+      gap: 24,
       bgColor: "#DCEBFD",
       fontSize: "22px",
+      fontWeight: "500",
     },
     {
-      gap: "4",
+      gap: 16,
       bgColor: "#DCEBFD",
       fontSize: "22px",
+      fontWeight: "500",
     },
   ]
 
   const style = rankStyleMap[rank - 1]
 
   return (
-    <div className="flex flex-col items-center text-zinc-800" style={{ height }}>
+    <div className="flex flex-col items-center text-zinc-800">
       <div
-        className={`flex w-[180px] flex-grow flex-col items-center justify-end py-6 gap-${style.gap} rounded-[12px]`}
+        className={`flex w-[180px] flex-col items-center rounded-[12px] py-6`}
         style={{
-          minHeight: "100px",
           backgroundColor: style.bgColor,
+          gap: style.gap,
+          height,
         }}
       >
-        <div className="flex flex-col items-center">
-          {rank === 1 && <Crew1stCrownIcon className="mb-2 h-6 w-6" />}
-          <div className={`font-medium text-[${rankStyleMap[rank - 1].fontSize}]`}>{rank}등</div>
+        <div className="flex flex-col items-center gap-2">
+          {rank === 1 && (
+            <div className="">
+              <Crew1stCrownIcon className="h-6 w-6" />
+            </div>
+          )}
+          <div
+            className={`font-medium`}
+            style={{
+              fontSize: style.fontSize,
+              fontWeight: style.fontWeight,
+            }}
+          >
+            {rank}등
+          </div>
         </div>
-        <div className="text-xl font-semibold">{name}</div>
-        <div className="text-[15px] font-normal ">틀어짐 {score}회</div>
+        <div className="text-[20px] font-semibold">{name}</div>
+        <div className="text-[15px] font-normal ">자세 경고 {score}회</div>
       </div>
     </div>
   )
@@ -60,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="100%" />
-        <RankPillar rank={2} name={topThree[1].name} score={topThree[1].score} height="82%" />
-        <RankPillar rank={3} name={topThree[2].name} score={topThree[2].score} height="72%" />
+        <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" />
       </div>
 
       {/* 전체 랭킹 목록 */}

diff --git a/src/components/Crew/MyCrew/CrewRanking.tsx b/src/components/Crew/MyCrew/CrewRanking.tsx
diff --git a/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx b/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx
@@ -1,7 +1,7 @@
 import SendInvitationIcon from "@assets/icons/crew-send-invitation.svg?react"
 import CrewUserIcon from "@assets/icons/crew-user-icon.svg?react"
 import { Link } from "react-router-dom"
-import CrewRanking from "./CrewRanking"
+import CrewRanking from "../CrewRanking"
 
 import RoutePath from "@/constants/routes.json"
 import MyCrewHeader from "./MyCrewHeader"
@@ -58,9 +58,7 @@ export default function MyCrewRankingContainer(props: MyCrewRankingContainerProp
         </div>
 
         {/*  랭킹 표시  */}
-        <div className="mt-4 h-[220px]">
-          {ranks.length > 0 && myRank && <CrewRanking rankings={ranks} myRank={myRank} />}
-        </div>
+        <div className="mt-4">{ranks.length > 0 && myRank && <CrewRanking rankings={ranks} myRank={myRank} />}</div>
       </div>
     </div>
   )

diff --git a/src/components/PoseDetector.tsx b/src/components/PoseDetector.tsx
@@ -18,6 +18,7 @@ import Camera from "./Camera"
 import Controls from "./Posture/Controls"
 import GuidePopupModal from "./Posture/GuidePopup/GuidePopupModal"
 import PostureMessage from "./Posture/PostureMessage"
+import useNotification from "@/hooks/useNotification"
 
 const PoseDetector: React.FC = () => {
   const [isScriptLoaded, setIsScriptLoaded] = useState<boolean>(false)
@@ -53,7 +54,8 @@ const PoseDetector: React.FC = () => {
   const createSnapMutation = useCreateSnaphot()
   const sendPoseMutation = useSendPose()
 
-  const userNoti = useNotificationStore((state) => state.notification)
+  // const userNoti = useNotificationStore((state) => state.notification)
+  const { notification } = useNotification()
 
   const { requestNotificationPermission } = usePushNotification()
   const { hasPermission } = useCameraPermission()
@@ -152,7 +154,7 @@ const PoseDetector: React.FC = () => {
         const _isTextNeck = detectTextNeck(snapRef.current, results, true, 0.88)
         const _isHandOnChin = detectHandOnChin(snapRef.current, results)
         const _isTailboneSit = detectTailboneSit(snapRef.current, results)
-        const _isShowNoti = userNoti?.duration === "IMMEDIATELY" && userNoti?.isActive
+        const _isShowNoti = notification?.duration === "IMMEDIATELY" && notification?.isActive
 
         if (_isShoulderTwist !== null) setIsShoulderTwist(_isShoulderTwist)
         if (_isTextNeck !== null) setIsTextNeck(_isTextNeck)
@@ -177,7 +179,15 @@ const PoseDetector: React.FC = () => {
         if (canvasRef.current) drawPose(results, canvasRef.current)
       }
     },
-    [setIsShoulderTwist, setIsTextNeck, setIsHandOnChin, setIsTailboneSit, isSnapShotSaved, managePoseTimer, userNoti]
+    [
+      setIsShoulderTwist,
+      setIsTextNeck,
+      setIsHandOnChin,
+      setIsTailboneSit,
+      isSnapShotSaved,
+      managePoseTimer,
+      notification,
+    ]
   )
 
   const detectStart = useCallback(
@@ -306,22 +316,20 @@ const PoseDetector: React.FC = () => {
   }, [snapshot])
 
   useEffect(() => {
-    if (!isSnapShotSaved || !userNoti) return
+    if (!isSnapShotSaved || !notification) return
 
     clearCnt()
     clearInterval(notificationTimer.current)
     notificationTimer.current = null
 
-    if (userNoti.isActive && userNoti.duration && userNoti.duration !== "IMMEDIATELY") {
-      const t = getDurationInMinutes(userNoti?.duration)
+    if (notification.isActive && notification.duration && notification.duration !== "IMMEDIATELY") {
+      const t = getDurationInMinutes(notification.duration)
       notificationTimer.current = setInterval(() => {
-        if (userNoti.duration) {
-          sendNotification()
-          clearCnt()
-        }
+        sendNotification()
+        clearCnt()
       }, 1000 * 60 * t)
     }
-  }, [userNoti, isSnapShotSaved])
+  }, [notification, isSnapShotSaved])
 
   // 팝업 열기
   const handleShowPopup = (): void => {

diff --git a/src/components/Posture/GuidePopup/GuidePopupModal.tsx b/src/components/Posture/GuidePopup/GuidePopupModal.tsx
@@ -25,8 +25,11 @@ const GuidePopupModal = ({ onClose }: { onClose: () => void }): ReactElement =>
         {step === 1 && (
           <>
             <SnapshotGuide />
-            <button className="w-[354px] rounded-full bg-[#1A75FF] px-4 py-3 text-white" onClick={onClose}>
-              모니터링 시작하기
+            <button
+              className="h-[50px] w-[354px] rounded-full bg-[#1A75FF] px-[39px] py-3 text-white"
+              onClick={onClose}
+            >
+              확인
             </button>
           </>
         )}

diff --git a/src/components/Posture/GuidePopup/ServiceIntroduction.tsx b/src/components/Posture/GuidePopup/ServiceIntroduction.tsx
@@ -5,17 +5,17 @@ export default function ServiceIntroduction() {
         <div className="h-2 w-2 rounded-full bg-[#1A75FF]"></div>
         <div className="h-2 w-2 rounded-full bg-zinc-300"></div>
       </div>
-      <div className="mb-6">
-        <div className="mb-3 text-center text-[30px] font-bold leading-10 text-[#1E2535]">
+      <div className="mb-6 flex flex-col items-center">
+        <div className="mb-3 text-center text-[30px] font-bold leading-10 leading-10 text-[#1E2535]">
           자세공작소는 실시간 모니터링으로 <br />
           바른 자세 유지를 돕는 서비스입니다
         </div>
-        <span className="text-[14px] font-normal text-zinc-500">
+        <span className="text-[14px] font-normal leading-[22px] text-zinc-500">
           더 세밀한 모니터링을 위해, 최초 1회 자세 기준점 설정이 필요합니다.
         </span>
       </div>
       {/* content */}
-      <div className="mb-8 flex gap-4">
+      <div className="mb-8 flex h-[172px] gap-4">
         <div className="flex w-80 flex-col items-center rounded-[17px] bg-[#EFEFF0] px-10 py-6">
           <div className="mb-4 h-[24px] w-[24px] rounded-full bg-[#5A9CFF] text-center text-[15px] font-semibold text-white">
             1