Skip to content

Commit 28b34db

Browse files
committed
[feat/#58] 대시보드 디자인 정합성 QA 수정
- 자세분석 카드 사이즈 변경 - 기간별 추이 텍스트 추가
1 parent a2d6c86 commit 28b34db

File tree

1 file changed

+36
-18
lines changed

1 file changed

+36
-18
lines changed

src/pages/AnalysisDashboard.tsx

+36-18
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,21 @@ const AnalysisDashboard = () => {
2222
endDate: null,
2323
})
2424

25+
const [isLargeViewport, setIsLargeViewport] = useState(false)
26+
2527
const { todayAnalysis, totalAnalysis, isLoading, isError } = usePoseAnalysis(dateRange)
2628

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+
2740
console.log("totalAnalysis: ", dateRange)
2841

2942
const getPoseCount = (type: poseType) => {
@@ -61,19 +74,21 @@ const AnalysisDashboard = () => {
6174
<div className="flex space-x-2">
6275
<button
6376
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"
6578
}`}
6679
onClick={() => moveCarousel("left")}
67-
disabled={currentIndex === 0}
80+
disabled={isLargeViewport || currentIndex === 0}
6881
>
6982
<ChevronLeft size={20} />
7083
</button>
7184
<button
7285
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"
7489
}`}
7590
onClick={() => moveCarousel("right")}
76-
disabled={currentIndex === carouselItems.length - 3}
91+
disabled={isLargeViewport || currentIndex === carouselItems.length - 3}
7792
>
7893
<ChevronRight size={20} />
7994
</button>
@@ -84,35 +99,37 @@ const AnalysisDashboard = () => {
8499
{isError && <div>데이터를 불러오는 것에 실패했습니다</div>}
85100

86101
{!isLoading && !isError && todayAnalysis && (
87-
<div className="relative mb-8 overflow-hidden">
102+
<div className=" mb-8">
88103
<div className="flex">
89104
{/* 고정된 전체 틀어짐 횟수 카드 */}
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>
98115
</div>
99116
</div>
100117

101118
{/* 캐러셀 컨테이너 */}
102119
<div className="relative flex w-3/4 overflow-hidden">
103120
{/* 왼쪽 그라디언트 */}
104-
{currentIndex > 0 && (
121+
{!isLargeViewport && currentIndex > 0 && (
105122
<div className="absolute left-0 top-0 z-10 h-full w-8 bg-gradient-to-r from-white to-transparent" />
106123
)}
107124

108125
{/* 캐러셀 아이템 */}
109126
<div
110127
ref={carouselRef}
111128
className="flex transition-transform duration-300 ease-in-out"
112-
style={{ width: `${(carouselItems.length / 3) * 100}%` }}
129+
// style={{ width: `${(carouselItems.length / 3) * 100}%` }}
113130
>
114131
{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]">
116133
<div className="relative overflow-hidden rounded-lg bg-gray-100">
117134
<img src={image} alt={title} className="h-full w-full" />
118135
<div className="absolute inset-0 flex flex-col items-center pt-8 text-black">
@@ -128,7 +145,7 @@ const AnalysisDashboard = () => {
128145
</div>
129146

130147
{/* 오른쪽 그라디언트 */}
131-
{currentIndex < 1 && (
148+
{!isLargeViewport && currentIndex < 1 && (
132149
<div className="absolute right-0 top-0 z-10 h-full w-8 bg-gradient-to-l from-white to-transparent" />
133150
)}
134151
</div>
@@ -139,7 +156,8 @@ const AnalysisDashboard = () => {
139156
<hr />
140157
</div>
141158
{/* 차트 섹션 */}
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>
143161
<div className="text-sm text-gray-600">
144162
<Datepicker
145163
inputClassName="w-[270px] py-2 rounded-full bg-zinc-800 text-white px-[24px]"

0 commit comments

Comments
 (0)