vercel๋ก ๋ฐฐํฌํ๋ ๊ณผ์ ์์ locaslStorage๊ฐ ์ ์๋์ง ์์๋ค๋ ์ค๋ฅ ๋ฐ์
ํ๋ก์ ํธ ๋ฐฐํฌ ํ QA๊ณผ์ ์ค ์ผ๋ถ ๋ธ๋ผ์ฐ์ (edge,naver,์นด์นด์คํก ๋ฏธ๋ฆฌ๋ณด๊ธฐ ๋ฑ) ์์ ๋ฐฐํฌ url์ ๊ทผ ์ 404 ์ค๋ฅ๊ฐ ๋ฐ์ํ๋ ๋ฌธ์ ๋ฐ์
React, TypeScript, react-query๋ฅผ ์ฌ์ฉํ์ฌ ์์ฝ ๋ ์ง ์ ํ์ ๋ฐ๋ผ ์์ฝ ๊ฐ๋ฅ ์๊ฐ์ ์กฐํํ๋ ๊ธฐ๋ฅ์ ๊ตฌํํ๋ค.์ฒ์์๋ useEffect์ dependency array์ date๋ฅผ ์ถ๊ฐํ์ฌ, ๋ ์ง๊ฐ ๋ณ๊ฒฝ๋ ๋๋ง๋ค API๋ฅผ ํธ์ถํ๋๋ก ์ฒ๋ฆฌํ๋ค.๊ทธ๋ฌ
Framer Motion์ ์ฌ์ฉํด ์คํฌ๋กค ํ๋ก๊ทธ๋ ์ค ๋ฐ๋ฅผ ๊ตฌํํ๋ ์ค, scrollYProgress ๊ฐ์ด ์ ๋ฐ์ดํธ๋์์์๋ ํ๋ก๊ทธ๋ ์ค ๋ฐ์ width๊ฐ ๋ณ๊ฒฝ๋์ง ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค. ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ๊ณผ์ ๊ณผ Framer Motion์์ MotionValue๋ฅผ ํจ
๊ธฐ์กด motion.div์์ transition์ ์ฌ์ฉํ ์ ๋๋ฉ์ด์ ์ ์ ์ด๊ฐ ์ด๋ ต๊ณ ๋ถ์์ฐ์ค๋ฌ์ ๋ค. ์ด๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด useSpring์ ํ์ฉํ ์ ๋๋ฉ์ด์ ์ผ๋ก ๋ณ๊ฒฝํ๋ค. useSpring์ ์ฌ์ฉํ๋ฉด ๋ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ป์ ์ ์์ผ๋ฉฐ, ์ธ๋ฐํ ์กฐ์ ์ด ๊ฐ๋ฅํ