From babd1fabdacb5f901b58d1f86b410d41aaf9eebc Mon Sep 17 00:00:00 2001
From: bananajeong <73640737+Najeong-Kim@users.noreply.github.com>
Date: Sat, 2 Nov 2024 10:02:09 +0900
Subject: [PATCH] feat: add slope api

---
 src/app/mobile/slope/[resortId]/page.tsx      |  8 ++++++
 src/entities/slope/api/get-slope.ts           |  8 ++++++
 src/entities/slope/api/index.ts               |  1 +
 src/entities/slope/api/query/slope.queries.ts | 13 ++++++++++
 src/entities/slope/index.ts                   |  2 ++
 src/entities/slope/model/index.ts             |  1 +
 src/entities/slope/model/model.d.ts           | 26 +++++++++++++++++++
 src/views/slop-status/ui/slop-status-page.tsx | 14 ++++++++--
 8 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 src/app/mobile/slope/[resortId]/page.tsx
 create mode 100644 src/entities/slope/api/get-slope.ts
 create mode 100644 src/entities/slope/api/index.ts
 create mode 100644 src/entities/slope/api/query/slope.queries.ts
 create mode 100644 src/entities/slope/index.ts
 create mode 100644 src/entities/slope/model/index.ts
 create mode 100644 src/entities/slope/model/model.d.ts

diff --git a/src/app/mobile/slope/[resortId]/page.tsx b/src/app/mobile/slope/[resortId]/page.tsx
new file mode 100644
index 0000000..8f9bbc0
--- /dev/null
+++ b/src/app/mobile/slope/[resortId]/page.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import WebcamMobileMapPage from '@/views/slop-status/ui/slop-status-page';
+
+const Page = ({ params }: { params: { resortId: string } }) => {
+  return <WebcamMobileMapPage resortId={+params.resortId} />;
+};
+
+export default Page;
diff --git a/src/entities/slope/api/get-slope.ts b/src/entities/slope/api/get-slope.ts
new file mode 100644
index 0000000..399f858
--- /dev/null
+++ b/src/entities/slope/api/get-slope.ts
@@ -0,0 +1,8 @@
+import { apiClient } from '@/shared/api/base';
+import type { SlopeResponse } from '../model';
+
+export const getSlopes = async (resortId: number): Promise<SlopeResponse> => {
+  const result = await apiClient.get<SlopeResponse>(`/api/slopes/${resortId}`);
+
+  return result;
+};
diff --git a/src/entities/slope/api/index.ts b/src/entities/slope/api/index.ts
new file mode 100644
index 0000000..9bf784c
--- /dev/null
+++ b/src/entities/slope/api/index.ts
@@ -0,0 +1 @@
+export { slopeQueries } from './query/slope.queries';
diff --git a/src/entities/slope/api/query/slope.queries.ts b/src/entities/slope/api/query/slope.queries.ts
new file mode 100644
index 0000000..0c8818a
--- /dev/null
+++ b/src/entities/slope/api/query/slope.queries.ts
@@ -0,0 +1,13 @@
+import { queryOptions } from '@tanstack/react-query';
+import { getSlopes } from '../get-slope';
+
+export const slopeQueries = {
+  all: () => ['slope'],
+
+  slopeQueryKey: (resortId: number) => [...slopeQueries.all(), resortId],
+  slope: (resortId: number) =>
+    queryOptions({
+      queryKey: slopeQueries.slopeQueryKey(resortId),
+      queryFn: () => getSlopes(resortId),
+    }),
+};
diff --git a/src/entities/slope/index.ts b/src/entities/slope/index.ts
new file mode 100644
index 0000000..7b1c779
--- /dev/null
+++ b/src/entities/slope/index.ts
@@ -0,0 +1,2 @@
+export * as slopeApi from './api';
+export * from './model';
diff --git a/src/entities/slope/model/index.ts b/src/entities/slope/model/index.ts
new file mode 100644
index 0000000..8bdc932
--- /dev/null
+++ b/src/entities/slope/model/index.ts
@@ -0,0 +1 @@
+export type { Slope, Webcam, SlopeResponse } from './model';
diff --git a/src/entities/slope/model/model.d.ts b/src/entities/slope/model/model.d.ts
new file mode 100644
index 0000000..2759185
--- /dev/null
+++ b/src/entities/slope/model/model.d.ts
@@ -0,0 +1,26 @@
+export type Slope = {
+  name: string,
+  difficulty: string,
+  isDayOperating: true,
+  isNightOperating: true,
+  isLateNightOperating: true,
+  isDawnOperating: true,
+  isMidnightOperating: true
+}
+
+export type Webcam = {
+  name: string,
+  number: 0,
+  description: string,
+  url: string
+}
+
+export type SlopeResponse = {
+  dayOperatingHours: string,
+  nightOperatingHours: string,
+  lateNightOperatingHours: string,
+  dawnOperatingHours: string,
+  midnightOperatingHours: string,
+  slopes: Slope[],
+  webcams: Webcam[]
+}
\ No newline at end of file
diff --git a/src/views/slop-status/ui/slop-status-page.tsx b/src/views/slop-status/ui/slop-status-page.tsx
index b8a04a8..4ce65bd 100644
--- a/src/views/slop-status/ui/slop-status-page.tsx
+++ b/src/views/slop-status/ui/slop-status-page.tsx
@@ -7,12 +7,22 @@ import SlopMap from '@/features/slop/ui/slop-map';
 import SlopStatusList from '@/features/slop/ui/slop-status-list';
 import { slopQueries } from '@/entities/slop/api';
 import { RESORT_DOMAIN } from '@/entities/slop/model';
+import { slopeApi } from '@/entities/slope';
 import { cn } from '@/shared/lib';
 
-const SlopStatusPage = ({ params }: { params: { key: keyof typeof RESORT_DOMAIN } }) => {
+const SlopStatusPage = ({
+  params,
+  resortId,
+}: {
+  params?: { key: keyof typeof RESORT_DOMAIN };
+  resortId?: number;
+}) => {
   const { ref, style, containerRef } = useMapPinch();
 
-  const { data } = useQuery(slopQueries.list(params.key));
+  const { data: slopeData } = useQuery(slopeApi.slopeQueries.slope(resortId ?? 1));
+  console.log(slopeData);
+
+  const { data } = useQuery(slopQueries.list(params?.key ?? 'jisan'));
 
   if (!data) return;