Feat/refactor/meeting list mvp feedback/DEVING-72

.gitignore

@@ -39,3 +39,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# key
+/localhost-key.pem
+/localhost.pem

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}\"",

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)}

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}

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;

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;

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]">

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)}

src/hooks/common/useLikeHandler.ts

@@ -7,10 +7,11 @@ import {
   MEETING_QUERY_KEYS,
   meetingKeys,
 } from '@/hooks/queries/useMeetingQueries';
-import { getAccessToken } from '@/lib/serverActions';
 import { InfiniteData, QueryKey, useQueryClient } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
 import { useParams } from 'next/navigation';
 import {
+  ErrorData,
   IMeetingSearchCondition,
   Paginated,
   SearchMeeting,
@@ -123,9 +124,20 @@ const useLikeHandler = ({
     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) {
@@ -190,9 +202,20 @@ const useLikeHandler = ({
     onSuccess: () => {
       showToast('찜한 모임에서 삭제되었습니다!', 'success', { duration: 2000 });
     },
-    onError: () => {
-      // 오류 처리
-      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) {
@@ -226,15 +249,6 @@ const useLikeHandler = ({
 
   // 좋아요 토글 함수
   const toggleLike = async (isLiked: boolean) => {
-    const token = await getAccessToken();
-    if (!token) {
-      // 로그인 상태가 아니라면, onAuthRequired 콜백 실행
-      if (onAuthRequired) {
-        onAuthRequired();
-      }
-      return;
-    }
-
     if (!isLiked) {
       likeMutation();
     } else {

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,
 };