-
)
}
-
-export default Camera
diff --git a/src/components/Crew/CrewItem.tsx b/src/components/Crew/CrewItem.tsx
new file mode 100644
index 0000000..f5539c5
--- /dev/null
+++ b/src/components/Crew/CrewItem.tsx
@@ -0,0 +1,46 @@
+import { group } from "@/api"
+import PrivateCrewIcon from "@assets/icons/crew-private-icon.svg?react"
+import CrewUserIcon from "@assets/icons/crew-user-icon.svg?react"
+import { ReactElement } from "react"
+
+interface CrewItemProps {
+ group: group
+ onClickDetail: () => void
+}
+
+const CrewItem = (props: CrewItemProps): ReactElement => {
+ const { group, onClickDetail } = props
+
+ return (
+
+ {/* crew name */}
+
+ )
+}
+
+export default CrewItem
diff --git a/src/components/Crew/CrewList.tsx b/src/components/Crew/CrewList.tsx
new file mode 100644
index 0000000..ade6972
--- /dev/null
+++ b/src/components/Crew/CrewList.tsx
@@ -0,0 +1,218 @@
+import { group, groupsReq, sort } from "@/api"
+import EmptyCrewImage from "@/assets/images/crew-empty.png"
+import CrewItem from "@/components/Crew/CrewItem"
+import { useGetGroups } from "@/hooks/useGroupMutation"
+import { useModals } from "@/hooks/useModals"
+import useMyGroup from "@/hooks/useMyGroup"
+import CreateCrewIcon from "@assets/icons/crew-create-button-icon.svg?react"
+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 RoutePath from "@/constants/routes.json"
+
+const SORT_LIST = [
+ { sort: "userCount,desc", label: "크루원 많은 순" },
+ { sort: "createdAt,desc", label: "최신 생성 크루 순" },
+]
+
+const CrewList = (): ReactElement => {
+ const navigate = useNavigate()
+ const { myGroupData, ranks, myRank, refetchAll, isLoading: isGroupLoading } = useMyGroup()
+ const [isDropdownOpen, setIsDropdownOpen] = useState
+ {group.isHidden &&
+ {/* crew user cnt */}
+ {group.name}
+
+
+ {/* detail button */}
+
+ {`${group.userCount}/${group.userCapacity}명`}
+ {
+ setParams((prev) => ({ ...prev, sort: s.sort as sort }))
+ setIsDropdownOpen(false)
+ }}
+ >
+ {s.label}
+
+ ))
+ }, [])
+
+ // createGroupList 메모이제이션
+ const createGroupList = useCallback(
+ (_groups: group[] | undefined): JSX.Element | null => {
+ if (!_groups) return null
+
+ if (_groups.length === 0) {
+ return (
+
+ 
+
+ )
+ }
+
+ return (
+
+ {"만들어진 크루가 아직 없습니다."}
+
+
+ {_groups.map((g) => (
+ openJoinCrewModal(g.id)} />
+ ))}
+
+ )
+ },
+ [openJoinCrewModal]
+ )
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent): void => {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target as HTMLElement)) {
+ setIsDropdownOpen(false)
+ }
+ }
+
+ document.addEventListener("mousedown", handleClickOutside)
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside)
+ }
+ }, [])
+
+ // URL에서 groupId 추출 후 모달 열기
+ useEffect(() => {
+ const groupId = searchParams.get("groupId")
+
+ if (groupId) {
+ openJoinCrewModal(Number(groupId))
+ const removeGroupIdFromUrl = (): void => {
+ searchParams.delete("groupId")
+ setSearchParams(searchParams)
+ }
+ removeGroupIdFromUrl()
+ }
+ }, [openJoinCrewModal, searchParams, setSearchParams])
+
+ console.log("ranks: ", ranks)
+
+ return (
+
+ {myGroupData && Object.keys(myGroupData).length > 0 && (
+
+ )
+}
+
+export default CrewList
diff --git a/src/components/Crew/CrewRanking.tsx b/src/components/Crew/CrewRanking.tsx
new file mode 100644
index 0000000..0240565
--- /dev/null
+++ b/src/components/Crew/CrewRanking.tsx
@@ -0,0 +1,96 @@
+import Crew1stCrownIcon from "@assets/icons/crew-1st-crown.svg?react"
+
+const RankPillar = ({ rank, name, score, height }: any) => {
+ const rankStyleMap: { gap: number | string; bgColor: string; fontSize: string; fontWeight: string }[] = [
+ {
+ gap: 24,
+ bgColor: "#8BBAFE",
+ fontSize: "32px",
+ fontWeight: "600",
+ },
+ {
+ gap: 24,
+ bgColor: "#DCEBFD",
+ fontSize: "22px",
+ fontWeight: "500",
+ },
+ {
+ gap: 16,
+ bgColor: "#DCEBFD",
+ fontSize: "22px",
+ fontWeight: "500",
+ },
+ ]
+
+ const style = rankStyleMap[rank - 1]
+
+ return (
+
+
+
+ {/* sort */}
+
+ 전체크루
+ {isLoading ? "" : `(${data?.totalCount})`}
+
+ {(!myGroupData || (myGroupData && Object.keys(myGroupData).length === 0)) && (
+
+
+ )}
+ 크루 만들기
+
+
+
+ {/* list */}
+ {isLoading ? "로딩 중입니다..." : isError ? "데이터를 불러오는데 실패했습니다." : createGroupList(data?.data)}
+
+
+
+ {/* dropdown */}
+ {SORT_LIST.find((s) => s.sort === params.sort)?.label}
+
+ {createSortList}
+
+
+
+ )
+}
+
+const RankCard = ({ rank, name, score, isMe }: any) => (
+
+ {rank === 1 &&
+
+ {rank}등
+
+ {name}
+ 자세 경고 {score}회
+
+
+)
+
+const CrewRanking = ({ rankings, myRank }: { rankings: any[]; myRank: any }) => {
+ const topThree = rankings.slice(0, 3)
+
+ return (
+
+
+ 자세경고 {score}회
+ {rank}
+ {isMe ? "나" : name}
+
+ {/* 1, 2, 3등 랭킹 */}
+
+ )
+}
+
+export default CrewRanking
diff --git a/src/components/Crew/MyCrew/MyCrewHeader.tsx b/src/components/Crew/MyCrew/MyCrewHeader.tsx
new file mode 100644
index 0000000..6e67d30
--- /dev/null
+++ b/src/components/Crew/MyCrew/MyCrewHeader.tsx
@@ -0,0 +1,24 @@
+import CreateCrewIcon from "@assets/icons/crew-create-button-icon.svg?react"
+
+interface MyCrewHeaderProps {
+ openCreateModal?: () => void
+ isDisplayedCreationButton?: boolean
+}
+
+export default function MyCrewHeader(props: MyCrewHeaderProps) {
+ const { openCreateModal, isDisplayedCreationButton = false } = props
+ return (
+
+ {topThree[0] &&
+
+ {/* 전체 랭킹 목록 */}
+
+
+
+
+
+
+
+ {rankings.map((rank, index) => (
+
+
+
+ )
+}
diff --git a/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx b/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx
new file mode 100644
index 0000000..db42fe3
--- /dev/null
+++ b/src/components/Crew/MyCrew/MyCrewRankingContainer.tsx
@@ -0,0 +1,80 @@
+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 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 {
+ isLoading: boolean
+ myGroupData: MyGroupData
+ ranks: groupUserRank[]
+ myRank: groupUserRank | undefined
+ openCreateModal: () => void
+ openInviteModal: () => void
+}
+
+export default function MyCrewRankingContainer(props: MyCrewRankingContainerProps) {
+ const { isLoading, myGroupData, ranks, myRank, openCreateModal, openInviteModal } = props
+ return (
+ 나의 크루
+ {isDisplayedCreationButton && (
+
+
+ )}
+ 크루 만들기
+
+
+ )
+}
diff --git a/src/components/Dashboard/Chart.tsx b/src/components/Dashboard/Chart.tsx
new file mode 100644
index 0000000..193c523
--- /dev/null
+++ b/src/components/Dashboard/Chart.tsx
@@ -0,0 +1,53 @@
+import ECharts from "echarts-for-react"
+
+const poseTypeLabels: any = {
+ TURTLE_NECK: "거북목",
+ SHOULDER_TWIST: "어깨 틀어짐",
+ CHIN_UTP: "턱 괴기",
+ TAILBONE_SIT: "꼬리뼈로 앉기",
+}
+
+const PoseAnalysisChart = ({ data }: { data: any[] }) => {
+ const options = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ },
+ legend: {
+ data: Object.values(poseTypeLabels),
+ top: 20,
+ },
+ grid: {
+ left: "3%",
+ right: "3%",
+ bottom: "5%",
+ top: "25%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: data.map((item) => item.date),
+ },
+ yAxis: {
+ type: "value",
+ minInterval: 1,
+ axisLabel: {
+ formatter: "{value}",
+ },
+ },
+ series: Object.keys(poseTypeLabels).map((poseType) => ({
+ name: poseTypeLabels[poseType],
+ type: "line",
+ data: data.map((item) => {
+ const poseCount = item.count.find((c: any) => c.type === poseType)
+ return poseCount ? poseCount.count : 0
+ }),
+ })),
+ }
+
+ return
+
+
+
+ {/* 랭킹 헤더 */}
+
+
+
+ {myGroupData.name}
+
+
+
+ 상세보기 {">"}
+
+
+
+
+ {/* 랭킹 표시 */}
+
+ 바른자세 랭킹
+
+
+ 최근 1시간
+ |
+ {dayjs().format("YYYY.MM.DD HH:mm")} 기준
+
+
+ {ranks.length > 0 && myRank ? (
+
+
+
+ )
+ )}
+
+ 
+
+ 표시할 랭킹이 없습니다.
+
+ {/* header */}
+
+
+
+
+ {"크루 만들기"}
+
+ {/* crew owner */}
+
+
+ {/* button */}
+
+
+
+
+ {/* crew description */}
+ 크루명
+
+
+
+
+
+ {getNameCheckedMsg(isPossible)}
+
+
+
+
+ {/* crew private */}
+ 크루 소개
+
+
+
+ {`${description.length}/300`}
+
+
+ 공개여부 설정
+
+
+
+ {isHidden ?
+
+ 비공개 크루
+
+ {/* blur 처리 */}
+
+
+
+
+
+ {/* content */}
+ 바른 자세 가이드
+
+
+
+
+ 
+
+
+
+
+
+ 1
+
+ 머리와 목을 일직선으로 곧게 펴기
+
+
+
+ 2
+
+ 양쪽 어깨 일직선 유지하기
+
+
+
+ 3
+
+ 팔은 책상 위에 수평으로 두기
+
+
+
+ 4
+
+ 등과 허리는 등받이에 지지하기
+
+
+ {/* header */}
+
+
+
+
+ {"초대하기"}
+
+
+
+ {/* button */}
+
+ {isCopied &&
+ 아래 초대 링크를 복사해 크루에 초대해 보세요.
+
+ {currentUrl}
+ 초대 링크가 복사되었어요.
}
+
+
+ )
+ }
+
+ return (
+
+
+ 오늘 바른자세 랭킹
+ {myGroupData?.id !== id && (
+ 크루에 가입하면 볼 수 있어요
+ )}
+
+
+
+ {data?.ranks.map((r, i) => (
+
+
+
+ ))}
+ {`${r.rank}등`}
+
+ {myGroupData?.id === id ? `${r.name}` : "?"}
+
+
+ {/* header */}
+
+ )}
+
+
+ {!data?.isHidden ? (
+
+ {data?.isHidden &&
+
+ {data?.name}
+
+
+ {`${data?.userCount}/${data?.userCapacity}명`}
+
+ {/* crew owner */}
+
+ ) : (
+ // private crew
+
+
+
+ {/* crew description */}
+ 크루장
+
+ {data?.ownerName}
+
+
+
+
+ {/* crew rank */}
+ {createRank()}
+ 크루소개
+
+ {data?.description}
+
+
+
+ )}
+
+ {/* button */}
+
+ {myGroupData && (
+ 비공개 크루입니다. 비밀번호를 입력해주세요. (숫자 4자리)
+
+
+ 비밀번호가 틀렸습니다.
+
+ 1개의 크루에만 가입할 수 있어요.
+ )}
+
+ {/* header */}
+
+
+
+
+ 의견 보내기
+
+ {/* crew owner */}
+
+
+ {/* button */}
+
+
+
+
+ 제목
+
+
+
+
+
+
+ {/* crew description */}
+ 이메일
+
+
+
+ {email && !isValidEmail && (
+ 올바른 이메일을 입력해주세요.
+ )}
+
+
+ 상세 내용
+
+
+
+ {`${description.length}/500`}
+
+ {/* header */}
+
+
+
+
+ {"크루 만들기 불가"}
+
+
+
+ {/* buttons */}
+
+ {"이미 속한 크루가 있어 크루를 만들 수 없어요.\n 탈퇴 후, 크루를 만들어주세요."}
+
+
+
+
+
+
+ {/* header */}
+
+
+
+
+ {"탈퇴하기"}
+
+
+
+ {/* buttons */}
+ 정말 크루를 탈퇴하시겠어요?
+
+
+
+
+
+
,
+ getModalRoot()
+ )
+}
+
+export default ModalContainer
diff --git a/src/components/PoseDetector.tsx b/src/components/PoseDetector.tsx
index fcca093..d9e80fe 100644
--- a/src/components/PoseDetector.tsx
+++ b/src/components/PoseDetector.tsx
@@ -1,38 +1,74 @@
-import { useState, useEffect, useRef, useCallback } from "react"
-import { Camera } from "."
+import { position } from "@/api"
+import { duration } from "@/api/notification"
+import { poseType } from "@/api/pose"
+import { useCameraPermission } from "@/hooks/useCameraPermission"
+import { useGuidePopup } from "@/hooks/useGuidePopup"
+import { useModals } from "@/hooks/useModals"
+import useNotification from "@/hooks/useNotification"
+import { useSendPose } from "@/hooks/usePoseMutation"
+import usePushNotification from "@/hooks/usePushNotification"
+import { useCreateSnaphot } from "@/hooks/useSnapshotMutation"
+import { useSnapShotStore } from "@/store/SnapshotStore"
import type { pose } from "@/utils/detector"
-import { detectSlope, detectTextNeck } from "@/utils/detector"
+import { detectHandOnChin, detectSlope, detectTailboneSit, detectTextNeck } from "@/utils/detector"
import { drawPose } from "@/utils/drawer"
-import usePushNotification from "@/hooks/usePushNotification"
import { worker } from "@/utils/worker"
+import CheckLottie from "@assets/animation/check-lottie.json"
+import ScriptLoadingLottie from "@assets/animation/script-loading-lottie.json"
+import { useCallback, useEffect, useRef, useState } from "react"
+import Lottie from "react-lottie"
+import { useLocation } from "react-router-dom"
+import Camera from "./Camera"
+import { modals } from "./Modal/Modals"
+import Controls from "./Posture/Controls"
+import GuidePopupModal from "./Posture/GuidePopup/GuidePopupModal"
+import PostureMessage from "./Posture/PostureMessage"
const PoseDetector: React.FC = () => {
- const [isScriptLoaded, setIsScriptLoaded] = useState
+ {/* Close Button */}
+
+ {/* Modal Content */}
+ {children}
+
+
+ <>
{isScriptError ? (
- "스크립트 불러오기 실패"
- ) : !isScriptLoaded ? (
- "스크립트 불러오는 중"
- ) : (
- <>
-
+ ) : (
+
+
+
)
}
diff --git a/src/components/Posture/Controls.tsx b/src/components/Posture/Controls.tsx
new file mode 100644
index 0000000..de0c168
--- /dev/null
+++ b/src/components/Posture/Controls.tsx
@@ -0,0 +1,32 @@
+import PostureCheckIcon from "@assets/icons/good-posture-check-button-icon.svg?react"
+import GuideIcon from "@assets/icons/posture-guide-button-icon.svg?react"
+
+const Controls: React.FC<{
+ getInitSnap: () => void
+ handleShowPopup: () => void
+}> = ({ getInitSnap, handleShowPopup }) => {
+ return (
+ 본 화면은 좌우가 반대로 보이고 있으니 주의하세요!
-
-
-
- {mode === "snapshot" && (
- <>
-
- 스냅샷 모드입니다. 올바른 자세를 하신 후에, 버튼을 눌러 촬영을 하면 해당 자세를 기준으로 부적절한
- 자세를 추적합니다!
-
-
-
+ {!isModalOpen && (
+ 자동 모드입니다. 자동으로 부적절한 자세를 추적합니다.
-
-
-
-
-
+ {!isSnapShotSaved && hasPermission && (
+
- 거북목 상태:
- {isTextNeck === null ? (
- "상태를 확인할 수 없습니다."
- ) : isTextNeck ? (
- "거북목 상태 입니다"
- ) : (
- "정상적인 자세 입니다"
- )}
+
)}
-
+
- 어깨 기울기: {slope === null ? "상태를 확인할 수 없습니다." : slope}
)}
-
+
+ {!isClosedInitialGuidePopup && !isInitialSnapShotExist && (
+
+
+
+
+ )
+}
+
+export default Controls
diff --git a/src/components/Posture/GuidePopup/GuidePopupModal.tsx b/src/components/Posture/GuidePopup/GuidePopupModal.tsx
new file mode 100644
index 0000000..a2dc72a
--- /dev/null
+++ b/src/components/Posture/GuidePopup/GuidePopupModal.tsx
@@ -0,0 +1,41 @@
+import { ReactElement, useState } from "react"
+import ServiceIntroduction from "./ServiceIntroduction"
+import SnapshotGuide from "./SnapshotGuide"
+
+const GuidePopupModal = ({ onClose }: { onClose: () => void }): ReactElement => {
+ const [step, setStep] = useState(0)
+ const onClickNext = () => {
+ setStep(1)
+ }
+ return (
+
+ {/* blur 처리 */}
+
+ )
+}
+
+export default GuidePopupModal
diff --git a/src/components/Posture/GuidePopup/ServiceIntroduction.tsx b/src/components/Posture/GuidePopup/ServiceIntroduction.tsx
new file mode 100644
index 0000000..e05b67f
--- /dev/null
+++ b/src/components/Posture/GuidePopup/ServiceIntroduction.tsx
@@ -0,0 +1,42 @@
+export default function ServiceIntroduction() {
+ return (
+ <>
+
+ {step === 0 && (
+ <>
+
+
+
+
+
+
+
+ {/* content */}
+
+ 자세공작소는 실시간 모니터링으로
+ 바른 자세 유지를 돕는 서비스입니다 +
+
+ 더 세밀한 모니터링을 위해, 최초 1회 자세 기준점 설정이 필요합니다.
+
+ + 바른 자세 유지를 돕는 서비스입니다 +
+
+
+ )
+}
diff --git a/src/components/Posture/GuidePopup/SnapshotGuide.tsx b/src/components/Posture/GuidePopup/SnapshotGuide.tsx
new file mode 100644
index 0000000..33020d3
--- /dev/null
+++ b/src/components/Posture/GuidePopup/SnapshotGuide.tsx
@@ -0,0 +1,51 @@
+import CloseCrewPanelIcon from "@assets/images/posture-snapshot-guide.png"
+
+export default function SnapshotGuide() {
+ return (
+ <>
+
+
+
+ 1
+
+ 바른 자세 취하기
+
+ 가이드에 따라
+ 바른 자세를 취해 주세요. +
+ + 바른 자세를 취해 주세요. +
+
+
+ 2
+
+ 스냅샷 촬영하기
+
+ 기준점 설정을 위해
+ 촬영을 진행해 주세요. +
+ + 촬영을 진행해 주세요. +
+
+
+
+
+
+ {/* content */}
+ 바른 자세를 취해주세요
+
+
+
+ )
+}
diff --git a/src/components/Posture/PostrueCrew.tsx b/src/components/Posture/PostrueCrew.tsx
new file mode 100644
index 0000000..29253e5
--- /dev/null
+++ b/src/components/Posture/PostrueCrew.tsx
@@ -0,0 +1,291 @@
+import { duration, notification } from "@/api/notification"
+import EmptyGroupImage from "@/assets/images/crew-empty.png"
+import RoutePath from "@/constants/routes.json"
+import { useModals } from "@/hooks/useModals"
+import useMyGroup from "@/hooks/useMyGroup"
+import useNotification from "@/hooks/useNotification"
+import { useModifyNoti } from "@/hooks/useNotiMutation"
+import usePushNotification from "@/hooks/usePushNotification"
+import { useAuthStore } from "@/store"
+import { useSnapShotStore } from "@/store/SnapshotStore"
+import CloseCrewPanelIcon from "@assets/icons/crew-panel-close-button.svg?react"
+import PostureGuide from "@assets/icons/posture-guide-button-icon.svg?react"
+import PostureRetakeIcon from "@assets/icons/posture-snapshot-retake-icon.svg?react"
+import QuestionIcon from "@assets/icons/question-info-icon.svg?react"
+import RankingGuideToolTip from "@assets/images/ranking-guide.png"
+import SelectBox from "@components/SelectBox"
+import { ReactElement, useCallback, useEffect, useRef, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { modals } from "../Modal/Modals"
+
+interface IPostureCrew {
+ groupUserId: number
+ uid: number
+ nickname: string
+ rank: number
+ score: number
+}
+
+interface PostureCrewProps {
+ toggleSidebar: () => void
+}
+
+interface NotiOption {
+ value: duration
+ label: string
+}
+
+const NOTI_OPTIONS: NotiOption[] = [
+ { value: "IMMEDIATELY", label: "틀어진 즉시" },
+ { value: "MIN_15", label: "15분 간격" },
+ { value: "MIN_30", label: "30분 간격" },
+ { value: "MIN_45", label: "45분 간격" },
+ { value: "MIN_60", label: "1시간 간격" },
+]
+
+const NOTI_VALUE_MAP = (value: string | undefined) => {
+ switch (value) {
+ case "IMMEDIATELY":
+ return "틀어진 즉시"
+ case "MIN_15":
+ return "15분 간격"
+ case "MIN_30":
+ return "30분 간격"
+ case "MIN_45":
+ return "45분 간격"
+ case "MIN_60":
+ return "1시간 간격"
+ }
+ return "틀어진 즉시"
+}
+
+const useWebSocket = (url: string) => {
+ const [isConnected, setIsConnected] = useState<"loading" | "success" | "disconnected">("loading")
+ const [crews, setCrews] = useState
+
+
+
+
+
+
+ 1
+
+
+ 머리와 목을 일직선으로 곧게 펴기
+
+
+
+
+ 2
+
+ 양쪽 어깨 일직선 유지하기
+
+
+
+ 3
+
+ 팔은 책상 위에 수평으로 두기
+
+
+
+ 4
+
+
+ 등과 허리는 등받이에 지지하기
+
+
+
+
+
+ )
+}
diff --git a/src/components/Posture/PostureMessage.tsx b/src/components/Posture/PostureMessage.tsx
new file mode 100644
index 0000000..24de08b
--- /dev/null
+++ b/src/components/Posture/PostureMessage.tsx
@@ -0,0 +1,49 @@
+const PostureMessage: React.FC<{
+ isSnapShotSaved: boolean
+ isShoulderTwist: boolean | null
+ isTextNeck: boolean | null
+ isHandOnChin: boolean | null
+ isTailboneSit: boolean | null
+ hasPermission: boolean
+}> = ({ isSnapShotSaved, isShoulderTwist, isTextNeck, isHandOnChin, isTailboneSit, hasPermission }) => {
+ const getIsRight = (
+ _isShoulderTwist: boolean | null,
+ _isTextNeck: boolean | null,
+ _isTailboneSit: boolean | null,
+ _isHandOnChin: boolean | null
+ ): boolean => {
+ return !_isShoulderTwist && !_isTextNeck && !_isTailboneSit && !_isHandOnChin
+ }
+
+ const getMessage = (
+ _isShoulderTwist: boolean | null,
+ _isTextNeck: boolean | null,
+ _isTailboneSit: boolean | null,
+ _isHandOnChin: boolean | null
+ ): string => {
+ const values: string[] = []
+ if (_isShoulderTwist) values.push("어깨 틀어짐")
+ if (_isTextNeck) values.push("거북목")
+ if (_isTailboneSit) values.push("꼬리뼈로 앉기")
+ if (_isHandOnChin) values.push("턱 괴기")
+ return `${values.join(", ")} 감지! 자세를 바르게 앉아주세요.`
+ }
+
+ return (
+
+
+
+
+
+
+ 자세 알림
+
+
+
+
+
+
+ 브라우저의 알람 권한 설정이 필요 합니다.
+ )}
+
+
+
+ 자세 랭킹
+
+
+
+ 
+
+
+ {isConnected === "loading" && myGroupData &&
+ 서버와 연결 중입니다.
} + {isConnected === "disconnected" && myGroupData &&서버와 연결 끊어졌습니다.
} + {isConnected === "success" && myGroupData && crews.length === 0 && ( +접속자가 없습니다.
+ )} + {isConnected === "success" && myGroupData && crews.length > 0 && ( +-
+ {crews.map((user, index) => (
+
-
+ +++ + {user.rank} + + {user.nickname} ++ {user.score}회 +
+ ))}
+
+ 
+
+
+ )}
+
+ 아직 가입한
+
+ 크루가 없어요 +
+ + 크루가 없어요 +
+
+
+
+
+ {!hasPermission
+ ? "브라우저의 카메라 권한을 허용해주세요."
+ : !isSnapShotSaved
+ ? "바른 자세를 취한 후, 하단의 버튼을 눌러주세요."
+ : getIsRight(isShoulderTwist, isTextNeck, isTailboneSit, isHandOnChin)
+ ? "올바른 자세입니다."
+ : getMessage(isShoulderTwist, isTextNeck, isTailboneSit, isHandOnChin)}
+
+ )
+}
+
+export default PostureMessage
diff --git a/src/components/SelectBox.tsx b/src/components/SelectBox.tsx
new file mode 100644
index 0000000..12c4de1
--- /dev/null
+++ b/src/components/SelectBox.tsx
@@ -0,0 +1,56 @@
+import { useState } from "react"
+import DownArrowIcon from "@assets/icons/crew-side-nav-down-arrow.svg?react"
+
+interface SelectBoxOption {
+ label: string
+ value: any
+}
+
+interface SelectBoxProps {
+ value: string | undefined
+ options: SelectBoxOption[]
+ isDisabled?: boolean
+ onClick: (selectedOption: SelectBoxOption) => void
+}
+
+export default function SelectBox(props: SelectBoxProps): React.ReactElement {
+ const { value, options, isDisabled, onClick } = props
+ const [isOpen, setIsOpen] = useState(false)
+
+ const toggleDropdown = (): void => {
+ if (isDisabled) return
+ setIsOpen(!isOpen)
+ }
+
+ const handleOptionClick = (option: SelectBoxOption): void => {
+ onClick(option)
+ setIsOpen(false)
+ }
+
+ return (
+
+
+ )
+}
diff --git a/src/components/SideNav.tsx b/src/components/SideNav.tsx
new file mode 100644
index 0000000..0d3e52b
--- /dev/null
+++ b/src/components/SideNav.tsx
@@ -0,0 +1,138 @@
+import { clearAccessToken } from "@/api/axiosInstance"
+import { useAuthStore } from "@/store/AuthStore"
+import { useSnapShotStore } from "@/store/SnapshotStore"
+import LogoImage from "@assets/icons/side-nav-logo.svg?react"
+import AnalysisIcon from "@assets/icons/side-nav-analysis-icon.svg?react"
+import CrewIcon from "@assets/icons/side-nav-crew-icon.svg?react"
+import MonitoringIcon from "@assets/icons/side-nav-monitor-icon.svg?react"
+import { useMemo } from "react"
+import { Link, useLocation, useNavigate } from "react-router-dom"
+import { useModals } from "@/hooks/useModals"
+import { modals } from "./Modal/Modals"
+
+const navItems = [
+ {
+ icon: MonitoringIcon,
+ label: "모니터링",
+ link: "/monitoring",
+ },
+ {
+ icon: AnalysisIcon,
+ label: "내 자세 분석",
+ link: "/analysis",
+ },
+ {
+ icon: CrewIcon,
+ label: "공작소 크루",
+ link: "/crew",
+ },
+]
+
+export default function SideNav(): React.ReactElement {
+ const nickname = useAuthStore((state) => state.user?.nickname)
+ const location = useLocation()
+ const logout = useAuthStore((state) => state.logout)
+ const navigate = useNavigate()
+ const { openModal } = useModals()
+
+ const logoutHandler = (): void => {
+ const clearUser = useAuthStore.persist.clearStorage
+ const clearSnapshot = useSnapShotStore.persist.clearStorage
+ // const clearNotification = useNotificationStore.persist.clearStorage
+
+ clearUser()
+ clearSnapshot()
+ clearAccessToken()
+ // clearNotification()
+
+ logout(() => {
+ navigate("/")
+ })
+ }
+
+ const footerLinks = useMemo(
+ () => [
+ {
+ label: "이용약관",
+ link: "",
+ onClick: () => {
+ window.open("https://swjg3gi.notion.site/7c13aba015654e6f8e1acd300b440526?pvs=4", "_blank")
+ },
+ },
+ {
+ label: "의견보내기",
+ link: "",
+ onClick: () => {
+ openModal(modals.reportModal, {
+ onSubmit: () => {
+ // navigate(RoutePath.MYCREW)
+ },
+ })
+ },
+ },
+ { label: "로그아웃", link: "", onClick: logoutHandler },
+ ],
+ [logoutHandler]
+ )
+
+ return (
+
+ )
+}
diff --git a/src/components/TrackingResult.tsx b/src/components/TrackingResult.tsx
new file mode 100644
index 0000000..7d3098c
--- /dev/null
+++ b/src/components/TrackingResult.tsx
@@ -0,0 +1,32 @@
+interface TrackingResultProps {
+ isTextNeck: boolean | null
+ slope: null | string
+}
+
+export default function TrackingResult(props: TrackingResultProps): React.ReactElement {
+ const { isTextNeck, slope } = props
+ return (
+
+ {value}
+
+ {isOpen && (
+
+ {options.map((option) => (
+
+ )}
+ handleOptionClick(option)}
+ >
+ {option.label}
+
+ ))}
+
+
+ )
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 24ef95b..23bd399 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,2 +1,3 @@
-export { default as Camera } from "./Camera";
-export { default as PoseDetector } from "./PoseDetector";
+export { default as Camera } from "./Camera"
+export { default as PoseDetector } from "./PoseDetector"
+export { default as ModalContainer } from "./ModalContainer"
diff --git a/src/constants/routes.json b/src/constants/routes.json
new file mode 100644
index 0000000..805e521
--- /dev/null
+++ b/src/constants/routes.json
@@ -0,0 +1,10 @@
+{
+ "MONITORING": "/monitoring",
+ "ANALYSIS": "/analysis",
+ "LOGIN": "/login",
+ "AUTH": "/auth",
+ "CREW": "/crew",
+ "MYCREW": "/crew/my",
+ "HOME": "/home",
+ "SOCKET": "/socket"
+}
diff --git a/src/contexts/ModalsContext.ts b/src/contexts/ModalsContext.ts
new file mode 100644
index 0000000..13e7df8
--- /dev/null
+++ b/src/contexts/ModalsContext.ts
@@ -0,0 +1,21 @@
+import { ComponentType, createContext } from "react"
+
+export type ModalProps = {
+ id?: number
+ onClose?: () => void
+ onSubmit?: () => void
+}
+
+export type ModalComponent = ComponentType
+ 거북목 상태:
+ {isTextNeck === null ? (
+ "상태를 확인할 수 없습니다."
+ ) : isTextNeck ? (
+ 거북목 상태 입니다
+ ) : (
+ "정상적인 자세 입니다"
+ )}
+
+
+ 어깨 기울기: {slope === null && 상태를 확인할 수 없습니다.}
+ {slope && {slope}}
+
+
+
+ )
+}
diff --git a/src/layouts/BaseLayout.tsx b/src/layouts/BaseLayout.tsx
new file mode 100644
index 0000000..1010158
--- /dev/null
+++ b/src/layouts/BaseLayout.tsx
@@ -0,0 +1,20 @@
+import { Outlet } from "react-router-dom"
+import SideNav from "@/components/SideNav"
+
+const BaseLayout: React.FC = () => {
+ return (
+
+
+ )
+}
+
+export default BaseLayout
diff --git a/src/layouts/MonitoringLayout.tsx b/src/layouts/MonitoringLayout.tsx
new file mode 100644
index 0000000..600641d
--- /dev/null
+++ b/src/layouts/MonitoringLayout.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom"
+
+export default function MonitoringLayout() {
+ return (
+
+
+
+
+
+
+ )
+}
diff --git a/src/layouts/index.ts b/src/layouts/index.ts
new file mode 100644
index 0000000..9cb673c
--- /dev/null
+++ b/src/layouts/index.ts
@@ -0,0 +1,3 @@
+export { default as Layout } from "./BaseLayout"
+export { default as AnalysisLayout } from "./AnalysisLayout"
+export { default as MonitoringLayout } from "./MonitoringLayout"
diff --git a/src/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx
new file mode 100644
index 0000000..5383022
--- /dev/null
+++ b/src/pages/AnalysisDashboard.tsx
@@ -0,0 +1,193 @@
+import { poseType } from "@/api/pose"
+import { usePoseAnalysis } from "@/hooks/useDashBoard"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import { useEffect, useRef, useState } from "react"
+
+import TotalCountChartIcon from "@/assets/icons/dash-board-total-count.svg?react"
+import ChinUpImage from "@/assets/images/chin-up.png"
+import ShoulderTwistImage from "@/assets/images/shoulder-twist.png"
+import TailBoneSitImage from "@/assets/images/tail-bone-sit.png"
+import TurtleNeckImage from "@/assets/images/tutle-neck.png"
+import PoseAnalysisChart from "@/components/Dashboard/Chart"
+import Datepicker, { DateValueType } from "react-tailwindcss-datepicker"
+import CalendarToolTip from "@assets/icons/dashboard-calendar-tooltip.svg?react"
+
+const START_FROM = new Date()
+START_FROM.setMonth(START_FROM.getMonth() - 1)
+
+const AnalysisDashboard = () => {
+ const carouselRef = useRef(null)
+ const datePickerRef = useRef(null)
+ const [currentIndex, setCurrentIndex] = useState(0)
+ const [dateRange, setDateRange] = useState
+
+ )
+}
+
+export default AnalysisDashboard
diff --git a/src/pages/AuthPage.tsx b/src/pages/AuthPage.tsx
new file mode 100644
index 0000000..d5dd006
--- /dev/null
+++ b/src/pages/AuthPage.tsx
@@ -0,0 +1,109 @@
+import { useEffect, useState } from "react"
+import { useNavigate } from "react-router-dom"
+import { useOauth, useSignUp, useSignIn, useGetIsSignUp } from "@/hooks/useAuthMutation"
+import RoutePath from "@/constants/routes.json"
+import { useAuthStore } from "@/store/AuthStore"
+import { useSnapShotStore } from "@/store/SnapshotStore"
+import { getRecentSnapshot } from "@/api"
+import Lottie from "react-lottie"
+import LoginLottie from "@assets/animation/login-lottie.json"
+// import { useGetNoti } from "@/hooks/useNotiMutation"
+// import { useNotificationStore } from "@/store/NotificationStore"
+
+const AuthPage: React.FC = () => {
+ const navigate = useNavigate()
+
+ const oauthMutation = useOauth()
+ const getIsSignUpMutation = useGetIsSignUp()
+ const signUpMutation = useSignUp()
+ const signInMutation = useSignIn()
+ // const getNotiMutation = useGetNoti()
+ const [isLoading, setIsLoading] = useState(true)
+ const [isError, setIsError] = useState(false)
+
+ const setUser = useAuthStore((state) => state.setUser)
+ const { setSnapShot } = useSnapShotStore()
+ // const setNoti = useNotificationStore((state) => state.setNotification)
+
+ useEffect(() => {
+ const authenticate = async (): Promise
+
+
+ {isLoading && 오늘의 자세 분석
+
+
+
+
+ 로딩 중입니다...
}
+ {isError && 데이터를 불러오는 것에 실패했습니다
}
+
+ {!isLoading && !isError && todayAnalysis && (
+
+
+ )}
+
+ {/* 고정된 전체 틀어짐 횟수 카드 */}
+
+
+
+
+ {/* 캐러셀 컨테이너 */}
+
+ 전체 자세 경고 횟수
+
+
+ {totalCount}
+ 회
+
+
+
+
+ {/* 왼쪽 그라디언트 */}
+ {!isLargeViewport && currentIndex > 0 && (
+
+ )}
+
+ {/* 캐러셀 아이템 */}
+
+
+ {carouselItems.map(({ title, type, image }, index) => (
+
+
+ {/* 오른쪽 그라디언트 */}
+ {!isLargeViewport && currentIndex < 1 && (
+
+ )}
+
+
+ ))}
+
+ 
+
+
+ {title}
+
+
+
+ {getPoseCount(type)}
+ 회
+
+
+
+ {/* 차트 섹션 */}
+ +
+ 기간별 자세 추이
+
+ setShowTooltip(true)}
+ onMouseLeave={() => setShowTooltip(false)}
+ >
+ {showTooltip && (
+ setDateRange(value)}
+ />
+
+
+
+ )}
+
+ {totalAnalysis &&
+
+ {isLoading ? (
+ <>
+
+ )
+}
+
+export default AuthPage
diff --git a/src/pages/Crew.tsx b/src/pages/Crew.tsx
new file mode 100644
index 0000000..ba8839b
--- /dev/null
+++ b/src/pages/Crew.tsx
@@ -0,0 +1,9 @@
+import CrewList from "@/components/Crew/CrewList"
+
+export default function Crew() {
+ return (
+ 로그인 중입니다.
+
+ ) : (
+ <>
+ {isError && An error occurred
}
+ {signInMutation.isSuccess && Login successful!
}
+
+ )}
+
+
+ )
+}
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
new file mode 100644
index 0000000..82d7c6f
--- /dev/null
+++ b/src/pages/HomePage.tsx
@@ -0,0 +1,83 @@
+import LogoImage from "@assets/icons/home-logo.svg?react"
+import KakaoSignupIcon from "@assets/icons/home-kakao-signup-button-icon.svg?react"
+import IntroImage from "@/assets/images/home-intro.png"
+import MonitoringImage from "@/assets/images/home-monitoring.png"
+
+const REST_API_KEY = import.meta.env.VITE_OAUTH_KAKAO_REST_API_KEY
+const REDIRECT_URI = import.meta.env.VITE_OAUTH_KAKAO_REDIRECT_URI
+const LOGIN_LINK = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`
+
+const HomePage: React.FC = () => {
+ const loginHandler = (): void => {
+ window.location.href = LOGIN_LINK
+ }
+
+ return (
+
+ {/* header */}
+
+ )
+}
+
+export default HomePage
diff --git a/src/pages/MonitoringPage.tsx b/src/pages/MonitoringPage.tsx
new file mode 100644
index 0000000..79dc0a3
--- /dev/null
+++ b/src/pages/MonitoringPage.tsx
@@ -0,0 +1,90 @@
+import { getRecentSnapshot } from "@/api"
+import { PoseDetector } from "@/components"
+import PostrueCrew from "@/components/Posture/PostrueCrew"
+import usePushNotification from "@/hooks/usePushNotification"
+import { useSnapShotStore } from "@/store/SnapshotStore"
+import GroupSideIcon from "@assets/icons/group-side-nav-button.svg?react"
+import React, { useEffect, useState } from "react"
+
+const MonitoringPage: React.FC = () => {
+ const { hasPermission } = usePushNotification()
+ const { snapshot, setSnapShot, isInitialSnapShotExist } = useSnapShotStore()
+ const [isSidebarOpen, setIsSidebarOpen] = useState
+ {/* logo */}
+
+
+ {/* content */}
+
+
+
+
+ {/* left */}
+
+ {/* footer */}
+
+
+ {/* right */}
+
+
+
+
+ 자세공작소와 함께하는
+ 일상의 변화
+ 간단하게 회원가입 후 이용을 시작하세요!
+
+
+ 카카오톡으로 계속하기
+
+ 
+
+
+
+
+ 
+
+
+
+
+
+ ALIGN LAB
+
+
+
+ 개인정보처리방침
+
+
+ 이용약관
+
+ Copyright all reserved @2024
+ 모바일 디바이스는 현재 사용이 불가능 합니다
+ }
+
+ return (
+
+ {/* Main content area */}
+
+ )
+}
+
+export default MonitoringPage
diff --git a/src/pages/MyCrew.tsx b/src/pages/MyCrew.tsx
new file mode 100644
index 0000000..e40129c
--- /dev/null
+++ b/src/pages/MyCrew.tsx
@@ -0,0 +1,163 @@
+import CrewRanking from "@/components/Crew/CrewRanking"
+import MyCrewHeader from "@/components/Crew/MyCrew/MyCrewHeader"
+import { useModals } from "@/hooks/useModals"
+import useMyGroup from "@/hooks/useMyGroup"
+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"
+import { useCallback, useEffect } from "react"
+
+export default function MyCrew() {
+ const { myGroupData, ranks, myRank, withdrawFromGroup, isLoading, avgScore } = useMyGroup()
+ const { openModal } = useModals()
+ const naviagte = useNavigate()
+
+ const openCreateModal = (): void => {
+ openModal(modals.withdrawCrewModal, {
+ onSubmit: () => {
+ if (myGroupData) {
+ withdrawFromGroup()
+ .then(() => {
+ naviagte("/crew")
+ })
+ .catch(() => {
+ alert(
+ "존재하지 않는 크루이거나 이미 탈퇴된 상태 입니다. 다시 시도해주시거나, 고객센터에 문의해주시기 바랍니다."
+ )
+ })
+ } else {
+ alert(
+ "존재하지 않는 크루이거나 이미 탈퇴된 상태 입니다. 다시 시도해주시거나, 고객센터에 문의해주시기 바랍니다."
+ )
+ }
+ },
+ })
+ }
+
+ useEffect(() => {
+ if (!myGroupData && !isLoading) {
+ naviagte("/crew")
+ }
+ }, [myGroupData, isLoading])
+
+ const openInviteModal = useCallback((): void => {
+ openModal(modals.inviteCrewModal, {
+ id: Number(myGroupData?.id),
+ onSubmit: () => {
+ console.log("open")
+ },
+ })
+ }, [myGroupData, openModal])
+
+ console.log("my crew: ", myRank, " / ", avgScore)
+
+ return (
+ <>
+
+
+
+ {/* 사이드바 */}
+
+
+
+
+ {!hasPermission && (
+
+ 브라우저의 알림 기능을 허용해주세요.
+
+ )}
+
+ {isSidebarOpen && isInitialSnapShotExist &&
+
+ {/* 토글 버튼 */}
+ {!isSidebarOpen && isInitialSnapShotExist && (
+
+ )}
+
+
+
+ {/* 크루 소개 */}
+
+
+
+
+
+ |
+ {myGroupData?.name}
+
+
+
+
+
+
+ {/* 랭킹 헤더 */}
+
+
+
+ 크루장
+ {myGroupData?.ownerNickname}
+
+
+ 크루 소개
+
+ {myGroupData?.description}
+
+
+
+ {/* 헤더 */}
+
+ 바른자세 랭킹
+
+
+ 최근 1시간
+ |
+ {dayjs().format("YYYY.MM.DD HH:mm")} 기준
+
+
+ {/* 랭킹 표시 */}
+
+
+ {/* footer */}
+
+ {ranks.length > 0 && myRank ? (
+
+
+
+ )
+ )}
+
+
+
+ 표시할 랭킹이 없습니다.
+
+ {(!myRank || !myRank.score || myRank.score === 0) &&
+ (avgScore !== undefined || avgScore !== null) &&
+ `우리 크루 평균 자세 경고 횟수는 ${avgScore}회 입니다.`}
+ {myRank &&
+ myRank.score &&
+ (avgScore !== undefined || avgScore !== null) &&
+ `지난 한 시간 동안 나의 자세 경고 횟수는 ${myRank.score}회 입니다.`}
+ {myRank && myRank.score !== undefined && avgScore !== undefined && avgScore > 0 && (
+ <>
+ 나는 우리 크루 평균보다 자세 경고를{" "}
+ Number(myRank.score) ? "text-[#1A75FF]" : "text-red-500"} `}
+ >
+ {Math.abs(avgScore - myRank?.score)}회 {Number(avgScore) > Number(myRank?.score) ? "덜" : "더"}
+
+ 받았어요.
+
+ )}
+
+
+ )
+}
diff --git a/src/pages/index.ts b/src/pages/index.ts
new file mode 100644
index 0000000..3937dad
--- /dev/null
+++ b/src/pages/index.ts
@@ -0,0 +1,5 @@
+export { default as AuthPage } from "./AuthPage"
+export { default as MonitoringPage } from "./MonitoringPage"
+export { default as AnalysisDashboard } from "./AnalysisDashboard"
+export { default as Crew } from "./Crew"
+export { default as HomePage } from "./HomePage"
diff --git a/src/providers/ModalsProvider.tsx b/src/providers/ModalsProvider.tsx
new file mode 100644
index 0000000..f60ba07
--- /dev/null
+++ b/src/providers/ModalsProvider.tsx
@@ -0,0 +1,35 @@
+import {
+ ModalsDispatchContext,
+ ModalsStateContext,
+ ModalsState,
+ ModalComponent,
+ ModalProps,
+} from "@/contexts/ModalsContext"
+import { PropsWithChildren, useMemo, useState } from "react"
+
+const ModalsProvider = ({ children }: PropsWithChildren): React.ReactNode => {
+ const [openedModals, setOpenedModals] = useState