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;