Skip to content

Feat/refactor/meeting created/DEVING-59 나의 모임 - 내가 만든 모임 리펙토링 #50

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dbswl701 merged 9 commits into from
Mar 6, 2025
Merged

Feat/refactor/meeting created/DEVING-59 나의 모임 - 내가 만든 모임 리펙토링 #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
69caaba
fix(DEVING-59): 카드 캡쳐링 방지 및 유저 프로필 띄우기
dbswl701 Mar 5, 2025
46d3232
fix(DEVING-59): 데스크답 뷰에서도 자기 프로필은 안보이도록 수정
dbswl701 Mar 5, 2025
2c868f2
feat(DEVING-59): 유저 프로필 스켈레톤 구현
dbswl701 Mar 5, 2025
c282bfd
Merge branch 'dev' of https://github.com/MoimService/Moim-FE into fea…
dbswl701 Mar 5, 2025
f5c73e4
feat(DEVING-59): 내가 만든 모임 리스트 스켈레톤 적용
dbswl701 Mar 5, 2025
1d37124
feat(DEVING-59): 공개 / 비공개 api 연결
dbswl701 Mar 5, 2025
9348266
style(DEVING-59): dropdown 선택된 항목 스타일 변경
dbswl701 Mar 5, 2025
9cd081c
chore(DEVING-59): 주석 제거
dbswl701 Mar 5, 2025
5443ae6
Merge branch 'dev' of https://github.com/MoimService/Moim-FE into fea…
dbswl701 Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 43 additions & 29 deletions src/app/(user-page)/my-meeting/_features/CardRightSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,20 @@
'use client';

import Dropdown from '@/components/common/Dropdown';
import { Button } from '@/components/ui/Button';
import { Tag } from '@/components/ui/Tag';
import Modal from '@/components/ui/modal/Modal';
import {
useExpelMutation,
useMemberStatusMutation,
} from '@/hooks/mutations/useMyMeetingMutation';
import { useBannerQueries } from '@/hooks/queries/useMyPageQueries';
import Image from 'next/image';
import { useState } from 'react';
import type { Member } from 'types/myMeeting';

import ModalProfile from './ModalProfile';
import ModalUserList from './ModalUserList';
import PublicSelect from './PublicDropdown';

const CardRightSection = ({
memberList,
Expand All @@ -26,17 +27,10 @@
className?: string;
meetingId: number;
}) => {
const [selectedFilter, setSelectedFilter] = useState(
isPublic ? '공개' : '비공개',
);
const [isUserListModalOpen, setIsUserListModalOpen] = useState(false);
const handleConfirm = () => {
setIsUserListModalOpen(false);
};
const filterAreaOptions = [
{ value: 'true', label: '공개' },
{ value: 'false', label: '비공개' },
];

const [isUserProfileModalOpen, setIsUserProfileModalOpen] = useState(false);

Expand Down Expand Up @@ -78,11 +72,36 @@
setIsUserProfileModalOpen(false);
};

// 데스크탑 뷰에서 유저 프로필 보기
const handleOpenProfileModal = (
e: React.MouseEvent<HTMLButtonElement>,
member: Member,
) => {
e.stopPropagation();
setSelectedUser(member);
setIsUserProfileModalOpen(true);
};

// 프로필 보기 할 유저
const [selectedUser, setSelectedUser] = useState<Member | null>(null);

const { data: currentUser, isLoading, error } = useBannerQueries();

Check warning on line 88 in src/app/(user-page)/my-meeting/_features/CardRightSection.tsx

View workflow job for this annotation

GitHub Actions / check 

'error' is assigned a value but never used. Allowed unused vars must match /^_/u
if (isLoading || !currentUser) {
return;
}

