From f0ce233fe70b3490c64dfe44e1fc128ad2c19831 Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Tue, 28 Oct 2025 12:38:34 +0900
Subject: [PATCH 1/2] =?UTF-8?q?fix=20:=20=EA=B8=B0=EC=83=81=EC=B2=AD=20?=
 =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=B6=80=EC=A0=95=ED=99=95=20?=
 =?UTF-8?q?=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C=EA=B7=B8=20=EC=98=A4?=
 =?UTF-8?q?=ED=83=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(pages)/weather/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/(pages)/weather/page.tsx b/src/app/(pages)/weather/page.tsx
index cb8e66e..41ba8ab 100644
--- a/src/app/(pages)/weather/page.tsx
+++ b/src/app/(pages)/weather/page.tsx
@@ -8,7 +8,7 @@ export default function WeatherPage() {
     <div className='flex h-full w-full flex-col'>
       <NoticeDialog
         title='공지'
-        description={`현재 기상청 데이터 불안정으로,\n일부 지역의 날씨 정보가 정확하지 않음 수 있습니다.`}
+        description={`현재 기상청 데이터 불안정으로,\n일부 지역의 날씨 정보가 정확하지 않을 수 있습니다.`}
         storageKey='weather-notice-dismissed'
       />
       <header className='flex-center text-title1 text-gray-bk border-gray-0 h-auto w-full border-b-8 py-3'>

From 378a5ce91380f773865e22352cbe45879a03ced3 Mon Sep 17 00:00:00 2001
From: westofsky <westofsky159@gmail.com>
Date: Tue, 28 Oct 2025 13:01:15 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat=20:=20=EB=9F=AC=EB=8B=9D=20=EC=A7=80?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=90=EC=84=B8=ED=95=9C=20=EC=84=A4=EB=AA=85=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/weather-info-modal.tsx        | 70 +++++++++++++++++++
 .../_components/weather-running-condition.tsx | 14 +++-
 2 files changed, 82 insertions(+), 2 deletions(-)
 create mode 100644 src/app/(pages)/weather/_components/weather-info-modal.tsx

diff --git a/src/app/(pages)/weather/_components/weather-info-modal.tsx b/src/app/(pages)/weather/_components/weather-info-modal.tsx
new file mode 100644
index 0000000..06ae260
--- /dev/null
+++ b/src/app/(pages)/weather/_components/weather-info-modal.tsx
@@ -0,0 +1,70 @@
+import { X } from 'lucide-react';
+import RunningGoodIcon from '@/public/svg/weather/running-good.svg';
+import RunningNormalIcon from '@/public/svg/weather/running-normal.svg';
+import RunningBadIcon from '@/public/svg/weather/running-bad.svg';
+
+interface WeatherInfoModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function WeatherInfoModal({ isOpen, onClose }: WeatherInfoModalProps) {
+  if (!isOpen) return null;
+  return (
+    <div className='absolute top-8 left-0 z-50'>
+      <div
+        className='rounded-[20px] bg-white px-[20px] py-4'
+        style={{ boxShadow: '0 4px 12px 0 rgba(0, 0, 0, 0.20)' }}
+      >
+        <div className='mb-6 flex gap-2'>
+          <div className='flex flex-col gap-1'>
+            <p className='text-title2'>러닝 지수</p>
+            <p className='text-gray-4 text-body4'>
+              기상 데이터를 기반으로 기온, 바람, 미세먼지 등을 AI가 종합 분석해
+              산출한 러닝 지수입니다.
+            </p>
+          </div>
+          <X className='text-gray-3 h-4 w-4 flex-shrink-0' onClick={onClose} />
+        </div>
+        <div className='flex flex-col gap-4'>
+          <div className='flex items-center gap-4'>
+            <span className='flex-col-center flex-shrink-0 gap-1'>
+              <RunningGoodIcon />
+              <span className='text-title3 text-weather-bl-02 bg-weather-bl-01 rounded-xl px-2 py-1'>
+                좋음
+              </span>
+            </span>
+            <p className='text-body4 text-gray-bk whitespace-pre-line'>
+              {`맑고 선선한 날씨로\n 러닝하기에 매우 좋은 조건입니다.`}
+            </p>
+          </div>
+
+          <div className='flex items-center gap-4'>
+            <span className='flex-col-center flex-shrink-0 gap-1'>
+              <RunningNormalIcon />
+              <span className='text-title3 text-point-400 bg-point-000 rounded-xl px-2 py-1'>
+                보통
+              </span>
+            </span>
+            <p className='text-body4 text-gray-bk whitespace-pre-line'>
+              {`러닝하기에 무난한 날씨입니다.\n 개인 컨디션에 따라 속도를 조절하세요.`}
+            </p>
+          </div>
+
+          <div className='flex items-center gap-4'>
+            <span className='flex-col-center flex-shrink-0 gap-1'>
+              <RunningBadIcon />
+              <span className='text-title3 text-weather-or-02 bg-weather-or-01 rounded-xl px-2 py-1'>
+                나쁨
+              </span>
+            </span>
+            <p className='text-body4 text-gray-bk whitespace-pre-line'>
+              흐리거나 공기 질이 좋지 않아 러닝 시 주의가 필요합니다. 초보자는
+              실내 러닝을 권장해요.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(pages)/weather/_components/weather-running-condition.tsx b/src/app/(pages)/weather/_components/weather-running-condition.tsx
index bf36654..0c9b955 100644
--- a/src/app/(pages)/weather/_components/weather-running-condition.tsx
+++ b/src/app/(pages)/weather/_components/weather-running-condition.tsx
@@ -11,6 +11,8 @@ import {
 } from '../_hooks/running-condition.hook';
 import clsx from 'clsx';
 import { cn } from '@/utils/cn';
+import { useState } from 'react';
+import { WeatherInfoModal } from './weather-info-modal';
 
 interface RunningIndexProps {
   weatherData: WeatherData;
@@ -18,10 +20,11 @@ interface RunningIndexProps {
 
 export function WeatherRunningCondition({ weatherData }: RunningIndexProps) {
   const runningCondition = useRunningCondition(weatherData);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   return (
     <div
       className={cn(
-        'flex h-auto w-full flex-col gap-1 rounded-[20px] border px-8 py-3 shadow-[0_0_8px_0_rgba(103,236,180,0.20)]',
+        'relative flex h-auto w-full flex-col gap-1 rounded-[20px] border px-8 py-3 shadow-[0_0_8px_0_rgba(103,236,180,0.20)]',
         runningCondition.index === '좋음' && 'border-weather-bl-02',
         runningCondition.index === '보통' && 'border-point-400',
         runningCondition.index === '나쁨' && 'border-weather-or-02',
@@ -29,7 +32,10 @@ export function WeatherRunningCondition({ weatherData }: RunningIndexProps) {
     >
       <span className='flex items-center gap-1'>
         <span className='text-caption2 text-gray-3'>러닝 지수</span>
-        <RunningAlertIcon />
+
+        <button onClick={() => setIsModalOpen(true)}>
+          <RunningAlertIcon />
+        </button>
       </span>
       <div className='flex items-center justify-start gap-7'>
         <span className='flex-col-center gap-1'>
@@ -59,6 +65,10 @@ export function WeatherRunningCondition({ weatherData }: RunningIndexProps) {
           <p className='text-title3 text-gray-bk'>{runningCondition.tip}</p>
         </span>
       </div>
+      <WeatherInfoModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+      />
     </div>
   );
 }