From ba464514b3adaa8294129fc3c9dc1ca14280faa4 Mon Sep 17 00:00:00 2001
From: G-hoon <new0126@naver.com>
Date: Thu, 26 Sep 2024 01:32:30 +0900
Subject: [PATCH] =?UTF-8?q?[feat/#58]=20=EB=94=94=EC=9E=90=EC=9D=B8=20QA?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../icons/dashboard-calendar-tooltip.svg      | 19 ++++++++++++++
 src/components/Crew/MyCrew/MyCrewHeader.tsx   |  2 +-
 src/pages/AnalysisDashboard.tsx               | 25 ++++++++++++++++---
 3 files changed, 41 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/icons/dashboard-calendar-tooltip.svg

diff --git a/src/assets/icons/dashboard-calendar-tooltip.svg b/src/assets/icons/dashboard-calendar-tooltip.svg
new file mode 100644
index 0000000..12ec27d
--- /dev/null
+++ b/src/assets/icons/dashboard-calendar-tooltip.svg
@@ -0,0 +1,19 @@
+<svg width="184" height="86" viewBox="0 0 184 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_2778_2252)">
+<path d="M16 20C16 16.6863 18.6863 14 22 14H162C165.314 14 168 16.6863 168 20V62C168 65.3137 165.314 68 162 68H22C18.6863 68 16 65.3137 16 62V20Z" fill="white"/>
+</g>
+<path d="M64 6L69.1962 15H58.8038L64 6Z" fill="white"/>
+<path d="M35.6201 30.2529C35.6094 31.7891 36.7158 33.4756 38.1016 34.1309L37.6182 34.7969C36.5439 34.2759 35.6362 33.1372 35.2119 31.8428C34.7715 33.25 33.8101 34.4854 32.7412 35.0332L32.2256 34.3672C33.6006 33.7012 34.7822 31.8857 34.793 30.2529V29.0068H32.5693V28.3086H37.7686V29.0068H35.6201V30.2529ZM39.7773 27.3203V31.1875H41.3779V31.9072H39.7773V36.8701H38.9395V27.3203H39.7773ZM44.7295 30.0381C44.7295 31.5527 45.4707 33.1963 46.7383 33.9482L46.2549 34.6035C45.3364 34.0449 44.6758 33.0244 44.3428 31.8643C43.9883 33.1318 43.2793 34.2222 42.3232 34.8076L41.7861 34.1738C43.1074 33.4004 43.9131 31.7031 43.9131 30.0703V28.2227H44.7295V30.0381ZM50.0791 27.3203V36.8701H49.2627V27.3203H50.0791ZM48.1025 27.5244V36.3867H47.3076V31.4668H45.6855V30.7471H47.3076V27.5244H48.1025ZM62.8623 33.0996V33.8086H58.9199V36.8916H58.0928V33.8086H54.1611V33.0996H62.8623ZM58.9307 29.2109C58.9307 30.4033 60.5957 31.4453 62.3037 31.6816L61.9922 32.3584C60.5151 32.1328 59.124 31.3916 58.5225 30.3496C57.9102 31.4023 56.4976 32.1328 55.0205 32.3584L54.709 31.6816C56.4062 31.4453 58.0928 30.4141 58.0928 29.2109V29.2002H55.0098V28.5127H58.0928V27.3203H58.9199V28.5127H62.0244V29.2002H58.9307V29.2109ZM71.542 27.3203V36.8916H70.6934V27.3203H71.542ZM66.4609 28.0615C67.8789 28.0723 68.8994 29.3613 68.8994 31.3916C68.8994 33.4219 67.8789 34.7109 66.4609 34.7109C65.0322 34.7109 64.0225 33.4219 64.0225 31.3916C64.0225 29.3613 65.0322 28.0723 66.4609 28.0615ZM66.4609 28.8135C65.5049 28.8242 64.8389 29.834 64.8389 31.3916C64.8389 32.9492 65.5049 33.959 66.4609 33.959C67.417 33.959 68.083 32.9492 68.083 31.3916C68.083 29.834 67.417 28.8242 66.4609 28.8135ZM80.8984 30.2207V30.8975H74.3564V27.6748H75.1943V30.2207H80.8984ZM81.9082 32.1973V32.8848H73.1641V32.1973H81.9082ZM80.9521 35.9355V36.6338H74.3027V33.8623H75.1406V35.9355H80.9521ZM89.0625 32.3584V34.1094C89.981 34.0718 90.9209 33.9912 91.8018 33.8623L91.8662 34.4854C89.6855 34.8828 87.333 34.8936 85.6143 34.8936L85.4961 34.1953C86.2964 34.1899 87.2417 34.1846 88.2354 34.1523V32.3584H89.0625ZM91.3076 28.5771V29.2754H89.0625C89.084 30.5107 90.1099 31.5151 91.5225 31.918L91.125 32.584C89.9756 32.2402 89.0786 31.5044 88.6543 30.5322C88.2354 31.5581 87.3438 32.3208 86.1943 32.6699L85.7861 32.0254C87.1987 31.6118 88.1924 30.5645 88.2139 29.2754H86.0225V28.5771H88.2354V27.3955H89.0625V28.5771H91.3076ZM93.2734 27.3203V36.8916H92.4355V27.3203H93.2734ZM103.113 27.3203V36.8701H102.308V31.8643H100.9V36.376H100.127V27.5352H100.9V31.166H102.308V27.3203H103.113ZM98.8809 28.4912V29.1895H96.1416V33.7871C97.4575 33.7817 98.3706 33.7334 99.4287 33.5186L99.5039 34.2275C98.3545 34.4639 97.377 34.5068 95.916 34.5068H95.3037V28.4912H98.8809ZM110.246 36.1074C108.699 36.1074 107.593 35.2803 107.539 34.0449H108.517C108.57 34.7861 109.312 35.248 110.235 35.248C111.256 35.248 112.008 34.6895 112.008 33.8838C112.008 33.0352 111.331 32.4336 110.117 32.4336H109.483V31.585H110.117C111.062 31.585 111.718 31.0586 111.718 30.2529C111.718 29.4795 111.148 28.9531 110.268 28.9531C109.44 28.9531 108.678 29.415 108.635 30.1777H107.7C107.754 28.9424 108.893 28.1152 110.278 28.1152C111.761 28.1152 112.663 29.082 112.652 30.1992C112.663 31.0801 112.147 31.7354 111.331 31.9609V32.0146C112.341 32.1758 112.964 32.8955 112.953 33.8838C112.964 35.1621 111.793 36.1074 110.246 36.1074ZM117.1 28.2227V36H116.122V29.2324H116.079L114.188 30.4893V29.5117L116.122 28.2227H117.1ZM121.536 27.6748C122.965 27.6855 124.007 28.5449 124.007 29.791C124.007 31.0371 122.965 31.8965 121.536 31.8965C120.086 31.8965 119.055 31.0371 119.055 29.791C119.055 28.5449 120.086 27.6855 121.536 27.6748ZM121.536 28.3838C120.58 28.3838 119.871 28.9639 119.882 29.791C119.871 30.6289 120.58 31.209 121.536 31.209C122.481 31.209 123.19 30.6289 123.19 29.791C123.19 28.9639 122.481 28.3838 121.536 28.3838ZM126.714 27.3203V32.2295H125.876V27.3203H126.714ZM126.714 32.6914V34.9902H121.354V36.0645H127.058V36.7412H120.526V34.3564H125.876V33.3682H120.505V32.6914H126.714ZM135.898 27.3203V31.2627H137.349V31.9717H135.898V36.8701H135.05V27.3203H135.898ZM131.236 28.3623C131.226 30.6396 130.71 32.874 128.98 34.7109L128.304 34.2275C129.749 32.7505 130.329 30.9727 130.441 29.0713H128.604V28.3623H131.236ZM133.857 28.3623C133.847 30.6289 133.514 33.2607 131.73 35.3447L131.043 34.8721C132.536 33.1855 132.987 31.064 133.062 29.0713H131.537V28.3623H133.857ZM141.259 30.2529C141.259 31.875 142.44 33.5186 143.848 34.1309L143.375 34.7969C142.258 34.2866 141.291 33.1855 140.851 31.8643C140.399 33.2661 139.438 34.4854 138.348 35.0332L137.843 34.3672C139.207 33.7119 140.399 31.9072 140.41 30.2529V29.0068H138.154V28.3086H143.536V29.0068H141.259V30.2529ZM145.717 27.3203V36.8701H144.868V27.3203H145.717ZM41.1309 52.9365V53.6455H32.3867V52.9365H36.3291V50.6162H37.1777V52.9365H41.1309ZM37.1777 47.1357C37.1777 48.6611 39.0684 49.9717 40.7119 50.2402L40.3682 50.9062C38.9072 50.6216 37.3657 49.6924 36.7588 48.3604C36.1411 49.6978 34.605 50.6484 33.1709 50.9492L32.8164 50.2725C34.4277 49.9932 36.3076 48.6611 36.3076 47.1357V46.8994H33.1064V46.1904H40.3789V46.8994H37.1777V47.1357ZM49.7246 45.3203V54.8701H48.8867V45.3203H49.7246ZM41.9473 52.3242C42.7637 52.3188 43.6982 52.3135 44.665 52.2812V51.2393C43.521 51.1157 42.7744 50.4658 42.7852 49.5098C42.7744 48.4355 43.6982 47.7373 45.0732 47.7373C46.4482 47.7373 47.3828 48.4355 47.3828 49.5098C47.3828 50.4551 46.6416 51.105 45.5137 51.2285V52.249C46.4375 52.2114 47.3721 52.1416 48.2529 52.0234L48.3174 52.668C46.1904 53.0117 43.8486 53.0439 42.0762 53.0439L41.9473 52.3242ZM48.0059 46.502V47.1895H42.1514V46.502H44.665V45.3311H45.5137V46.502H48.0059ZM45.0732 48.3926C44.1924 48.3926 43.5693 48.8438 43.5693 49.5098C43.5693 50.1758 44.1924 50.6055 45.0732 50.5947C45.9648 50.6055 46.5771 50.1758 46.5771 49.5098C46.5771 48.8438 45.9648 48.3926 45.0732 48.3926ZM58.8662 45.2881V47.6084H60.3164V48.3066H58.8662V50.5732H58.0283V45.2881H58.8662ZM58.8662 51.0674V53.1836H53.624V54.1182H59.2207V54.7627H52.7969V52.5605H58.0283V51.7012H52.7754V51.0674H58.8662ZM57.1152 46.1904V46.8672H51.4219V46.1904H53.8496V45.2236H54.6875V46.1904H57.1152ZM54.2686 47.2969C55.6543 47.2969 56.5566 47.8984 56.5674 48.8652C56.5566 49.832 55.6543 50.4336 54.2686 50.4336C52.8721 50.4336 51.959 49.832 51.9697 48.8652C51.959 47.8984 52.8721 47.2969 54.2686 47.2969ZM54.2686 47.9199C53.3662 47.9199 52.7646 48.2959 52.7754 48.8652C52.7646 49.4453 53.3662 49.7998 54.2686 49.7998C55.1709 49.7998 55.7617 49.4453 55.7725 48.8652C55.7617 48.2959 55.1709 47.9199 54.2686 47.9199ZM68.459 46.2119C68.459 47.5547 70.2207 48.7256 71.9395 48.9619L71.5957 49.6494C70.1133 49.4023 68.647 48.5806 68.0293 47.4043C67.417 48.5859 65.9453 49.4023 64.4629 49.6494L64.1191 48.9619C65.8379 48.7256 67.5889 47.5762 67.5889 46.2119V45.6641H68.459V46.2119ZM72.3691 50.7021V51.4111H68.416V54.8701H67.5889V51.4111H63.668V50.7021H72.3691ZM79.1689 51.7334C79.1689 52.5767 79.6201 53.4736 80.5332 53.9893C81.4355 53.4253 81.9189 52.4746 81.9189 51.7334V51.207H82.7461V51.7334C82.7461 52.7109 83.4658 53.6992 84.6904 54.1182L84.2715 54.7412C83.3154 54.4028 82.644 53.7368 82.3164 52.9365C82.021 53.71 81.4355 54.4404 80.5547 54.8164C79.6255 54.4619 79.0347 53.7583 78.75 52.958C78.4116 53.7314 77.751 54.3975 76.8379 54.7412L76.4082 54.1182C77.6113 53.667 78.3418 52.6465 78.3525 51.7334V51.207H79.1689V51.7334ZM83.8203 45.3311V50.7881H82.9824V45.3311H83.8203ZM78.6641 45.8896C80.1143 45.8896 81.167 46.792 81.167 48.124C81.167 49.4346 80.1143 50.3369 78.6641 50.3369C77.2139 50.3369 76.1611 49.4346 76.1611 48.124C76.1611 46.792 77.2139 45.8896 78.6641 45.8896ZM78.6641 46.6094C77.6865 46.5986 76.9775 47.2324 76.9883 48.124C76.9775 49.0049 77.6865 49.6279 78.6641 49.6387C79.6309 49.6279 80.3398 49.0049 80.3398 48.124C80.3398 47.2324 79.6309 46.5986 78.6641 46.6094ZM88.0098 46.0615C89.3096 46.0723 90.2441 47.1841 90.3838 48.9727H92.5215V45.3203H93.3594V54.8916H92.5215V49.6709H90.3945C90.2925 51.54 89.3418 52.7109 88.0098 52.7109C86.6025 52.7109 85.6143 51.4219 85.6143 49.3916C85.6143 47.3613 86.6025 46.0723 88.0098 46.0615ZM88.0098 46.8135C87.0645 46.8242 86.4199 47.834 86.4199 49.3916C86.4199 50.9492 87.0645 51.959 88.0098 51.959C88.9443 51.959 89.5996 50.9492 89.5996 49.3916C89.5996 47.834 88.9443 46.8242 88.0098 46.8135ZM103.693 52.9365V53.6455H94.9492V52.9365H97.1191V50.3584C96.3027 49.9341 95.8086 49.2466 95.8086 48.3818C95.8086 46.8994 97.2588 45.9326 99.2998 45.9219C101.341 45.9326 102.791 46.8994 102.791 48.3818C102.791 49.2305 102.313 49.9126 101.523 50.3369V52.9365H103.693ZM99.2998 46.6201C97.7314 46.6094 96.625 47.3184 96.625 48.3818C96.625 49.4453 97.7314 50.165 99.2998 50.165C100.857 50.165 101.975 49.4453 101.975 48.3818C101.975 47.3184 100.857 46.6094 99.2998 46.6201ZM97.9463 52.9365H100.675V50.6592C100.261 50.772 99.7993 50.8311 99.2998 50.8311C98.811 50.8311 98.3545 50.7773 97.9463 50.6699V52.9365ZM105.466 54.0645C105.09 54.0645 104.768 53.7529 104.778 53.3662C104.768 52.9902 105.09 52.6787 105.466 52.6787C105.842 52.6787 106.153 52.9902 106.153 53.3662C106.153 53.7529 105.842 54.0645 105.466 54.0645Z" fill="#71717A"/>
+<defs>
+<filter id="filter0_d_2778_2252" x="0" y="0" width="184" height="86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="8"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.13 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2778_2252"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2778_2252" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/Crew/MyCrew/MyCrewHeader.tsx b/src/components/Crew/MyCrew/MyCrewHeader.tsx
index 590bbe9..b6825a0 100644
--- 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/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx
index 41c524b..6515fa0 100644
--- 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}