From 28b34dbd278d8e69325de112a61cbed8619f9907 Mon Sep 17 00:00:00 2001
From: G-hoon <new0126@naver.com>
Date: Tue, 24 Sep 2024 02:50:58 +0900
Subject: [PATCH] =?UTF-8?q?[feat/#58]=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=A0=95=ED=95=A9?=
 =?UTF-8?q?=EC=84=B1=20QA=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 자세분석 카드 사이즈 변경
- 기간별 추이 텍스트 추가
---
 src/pages/AnalysisDashboard.tsx | 54 ++++++++++++++++++++++-----------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/src/pages/AnalysisDashboard.tsx b/src/pages/AnalysisDashboard.tsx
index 11b9a5f..cd9a0aa 100644
--- a/src/pages/AnalysisDashboard.tsx
+++ b/src/pages/AnalysisDashboard.tsx
@@ -22,8 +22,21 @@ const AnalysisDashboard = () => {
     endDate: null,
   })
 
+  const [isLargeViewport, setIsLargeViewport] = useState(false)
+
   const { todayAnalysis, totalAnalysis, isLoading, isError } = usePoseAnalysis(dateRange)
 
+  useEffect(() => {
+    const checkViewportSize = () => {
+      setIsLargeViewport(window.innerWidth >= 1560)
+    }
+
+    checkViewportSize() // 초기 체크
+    window.addEventListener("resize", checkViewportSize)
+
+    return () => window.removeEventListener("resize", checkViewportSize)
+  }, [])
+
   console.log("totalAnalysis: ", dateRange)
 
   const getPoseCount = (type: poseType) => {
@@ -61,19 +74,21 @@ const AnalysisDashboard = () => {
         <div className="flex space-x-2">
           <button
             className={`rounded-full p-2 ${
-              currentIndex === 0 ? "bg-gray-200 text-gray-400" : "bg-blue-500 text-white"
+              isLargeViewport || currentIndex === 0 ? "bg-gray-200 text-gray-400" : "bg-blue-500 text-white"
             }`}
             onClick={() => moveCarousel("left")}
-            disabled={currentIndex === 0}
+            disabled={isLargeViewport || currentIndex === 0}
           >
             <ChevronLeft size={20} />
           </button>
           <button
             className={`rounded-full p-2 ${
-              currentIndex === carouselItems.length - 3 ? "bg-gray-200 text-gray-400" : "bg-blue-500 text-white"
+              isLargeViewport || currentIndex === carouselItems.length - 3
+                ? "bg-gray-200 text-gray-400"
+                : "bg-blue-500 text-white"
             }`}
             onClick={() => moveCarousel("right")}
-            disabled={currentIndex === carouselItems.length - 3}
+            disabled={isLargeViewport || currentIndex === carouselItems.length - 3}
           >
             <ChevronRight size={20} />
           </button>
@@ -84,24 +99,26 @@ const AnalysisDashboard = () => {
       {isError && <div>데이터를 불러오는 것에 실패했습니다</div>}
 
       {!isLoading && !isError && todayAnalysis && (
-        <div className="relative mb-8 overflow-hidden">
+        <div className=" mb-8">
           <div className="flex">
             {/* 고정된 전체 틀어짐 횟수 카드 */}
-            <div className="relative mr-3 flex w-60 flex-col items-center rounded-lg bg-black text-white">
-              <p className="mt-8 text-sm text-[#5A9CFF]">전체 틀어짐 횟수</p>
-              <div className="mt-2 flex items-center">
-                <span className="text-4xl font-bold">{totalCount}</span>
-                <span className="ml-1 text-sm">회</span>
-              </div>
-              <div className="absolute bottom-[25px] flex h-24 justify-center">
-                <TotalCountChartIcon />
+            <div className="relative">
+              <div className="mr-[15px] flex h-[266px] w-[230px] flex-col items-center rounded-lg bg-zinc-800 text-white">
+                <p className="mt-8 text-sm text-[#5A9CFF]">전체 자세 경고 횟수</p>
+                <div className="mt-2 flex items-center">
+                  <span className="text-4xl font-bold">{totalCount}</span>
+                  <span className="ml-1 text-sm">회</span>
+                </div>
+                <div className="absolute bottom-[25px] flex h-24 justify-center">
+                  <TotalCountChartIcon />
+                </div>
               </div>
             </div>
 
             {/* 캐러셀 컨테이너 */}
             <div className="relative flex w-3/4 overflow-hidden">
               {/* 왼쪽 그라디언트 */}
-              {currentIndex > 0 && (
+              {!isLargeViewport && currentIndex > 0 && (
                 <div className="absolute left-0 top-0 z-10 h-full w-8 bg-gradient-to-r from-white to-transparent" />
               )}
 
@@ -109,10 +126,10 @@ const AnalysisDashboard = () => {
               <div
                 ref={carouselRef}
                 className="flex transition-transform duration-300 ease-in-out"
-                style={{ width: `${(carouselItems.length / 3) * 100}%` }}
+                // style={{ width: `${(carouselItems.length / 3) * 100}%` }}
               >
                 {carouselItems.map(({ title, type, image }, index) => (
-                  <div key={index} className="mr-3 w-1/5 flex-shrink-0">
+                  <div key={index} className="mr-3 h-[266px] w-[210px]">
                     <div className="relative overflow-hidden rounded-lg bg-gray-100">
                       <img src={image} alt={title} className="h-full w-full" />
                       <div className="absolute inset-0 flex flex-col items-center pt-8 text-black">
@@ -128,7 +145,7 @@ const AnalysisDashboard = () => {
               </div>
 
               {/* 오른쪽 그라디언트 */}
-              {currentIndex < 1 && (
+              {!isLargeViewport && currentIndex < 1 && (
                 <div className="absolute right-0 top-0 z-10 h-full w-8 bg-gradient-to-l from-white to-transparent" />
               )}
             </div>
@@ -139,7 +156,8 @@ const AnalysisDashboard = () => {
         <hr />
       </div>
       {/* 차트 섹션 */}
-      <div className="mb-4 flex items-end justify-end">
+      <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">
           <Datepicker
             inputClassName="w-[270px] py-2 rounded-full bg-zinc-800 text-white px-[24px]"