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로 시간을 많이 단축시켰다.
알면 알수록 편리한거같다.