Feat/issue/qa issue hanna/DEVING-89

src/app/(user-page)/my-meeting/_features/Written.tsx

@@ -62,7 +62,7 @@ const Written = () => {
         {allComments.map((comment) => (
           <div key={comment.meetingId}>
             {/* 데스크탑 */}
-            <div className="hidden border-b border-Cgray300 py-[42px] lg:flex">
+            <div className="flex hidden flex-col  border-b border-Cgray300 py-[42px] lg:flex">
               <HorizonCard
                 onClick={() =>
                   handleMoveDetailPage(comment.meetingId, comment.categoryTitle)

src/app/meeting/[category]/page.tsx

@@ -55,7 +55,7 @@ async function MeetingListPage({ params }: { params: { category: string } }) {
     notFound();
   }
   return (
-    <div className="mb-[130px] mt-[88px]">
+    <div className="mb-[130px] mt-[30px] md:mt-[50px] lg:mt-[50px]">
       <FloatingButtonGroup />
       <HydrationBoundary state={dehydrate(queryClient)}>
         <RecommendMeeting />

src/app/meeting/_features/MeetingExtraInfo.tsx

@@ -1,6 +1,6 @@
-import Profile from '@/assets/icon/profile.svg';
 import { Button } from '@/components/ui/Button';
 import { getDDay } from '@/util/date';
+import Image from 'next/image';
 import React from 'react';
 
 interface MeetingExtraInfoProps {
@@ -10,6 +10,7 @@ interface MeetingExtraInfoProps {
   meetingId: number;
   variant?: 'desktop' | 'tablet' | 'mobile';
   onClick?: () => void;
+  profilePic: string;
 }
 
 const MeetingExtraInfo = ({
@@ -18,6 +19,7 @@ const MeetingExtraInfo = ({
   startDate,
   variant = 'desktop',
   onClick,
+  profilePic,
 }: MeetingExtraInfoProps) => {
   // 스타일 조건 분기
   const isTablet = variant === 'tablet';
@@ -30,25 +32,31 @@ const MeetingExtraInfo = ({
           <div
             className={
               isMobile
-                ? 'typo-caption1 text-Cgray500'
-                : 'typo-head3 text-Cgray500'
+                ? 'typo-caption1 mb-2 text-Cgray500'
+                : 'typo-head3 mb-2 text-Cgray500'
             }
           >
             모임장
           </div>
           <div
             className={`${isMobile ? 'typo-button2' : 'typo-head2'} mt-1 flex items-center text-Cgray700`}
           >
-            <Profile className="mr-2 h-10 w-10 flex-shrink-0" />
+            <Image
+              src={`${profilePic}`}
+              alt="profile_img"
+              width={40}
+              height={40}
+              className="mr-2 h-10 w-10 flex-shrink-0 rounded-[50%] border-2 border-Cgray500 object-cover"
+            />
             <span className="truncate text-ellipsis">{name}</span>
           </div>
         </div>
         <div className="flex flex-col">
           <div
             className={
               isMobile
-                ? 'typo-caption1 text-Cgray500'
-                : 'typo-head3 text-Cgray500'
+                ? 'typo-caption1 mt-2 text-Cgray500'
+                : 'typo-head3 mt-2 text-Cgray500'
             }
           >
             모임시작
@@ -62,7 +70,7 @@ const MeetingExtraInfo = ({
       </div>
 
       <Button
-        className={`mt-6 ${isTablet ? 'mt-[7px]' : 'mt-6'} ${
+        className={`mt-6 ${isTablet ? 'mt-[7px]' : isMobile ? 'mt-0' : 'mt-6'} ${
           isMobile
             ? 'h-[46px] w-[311px]'
             : 'md:h-[40px] md:w-[180px] lg:h-[46px] lg:w-[318px]'

src/app/meeting/_features/MeetingList.tsx

@@ -9,8 +9,13 @@ import useInfiniteScroll from '@/hooks/common/useInfiniteScroll';
 import useMediaQuery from '@/hooks/common/useMediaQuery';
 import { useInfiniteSearchMeetings } from '@/hooks/queries/useMeetingQueries';
 import useDebounce from '@/hooks/useDebounde';
-import { filterOptions, translateCategoryNameToKor } from '@/util/searchFilter';
+import {
+  filterOptions,
+  imageUrlByCategory,
+  translateCategoryNameToKor,
+} from '@/util/searchFilter';
 import { keepPreviousData } from '@tanstack/react-query';
+import Image from 'next/image';
 import { useParams, useRouter } from 'next/navigation';
 import { ChangeEvent, useCallback, useState } from 'react';
 import type { IMeetingSearchCondition, SearchMeeting } from 'types/meeting';
@@ -108,7 +113,15 @@ const MeetingList = () => {
 
   return (
     <div className="mt-12">
-      <div className="typo-head1 mb-10 px-4 text-Cgray800">
+      <div className="typo-head2 mb-10 flex items-center px-4 text-Cgray800 md:typo-head1">
+        <Image
+          className="mr-5"
+          src={imageUrlByCategory(categoryStr)}
+          alt={`${categoryStr}_image`}
+          width={40}
+          height={40}
+          unoptimized
+        />
         {translateCategoryNameToKor(categoryStr)} 모임 목록
       </div>
       <SearchInput
@@ -142,10 +155,10 @@ const MeetingList = () => {
 
       {/* 모임 리스트 웹뷰 */}
       {breakpoint === 'desktop' && (
-        <div className="flex-col sm:hidden lg:flex">
-          {allMeetings.map((meeting, index) => (
+        <div className="animate-fadeIn flex-col sm:hidden lg:flex">
+          {allMeetings.map((meeting) => (
             <HorizonCard
-              className={`animate-fadeInUp ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
+              className={`transform animate-fadeIn transition-all duration-700 ease-in-out hover:scale-105`}
               onClick={handleMoveDetailPage}
               key={meeting.meetingId}
               meetingId={meeting.meetingId}
@@ -171,6 +184,7 @@ const MeetingList = () => {
                 startDate={meeting.startDate}
                 meetingId={meeting.meetingId}
                 variant="desktop"
+                profilePic={meeting.profilePic}
               />
             </HorizonCard>
           ))}
@@ -179,11 +193,11 @@ const MeetingList = () => {
 
       {/* 모임 리스트 테블릿뷰 */}
       {breakpoint === 'tablet' && (
-        <div className="hidden flex-col md:flex lg:hidden">
-          {allMeetings.map((meeting, index) => (
+        <div className="hidden animate-fadeIn flex-col md:flex lg:hidden">
+          {allMeetings.map((meeting) => (
             <HorizonCard
               onClick={handleMoveDetailPage}
-              className={`animate-fadeInUp items-center ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
+              className={`transform animate-fadeIn items-center transition-all duration-700 ease-in-out hover:scale-105`}
               key={meeting.meetingId}
               meetingId={meeting.meetingId}
               category={translateCategoryNameToKor(categoryStr)}
@@ -210,6 +224,7 @@ const MeetingList = () => {
                 startDate={meeting.startDate}
                 meetingId={meeting.meetingId}
                 variant="tablet"
+                profilePic={meeting.profilePic}
               />
             </HorizonCard>
           ))}
@@ -218,11 +233,11 @@ const MeetingList = () => {
 
       {/* 모임 리스트 모바일뷰 */}
       {breakpoint === 'mobile' && (
-        <div className="flex w-full flex-wrap items-center justify-center md:hidden lg:hidden">
-          {allMeetings.map((meeting, index) => (
+        <div className="flex w-full animate-fadeIn flex-wrap items-center justify-center md:hidden lg:hidden">
+          {allMeetings.map((meeting) => (
             <VerticalCard
               onClick={handleMoveDetailPage}
-              className={`h-[380px] animate-fadeInUp items-center ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
+              className={`h-[380px] transform animate-fadeIn items-center transition-all duration-700 ease-in-out hover:scale-105 `}
               thumbnailHeight={160}
               thumbnailWidth={311}
               category={translateCategoryNameToKor(categoryStr)}
@@ -249,6 +264,7 @@ const MeetingList = () => {
                 startDate={meeting.startDate}
                 meetingId={meeting.meetingId}
                 variant="mobile"
+                profilePic={meeting.profilePic}
               />
             </VerticalCard>
           ))}

src/app/meeting/_features/NoResultsMeeting.tsx

@@ -1,6 +1,6 @@
 const NoResultsMeeting = () => {
   return (
-    <div className="typo-head3 flex h-[776px] w-full items-center justify-center text-Cgray500">
+    <div className="typo-head3 flex h-[300px] w-full items-center justify-center text-Cgray500">
       조건에 맞는 모임이 없어요 <br />
       추천하는 모임을 둘러보세요!
     </div>

src/app/meeting/_features/RecommendMeeting.tsx

@@ -3,7 +3,11 @@
 import HorizonCard from '@/components/ui/HorizonCard';
 import VerticalCard from '@/components/ui/VerticalCard';
 import { useTopMeetings } from '@/hooks/queries/useMeetingQueries';
-import { translateCategoryNameToKor } from '@/util/searchFilter';
+import {
+  imageUrlByCategory,
+  translateCategoryNameToKor,
+} from '@/util/searchFilter';
+import Image from 'next/image';
 import { useParams, useRouter } from 'next/navigation';
 import type { TopMeeting } from 'types/meeting';
 
@@ -34,7 +38,15 @@ const RecommendMeeting = () => {
 
   return (
     <>
-      <div className="typo-head1 mb-6 px-4 text-Cgray800">
+      <div className="typo-head2 mb-6 flex items-center px-4 text-Cgray800 md:typo-head1">
+        <Image
+          className="mr-5"
+          src={imageUrlByCategory(categoryStr)}
+          alt={`${categoryStr}_image`}
+          width={40}
+          height={40}
+          unoptimized
+        />
         Deving의 {translateCategoryNameToKor(categoryStr)} 추천 모임
       </div>
 

src/components/ui/VerticalCard.tsx

@@ -1,7 +1,6 @@
 import useLikeHandler from '@/hooks/common/useLikeHandler';
 import { getIconComponent } from '@/util/getIconDetail';
 import { translateCategoryNameToEng } from '@/util/searchFilter';
-import { useQueryClient } from '@tanstack/react-query';
 import { Heart, Map } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -48,6 +47,7 @@ const VerticalCard = ({
   showLikeButton = true,
   searchQuery,
   value,
+  likesCount,
   total = 100,
   skills,
 }: VerticalCardProps) => {
@@ -112,24 +112,29 @@ const VerticalCard = ({
           height={thumbnailHeight}
         />
       </div>
-      <div className="mt-4">
-        <div className="typo-head2 relative flex h-[40px] justify-between truncate text-Cgray800 ">
+      <div className="w-full">
+        <div className="typo-head2 relative flex h-[53px] items-center justify-between truncate text-Cgray800 ">
           <span className="max-w-[270px] overflow-hidden truncate text-ellipsis whitespace-nowrap">
             {title}
           </span>
           {showLikeButton && (
-            <Button
-              className={`relative h-auto w-auto ${like ? 'animate-heartbeat' : ''}`}
-              variant="text"
-              size="sm"
-              onClick={(e) => handleLikeButton(e)}
-              icon={
-                <Heart
-                  style={{ width: '24px', height: '24px' }}
-                  className={isLike ? 'fill-main' : 'stroke-Cgray500'}
-                />
-              }
-            ></Button>
+            <div className="flex justify-center">
+              <Button
+                className={`relative h-auto w-auto ${like ? 'animate-heartbeat' : ''}`}
+                variant="text"
+                size="sm"
+                onClick={(e) => handleLikeButton(e)}
+                icon={
+                  <Heart
+                    style={{ width: '24px', height: '24px' }}
+                    className={isLike ? 'fill-main' : 'stroke-Cgray500'}
+                  />
+                }
+              ></Button>
+              <div className="typo-caption2 absolute top-7 mt-3 text-Cgray500">
+                {likesCount}
+              </div>
+            </div>
           )}
         </div>
         <div className="relative flex items-center gap-1 truncate text-Cgray500">

src/util/searchFilter.ts

@@ -44,3 +44,18 @@ export const translateCategoryNameToEng = (category: string) => {
       return 'mogakco';
   }
 };
+
+export const imageUrlByCategory = (category: string) => {
+  switch (category) {
+    case 'mogakco':
+      return '/mogakco_cat.png';
+    case 'hobby':
+      return '/hobby_cat.png';
+    case 'study':
+      return '/read_cat.png';
+    case 'side-project':
+      return '/side-project_cat.png';
+    default:
+      return '/mogakco_cat.png';
+  }
+};

tailwind.config.ts

@@ -104,6 +104,10 @@ export default {
       sans: ['var(--font-pretendard)', 'sans-serif'],
     },
     keyframes: {
+      fadeIn: {
+        '0%': { opacity: '0' },
+        '100%': { opacity: '1' },
+      },
       fadeInUp: {
         '0%': { opacity: '0', transform: 'translateY(40px)' },
         '100%': { opacity: '1', transform: 'translateY(0)' },
@@ -126,6 +130,7 @@ export default {
       },
     },
     animation: {
+      fadeIn: 'fadeIn 0.5s ease-out forwards',
       fadeInUp: 'fadeInUp 0.5s ease-out forwards',
       slideUp: 'slideUp 0.5s ease-out forwards',
       slideDown: 'slideDown 0.5s ease-out forwards',