return (
<div className={`flex w-full gap-[24px] px-4 lg:w-[518px] ${className}`}>
<div
className={`flex w-full justify-between gap-[24px] px-4 hover:cursor-default lg:w-[518px] ${className}`}
onClick={(e) => e.stopPropagation()}
role="button"
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.stopPropagation();
}
}}
>
<div className="hidden flex-col justify-center gap-[16px] lg:flex">
<h3 className="typo-head3 text-main">참가 중인 멤버</h3>
<div className="h-[172px] overflow-y-auto">
Expand All @@ -98,37 +117,31 @@
<p className="typo-head3 w-[114px] p-[6px] text-Cgray700">
{member.name}
</p>
<div className="flex h-[40px] gap-[6px]">
<Tag variant={member.memberStatus} className="w-[49px]" />
<Button
variant={'outline'}
className="h-[40px] w-[93px]"
onClick={() => setIsUserProfileModalOpen(true)}
>
프로필보기
</Button>
</div>
{member.userId !== currentUser?.userId && (
<div className="flex h-[40px] gap-[6px]">
<Tag variant={member.memberStatus} className="w-[49px]" />
<Button
variant={'outline'}
className="h-[40px] w-[93px]"
onClick={(e) => handleOpenProfileModal(e, member)}
>
프로필보기
</Button>
</div>
)}
</div>
))}
</div>
</div>

<Button
variant="outline"
className="flex h-[40px] flex-1 md:h-[46px] lg:hidden"
onClick={() => setIsUserListModalOpen(true)}
>
맴버 명단 보기
</Button>
<div className="flex w-[120px] items-center">
<Dropdown
options={filterAreaOptions}
trigger={selectedFilter}
onChange={setSelectedFilter}
className="h-[40px] md:h-[46px]"
contentClassName=""
variant="icon"
/>
</div>
<PublicSelect isPublic={isPublic} meetingId={meetingId} />
<Modal
isOpen={isUserProfileModalOpen}
onClose={handleSecondModalCancel}
Expand Down Expand Up @@ -166,6 +179,7 @@
setSelectedUser={setSelectedUser}
setIsUserProfileModalOpen={setIsUserProfileModalOpen}
setIsUserListModalOpen={setIsUserListModalOpen}
currentUser={currentUser}
/>
</Modal>
</div>
Expand Down
182 changes: 83 additions & 99 deletions src/app/(user-page)/my-meeting/_features/Created.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
import useInfiniteScroll from '@/hooks/common/useInfiniteScroll';
import { useInfiniteMyMeetingManageQueries } from '@/hooks/queries/useMyMeetingQueries';
import { useRouter } from 'next/navigation';
import { useState } from 'react';

import CardRightSection from './CardRightSection';
import MeetingListSkeleton from './skeletons/SkeletonMeetingList';

const Created = () => {
const router = useRouter();
Expand All @@ -17,7 +17,7 @@
hasNextPage,
isFetchingNextPage,
isLoading,
error,

Check warning on line 20 in src/app/(user-page)/my-meeting/_features/Created.tsx

View workflow job for this annotation

GitHub Actions / check 

'error' is assigned a value but never used. Allowed unused vars must match /^_/u
} = useInfiniteMyMeetingManageQueries();

const lastMeetingRef = useInfiniteScroll({
Expand All @@ -27,7 +27,7 @@
});

if (isLoading || !meetingData) {
return <p>loading...</p>;
return <MeetingListSkeleton />;
}

