diff --git a/src/shared/icons/close.tsx b/src/shared/icons/close.tsx index c0f6206..ec7629b 100644 --- a/src/shared/icons/close.tsx +++ b/src/shared/icons/close.tsx @@ -16,12 +16,7 @@ const CloseIcon = ({ className, ...args }: CloseIconProps) => { className={className} {...args} > - + ); }; diff --git a/src/views/slope-status/ui/slope-status-page.tsx b/src/views/slope-status/ui/slope-status-page.tsx index 3521345..cce51a1 100644 --- a/src/views/slope-status/ui/slope-status-page.tsx +++ b/src/views/slope-status/ui/slope-status-page.tsx @@ -11,6 +11,7 @@ import { slopeApi } from '@/entities/slope'; import type { Slope } from '@/entities/slope/model'; import { RESORT_DOMAIN } from '@/entities/slope/model'; import { cn } from '@/shared/lib'; +import SlopeStatusTime from '@/widgets/header/ui/slope-status-time'; const SlopeStatusPage = ({ resortId }: { resortId: number }) => { const { ref, style, containerRef } = useMapPinch(); @@ -30,6 +31,23 @@ const SlopeStatusPage = ({ resortId }: { resortId: number }) => { })) as Slope[], [slopeRawData, key] ); + const times = useMemo( + () => ({ + day: { + label: '주간', + value: slopeRawData?.dayOperatingHours, + }, + night: { + label: '야간', + value: slopeRawData?.nightOperatingHours, + }, + lateNight: { + label: '심야', + value: slopeRawData?.lateNightOperatingHours, + }, + }), + [slopeRawData] + ); if (!slopes) return; @@ -44,6 +62,7 @@ const SlopeStatusPage = ({ resortId }: { resortId: number }) => { slopes={slopes} /> + {Object.values(times).some((time) => time.value) && } ); diff --git a/src/widgets/header/ui/slope-status-time.tsx b/src/widgets/header/ui/slope-status-time.tsx new file mode 100644 index 0000000..180046f --- /dev/null +++ b/src/widgets/header/ui/slope-status-time.tsx @@ -0,0 +1,38 @@ +import { cn } from '@/shared/lib'; + +type SlopeStatusTimeProps = { + times: { + day: { + label: string; + value?: string; + }; + night: { + label: string; + value?: string; + }; + lateNight: { + label: string; + value?: string; + }; + }; +}; + +const SlopeStatusTime = ({ times }: SlopeStatusTimeProps) => { + console.log(times); + return ( +
+ {Object.entries(times).map(([key, value]) => ( +
+ {value.label} + {value.value || '-'} +
+ ))} +
+ ); +}; + +export default SlopeStatusTime;