feat: 디스커버리(메인) 페이지 개발 (#7)

* feat: Update slop-video component to use lazy loading for ReactHlsPlayer

* feat: Add Header component to widgets folder

* feat: Add constants for weekly weather data

* feat: Add layout component for web application

* feat: Add WeatherList component in Discovery page

* feat: Add WeatherCardItem component for displaying weather information

* refactor: Update stroke attributes in SVG icons

* feat: Add rain and snow weather options to model and UI components

* feat: Remove unused NavBar and StatusBar components

* refactor: Remove unused video and image files

* refactor: Update weather page imports to use new file structure

* refactor: Update weather page name and add data

* feat: Add antialiased in web page

* refactor: Delete unused icons

* feat: Create apiClient base

* feat: Add discovery API queries

* refactor: Update discovery page to use api

* refactor: Update weather folder name to discovery

* fix: Fix Build error

* refactor: Add ensureEnvVar in env

src/app/(web)/layout.tsx

@@ -0,0 +1,9 @@
+import { cn } from '@/shared/lib';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className={cn('flex size-full justify-center bg-main-5 antialiased')}>
+      <div className={cn('size-full max-w-[670px]')}>{children}</div>
+    </div>
+  );
+}

src/app/(web)/page.tsx

@@ -0,0 +1 @@
+export { default } from '@/pages/discovery/ui/discovery-page';

src/entities/discovery/api/discovery.queries.ts

@@ -0,0 +1,13 @@
+import { queryOptions } from '@tanstack/react-query';
+import { getDiscoveries } from './get-discoveries';
+
+export const discoveryQueries = {
+  all: () => ['discovery'],
+
+  listQueryKey: () => [...discoveryQueries.all(), 'list'],
+  list: () =>
+    queryOptions({
+      queryKey: [...discoveryQueries.listQueryKey()],
+      queryFn: () => getDiscoveries(),
+    }),
+};

src/entities/discovery/api/get-discoveries.ts

@@ -0,0 +1,9 @@
+import { DiscoveryData } from '../model';
+import type { Discovery } from '../model';
+
+export const getDiscoveries = async (): Promise<Discovery[]> => {
+  // const result = await apiClient.get<Discovery[]>('/discoveries');
+  const result = DiscoveryData;
+
+  return result;
+};

src/entities/discovery/api/index.ts

@@ -0,0 +1 @@
+export { discoveryQueries } from './discovery.queries';

src/entities/discovery/index.ts

@@ -0,0 +1,2 @@
+export * as discoveryApi from './api';
+export * from './model';

src/entities/discovery/model/constants.ts

@@ -0,0 +1,121 @@
+import type { Discovery, WeeklyWeather } from './model';
+
+export const WeeklyWeatherData: WeeklyWeather[] = [
+  {
+    day: '월',
+    weather: 'sun',
+    temperature: {
+      lowest: '-2°',
+      average: '-5°',
+    },
+  },
+  {
+    day: '화',
+    weather: 'snow',
+    temperature: {
+      lowest: '-3°',
+      average: '-6°',
+    },
+  },
+  {
+    day: '수',
+    weather: 'sun',
+    temperature: {
+      lowest: '-1°',
+      average: '-4°',
+    },
+  },
+  {
+    day: '목',
+    weather: 'cloud',
+    temperature: {
+      lowest: '-2°',
+      average: '-5°',
+    },
+  },
+  {
+    day: '금',
+    weather: 'cloud',
+    temperature: {
+      lowest: '-1°',
+      average: '-4°',
+    },
+  },
+  {
+    day: '토',
+    weather: 'rain',
+    temperature: {
+      lowest: '-3°',
+      average: '-6°',
+    },
+  },
+  {
+    day: '일',
+    weather: 'sun',
+    temperature: {
+      lowest: '-2°',
+      average: '-5°',
+    },
+  },
+  {
+    day: '월',
+    weather: 'sun',
+    temperature: {
+      lowest: '-2°',
+      average: '-5°',
+    },
+  },
+];
+
+export const DiscoveryData: Discovery[] = [
+  {
+    name: '용평스키장 모나',
+    slope: null,
+    weather: {
+      weather: 'sun',
+      temperature: -5,
+      description: '맑음',
+    },
+    weeklyWeather: WeeklyWeatherData,
+  },
+  {
+    name: '휘닉스파크',
+    slope: 8,
+    weather: {
+      weather: 'cloud',
+      temperature: -3,
+      description: '흐리고 비',
+    },
+    weeklyWeather: WeeklyWeatherData,
+  },
+  {
+    name: '하이원스키장',
+    slope: 10,
+    weather: {
+      weather: 'rain',
+      temperature: -4,
+      description: '비',
+    },
+    weeklyWeather: WeeklyWeatherData,
+  },
+  {
+    name: '비발디파크',
+    slope: 14,
+    weather: {
+      weather: 'snow',
+      temperature: -6,
+      description: '눈',
+    },
+    weeklyWeather: WeeklyWeatherData,
+  },
+  {
+    name: '곤지암스키장',
+    slope: 8,
+    weather: {
+      weather: 'cloud',
+      temperature: -3,
+      description: '흐리고 비',
+    },
+    weeklyWeather: WeeklyWeatherData,
+  },
+];

