[페이지별] 날씨 페이지

지역 선택

async function fetchWeatherData(coordinates) {
  const url = `${baseUrl}?serviceKey=${serviceKey}&pageNo=1&numOfRows=1500&dataType=JSON&base_date=${baseDate}&base_time=${baseTime}&nx=${coordinates.x}&ny=${coordinates.y}`;

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

export default function WeatherInfo() {
  const [city, setCity] = useState('');
  const [sublocation, setSublocation] = useState('');
  const [coordinates, setCoordinates] = useState({ x: 52, y: 38 });

  const { data, isLoading, isError, error } = useQuery({
    queryKey: ['OneDayWeatherData', coordinates],
    queryFn: () => fetchWeatherData(coordinates),
    enabled: !!coordinates,
    staleTime: 60 * 60 * 1000,
  });

• 현재 시간을 기준으로 해당 좌표에 대한 데이터를 가져옴
• 좌표는 하위 컴포넌트에서 선택한 지역을 상태 끌어올리기를 통해 받음

오늘의 날씨

<th className="border-2 h-[50px]" scope="row"></th>
            {data?.response?.body?.items?.item
              .filter((item) => {
                const hour = parseInt(item.fcstTime.slice(0, 2), 10); // 4자리로 표시되는 시간은 앞의 2자리만 정수로 추출
                return hour % 3 === 0 && item.category === 'TMP';
              })
              .slice(0, 8) // 8칸(24시간)만 랜더링
              .map((item) => {
                const hour = parseInt(item.fcstTime.slice(0, 2), 10);
                const time = `${hour}시`;
                return (
                  <th
                    key={`${item.fcstDate}-${item.fcstTime}`}
                    className="border-2"
                    scope="row"
                  >
                    {time}
                  </th>

• 3시간 간격으로 날씨 정보를 제공함
• 1시간마다 제공되는 데이터를 filter를 이용해 3시간 간격이 되게 함
• 하루만 나타내기 위해 slice를 이용하여 8개가 랜더링 되도록 함

  const sky = data?.response?.body?.items?.item[5]?.fcstValue;
  let skySrc = '';
  let skyAlt = '';
  let skyText = '';

  if (sky <= 5) {
    skySrc =
      'https://frontendschool6.github.io/finalize-react-6/weather/clear.svg';
    skyAlt = '맑음';
    skyText = '맑음';
  } else if (sky >= 6 && sky <= 8) {
    skySrc =
      'https://frontendschool6.github.io/finalize-react-6/weather/partly_cloudy.svg';
    skyAlt = '구름 많음';
    skyText = '구름 많음';
  } else {
    skySrc =
      'https://frontendschool6.github.io/finalize-react-6/weather/cloudy.svg';
    skyAlt = '흐림';
    skyText = '흐림';
  }

• 하늘 상태와 강수 형태에 따른 이미지는 조건부 랜더링으로 나타냄

3일치 날씨

• 정해진 시간 기준으로 데이터 가져오기
• 3일치 날씨 정보 제공