139 lines
6.1 KiB
TypeScript
139 lines
6.1 KiB
TypeScript
"use client";
|
|
|
|
import dayjs from "dayjs";
|
|
|
|
import type { ScheduleInfoSearchParams } from "@/entities/statistics";
|
|
import { useScheduleInfo } from "@/entities/statistics";
|
|
import {
|
|
Badge,
|
|
type BadgeProps,
|
|
LoadingWithAnimation,
|
|
} from "@common/components";
|
|
|
|
import { useDragHandle } from "../sortable-panel";
|
|
|
|
interface ScheduleInfoPanelProps {
|
|
params: ScheduleInfoSearchParams | null;
|
|
}
|
|
|
|
const CURRENT_STATUS_LABEL_MAP = {
|
|
INPT: "입력중",
|
|
VRFC: "검증중",
|
|
NONE: "기간외",
|
|
};
|
|
|
|
const CURRENT_STATUS_COLOR_MAP = {
|
|
INPT: "",
|
|
VRFC: "gray",
|
|
NONE: "lightGray",
|
|
};
|
|
|
|
export function ScheduleInfoPanel({ params }: ScheduleInfoPanelProps) {
|
|
const { dragHandleProps, isDragging } = useDragHandle();
|
|
const { data, isLoading, error } = useScheduleInfo(params);
|
|
|
|
return (
|
|
<div className="card card-border !m-0 h-full border-border bg-background text-foreground">
|
|
<div
|
|
className={`card-header cursor-grab border-border active:cursor-grabbing ${isDragging ? "opacity-50" : ""}`}
|
|
{...dragHandleProps}
|
|
title="헤더를 드래그하여 패널 순서 변경"
|
|
>
|
|
<h3 className="text-2xl font-semibold">일정안내</h3>
|
|
{data && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-xl tracking-tight">
|
|
{data.ddayLabel}
|
|
</span>
|
|
<Badge
|
|
size="lg"
|
|
color="orange"
|
|
className="rounded-full !px-3 text-xl font-semibold"
|
|
>
|
|
{data.dday}
|
|
</Badge>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="card-body max-h-[calc(100%-3.25rem)] py-2.5">
|
|
{isLoading && (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="relative size-[5rem]">
|
|
<LoadingWithAnimation color="primary" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
{error && (
|
|
<div className="flex h-full items-center justify-center">
|
|
데이터를 불러올 수 없습니다.
|
|
</div>
|
|
)}
|
|
{data && (
|
|
<>
|
|
<div className="space-y-4">
|
|
<div className="mt-2 flex items-center justify-between">
|
|
<h4 className="px-2 text-2xl font-semibold tracking-tight text-label">
|
|
이번 주 주요 일정
|
|
</h4>
|
|
<div className="flex items-center gap-2">
|
|
<span className="tracking-tight text-label">
|
|
현재 진행 상태
|
|
</span>
|
|
<Badge
|
|
color={
|
|
CURRENT_STATUS_COLOR_MAP[
|
|
data.currentSe as keyof typeof CURRENT_STATUS_COLOR_MAP
|
|
] as BadgeProps["color"]
|
|
}
|
|
className="rounded-full !px-3"
|
|
>
|
|
{
|
|
CURRENT_STATUS_LABEL_MAP[
|
|
data.currentSe as keyof typeof CURRENT_STATUS_LABEL_MAP
|
|
]
|
|
}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between rounded-sm border border-border p-3">
|
|
<Badge size="lg" className="font-semibold">
|
|
{data.inptSeCd}차 입력기간
|
|
</Badge>
|
|
<p className="text-2xl">
|
|
{dayjs(data.inptBgngYmd).format(
|
|
"YYYY.MM.DD",
|
|
)}{" "}
|
|
~{" "}
|
|
{dayjs(data.inptEndYmd).format(
|
|
"YYYY.MM.DD",
|
|
)}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center justify-between rounded-sm border border-border p-3">
|
|
<Badge
|
|
size="lg"
|
|
color="gray"
|
|
className="font-semibold"
|
|
>
|
|
{data.vrfcSeCd}차 검증기간
|
|
</Badge>
|
|
<p className="text-2xl">
|
|
{dayjs(data.vrfcBgngYmd).format(
|
|
"YYYY.MM.DD",
|
|
)}{" "}
|
|
~{" "}
|
|
{dayjs(data.vrfcEndYmd).format(
|
|
"YYYY.MM.DD",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|