src/entities/discovery/model/index.ts

@@ -0,0 +1,2 @@
+export { DiscoveryData } from './constants';
+export type { Weather, WeeklyWeather, Discovery } from './model';

src/entities/discovery/model/model.d.ts

@@ -0,0 +1,21 @@
+export type Weather = 'sun' | 'cloud' | 'rain' | 'snow';
+
+export type WeeklyWeather = {
+  day: string;
+  weather: Weather;
+  temperature: {
+    lowest: string;
+    average: string;
+  };
+};
+
+export type Discovery = {
+  name: string;
+  slope: number | null;
+  weather: {
+    weather: Weather;
+    temperature: number;
+    description: string;
+  };
+  weeklyWeather: WeeklyWeather[];
+};

src/pages/discovery/ui/discovery-page.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+import DiscoveryList from '@/widgets/discovery/ui/discovery-list';
+import Header from '@/widgets/header/ui/header';
+import { discoveryApi } from '@/entities/discovery';
+import { cn } from '@/shared/lib';
+
+const DiscoveryPage = () => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  return <DiscoveryPageContent />;
+};
+
+const DiscoveryPageContent = () => {
+  const { data: discoveryData } = useQuery(discoveryApi.discoveryQueries.list());
+
+  if (!discoveryData) return null;
+
+  return (
+    <div className={cn('relative size-full bg-opacity-65 bg-[url("/background.png")]')}>
+      <div className={cn('size-full bg-gradient-to-b from-[#8DA3DD/20] to-transparent')}>
+        <Header />
+        <DiscoveryList discoveryData={discoveryData} />
+      </div>
+    </div>
+  );
+};
+
+export default DiscoveryPage;

src/shared/api/base.ts

@@ -0,0 +1,61 @@
+import { API_URL } from '@/shared/config';
+
+export class ApiClient {
+  private baseUrl: string;
+
+  constructor(url: string) {
+    this.baseUrl = url;
+  }
+
+  async handleResponse<TResult>(response: Response): Promise<TResult> {
+    if (!response.ok) {
+      throw new Error(`HTTP error! Status: ${response.status}`);
+    }
+
+    try {
+      return await response.json();
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      throw new Error('Error parsing JSON response');
+    }
+  }
+
+  public async get<TResult = unknown>(
+    endpoint: string,
+    queryParams?: Record<string, string | number>
+  ): Promise<TResult> {
+    const url = new URL(endpoint, this.baseUrl);
+
+    if (queryParams) {
+      Object.entries(queryParams).forEach(([key, value]) => {
+        url.searchParams.append(key, value.toString());
+      });
+    }
+
+    const response = await fetch(url.toString(), {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+
+    return this.handleResponse<TResult>(response);
+  }
+
+  public async post<TResult = unknown, TData = Record<string, unknown>>(
+    endpoint: string,
+    body: TData
+  ): Promise<TResult> {
+    const response = await fetch(`${this.baseUrl}${endpoint}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(body),
+    });
+
+    return this.handleResponse<TResult>(response);
+  }
+}
+
+export const apiClient = new ApiClient(API_URL);

src/shared/config/index.ts

@@ -0,0 +1,8 @@
+const ensureEnvVar = (value: string | undefined): string => {
+  if (value === undefined) {
+    throw new Error(`Environment variable is not set`);
+  }
+  return value;
+};
+
+export const API_URL = ensureEnvVar(process.env.NEXT_PUBLIC_API_URL);

src/shared/icons/close.tsx

@@ -19,7 +19,7 @@ const CloseIcon = ({ className, ...args }: CloseIconProps) => {
       <path
         d="M12.75 5.25L5.25 12.75M12.75 12.75L5.25 5.25"
         stroke="currentColor"
-        stroke-width="2"
+        strokeWidth="2"
         stroke-linecap="round"
       />
     </svg>