diff --git a/src/components/modalContent/DonationModalContent.jsx b/src/components/modalContent/DonationModalContent.jsx
index 2df2c37..9f1f2b1 100644
--- a/src/components/modalContent/DonationModalContent.jsx
+++ b/src/components/modalContent/DonationModalContent.jsx
@@ -5,14 +5,11 @@ import { getCredits, spendCredits } from '@/utils/creditStorage';
 import { putCredits } from '@/apis/donationApi';
 
 function DonationModalContent({
-  item,
-  credits,
+  item: { id, image, subtitle, title, receivedCredit, remainingDays },
+  credits: myCredit,
   setModalStep,
   onDonationSuccess,
 }) {
-  const { id, image, subtitle, title, receivedCredit, remainingDays } = item;
-  const myCredit = credits;
-
   const [detailInfo, setDetailInfo] = useState(false);
   const [inputCredit, setInputCredit] = useState('');
   const [invalidCredit, setInvalidCredit] = useState(false);
@@ -27,7 +24,8 @@ function DonationModalContent({
     setInputCredit(event.target.value);
   };
 
-  const handleDonation = async () => {
+  const handleDonation = async (event) => {
+    event.preventDefault();
     setIsLoading(true);
     try {
       const credit = Number(inputCredit);
@@ -45,23 +43,20 @@ function DonationModalContent({
   };
 
   useEffect(() => {
-    if (Number(inputCredit) > myCredit) {
-      setInvalidCredit(true);
-    } else {
-      setInvalidCredit(false);
-    }
+    const isInvalidCredit = Number(inputCredit) > myCredit;
+    setInvalidCredit(isInvalidCredit);
   }, [inputCredit]);
 
   useEffect(() => {
-    if (inputCredit === undefined || inputCredit < 1) {
-      setNullCredit(true);
-    } else {
-      setNullCredit(false);
-    }
+    const isNullCredit = inputCredit === undefined || inputCredit < 1;
+    setNullCredit(isNullCredit);
   }, [inputCredit]);
 
   return (
-    <div className="w-[295px] pt-[24px] flex flex-col items-center gap-6">
+    <form
+      onSubmit={handleDonation}
+      className="w-[295px] pt-[24px] flex flex-col items-center gap-6"
+    >
       {/* 후원 세부 정보 */}
       <div className="flex flex-col gap-[10px]">
         <div className="w-[158px] h-[206px] overflow-hidden rounded-lg">
@@ -132,11 +127,11 @@ function DonationModalContent({
       <PrimaryButton
         disabled={invalidCredit || nullCredit || isLoading}
         className="w-full h-[42px] rounded-lg font-bold text-[14px] text-white"
-        onClickFunc={handleDonation}
+        type="submit"
       >
         후원하기
       </PrimaryButton>
-    </div>
+    </form>
   );
 }
 
diff --git a/src/pages/listPage/donation/DonationCard.jsx b/src/pages/listPage/donation/DonationCard.jsx
index 7bd1303..0a1960d 100644
--- a/src/pages/listPage/donation/DonationCard.jsx
+++ b/src/pages/listPage/donation/DonationCard.jsx
@@ -1,18 +1,18 @@
 import creditIcon from '@/assets/icons/credit.svg';
 import PrimaryButton from '@/components/PrimaryButton';
 
-function DonationCard({ item, onDonationClick }) {
-  const {
+function DonationCard({
+  item: {
     id,
-    idol,
+    idol: { name, group, profilePicture },
     subtitle,
     title,
     receivedDonations,
     targetDonation,
     deadline,
-  } = item;
-  const { name, group, profilePicture } = idol;
-
+  },
+  onDonationClick,
+}) {
   const currentDonationPercentage = (receivedDonations / targetDonation) * 100;
 
   const receivedCredit = receivedDonations.toLocaleString();
@@ -23,12 +23,12 @@ function DonationCard({ item, onDonationClick }) {
   const remainingDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
 
   const modalData = {
-    id: id,
+    id,
     image: profilePicture,
-    subtitle: subtitle,
+    subtitle,
     title: `${group} ${name} 광고`,
-    receivedCredit: receivedCredit,
-    remainingDays: remainingDays,
+    receivedCredit,
+    remainingDays,
   };
 
   return (
diff --git a/src/pages/listPage/donation/DonationsList.jsx b/src/pages/listPage/donation/DonationsList.jsx
index 5b95c50..c030092 100644
--- a/src/pages/listPage/donation/DonationsList.jsx
+++ b/src/pages/listPage/donation/DonationsList.jsx
@@ -4,6 +4,8 @@ import DonationCard from '@/pages/listPage/donation/DonationCard';
 import prevIcon from '@/assets/icons/prevIcon.svg';
 import nextIcon from '@/assets/icons/nextIcon.svg';
 
+const MAXIMUL_VIEW_DONATIONS = 4;
+
 function DonationsList({ onDonationClick }) {
   const [items, setItems] = useState([]);
   const [cursor, setCursor] = useState(0);
@@ -112,7 +114,7 @@ function DonationsList({ onDonationClick }) {
               {/* 로딩 중일 시 플레이스홀더 애니메이션 적용 */}
               {isLoading ? (
                 <div className="flex gap-2 tablet:gap-4 pc:gap-6">
-                  {[...Array(4)].map((_, index) => (
+                  {[...Array(MAXIMUL_VIEW_DONATIONS)].map((_, index) => (
                     <div
                       key={index}
                       className="w-[158px] tablet:w-[282px] h-[300.5px] tablet:h-[407.5px] flex-shrink-0 flex-grow-0 bg-gradient-to-b from-gray-400 via-gray-500 to-gray-600 opacity-10 animate-pulse rounded-lg"