From 046e1060bb7ede81fc642c62b1b759307bcf4c38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A7=80=ED=98=84?= <leejihyun0324@gmail.com>
Date: Sat, 11 May 2024 12:05:59 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=20framer-motion=20=EC=82=AC?=
 =?UTF-8?q?=EC=9A=A9=ED=95=98=EC=97=AC=20=EC=95=A0=EB=8B=88=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9=20(#55)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Feat: 버튼 클릭 시 작아졌다가 커지기

* ✨ Feat: 탭 자연스럽게 나타나도록 구현

* ✨ Feat: 충전하기 버튼 클릭 시 작았다가 커지기
---
 src/components/CustomButton/index.jsx            |  8 +++++---
 src/pages/ListPage/Credit/index.jsx              |  9 ++++++++-
 .../components/ChartElement/index.jsx            | 16 ++++++++++++----
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/CustomButton/index.jsx b/src/components/CustomButton/index.jsx
index 59ed298..c902e55 100644
--- 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
index 56a3391..e53d515 100644
--- 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
index f47341a..1b64590 100644
--- 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;