Merge pull request #90 from DDD-Community/feat/#58

Feat/#58
DDD-Community · Sep 25, 2024 · 0465a2f · 0465a2f
2 parents 7fea665 + ba46451
commit 0465a2f
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 8 deletions.
diff --git a/src/assets/icons/dashboard-calendar-tooltip.svg b/src/assets/icons/dashboard-calendar-tooltip.svg
diff --git a/src/components/Crew/MyCrew/MyCrewHeader.tsx b/src/components/Crew/MyCrew/MyCrewHeader.tsx
@@ -7,7 +7,7 @@ interface MyCrewHeaderProps {
 export default function MyCrewHeader(props: MyCrewHeaderProps) {
   const { openCreateModal } = props
   return (
-    <div className="mb-[24px] flex w-full items-center">
+    <div className="mb-6 flex w-full items-baseline">
       <div className="flex-grow text-[22px] font-bold text-zinc-900">나의 크루</div>
       <div
         className="flex w-[138px] cursor-pointer items-center justify-center gap-[10px] rounded-[33px] bg-zinc-800 p-[10px] text-sm font-semibold text-white"

diff --git a/src/components/Posture/PostrueCrew.tsx b/src/components/Posture/PostrueCrew.tsx
@@ -154,9 +154,9 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
   }
 
   const onClickNotiAlarm = (): void => {
-    if (!notification || !notification.isActive) {
+    if (!notification) {
       updateNotiMutation.mutate(
-        { isActive: true, duration: notification?.duration || "IMMEDIATELY" },
+        { isActive: true, duration: "IMMEDIATELY" },
         {
           onSuccess: (data: notification) => {
             setNotification(data)
@@ -165,7 +165,7 @@ export default function PostrueCrew(props: PostureCrewProps): ReactElement {
       )
     } else {
       updateNotiMutation.mutate(
-        { isActive: !notification?.isActive, duration: notification?.duration },
+        { isActive: !notification?.isActive, duration: notification?.duration || "IMMEDIATELY" },
         {
           onSuccess: (data: notification) => {
             setNotification(data)

diff --git a/src/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx
@@ -10,20 +10,21 @@ 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<DateValueType>({
     startDate: null,
     endDate: null,
   })
-
   const [isLargeViewport, setIsLargeViewport] = useState(false)
-
+  const [showTooltip, setShowTooltip] = useState(false)
   const { todayAnalysis, totalAnalysis, isLoading, isError } = usePoseAnalysis(dateRange)
 
   useEffect(() => {
@@ -70,7 +71,7 @@ const AnalysisDashboard = () => {
   return (
     <div className="h-full w-full">
       <div className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold">오늘의 자세 분석</h1>
+        <div className="text-[22px] font-bold text-zinc-900">오늘의 자세 분석</div>
         <div className="flex space-x-2">
           <button
             className={`rounded-full p-2 ${
@@ -158,7 +159,23 @@ const AnalysisDashboard = () => {
       {/* 차트 섹션 */}
       <div className="flex items-center justify-between pb-6">
         <span className="text-[22px] font-bold text-zinc-900">기간별 자세 추이</span>
-        <div className="text-sm text-gray-600">
+        <div
+          className="relative text-sm text-gray-600"
+          ref={datePickerRef}
+          onMouseEnter={() => setShowTooltip(true)}
+          onMouseLeave={() => setShowTooltip(false)}
+        >
+          {showTooltip && (
+            <div
+              className="absolute z-10"
+              style={{
+                top: 36,
+                right: 0,
+              }}
+            >
+              <CalendarToolTip />
+            </div>
+          )}
           <Datepicker
             inputClassName="w-[270px] py-2 rounded-full bg-zinc-800 text-white px-[24px]"
             startFrom={START_FROM}