[Feat/#108] 버튼 클릭 시 scale

src/app/mobile/admin/dashboard/_components/DashboardItem.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import convertTime from '@/utils/convertTime';
+import { handleTouchStart, handleTouchEnd } from '@/utils/handleTouch';
 import { DashboardProps } from '@/types/dashboardType';
 
 export default function DashboardItem({
@@ -69,6 +70,8 @@ export default function DashboardItem({
           <button
             type="button"
             onClick={handleCancelBtn}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
             className="w-14 text-return-red"
           >
             대여 취소
@@ -79,6 +82,8 @@ export default function DashboardItem({
         <button
           type="button"
           onClick={handleApproveBtn}
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
           className="text-return-blue"
         >
           {RentalApproveBtnText[status]}

src/app/mobile/main/_components/WelfareItem/index.tsx

@@ -1,4 +1,5 @@
 import Image from 'next/image';
+import { handleTouchStart, handleTouchEnd } from '@/utils/handleTouch';
 
 interface WelfareItemProps {
   itemName: string;
@@ -41,6 +42,8 @@ export default function WelfareItem({
         <button
           type="button"
           onClick={onRentalClick}
+          onTouchStart={handleTouchStart}
+          onTouchEnd={handleTouchEnd}
           className="box-border px-1 py-2.5 text-body-2-normal_semi font-semibold text-return-blue"
         >
           대여하기

src/components/mobile/Alert/index.tsx

@@ -1,3 +1,5 @@
+import { handleTouchStart, handleTouchEnd } from '@/utils/handleTouch';
+
 interface AlertProps {
   content: string; // alert창 문구
   ctaButtonText: string; // 오른쪽 버튼에 들어갈 문구
@@ -20,7 +22,7 @@ export default function Alert({
     : 'bg-warning text-white-primary'; // 빨간 버튼 (신청 취소)
 
   const defalutButtonClass =
-    'text-body-1-normal_semi w-[108px] rounded-[10px] py-[9px] font-medium outline-none';
+    'text-body-1-normal_semi w-[108px] rounded-[10px] py-[9px] font-medium outline-none ';
 
   return (
     <div className="fixed inset-0 z-20 flex items-center justify-center">
@@ -42,13 +44,17 @@ export default function Alert({
           <button
             type="button"
             onClick={onClickOther}
-            className={`${defalutButtonClass} bg-gray-tertiary text-gray-secondary`}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
+            className={`${defalutButtonClass} bg-gray-tertiary text-gray-secondary transition-all`}
           >
             {otherButtonText}
           </button>
           <button
             type="button"
             onClick={onClickCta}
+            onTouchStart={handleTouchStart}
+            onTouchEnd={handleTouchEnd}
             className={` ${defalutButtonClass} ${ctaButtonClass}`}
           >
             {ctaButtonText}

src/utils/handleTouch.ts

@@ -0,0 +1,9 @@
+const handleTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
+  e.currentTarget.style.transform = 'scale(0.95)';
+};
+
+const handleTouchEnd = (e: React.TouchEvent<HTMLButtonElement>) => {
+  e.currentTarget.style.transform = 'scale(1)';
+};
+
+export { handleTouchStart, handleTouchEnd };