@@ -22,8 +22,21 @@ const AnalysisDashboard = () => {
22
22
endDate : null ,
23
23
} )
24
24
25
+ const [ isLargeViewport , setIsLargeViewport ] = useState ( false )
26
+
25
27
const { todayAnalysis, totalAnalysis, isLoading, isError } = usePoseAnalysis ( dateRange )
26
28
29
+ useEffect ( ( ) => {
30
+ const checkViewportSize = ( ) => {
31
+ setIsLargeViewport ( window . innerWidth >= 1560 )
32
+ }
33
+
34
+ checkViewportSize ( ) // 초기 체크
35
+ window . addEventListener ( "resize" , checkViewportSize )
36
+
37
+ return ( ) => window . removeEventListener ( "resize" , checkViewportSize )
38
+ } , [ ] )
39
+
27
40
console . log ( "totalAnalysis: " , dateRange )
28
41
29
42
const getPoseCount = ( type : poseType ) => {
@@ -61,19 +74,21 @@ const AnalysisDashboard = () => {
61
74
< div className = "flex space-x-2" >
62
75
< button
63
76
className = { `rounded-full p-2 ${
64
- currentIndex === 0 ? "bg-gray-200 text-gray-400" : "bg-blue-500 text-white"
77
+ isLargeViewport || currentIndex === 0 ? "bg-gray-200 text-gray-400" : "bg-blue-500 text-white"
65
78
} `}
66
79
onClick = { ( ) => moveCarousel ( "left" ) }
67
- disabled = { currentIndex === 0 }
80
+ disabled = { isLargeViewport || currentIndex === 0 }
68
81
>
69
82
< ChevronLeft size = { 20 } />
70
83
</ button >
71
84
< button
72
85
className = { `rounded-full p-2 ${
73
- currentIndex === carouselItems . length - 3 ? "bg-gray-200 text-gray-400" : "bg-blue-500 text-white"
86
+ isLargeViewport || currentIndex === carouselItems . length - 3
87
+ ? "bg-gray-200 text-gray-400"
88
+ : "bg-blue-500 text-white"
74
89
} `}
75
90
onClick = { ( ) => moveCarousel ( "right" ) }
76
- disabled = { currentIndex === carouselItems . length - 3 }
91
+ disabled = { isLargeViewport || currentIndex === carouselItems . length - 3 }
77
92
>
78
93
< ChevronRight size = { 20 } />
79
94
</ button >
@@ -84,35 +99,37 @@ const AnalysisDashboard = () => {
84
99
{ isError && < div > 데이터를 불러오는 것에 실패했습니다</ div > }
85
100
86
101
{ ! isLoading && ! isError && todayAnalysis && (
87
- < div className = "relative mb-8 overflow-hidden " >
102
+ < div className = " mb-8" >
88
103
< div className = "flex" >
89
104
{ /* 고정된 전체 틀어짐 횟수 카드 */ }
90
- < div className = "relative mr-3 flex w-60 flex-col items-center rounded-lg bg-black text-white" >
91
- < p className = "mt-8 text-sm text-[#5A9CFF]" > 전체 틀어짐 횟수</ p >
92
- < div className = "mt-2 flex items-center" >
93
- < span className = "text-4xl font-bold" > { totalCount } </ span >
94
- < span className = "ml-1 text-sm" > 회</ span >
95
- </ div >
96
- < div className = "absolute bottom-[25px] flex h-24 justify-center" >
97
- < TotalCountChartIcon />
105
+ < div className = "relative" >
106
+ < div className = "mr-[15px] flex h-[266px] w-[230px] flex-col items-center rounded-lg bg-zinc-800 text-white" >
107
+ < p className = "mt-8 text-sm text-[#5A9CFF]" > 전체 자세 경고 횟수</ p >
108
+ < div className = "mt-2 flex items-center" >
109
+ < span className = "text-4xl font-bold" > { totalCount } </ span >
110
+ < span className = "ml-1 text-sm" > 회</ span >
111
+ </ div >
112
+ < div className = "absolute bottom-[25px] flex h-24 justify-center" >
113
+ < TotalCountChartIcon />
114
+ </ div >
98
115
</ div >
99
116
</ div >
100
117
101
118
{ /* 캐러셀 컨테이너 */ }
102
119
< div className = "relative flex w-3/4 overflow-hidden" >
103
120
{ /* 왼쪽 그라디언트 */ }
104
- { currentIndex > 0 && (
121
+ { ! isLargeViewport && currentIndex > 0 && (
105
122
< div className = "absolute left-0 top-0 z-10 h-full w-8 bg-gradient-to-r from-white to-transparent" />
106
123
) }
107
124
108
125
{ /* 캐러셀 아이템 */ }
109
126
< div
110
127
ref = { carouselRef }
111
128
className = "flex transition-transform duration-300 ease-in-out"
112
- style = { { width : `${ ( carouselItems . length / 3 ) * 100 } %` } }
129
+ // style={{ width: `${(carouselItems.length / 3) * 100}%` }}
113
130
>
114
131
{ carouselItems . map ( ( { title, type, image } , index ) => (
115
- < div key = { index } className = "mr-3 w-1/5 flex-shrink-0 " >
132
+ < div key = { index } className = "mr-3 h-[266px] w-[210px] " >
116
133
< div className = "relative overflow-hidden rounded-lg bg-gray-100" >
117
134
< img src = { image } alt = { title } className = "h-full w-full" />
118
135
< div className = "absolute inset-0 flex flex-col items-center pt-8 text-black" >
@@ -128,7 +145,7 @@ const AnalysisDashboard = () => {
128
145
</ div >
129
146
130
147
{ /* 오른쪽 그라디언트 */ }
131
- { currentIndex < 1 && (
148
+ { ! isLargeViewport && currentIndex < 1 && (
132
149
< div className = "absolute right-0 top-0 z-10 h-full w-8 bg-gradient-to-l from-white to-transparent" />
133
150
) }
134
151
</ div >
@@ -139,7 +156,8 @@ const AnalysisDashboard = () => {
139
156
< hr />
140
157
</ div >
141
158
{ /* 차트 섹션 */ }
142
- < div className = "mb-4 flex items-end justify-end" >
159
+ < div className = "flex items-center justify-between pb-6" >
160
+ < span className = "text-[22px] font-bold text-zinc-900" > 기간별 자세 추이</ span >
143
161
< div className = "text-sm text-gray-600" >
144
162
< Datepicker
145
163
inputClassName = "w-[270px] py-2 rounded-full bg-zinc-800 text-white px-[24px]"
0 commit comments