Skip to content

Commit da37e86

Browse files
lee1nnalee1nna
authored
Merge pull request #80 from MoimService/feat/issue/qa-issue-hanna/DEVING-89
Feat/issue/qa issue hanna/DEVING-89
2 parents 8b359f0 + 7164540 commit da37e86

File tree

12 files changed

+99
-38
lines changed

12 files changed

+99
-38
lines changed

‎public/hobby_cat.png‎

1.57 KB
Loading

‎public/mogakco_cat.png‎

3.6 KB
Loading

‎public/side-project_cat.png‎

2.89 KB
Loading

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ const Written = () => {
6262
{allComments.map((comment) => (
6363
<div key={comment.meetingId}>
6464
{/* 데스크탑 */}
65-
<div className="hidden border-b border-Cgray300 py-[42px] lg:flex">
65+
<div className="flex hidden flex-col border-b border-Cgray300 py-[42px] lg:flex">
6666
<HorizonCard
6767
onClick={() =>
6868
handleMoveDetailPage(comment.meetingId, comment.categoryTitle)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ async function MeetingListPage({ params }: { params: { category: string } }) {
5555
notFound();
5656
}
5757
return (
58-
<div className="mb-[130px] mt-[88px]">
58+
<div className="mb-[130px] mt-[30px] md:mt-[50px] lg:mt-[50px]">
5959
<FloatingButtonGroup />
6060
<HydrationBoundary state={dehydrate(queryClient)}>
6161
<RecommendMeeting />

‎src/app/meeting/_features/MeetingExtraInfo.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import Profile from '@/assets/icon/profile.svg';
21
import { Button } from '@/components/ui/Button';
32
import { getDDay } from '@/util/date';
3+
import Image from 'next/image';
44
import React from 'react';
55

66
interface MeetingExtraInfoProps {
@@ -10,6 +10,7 @@ interface MeetingExtraInfoProps {
1010
meetingId: number;
1111
variant?: 'desktop' | 'tablet' | 'mobile';
1212
onClick?: () => void;
13+
profilePic: string;
1314
}
1415

1516
const MeetingExtraInfo = ({
@@ -18,6 +19,7 @@ const MeetingExtraInfo = ({
1819
startDate,
1920
variant = 'desktop',
2021
onClick,
22+
profilePic,
2123
}: MeetingExtraInfoProps) => {
2224
// 스타일 조건 분기
2325
const isTablet = variant === 'tablet';
@@ -30,25 +32,31 @@ const MeetingExtraInfo = ({
3032
<div
3133
className={
3234
isMobile
33-
? 'typo-caption1 text-Cgray500'
34-
: 'typo-head3 text-Cgray500'
35+
? 'typo-caption1 mb-2 text-Cgray500'
36+
: 'typo-head3 mb-2 text-Cgray500'
3537
}
3638
>
3739
모임장
3840
</div>
3941
<div
4042
className={`${isMobile ? 'typo-button2' : 'typo-head2'} mt-1 flex items-center text-Cgray700`}
4143
>
42-
<Profile className="mr-2 h-10 w-10 flex-shrink-0" />
44+
<Image
45+
src={`${profilePic}`}
46+
alt="profile_img"
47+
width={40}
48+
height={40}
49+
className="mr-2 h-10 w-10 flex-shrink-0 rounded-[50%] border-2 border-Cgray500 object-cover"
50+
/>
4351
<span className="truncate text-ellipsis">{name}</span>
4452
</div>
4553
</div>
4654
<div className="flex flex-col">
4755
<div
4856
className={
4957
isMobile
50-
? 'typo-caption1 text-Cgray500'
51-
: 'typo-head3 text-Cgray500'
58+
? 'typo-caption1 mt-2 text-Cgray500'
59+
: 'typo-head3 mt-2 text-Cgray500'
5260
}
5361
>
5462
모임시작
@@ -62,7 +70,7 @@ const MeetingExtraInfo = ({
6270
</div>
6371

6472
<Button
65-
className={`mt-6 ${isTablet ? 'mt-[7px]' : 'mt-6'} ${
73+
className={`mt-6 ${isTablet ? 'mt-[7px]' : isMobile ? 'mt-0' : 'mt-6'} ${
6674
isMobile
6775
? 'h-[46px] w-[311px]'
6876
: 'md:h-[40px] md:w-[180px] lg:h-[46px] lg:w-[318px]'

‎src/app/meeting/_features/MeetingList.tsx‎

Lines changed: 27 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,13 @@ import useInfiniteScroll from '@/hooks/common/useInfiniteScroll';
99
import useMediaQuery from '@/hooks/common/useMediaQuery';
1010
import { useInfiniteSearchMeetings } from '@/hooks/queries/useMeetingQueries';
1111
import useDebounce from '@/hooks/useDebounde';
12-
import { filterOptions, translateCategoryNameToKor } from '@/util/searchFilter';
12+
import {
13+
filterOptions,
14+
imageUrlByCategory,
15+
translateCategoryNameToKor,
16+
} from '@/util/searchFilter';
1317
import { keepPreviousData } from '@tanstack/react-query';
18+
import Image from 'next/image';
1419
import { useParams, useRouter } from 'next/navigation';
1520
import { ChangeEvent, useCallback, useState } from 'react';
1621
import type { IMeetingSearchCondition, SearchMeeting } from 'types/meeting';
@@ -108,7 +113,15 @@ const MeetingList = () => {
108113

109114
return (
110115
<div className="mt-12">
111-
<div className="typo-head1 mb-10 px-4 text-Cgray800">
116+
<div className="typo-head2 mb-10 flex items-center px-4 text-Cgray800 md:typo-head1">
117+
<Image
118+
className="mr-5"
119+
src={imageUrlByCategory(categoryStr)}
120+
alt={`${categoryStr}_image`}
121+
width={40}
122+
height={40}
123+
unoptimized
124+
/>
112125
{translateCategoryNameToKor(categoryStr)} 모임 목록
113126
</div>
114127
<SearchInput
@@ -142,10 +155,10 @@ const MeetingList = () => {
142155

143156
{/* 모임 리스트 웹뷰 */}
144157
{breakpoint === 'desktop' && (
145-
<div className="flex-col sm:hidden lg:flex">
146-
{allMeetings.map((meeting, index) => (
158+
<div className="animate-fadeIn flex-col sm:hidden lg:flex">
159+
{allMeetings.map((meeting) => (
147160
<HorizonCard
148-
className={`animate-fadeInUp ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
161+
className={`transform animate-fadeIn transition-all duration-700 ease-in-out hover:scale-105`}
149162
onClick={handleMoveDetailPage}
150163
key={meeting.meetingId}
151164
meetingId={meeting.meetingId}
@@ -171,6 +184,7 @@ const MeetingList = () => {
171184
startDate={meeting.startDate}
172185
meetingId={meeting.meetingId}
173186
variant="desktop"
187+
profilePic={meeting.profilePic}
174188
/>
175189
</HorizonCard>
176190
))}
@@ -179,11 +193,11 @@ const MeetingList = () => {
179193

180194
{/* 모임 리스트 테블릿뷰 */}
181195
{breakpoint === 'tablet' && (
182-
<div className="hidden flex-col md:flex lg:hidden">
183-
{allMeetings.map((meeting, index) => (
196+
<div className="hidden animate-fadeIn flex-col md:flex lg:hidden">
197+
{allMeetings.map((meeting) => (
184198
<HorizonCard
185199
onClick={handleMoveDetailPage}
186-
className={`animate-fadeInUp items-center ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
200+
className={`transform animate-fadeIn items-center transition-all duration-700 ease-in-out hover:scale-105`}
187201
key={meeting.meetingId}
188202
meetingId={meeting.meetingId}
189203
category={translateCategoryNameToKor(categoryStr)}
@@ -210,6 +224,7 @@ const MeetingList = () => {
210224
startDate={meeting.startDate}
211225
meetingId={meeting.meetingId}
212226
variant="tablet"
227+
profilePic={meeting.profilePic}
213228
/>
214229
</HorizonCard>
215230
))}
@@ -218,11 +233,11 @@ const MeetingList = () => {
218233

219234
{/* 모임 리스트 모바일뷰 */}
220235
{breakpoint === 'mobile' && (
221-
<div className="flex w-full flex-wrap items-center justify-center md:hidden lg:hidden">
222-
{allMeetings.map((meeting, index) => (
236+
<div className="flex w-full animate-fadeIn flex-wrap items-center justify-center md:hidden lg:hidden">
237+
{allMeetings.map((meeting) => (
223238
<VerticalCard
224239
onClick={handleMoveDetailPage}
225-
className={`h-[380px] animate-fadeInUp items-center ${index % 2 === 0 ? 'delay-100' : 'delay-200'}`}
240+
className={`h-[380px] transform animate-fadeIn items-center transition-all duration-700 ease-in-out hover:scale-105 `}
226241
thumbnailHeight={160}
227242
thumbnailWidth={311}
228243
category={translateCategoryNameToKor(categoryStr)}
@@ -249,6 +264,7 @@ const MeetingList = () => {
249264
startDate={meeting.startDate}
250265
meetingId={meeting.meetingId}
251266
variant="mobile"
267+
profilePic={meeting.profilePic}
252268
/>
253269
</VerticalCard>
254270
))}

‎src/app/meeting/_features/NoResultsMeeting.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const NoResultsMeeting = () => {
22
return (
3-
<div className="typo-head3 flex h-[776px] w-full items-center justify-center text-Cgray500">
3+
<div className="typo-head3 flex h-[300px] w-full items-center justify-center text-Cgray500">
44
조건에 맞는 모임이 없어요 <br />
55
추천하는 모임을 둘러보세요!
66
</div>

‎src/app/meeting/_features/RecommendMeeting.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@
33
import HorizonCard from '@/components/ui/HorizonCard';
44
import VerticalCard from '@/components/ui/VerticalCard';
55
import { useTopMeetings } from '@/hooks/queries/useMeetingQueries';
6-
import { translateCategoryNameToKor } from '@/util/searchFilter';
6+
import {
7+
imageUrlByCategory,
8+
translateCategoryNameToKor,
9+
} from '@/util/searchFilter';
10+
import Image from 'next/image';
711
import { useParams, useRouter } from 'next/navigation';
812
import type { TopMeeting } from 'types/meeting';
913

@@ -34,7 +38,15 @@ const RecommendMeeting = () => {
3438

3539
return (
3640
<>
37-
<div className="typo-head1 mb-6 px-4 text-Cgray800">
41+
<div className="typo-head2 mb-6 flex items-center px-4 text-Cgray800 md:typo-head1">
42+
<Image
43+
className="mr-5"
44+
src={imageUrlByCategory(categoryStr)}
45+
alt={`${categoryStr}_image`}
46+
width={40}
47+
height={40}
48+
unoptimized
49+
/>
3850
Deving의 {translateCategoryNameToKor(categoryStr)} 추천 모임
3951
</div>
4052

‎src/components/ui/VerticalCard.tsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import useLikeHandler from '@/hooks/common/useLikeHandler';
22
import { getIconComponent } from '@/util/getIconDetail';
33
import { translateCategoryNameToEng } from '@/util/searchFilter';
4-
import { useQueryClient } from '@tanstack/react-query';
54
import { Heart, Map } from 'lucide-react';
65
import { useRouter } from 'next/navigation';
76
import { useState } from 'react';
@@ -48,6 +47,7 @@ const VerticalCard = ({
4847
showLikeButton = true,
4948
searchQuery,
5049
value,
50+
likesCount,
5151
total = 100,
5252
skills,
5353
}: VerticalCardProps) => {
@@ -112,24 +112,29 @@ const VerticalCard = ({
112112
height={thumbnailHeight}
113113
/>
114114
</div>
115-
<div className="mt-4">
116-
<div className="typo-head2 relative flex h-[40px] justify-between truncate text-Cgray800 ">
115+
<div className="w-full">
116+
<div className="typo-head2 relative flex h-[53px] items-center justify-between truncate text-Cgray800 ">
117117
<span className="max-w-[270px] overflow-hidden truncate text-ellipsis whitespace-nowrap">
118118
{title}
119119
</span>
120120
{showLikeButton && (
121-
<Button
122-
className={`relative h-auto w-auto ${like ? 'animate-heartbeat' : ''}`}
123-
variant="text"
124-
size="sm"
125-
onClick={(e) => handleLikeButton(e)}
126-
icon={
127-
<Heart
128-
style={{ width: '24px', height: '24px' }}
129-
className={isLike ? 'fill-main' : 'stroke-Cgray500'}
130-
/>
131-
}
132-
></Button>
121+
<div className="flex justify-center">
122+
<Button
123+
className={`relative h-auto w-auto ${like ? 'animate-heartbeat' : ''}`}
124+
variant="text"
125+
size="sm"
126+
onClick={(e) => handleLikeButton(e)}
127+
icon={
128+
<Heart
129+
style={{ width: '24px', height: '24px' }}
130+
className={isLike ? 'fill-main' : 'stroke-Cgray500'}
131+
/>
132+
}
133+
></Button>
134+
<div className="typo-caption2 absolute top-7 mt-3 text-Cgray500">
135+
{likesCount}
136+
</div>
137+
</div>
133138
)}
134139
</div>
135140
<div className="relative flex items-center gap-1 truncate text-Cgray500">

0 commit comments

Comments
 (0)