feat(weather-modal) : 러닝 지수 자세한 설명 모달 추가 및 오타 수정

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>
+  );
+}

src/app/(pages)/weather/_components/weather-running-condition.tsx

@@ -11,25 +11,31 @@ 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;
 }
 
 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',
       )}
     >
       <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>
   );
 }

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'>