diff --git a/.gitignore b/.gitignore
index 5ef6a520..8b3c56f8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# key
+/localhost-key.pem
+/localhost.pem
\ No newline at end of file
diff --git a/package.json b/package.json
index f2254c97..d683e0c4 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev:https": "node server.js",
     "build": "next build",
     "start": "next start",
+    "https:dev": "node server.js",
     "lint": "next lint",
     "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx}\"",
diff --git a/src/app/(user-page)/my-meeting/_features/Writable.tsx b/src/app/(user-page)/my-meeting/_features/Writable.tsx
index b5d8ccf8..a1014494 100644
--- a/src/app/(user-page)/my-meeting/_features/Writable.tsx
+++ b/src/app/(user-page)/my-meeting/_features/Writable.tsx
@@ -48,7 +48,7 @@ const Writable = () => {
   return (
     <div>
       {allMeetings.length === 0 && (
-        <div className="text-gray-500 py-8 text-center text-white">
+        <div className="py-8 text-center text-Cgray500">
           리뷰 작성 가능한 모임이 없습니다. <br />
           모임에 참여하고 리뷰를 작성해보세요!
         </div>
diff --git a/src/app/(user-page)/my-meeting/_features/Written.tsx b/src/app/(user-page)/my-meeting/_features/Written.tsx
index 97fc9a58..b248b06e 100644
--- a/src/app/(user-page)/my-meeting/_features/Written.tsx
+++ b/src/app/(user-page)/my-meeting/_features/Written.tsx
@@ -50,7 +50,7 @@ const Written = () => {
     <div>
       {/* 데이터가 없는 경우 표시 */}
       {allComments.length === 0 && (
-        <div className="text-gray-500 py-8 text-center text-white">
+        <div className="py-8 text-center text-Cgray500">
           작성한 리뷰가 없습니다. <br />
           모임에 참여하고 리뷰를 작성해보세요!
         </div>
diff --git a/src/app/(user-page)/my-meeting/comments/page.tsx b/src/app/(user-page)/my-meeting/comments/page.tsx
index 3aa46152..f7a474e4 100644
--- a/src/app/(user-page)/my-meeting/comments/page.tsx
+++ b/src/app/(user-page)/my-meeting/comments/page.tsx
@@ -1,4 +1,3 @@
-import NotYet from '@/components/common/NotYet';
 import { MY_COMMENT_KEY } from '@/hooks/queries/useMyCommentQueries';
 import {
   HydrationBoundary,
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1c330d16..c7fa0edf 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -50,7 +50,7 @@ export default async function RootLayout({
         <ReactQueryProviders>
           <ToastProvider>
             <Header userInfo={userInfo} />
-            <div className="m-auto max-w-[1340px] pt-20">{children}</div>
+            <div className="m-auto max-w-[1340px]">{children}</div>
           </ToastProvider>
         </ReactQueryProviders>
         <div id="modal-root" />
diff --git a/src/app/meeting/_features/MeetingList.tsx b/src/app/meeting/_features/MeetingList.tsx
index c7db50a3..f5d44aca 100644
--- a/src/app/meeting/_features/MeetingList.tsx
+++ b/src/app/meeting/_features/MeetingList.tsx
@@ -107,7 +107,7 @@ const MeetingList = () => {
   }
 
   return (
-    <div className="mt-[126px]">
+    <div className="mt-12">
       <div className="typo-head1 mb-10 px-4 text-Cgray800">
         {translateCategoryNameToKor(categoryStr)} 모임 목록
       </div>
@@ -143,8 +143,9 @@ const MeetingList = () => {
       {/* 모임 리스트 웹뷰 */}
       {breakpoint === 'desktop' && (
         <div className="flex-col sm:hidden lg:flex">
-          {allMeetings.map((meeting) => (
+          {allMeetings.map((meeting, index) => (
             <HorizonCard
+              className={`animate-fadeInUp ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
               onClick={handleMoveDetailPage}
               key={meeting.meetingId}
               meetingId={meeting.meetingId}
@@ -179,10 +180,10 @@ const MeetingList = () => {
       {/* 모임 리스트 테블릿뷰 */}
       {breakpoint === 'tablet' && (
         <div className="hidden flex-col md:flex lg:hidden">
-          {allMeetings.map((meeting) => (
+          {allMeetings.map((meeting, index) => (
             <HorizonCard
               onClick={handleMoveDetailPage}
-              className="items-center"
+              className={`animate-fadeInUp items-center ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
               key={meeting.meetingId}
               meetingId={meeting.meetingId}
               category={translateCategoryNameToKor(categoryStr)}
@@ -218,10 +219,10 @@ const MeetingList = () => {
       {/* 모임 리스트 모바일뷰 */}
       {breakpoint === 'mobile' && (
         <div className="flex w-full flex-wrap items-center justify-center md:hidden lg:hidden">
-          {allMeetings.map((meeting) => (
+          {allMeetings.map((meeting, index) => (
             <VerticalCard
               onClick={handleMoveDetailPage}
-              className="h-[380px]"
+              className={`h-[380px] animate-fadeInUp items-center ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
               thumbnailHeight={160}
               thumbnailWidth={311}
               category={translateCategoryNameToKor(categoryStr)}
diff --git a/src/app/meeting/_features/RecommendMeeting.tsx b/src/app/meeting/_features/RecommendMeeting.tsx
index 9e83ffe0..8e057b06 100644
--- a/src/app/meeting/_features/RecommendMeeting.tsx
+++ b/src/app/meeting/_features/RecommendMeeting.tsx
@@ -44,11 +44,12 @@ const RecommendMeeting = () => {
           scrollbarWidth: 'thin',
           scrollbarColor: '#a0aec0 transparent',
         }}
-        className="hidden overflow-hidden overflow-x-auto pb-4 md:flex lg:flex"
+        className={`hidden overflow-hidden overflow-x-auto pb-4 md:flex lg:flex`}
       >
         {meetings?.map((meeting: TopMeeting) => (
           <VerticalCard
             onClick={handleMoveDetailPage}
+            className="animate-slideDown hover:animate-slideUp"
             category={translateCategoryNameToKor(categoryStr)}
             key={meeting.meetingId}
             meetingId={meeting.meetingId}
diff --git a/src/components/common/ErrorComponent.tsx b/src/components/common/ErrorComponent.tsx
new file mode 100644
index 00000000..37b361f1
--- /dev/null
+++ b/src/components/common/ErrorComponent.tsx
@@ -0,0 +1,30 @@
+import { useRouter } from 'next/navigation';
+
+import { Button } from '../ui/Button';
+
+interface ErrorComponentProps {
+  className?: string;
+}
+
+const ErrorComponent = ({ className }: ErrorComponentProps) => {
+  const router = useRouter();
+  const retryHandler = () => {
+    router.refresh();
+  };
+  return (
+    <div
+      className={`flex flex-col justify-center text-white ${className} h-screen w-full`}
+    >
+      <div className="text-center">
+        문제가 발생했습니다.
+        <br />
+        다시 시도해주세요.
+      </div>
+      <div className="mt-10 flex w-full justify-center">
+        <Button onClick={retryHandler}>다시 시도하기</Button>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorComponent;
diff --git a/src/components/ui/CardImage.tsx b/src/components/ui/CardImage.tsx
new file mode 100644
index 00000000..74ce74e1
--- /dev/null
+++ b/src/components/ui/CardImage.tsx
@@ -0,0 +1,39 @@
+// components/CardImage.js
+import Image from 'next/image';
+import { useState } from 'react';
+import React from 'react';
+
+interface CardImageProps {
+  src: string;
+  width: number;
+  height: number;
+}
+
+const CardImage = React.memo(({ src, width, height }: CardImageProps) => {
+  const [thumbnail, setThumbnail] = useState(src);
+  const [thumbnailLoaded, setThumbnailLoaded] = useState(false);
+  return (
+    <div
+      className="relative flex-shrink-0"
+      style={{ height: `${height}px`, width: `${width}px` }}
+    >
+      {!thumbnailLoaded && (
+        <div className="animate-pulse h-full w-full rounded-[20px] bg-Cgray200"></div>
+      )}
+      <Image
+        className="transform-gpu rounded-[20px] object-cover"
+        src={thumbnail}
+        alt="card_image"
+        fill
+        onError={() => {
+          setThumbnail('/thumbnail.jpg');
+        }}
+        onLoad={() => setThumbnailLoaded(true)}
+      />
+    </div>
+  );
+});
+
+CardImage.displayName = 'CardImage';
+
+export default CardImage;
diff --git a/src/components/ui/HorizonCard.tsx b/src/components/ui/HorizonCard.tsx
index d741e39c..e8f7316a 100644
--- a/src/components/ui/HorizonCard.tsx
+++ b/src/components/ui/HorizonCard.tsx
@@ -2,12 +2,12 @@ import useLikeHandler from '@/hooks/common/useLikeHandler';
 import { getIconComponent } from '@/util/getIconDetail';
 import { translateCategoryNameToEng } from '@/util/searchFilter';
 import { Heart, Map } from 'lucide-react';
-import Image from 'next/image';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { IMeetingSearchCondition } from 'types/meeting';
 
 import { Button } from './Button';
+import CardImage from './CardImage';
 import { Progress } from './Progress';
 import Modal from './modal/Modal';
 import TechButton from './tech-stack/tech-stack-components/TechButton';
@@ -61,12 +61,17 @@ const HorizonCard = ({
       ),
   });
 
+  const [like, setLike] = useState(false);
+
   const handleLikeButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     toggleLike(isLike);
+    setLike(true);
+    setTimeout(() => {
+      setLike(false);
+    }, 500);
   };
 
-  // TODO: 리팩토링 예정
   const { id } = useParams();
 
   const handleClickCard = () => {
@@ -81,9 +86,6 @@ const HorizonCard = ({
     router.push('/login');
   };
 
-  const [thumbnail, setThumbnail] = useState(thumbnailUrl);
-  const [thumbnailLoaded, setThumbnailLoaded] = useState(false);
-
   return (
     <div
       className={`relative flex h-auto w-full flex-shrink-0 ${!id && 'cursor-pointer'} bg-BG p-4 ${className}`}
@@ -102,7 +104,7 @@ const HorizonCard = ({
       </Modal>
       {showLikeButton && (
         <Button
-          className="absolute right-4 top-4 h-auto w-auto"
+          className={`absolute right-4 top-4 h-auto w-auto ${like ? 'animate-heartbeat' : ''}`}
           variant="text"
           size="sm"
           onClick={(e) => handleLikeButton(e)}
@@ -122,15 +124,10 @@ const HorizonCard = ({
         className="relative flex-shrink-0"
         style={{ height: `${thumbnailHeight}px`, width: `${thumbnailWidth}px` }}
       >
-        {!thumbnailLoaded && (
-          <div className="h-full w-full animate-pulse rounded-[20px] bg-Cgray200"></div>
-        )}
-        <Image
-          className="rounded-[20px] object-cover"
-          src={thumbnail ? thumbnail : '/thumbnail.jpg'}
-          alt="card_thumbnail"
-          fill
-          onError={() => setThumbnail('/thumbnail.jpg')}
+        <CardImage
+          src={thumbnailUrl ? thumbnailUrl : '/thumbnail.jpg'}
+          width={thumbnailWidth}
+          height={thumbnailHeight}
         />
       </div>
       <div className="flex min-w-0 flex-1 flex-col justify-center px-[10px] md:px-[30px] lg:px-[40px]">
diff --git a/src/components/ui/VerticalCard.tsx b/src/components/ui/VerticalCard.tsx
index f87e8270..a4a0bb82 100644
--- a/src/components/ui/VerticalCard.tsx
+++ b/src/components/ui/VerticalCard.tsx
@@ -3,12 +3,12 @@ import { getIconComponent } from '@/util/getIconDetail';
 import { translateCategoryNameToEng } from '@/util/searchFilter';
 import { useQueryClient } from '@tanstack/react-query';
 import { Heart, Map } from 'lucide-react';
-import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { IMeetingSearchCondition } from 'types/meeting';
 
 import { Button } from './Button';
+import CardImage from './CardImage';
 import { Progress } from './Progress';
 import Modal from './modal/Modal';
 import TechButton from './tech-stack/tech-stack-components/TechButton';
@@ -66,9 +66,15 @@ const VerticalCard = ({
       ),
   });
 
+  const [like, setLike] = useState(false);
+
   const handleLikeButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     toggleLike(isLike);
+    setLike(true);
+    setTimeout(() => {
+      setLike(false);
+    }, 500);
   };
 
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
@@ -78,12 +84,10 @@ const VerticalCard = ({
     router.push('/login');
   };
 
-  const [thumbnail, setThumbnail] = useState(thumbnailUrl);
-  const [thumbnailLoaded, setThumbnailLoaded] = useState(false);
-
   return (
     <div
       className={`flex h-[490px] w-[335px] cursor-pointer flex-col justify-between bg-BG p-4 ${className}`}
+      style={{ transformStyle: 'preserve-3d' }}
       role="presentation"
       onClick={handleClickCard}
     >
@@ -101,16 +105,10 @@ const VerticalCard = ({
         className={'relative'}
         style={{ height: `${thumbnailHeight}px`, width: `${thumbnailWidth}px` }}
       >
-        {!thumbnailLoaded && (
-          <div className="h-full w-full animate-pulse rounded-[20px] bg-Cgray200"></div>
-        )}
-        <Image
-          className="flex-shrink-0 rounded-[20px] object-cover"
-          src={thumbnail ? thumbnail : '/thumbnail.jpg'}
-          alt="card_thumbnail"
-          fill
-          onError={() => setThumbnail('/thumbnail.jpg')}
-          onLoad={() => setThumbnailLoaded(true)}
+        <CardImage
+          src={thumbnailUrl ? thumbnailUrl : '/thumbnail.jpg'}
+          width={thumbnailWidth}
+          height={thumbnailHeight}
         />
       </div>
       <div className="mt-4">
@@ -120,7 +118,7 @@ const VerticalCard = ({
           </span>
           {showLikeButton && (
             <Button
-              className="relative h-auto w-auto"
+              className={`relative h-auto w-auto ${like ? 'animate-heartbeat' : ''}`}
               variant="text"
               size="sm"
               onClick={(e) => handleLikeButton(e)}
diff --git a/src/hooks/common/useLikeHandler.ts b/src/hooks/common/useLikeHandler.ts
index 56285ce2..18088142 100644
--- a/src/hooks/common/useLikeHandler.ts
+++ b/src/hooks/common/useLikeHandler.ts
@@ -7,16 +7,19 @@ import {
   MEETING_QUERY_KEYS,
   meetingKeys,
 } from '@/hooks/queries/useMeetingQueries';
-import { getAccessToken } from '@/lib/serverActions';
 import { InfiniteData, QueryKey, useQueryClient } from '@tanstack/react-query';
-import { useParams } from 'next/navigation';
+import { AxiosError } from 'axios';
+import { useParams, usePathname } from 'next/navigation';
 import {
+  ErrorData,
   IMeetingSearchCondition,
   Paginated,
   SearchMeeting,
   TopMeeting,
 } from 'types/meeting';
 
+import { myMeetingKeys } from '../queries/useMyMeetingQueries';
+
 interface UseLikeHandlerProps {
   meetingId: number;
   category: string;
@@ -31,6 +34,8 @@ const useLikeHandler = ({
   onAuthRequired,
 }: UseLikeHandlerProps) => {
   const queryClient = useQueryClient();
+  const path = usePathname();
+  const isLikesPage = path.includes('/likes');
 
   // 배열 캐시 업데이트
   const updateCacheArray = <T extends TopMeeting>(
@@ -104,7 +109,7 @@ const useLikeHandler = ({
       }
 
       // 추천모임
-      if (category && !id) {
+      if (category && !id && !isLikesPage) {
         updateCacheArray(
           MEETING_QUERY_KEYS.topMeetings(category),
           meetingId,
@@ -115,17 +120,34 @@ const useLikeHandler = ({
       }
 
       // 상세모임
-      if (id) {
+      if (id && !isLikesPage) {
         updateCacheObject(meetingKeys.detailInfo(meetingId), true, 1);
         return;
       }
+
+      // 찜한모임
+      if (isLikesPage) {
+        updateInfiniteMeetingCache(myMeetingKeys.likes(), meetingId, true, 1);
+        return;
+      }
     },
     onSuccess: () => {
       showToast('찜한 모임에 추가되었습니다!', 'success', { duration: 2000 });
     },
-    onError: () => {
-      // TODO: 내가 만든 모임 좋아요 할 경우 toast 문구 변경
-      showToast('잠시 후 다시 시도해주세요', 'error', { duration: 3000 });
+    onError: (err: AxiosError<ErrorData>) => {
+      // 에러 상태에 따른 예외처리
+      if (
+        err.status === 403 &&
+        err?.response?.data?.data?.entityType === 'Meeting'
+      ) {
+        showToast('내가 만든 모임은 찜할 수 없습니다.', 'error', {
+          duration: 3000,
+        });
+      } else if ((err.status === 401 || err.status === 403) && onAuthRequired) {
+        onAuthRequired();
+      } else {
+        showToast('잠시 후 다시 시도해주세요', 'error', { duration: 3000 });
+      }
 
       // 모임 목록
       if (category && searchQuery) {
@@ -139,7 +161,7 @@ const useLikeHandler = ({
       }
 
       // 추천모임
-      if (category && !id) {
+      if (category && !id && !isLikesPage) {
         updateCacheArray(
           MEETING_QUERY_KEYS.topMeetings(category),
           meetingId,
@@ -150,8 +172,13 @@ const useLikeHandler = ({
       }
 
       // 상세모임
-      if (id) {
+      if (id && !isLikesPage) {
         updateCacheObject(meetingKeys.detailInfo(meetingId), false, -1);
+      }
+
+      // 찜한모임
+      if (isLikesPage) {
+        updateInfiniteMeetingCache(myMeetingKeys.likes(), meetingId, false, -1);
         return;
       }
     },
@@ -171,7 +198,7 @@ const useLikeHandler = ({
       }
 
       // 추천모임
-      if (category && !id) {
+      if (category && !id && !isLikesPage) {
         updateCacheArray(
           MEETING_QUERY_KEYS.topMeetings(category),
           meetingId,
@@ -182,17 +209,35 @@ const useLikeHandler = ({
       }
 
       // 상세모임
-      if (id) {
+      if (id && !isLikesPage) {
         updateCacheObject(meetingKeys.detailInfo(meetingId), false, -1);
         return;
       }
+
+      // 찜한모임
+      if (isLikesPage) {
+        updateInfiniteMeetingCache(myMeetingKeys.likes(), meetingId, false, -1);
+        return;
+      }
     },
     onSuccess: () => {
       showToast('찜한 모임에서 삭제되었습니다!', 'success', { duration: 2000 });
     },
-    onError: () => {
-      // 오류 처리
-      showToast('잠시 후 다시 시도해주세요', 'error', { duration: 3000 });
+    onError: (err: AxiosError<ErrorData>) => {
+      console.log(err);
+      // 에러 상태에 따른 예외처리
+      if (
+        err.status === 403 &&
+        err?.response?.data?.data?.entityType === 'Meeting'
+      ) {
+        showToast('내가 만든 모임은 찜할 수 없습니다.', 'error', {
+          duration: 3000,
+        });
+      } else if ((err.status === 401 || err.status === 403) && onAuthRequired) {
+        onAuthRequired();
+      } else {
+        showToast('잠시 후 다시 시도해주세요', 'error', { duration: 3000 });
+      }
 
       // 모임 목록
       if (category && searchQuery) {
@@ -206,7 +251,7 @@ const useLikeHandler = ({
       }
 
       // 추천모임
-      if (category && !id) {
+      if (category && !id && !isLikesPage) {
         updateCacheArray(
           MEETING_QUERY_KEYS.topMeetings(category),
           meetingId,
@@ -217,24 +262,24 @@ const useLikeHandler = ({
       }
 
       // 상세모임
-      if (id) {
+      if (id && !isLikesPage) {
         updateCacheObject(meetingKeys.detailInfo(meetingId), true, 1);
         return;
       }
+
+      // 찜한모임
+      if (isLikesPage) {
+        updateInfiniteMeetingCache(myMeetingKeys.likes(), meetingId, true, 1);
+        return;
+      }
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: myMeetingKeys.likes() });
     },
   });
 
   // 좋아요 토글 함수
   const toggleLike = async (isLiked: boolean) => {
-    const token = await getAccessToken();
-    if (!token) {
-      // 로그인 상태가 아니라면, onAuthRequired 콜백 실행
-      if (onAuthRequired) {
-        onAuthRequired();
-      }
-      return;
-    }
-
     if (!isLiked) {
       likeMutation();
     } else {
diff --git a/src/types/meeting.ts b/src/types/meeting.ts
index 57efc5f7..98f82508 100644
--- a/src/types/meeting.ts
+++ b/src/types/meeting.ts
@@ -61,6 +61,10 @@ interface Paginated<T> {
   empty: boolean;
 }
 
+interface ErrorData {
+  data: { entityType: string; errorMessage: string; request: string };
+}
+
 export type {
   CategoryTitle,
   TopMeeting,
@@ -69,4 +73,5 @@ export type {
   SearchMeeting,
   IMeetingSearchCondition,
   Paginated,
+  ErrorData,
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index faf8f9d5..d71e7576 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -107,6 +107,34 @@ export default {
     fontFamily: {
       sans: ['var(--font-pretendard)', 'sans-serif'],
     },
+    keyframes: {
+      fadeInUp: {
+        '0%': { opacity: '0', transform: 'translateY(40px)' },
+        '100%': { opacity: '1', transform: 'translateY(0)' },
+      },
+      slideUp: {
+        '0%': { transform: 'translateY(0)' },
+        '100%': { transform: 'translateY(-10px)' },
+      },
+      slideDown: {
+        '0%': { transform: 'translateY(-10px)' },
+        '100%': { transform: 'translateY(0)' },
+      },
+      heartbeat: {
+        '0%': { transform: 'scale(1)' },
+        '20%': { transform: 'scale(1.2)' },
+        '40%': { transform: 'scale(0.8)' },
+        '60%': { transform: 'scale(1.0)' },
+        '80%': { transform: 'scale(0.95)' },
+        '100%': { transform: 'scale(1)' },
+      },
+    },
+    animation: {
+      fadeInUp: 'fadeInUp 0.5s ease-out forwards',
+      slideUp: 'slideUp 0.5s ease-out forwards',
+      slideDown: 'slideDown 0.5s ease-out forwards',
+      heartbeat: 'heartbeat 0.5s ease-out',
+    },
   },
   plugins: [
     function ({ addComponents }: PluginAPI) {
diff --git a/tsconfig.json b/tsconfig.json
index e79ce857..d78486aa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,6 +37,6 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts"
-  ],
+, "server.js"  ],
   "exclude": ["node_modules", "postcss.config.js"]
 }