const handleMoveDetailPage = (meetingId: number) => {
Expand All @@ -42,111 +42,95 @@
<div>
{meetingData.pages.map((page, pageIdx) => (
<div key={pageIdx}>
{page.content.map((meeting) => {
{
console.log(
'page.nextCursor: ',
page.nextCursor,
'meeting.meetingId: ',
meeting.meetingId,
);
}
return (
<div key={meeting.meetingId}>
{/* 데스크탑 */}
<div
className="hidden border-b border-Cgray300 py-[42px] lg:flex"
ref={
page.nextCursor === meeting.meetingId
? lastMeetingRef
: null
}
{page.content.map((meeting) => (
<div key={meeting.meetingId}>
{/* 데스크탑 */}
<div
className="hidden border-b border-Cgray300 py-[42px] lg:flex"
ref={
page.nextCursor === meeting.meetingId ? lastMeetingRef : null
}
>
<HorizonCard
onClick={handleMoveDetailPage}
key={meeting.meetingId}
title={meeting.title}
thumbnailUrl={meeting.thumbnail}
location={meeting.location}
total={meeting.maxMember}
value={meeting.memberCount}
className="flex-row"
meetingId={meeting.meetingId}
category={''}
>
<HorizonCard
onClick={handleMoveDetailPage}
key={meeting.meetingId}
title={meeting.title}
thumbnailUrl={meeting.thumbnail}
location={meeting.location}
total={meeting.maxMember}
value={meeting.memberCount}
className="flex-row"
meetingId={meeting.meetingId}
category={''}
>
<CardRightSection
memberList={meeting.memberList}
isPublic={meeting.isPublic}
className="hidden lg:flex"
meetingId={meeting.meetingId}
/>
</HorizonCard>
</div>

{/* 태블릿 */}
<div
className="hidden flex-col border-b border-Cgray300 py-[42px] md:flex lg:hidden"
ref={
page.nextCursor === meeting.meetingId
? lastMeetingRef
: null
}
>
<HorizonCard
onClick={handleMoveDetailPage}
key={meeting.meetingId}
title={meeting.title}
thumbnailUrl={meeting.thumbnail}
location={meeting.location}
total={meeting.maxMember}
value={meeting.memberCount}
thumbnailHeight={160}
thumbnailWidth={160}
className=""
meetingId={meeting.meetingId}
category={''}
/>
<CardRightSection
memberList={meeting.memberList}
isPublic={meeting.isPublic}
className="flex lg:hidden"
className="hidden lg:flex"
meetingId={meeting.meetingId}
/>
</div>
</HorizonCard>
</div>

{/* 모바일 */}
<div
className="flex flex-col border-b border-Cgray300 py-[42px] md:hidden"
ref={
page.nextCursor === meeting.meetingId
? lastMeetingRef
: null
}
>
<HorizonCard
onClick={handleMoveDetailPage}
key={meeting.meetingId}
title={meeting.title}
thumbnailUrl={meeting.thumbnail}
location={meeting.location}
total={meeting.maxMember}
value={meeting.memberCount}
thumbnailHeight={80}
thumbnailWidth={80}
className=""
meetingId={meeting.meetingId}
category={''}
/>
<CardRightSection
memberList={meeting.memberList}
isPublic={meeting.isPublic}
className="flex lg:hidden"
meetingId={meeting.meetingId}
/>
</div>
{/* 태블릿 */}
<div
className="hidden flex-col border-b border-Cgray300 py-[42px] md:flex lg:hidden"
ref={
page.nextCursor === meeting.meetingId ? lastMeetingRef : null
}
>
<HorizonCard
onClick={handleMoveDetailPage}
key={meeting.meetingId}
title={meeting.title}
thumbnailUrl={meeting.thumbnail}
location={meeting.location}
total={meeting.maxMember}
value={meeting.memberCount}
thumbnailHeight={160}
thumbnailWidth={160}
className=""
meetingId={meeting.meetingId}
category={''}
/>
<CardRightSection
memberList={meeting.memberList}
isPublic={meeting.isPublic}
className="flex lg:hidden"
meetingId={meeting.meetingId}
/>
</div>

{/* 모바일 */}
<div
className="flex flex-col border-b border-Cgray300 py-[42px] md:hidden"
ref={
page.nextCursor === meeting.meetingId ? lastMeetingRef : null
}
>
<HorizonCard
onClick={handleMoveDetailPage}
key={meeting.meetingId}
title={meeting.title}
thumbnailUrl={meeting.thumbnail}
location={meeting.location}
total={meeting.maxMember}
value={meeting.memberCount}
thumbnailHeight={80}
thumbnailWidth={80}
className=""
meetingId={meeting.meetingId}
category={''}
/>
<CardRightSection
memberList={meeting.memberList}
isPublic={meeting.isPublic}
className="flex lg:hidden"
meetingId={meeting.meetingId}
/>
</div>
);
})}
</div>
))}
</div>
))}
</div>
Expand Down
4 changes: 3 additions & 1 deletion src/app/(user-page)/my-meeting/_features/ModalProfile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import Image from 'next/image';
import React from 'react';

import SkeletonProfile from './skeletons/SkeletonProfile';

const ModalProfile = ({
userId,
meetingId,
Expand All @@ -13,14 +15,14 @@
const {
data: user,
isLoading,
error,

Check warning on line 18 in src/app/(user-page)/my-meeting/_features/ModalProfile.tsx

View workflow job for this annotation

GitHub Actions / check 

'error' is assigned a value but never used. Allowed unused vars must match /^_/u
} = useMyMeetingMemberProfileQuries({
meetingId,
userId: userId!,
});

if (isLoading || !user) {
return <div>로딩중</div>;
return <SkeletonProfile />;
}

return (
Expand Down
Loading
Loading