o2o-negosium-original/negodata/front/src/pages/dashboard.tsx

47 lines
1.9 KiB
TypeScript

import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import { PageContainer } from '@/components/layout/PageContainer';
import { Typography } from '@/components/ui/typography';
import { DashboardHero, ScopeSection } from '@/features/dashboard';
import { OnboardingGuideModal } from '@/features/onboarding/OnboardingGuideModal';
import { useGetDashboardSummary } from '@/api/generated/dashboard/dashboard';
// 견적 생성~마감~선정을 한눈에 보는 대시보드.
// 회사 전체·내 견적 두 스코프를 함께 보여준다(조회는 회사 공유). 위젯 행은 클릭 시 견적 상세로 딥링크. 읽기 전용.
const ONBOARDING_SEEN_KEY = 'negodata_onboarding_seen';
export default function DashboardPage() {
const navigate = useNavigate();
const { data, isLoading, isError } = useGetDashboardSummary();
const [guideOpen, setGuideOpen] = useState(false);
// 첫 방문 시 1회 자동 노출(localStorage). 이후엔 상단 "이용안내" 버튼으로만 연다.
useEffect(() => {
if (!localStorage.getItem(ONBOARDING_SEEN_KEY)) {
setGuideOpen(true);
localStorage.setItem(ONBOARDING_SEEN_KEY, '1');
}
}, []);
const openQuotation = (qtId: string) => navigate(`/quotation?detail=${qtId}`);
return (
<PageContainer>
<DashboardHero onOpenGuide={() => setGuideOpen(true)} />
{isLoading ? (
<Typography variant="muted">대시보드를 불러오는 중…</Typography>
) : isError || !data ? (
<Typography variant="muted">대시보드를 불러오지 못했습니다.</Typography>
) : (
<>
<ScopeSection label="회사 전체 견적" scope={data.company} onOpen={openQuotation} />
<ScopeSection label="내 견적" scope={data.mine} onOpen={openQuotation} />
</>
)}
<OnboardingGuideModal open={guideOpen} onOpenChange={setGuideOpen} />
</PageContainer>
);
}