✨ Feat: framer-motion 사용하여 애니메이션 적용 (#55)

* ✨ Feat: 버튼 클릭 시 작아졌다가 커지기 * ✨ Feat: 탭 자연스럽게 나타나도록 구현 * ✨ Feat: 충전하기 버튼 클릭 시 작았다가 커지기
sprint6-part2 · May 11, 2024 · 046e106 · 046e106
1 parent 085b520
commit 046e106
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/src/components/CustomButton/index.jsx b/src/components/CustomButton/index.jsx
@@ -2,7 +2,7 @@
 /* eslint-disable react/require-default-props */
 import React from 'react';
 import PropTypes from 'prop-types';
-
+import { motion } from 'framer-motion';
 import s from './styles.module.scss';
 
 /**
@@ -27,7 +27,9 @@ const CustomButton = ({
   children,
 }) => {
   return (
-    <button
+    <motion.button
+      initial={{ scale: 1 }}
+      whileTap={{ scale: 0.9 }}
       className={s.button}
       type="button"
       onClick={onClick}
@@ -41,7 +43,7 @@ const CustomButton = ({
         </div>
       )}
       {btnText}
-    </button>
+    </motion.button>
   );
 };
 

diff --git a/src/pages/ListPage/Credit/index.jsx b/src/pages/ListPage/Credit/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './styles.module.scss';
 import CreditIcon from '@/assets/icons/Credit';
+import { motion } from 'framer-motion';
 
 const Credit = () => {
   return (
@@ -13,7 +14,13 @@ const Credit = () => {
         </div>
       </div>
       <div>
-        <button className={styles.charge}>충전하기</button>
+        <motion.button
+          initial={{ scale: 1 }}
+          whileTap={{ scale: 0.9 }}
+          className={styles.charge}
+        >
+          충전하기
+        </motion.button>
       </div>
     </section>
   );

diff --git a/src/pages/ListPage/MonthlyChart/components/ChartElement/index.jsx b/src/pages/ListPage/MonthlyChart/components/ChartElement/index.jsx
@@ -3,19 +3,25 @@ import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
 import { numberWithCommas } from '@/utils/numberWithCommas';
 import Profile from '@/components/Profile';
+import { motion } from 'framer-motion';
 
 /**
- * 
+ *
  * @param {object} idol 아이돌 객체
  * @param {number} ranking 아이돌 순위
  */
-
 const ChartElement = ({ idol, ranking }) => {
   const { name, profilePicture } = idol;
   const totalVotes = numberWithCommas(idol.totalVotes);
 
   return (
-    <li className={styles.container}>
+    <motion.li
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 1 }}
+      className={styles.container}
+    >
       <div className={styles.idolInfo}>
         <div className={styles.img}>
           <Profile size="sm" imageUrl={profilePicture} />
@@ -24,11 +30,13 @@ const ChartElement = ({ idol, ranking }) => {
         <div className={styles.name}>{name}</div>
       </div>
       <div className={styles.totalVotes}>{totalVotes}</div>
-    </li>
+    </motion.li>
   );
 };
+
 ChartElement.propTypes = {
   idol: PropTypes.object,
   ranking: PropTypes.number,
 };
+
 export default ChartElement;