Fix#144: 프로필 등록 모달이 제대로 열리지 않는 현상 수정

[toothlessdev]

🖇️ 연결 된 이슈

• resolve [🐞 버그 리포트] 핏글 조회 페이지 "프로필 등록" 모달 버그 수정 부탁드립니다. #144

🆕 기능 추가

• useOnMountAnimation 커스텀 훅을 구현하였습니다
  • 초기 스타일(initialStyles), 애니메이션 스타일(animationStyles), transition 옵션을 파라미터로 받아 애니메이션이 적용될 ref 를 반환합니다

📝 추가 사항

• 기존에 useInitialStyles 훅에서 초기 스타일이 적용된 이후, 바로 useEffect 에서 스타일이 적용되기 때문에 애니메이션이 제대로 적용되지 않는 문제가 발생하였습니다 (useEffect 는 콜스택에 바로 푸시됩니다)
• useOnMountAnimation 훅을 사용해 requestAnimaionFrame 을 사용하여 콜스택에 바로 푸시되는것이 아닌, 브라우저의 렌더링 사이클에 맞춰 다음 애니메이션 프레임 전에 실행되도록 예약하도록 수정하였습니다

[netlify]

✅ Deploy Preview for beta-room-fit ready!

Name	Link
🔨 Latest commit	a8a2d7d
🔍 Latest deploy log	https://app.netlify.com/sites/beta-room-fit/deploys/67a8d576ae773900082e8b4c
😎 Deploy Preview	https://deploy-preview-159--beta-room-fit.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

DangerJS Test Results

Tests	Message
✅	PR 제목에 #이슈넘버가 포함되어 있습니다.
✅	PR에 Reviewer가 지정되어 있습니다.
✅	PR에 Label이 지정되어 있습니다.
✅	TypeScript 컴파일에 성공했습니다.
✅	ESLint 결과에서 문제가 발견되지 않았습니다.

Generated by 🚫 dangerJS against a8a2d7d

[github-actions]

📖 Storybook Preview: https://www.chromatic.com/build?appId=6772e94da2d4f5be7f071f50&number=105
🔍 Chromatic Review: https://www.chromatic.com/build?appId=6772e94da2d4f5be7f071f50&number=105

[kimgho]

requestAnimationFrame 써서 해결한거 멋있어용 👍