Feat/recoma96/add forecast in the web

README.md

@@ -5,9 +5,9 @@
 
 ## Demo Screenshots
 
-![](docs/imgs/readme-1.png)
-![](docs/imgs/readme-2.png)
-![](docs/imgs/readme-3.png)
+![](docs/imgs/screenshots/0.3.0/1.png)
+![](docs/imgs/screenshots/0.3.0/2.png)
+![](docs/imgs/screenshots/0.3.0/3.png)
 
 
 * * *
@@ -52,6 +52,10 @@ DB_PORT=
 DB_USER=
 DB_PSWD=
 DB_SCHEMA=
+DATAGO_SERVICE_KEY=<공공데이터포털 서비스키>
+REDIS_URL=
+REDIS_HEALTH_CHECK_INTERVAL=<초단위>
+
 ```
 
 2. web 디렉토리에 들어가서 `.local.env`라는 환경변수 파일에 클라이언트 빌드에 필요한 환경변수를 입력합니다.

server/api/README.md

@@ -14,6 +14,9 @@ DB_PORT=5432
 DB_USER=<아이디>
 DB_PSWD=<패스워드>
 DB_SCHEMA=<스키마이름>
+DATAGO_SERVICE_KEY=<공공데이터포털 서비스키>
+REDIS_URL=
+REDIS_HEALTH_CHECK_INTERVAL=<초단위>
 ```
 
 ```shell

server/api/src/trailine_api/externals/datago.py

@@ -193,17 +193,6 @@ def call(self, nx: int, ny: int, days: int) -> List[ShortForecastItem]:
             ):
                 break
 
-            print({
-                "serviceKey": self.service_key,
-                "dataType": "JSON",
-                "numOfRows": 500,
-                "pageNo": page,
-                "base_date": base_date,
-                "base_time": base_time,
-                "nx": nx,
-                "ny": ny,
-            })
-
             # API 호출
             response = httpx.get(self.url, params={
                 "serviceKey": self.service_key,

server/api/src/trailine_api/main.py

@@ -11,7 +11,7 @@
 def create_app() -> FastAPI:
     container = Container()
 
-    # setup_logging(level="INFO")
+    setup_logging(level="INFO")
 
     app = FastAPI(
         title="trailine_api",

server/api/src/trailine_api/schemas/weather.py

@@ -11,8 +11,14 @@
 )
 
 
+DAY_OF_WEEK_LIST = ["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"]
+DAY_OF_WEEK_KO_LIST = ["월", "화", "수", "목", "금", "토", "일"]
+
+
 class WeatherForecastItemSchema(BaseModel):
     date: str = Field(..., description="예보 날짜 (YYYY-MM-DD)")
+    day_of_week: str = Field(..., alias="dayOfWeek", description="요일 (영문)")
+    day_of_week_ko: str = Field(..., alias="dayOfWeekKo", description="요일 (한국어)")
     min_temperature: float = Field(..., alias="minTemperature", description="최저 기온 (°C)")
     max_temperature: float = Field(..., alias="maxTemperature", description="최고 기온 (°C)")
     precipitation_probability: int = Field(..., alias="precipitationProbability", description="강수 확률 (%)")

server/api/src/trailine_api/services/weather_services.py

@@ -13,7 +13,7 @@
 from trailine_api.externals.datago import IKmaMidLandForecastAPI, IKmaMidLandTemperatureAPI, IKmaShortForecastAPI
 from trailine_api.repositories.course_repositories import ICourseRepository
 from trailine_api.repositories.weather_repositories import IWeatherRepository
-from trailine_api.schemas.weather import ShortForecastItem, WeatherForecastItemSchema
+from trailine_api.schemas.weather import DAY_OF_WEEK_KO_LIST, DAY_OF_WEEK_LIST, ShortForecastItem, WeatherForecastItemSchema
 
 
 MID_FORECAST_MIN_DAY = 5  # 기상청 중기예보 시작일 (5일 후부터)
@@ -132,10 +132,13 @@ def _build_short_forecasts(self, nx: int, ny: int, days: int) -> List[WeatherFor
         results: List[WeatherForecastItemSchema] = []
         for date_key in sorted(daily):
             items = daily[date_key]
+            weekday = datetime.strptime(date_key, DATE_FORMAT).weekday()
 
             results.append(
                 WeatherForecastItemSchema(
                     date=date_key,
+                    dayOfWeek=DAY_OF_WEEK_LIST[weekday],
+                    dayOfWeekKo=DAY_OF_WEEK_KO_LIST[weekday],
                     minTemperature=min(item.temperature for item in items),
                     maxTemperature=max(item.temperature for item in items),
                     precipitationProbability=max(item.rain_probability for item in items),
@@ -173,9 +176,12 @@ def _build_mid_forecasts(
             raw_i = i - MID_FORECAST_MIN_DAY
             forecast_date = today + timedelta(days=i)
 
+            weekday = forecast_date.weekday()
             results.append(
                 WeatherForecastItemSchema(
                     date=forecast_date.strftime(DATE_FORMAT),
+                    dayOfWeek=DAY_OF_WEEK_LIST[weekday],
+                    dayOfWeekKo=DAY_OF_WEEK_KO_LIST[weekday],
                     minTemperature=mid_temperatures[raw_i].min_temperature,
                     maxTemperature=mid_temperatures[raw_i].max_temperature,
                     precipitationProbability=max(

server/scripts/src/trailine_scripts/common/database.py

@@ -1,5 +1,5 @@
 from contextlib import contextmanager
-from trailine_model.base import SessionLocal, DATABASE_URL
+from trailine_model.base import SessionLocal
 
 @contextmanager
 def get_db():
@@ -12,6 +12,3 @@ def get_db():
         raise
     finally:
         db.close()
-
-
-print(DATABASE_URL)

web/src/components/client/WeatherForecast.tsx

@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from "react";
+import type { Forecast, SkyCondition, WeatherForecastResponse } from "@/types/responses/weather-forecast";
+import { FORECAST_DAYS } from "@/vars/weather";
+
+interface Props {
+    courseId: number | undefined;
+}
+
+const SkyConditionIcon: React.FC<{ condition: SkyCondition }> = ({ condition }) => {
+    switch (condition) {
+        case "clear":
+            return (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                    <circle cx="12" cy="12" r="4" fill="currentColor" />
+                    <path strokeLinecap="round" d="M12 2v4M12 18v4M2 12h4M18 12h4M17.66 6.34l1.41-1.41M6.34 6.34l-1.41-1.41M6.34 17.66l-1.41 1.41M17.66 17.66l1.41 1.41" />
+                </svg>
+            );
+        case "cloudy":
+            return (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" />
+                </svg>
+            );
+        case "rain":
+            return (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" />
+                    <path d="M8 19v3m4-3v3m4-3v3" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+                </svg>
+            );
+        case "snow":
+            return (
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8 text-sky-300" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" />
+                    <circle cx="8" cy="21" r="1" /><circle cx="12" cy="21" r="1" /><circle cx="16" cy="21" r="1" />
+                </svg>
+            );
+    }
+};
+
+const SKY_CONDITION_LABELS: Record<SkyCondition, string> = { // 한글 레이블, Record는 타입스크립트의 유틸리티 타입으로, 키와 값의 타입을 지정할 때 사용
+    clear: "맑음",
+    cloudy: "흐림",
+    rain: "비",
+    snow: "눈",
+};
+
+const isWeekend = (dayOfWeekKo: string): boolean => {
+    return dayOfWeekKo === "토" || dayOfWeekKo === "일";
+};
+
+const formatDate = (dateStr: string): string => {
+    const [, month, day] = dateStr.split("-");
+    return `${parseInt(month)}/${parseInt(day)}`;
+};
+
+const WeatherForecast: React.FC<Props> = ({ courseId }: Props) => {
+    const [forecasts, setForecasts] = useState<Forecast[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<boolean>(false);
+
+    useEffect(() => {
+        if (courseId === undefined) return;
+
+        setLoading(true);
+        fetch(`${import.meta.env.PUBLIC_API_ENDPOINT}/v1/courses/${courseId}/weather/forecast?days=${FORECAST_DAYS}`)
+            .then((res) => {
+                if (!res.ok) throw new Error("Failed to fetch forecast");
+                return res.json();
+            })
+            .then((data: WeatherForecastResponse) => {
+                setForecasts(data.forecasts);
+            })
+            .catch(() => {
+                setError(true);
+            })
+            .finally(() => setLoading(false));
+    }, [courseId]);
+
+    if (loading) {
+        return (
+            <div className="my-6">
+                <p className="text-sm font-bold text-base-content/60 mb-3">주간 날씨 예보</p>
+                <div className="flex gap-2 overflow-x-auto">
+                    {Array.from({ length: FORECAST_DAYS }).map((_, i) => (
+                        <div key={i} className="skeleton h-36 w-20 shrink-0 rounded-lg" />
+                    ))}
+                </div>
+            </div>
+        );
+    }
+
+    if (error || forecasts.length === 0) return null;
+
+    return (
+        <div className="my-6">
+            <p className="text-sm font-bold text-base-content/60 mb-3">주간 날씨 예보</p>
+            <div className="flex gap-2 overflow-x-auto pb-2">
+                {forecasts.map((forecast) => {
+                    const weekend = isWeekend(forecast.dayOfWeekKo);
+                    return (
+                        <div
+                            key={forecast.date}
+                            className={`flex flex-col items-center gap-1.5 px-4 py-3 rounded-lg shrink-0 flex-1 min-w-[80px] border ${
+                                weekend
+                                    ? "bg-red-50 border-red-200"
+                                    : "bg-base-100 border-base-content/10"
+                            }`}
+                        >
+                            {/* 요일 */}
+                            <span className={`text-sm font-bold ${weekend ? "text-red-500" : ""}`}>
+                                {forecast.dayOfWeekKo}
+                            </span>
+
+                            {/* 날짜 */}
+                            <span className="text-xs text-base-content/50">
+                                {formatDate(forecast.date)}
+                            </span>
+
+                            {/* 날씨 아이콘 */}
+                            <div className="my-1" title={SKY_CONDITION_LABELS[forecast.skyCondition]}>
+                                <SkyConditionIcon condition={forecast.skyCondition} />
+                            </div>
+
+                            {/* 최저/최고 온도 */}
+                            <div className="text-xs font-semibold">
+                                <span className="text-blue-500">{forecast.minTemperature}°</span>
+                                {" / "}
+                                <span className="text-red-500">{forecast.maxTemperature}°</span>
+                            </div>
+
+                            {/* 강수확률 */}
+                            {forecast.precipitationProbability > 0 ? (
+                                <span className={`text-xs ${
+                                    forecast.precipitationProbability >= 40
+                                        ? "text-blue-500 font-bold"
+                                        : "text-base-content/40"
+                                }`}>
+                                    강수확률 {forecast.precipitationProbability}%
+                                </span>
+                            ) : (
+                                <span className="text-xs text-base-content/20">-</span>
+                            )}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default WeatherForecast;

web/src/pages/courses/[id].astro

@@ -8,6 +8,7 @@ import type { CourseDetailSchemaResponse } from "@/types/responses/course-detail
 import CourseIntervalDetail from "@/components/client/CourseIntervalDetail";
 import { COURSE_DIFFICULTY_COLORS } from "@/vars/colors";
 import { minutesToKoreanDuration } from "@/lib/string-mapper";
+import WeatherForecast from "@/components/client/WeatherForecast";
 
 
 const { id } = Astro.params;
@@ -96,6 +97,9 @@ const difficultyBackgroundColor = course ? COURSE_DIFFICULTY_COLORS[course.diffi
         </div>
     </div>
 
+    <!-- 주간 날씨 예보 -->
+    <WeatherForecast client:load courseId={course?.id} />
+
     <!-- 코스 이미지 슬라이더 -->
     {course?.images && course.images.length > 0 && (
         <ImageSlider client:load images={course.images} className="w-full mx-auto" />

web/src/types/responses/weather-forecast.ts

@@ -0,0 +1,16 @@
+export type SkyCondition = "clear" | "cloudy" | "rain" | "snow";
+
+export interface Forecast {
+    date: string;
+    dayOfWeek: string;
+    dayOfWeekKo: string;
+    minTemperature: number;
+    maxTemperature: number;
+    precipitationProbability: number;
+    skyCondition: SkyCondition;
+}
+
+export interface WeatherForecastResponse {
+    courseId: number;
+    forecasts: Forecast[];
+}

web/src/vars/weather.ts

@@ -0,0 +1 @@
+export const FORECAST_DAYS = 7;