[4주차 심회/생각과제] 심화과제, 생각과제 제출

[gunom]

✨ 구현 기능 명세

• 심화과제
  [x] Custom hook 분리
  [x] Skeleton UI 구현

• 생각 과제
  Props Drilling을 피할 방법
  앱잼에서의 계획

🌼 PR Point

• ~ 부분 이렇게 구현했어요, 피드백 부탁해요!
  Custom hook 분리

import axios from "axios";
import { useEffect, useState } from "react";
import { WEATHER_TYPE } from "../assets/WEATHER_TYPE";

const useWeatherData = (type, city) => {

    const [data, setData] = useState([])
    const [isError, setIsError] = useState("")
    const [isLoading, setIsLoading] = useState(true)
    const weatherTypeImage = WEATHER_TYPE;

    useEffect(() => {
        const fetchData = () => {
            if (type === 'day') {
                try {
                    axios.get(
                        `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${import.meta.env.VITE_APP_WEATHER
                        }&units=metric`
                    ).then(
                        res => {
                            console.log(weatherTypeImage)
                            console.log(res.data)
                            const imgURL = weatherTypeImage.find(
                                (item) => item.description === res.data.weather[0].description
                            ).imgURL;
                            const newWeatherData = [{ ...res.data, imgURL, currentCity: res.data.name }];
                            setData(newWeatherData)
                            setIsError(false)
                        }
                    ).finally(
                        console.log('done'),
                        setIsLoading(false)
                    )
                } catch (err) {
                    setIsError(err)
                }
            } else if (type === 'week') {
                try {
                    axios.get(
                        `https://api.openweathermap.org/data/2.5/forecast?q=${city}&appid=${import.meta.env.VITE_APP_WEATHER
                        }&units=metric`
                    ).then(
                        res => {
                            const newWeatherData = res.data.list.filter((item, index) => index % 8 === 0);
                            newWeatherData.forEach((item) => {
                                const imgURL = weatherTypeImage.find(
                                    (imageData) => imageData.description === item.weather[0].description
                                );
                                if (imgURL === undefined) item.imgURL = weatherTypeImage[0].imgURL;
                                else {
                                    item.imgURL = imgURL.imgURL;
                                }
                                item.cuurentCity = res.data.city.name;
                            });
                            setData(newWeatherData)
                            setIsError(false)
                        }
                    ).finally(
                        setIsLoading(false)
                    )
                } catch (err) {
                    setIsError(err)

                }
            }
        }
        setTimeout(() => {
            fetchData()
        }, 2000)
    }, [type, city])

    return {
        data,
        isError,
        isLoading,
    }
}

export default useWeatherData

setTimeout으로 스켈레톤 확인 가능

import { styled } from "styled-components";

const SkeletonCard = () => {
  return <St.SkeletonCard />;
};

export default SkeletonCard;

const St = {
  SkeletonCard: styled.section`
    @keyframes pulse {
      0% {
        background-color: #94a3b8;
      }

      50% {
        background-color: #cbd5e1;
      }

      100% {
        background-color: #94a3b8;
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 18rem;
      left: 0;
      width: 100%;
      height: 40%;
      animation: pulse 1s infinite ease-in-out;
    }
  `,
};

단순 section에 pulse 이벤트를 부여

🥺 소요 시간, 어려웠던 점

• 1h

🌈 구현 결과물

생각과제.md

Vite.+.React.-.Chrome.2023-06-14.17-52-13.mp4