🛠️ 블로그 개발해보기 - 3 (Home - part1) 🛠️

오유진·2023년 3월 23일
0
post-thumbnail

Home 구상 - part1

Home에서는 디자인 참고 블로그 와 같이 내가 좋아하는 영화,애니 사진들과
조금 오그라들수있는 감성적인 문구들을 번갈아가면서 보여줄 예정이다.

사진,문구 랜덤 설정

  const [backgroundImage, setBackgroundImage] = useState<string>("");
  const [quote, setQuote] = useState<string>("");

  const setBgAndQuote = () => {
    //images : 사진배열
    setBackgroundImage(images[Math.floor(Math.random() * images.length)]);
    
    //quotes : 문구배열
    setQuote(`${quotes[Math.floor(Math.random() * quotes.length)]}`);
  };

  useEffect(() => {
    setBgAndQuote();
  }, []);

사진,문구 배열을 만들어 준 뒤, useEffect를 사용하여 mount 될때 한번 사진과 문구를 랜덤으로 설정해준다.

사진들은 Firebase Storage에 저장해놓았다.

완성

Chakra UI, Framer-Motion으로 부드러운 애니메이션과 UI를 구성하였다.
css를 사용하였다면 많은 시간이 소요됐을텐데, Chakra UI로 시간을 많이 단축시켰다.
알면 알수록 편리한거같다.

0개의 댓글