Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[feat/#58] 대시보드 디자인 정합성 QA 수정 #81

Merged
merged 1 commit into from
Sep 23, 2024
Merged

[feat/#58] 대시보드 디자인 정합성 QA 수정 #81

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 36 additions & 18 deletions src/pages/AnalysisDashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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>
Expand All @@ -84,35 +99,37 @@ 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" />
)}

{/* 캐러셀 아이템 */}
<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">
Expand All @@ -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>
Expand All @@ -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]"
Expand Down
Loading