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/(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>

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>

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,

src/app/layout.tsx

@@ -31,7 +31,7 @@
     return res.data.data;
   } catch (error) {
     if (error instanceof AxiosError) {
       console.log('error: ', error.status);
     }
     return null;
   }
@@ -50,7 +50,7 @@
         <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" />

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