feat: add slope status time

Author: Najeong-Kim

src/shared/icons/close.tsx

@@ -16,12 +16,7 @@ const CloseIcon = ({ className, ...args }: CloseIconProps) => {
       className={className}
       {...args}
     >
-      <path
-        d="M17 7L7 17M17 17L7 7"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-      />
+      <path d="M17 7L7 17M17 17L7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
     </svg>
   );
 };

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}
         />
       </section>
+      {Object.values(times).some((time) => time.value) && <SlopeStatusTime times={times} />}
       <SlopeStatusList resortId={resortId} slopes={slopes} />
     </main>
   );

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 (
+    <div
+      className={cn(
+        'mx-[20px] mt-[26px] flex h-[65px] items-center justify-around rounded-[3px] border border-black/5 bg-gray-20 px-5 py-2.5'
+      )}
+    >
+      {Object.entries(times).map(([key, value]) => (
+        <div key={key} className={cn('flex w-[90px] flex-col items-center gap-2')}>
+          <span className={cn('body1-semibold text-gray-60')}>{value.label}</span>
+          <span className={cn('body1')}>{value.value || '-'}</span>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SlopeStatusTime;