Feat/markup/my meeting i made/DEVING-50

next.config.mjs

@@ -13,6 +13,11 @@ const nextConfig = {
         destination: '/meeting/mogakco',
         permanent: true,
       },
+      {
+        source: '/my-meeting',
+        destination: '/my-meeting/my?type=created',
+        permanent: true,
+      },
     ];
   },
 

src/app/(user-page)/components/CardRightSection.tsx

@@ -0,0 +1,175 @@
+'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 Image from 'next/image';
+import { useState } from 'react';
+import type { Member } from 'types/myMeeting';
+
+import ModalProfile from './ModalProfile';
+import ModalUserList from './ModalUserList';
+
+const CardRightSection = ({
+  memberList,
+  isPublic,
+  className,
+  meetingId,
+}: {
+  memberList: Member[];
+  isPublic: boolean;
+  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);
+
+  // 가입 승인 / 거절
+  const { mutate: statusMutate } = useMemberStatusMutation(meetingId);
+
+  // 내보내기
+  const { mutate: expelMutate } = useExpelMutation(meetingId);
+
+  const handleSecondModalConfirm = () => {
+    // 가입 확인 api 연동
+    // 만약, status가 approved라면 -> 내보내기 활성화
+    // 만약, status가 pending이 아니라면 -> 닫기만 활성화
+
+    if (selectedUser && selectedUser.memberStatus === 'PENDING') {
+      statusMutate({
+        setMemberStatus: 'APPROVED',
+        userId: selectedUser?.userId,
+      });
+    }
+
+    setIsUserProfileModalOpen(false);
+  };
+
+  const handleSecondModalCancel = () => {
+    // 가입 거절 api 연동
+    if (selectedUser && selectedUser.memberStatus === 'PENDING') {
+      statusMutate({
+        setMemberStatus: 'REJECTED',
+        userId: selectedUser?.userId,
+      });
+    } else if (selectedUser && selectedUser.memberStatus === 'APPROVED') {
+      expelMutate({
+        setMemberStatus: 'EXPEL',
+        userId: selectedUser?.userId,
+      });
+    }
+
+    setIsUserProfileModalOpen(false);
+  };
+
+  // 프로필 보기 할 유저
+  const [selectedUser, setSelectedUser] = useState<Member | null>(null);
+
+  return (
+    <div className={`flex w-full gap-[24px] px-4 lg:w-[518px] ${className}`}>
+      <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">
+          {memberList.map((member: Member) => (
+            <div key={member.userId} className="flex items-center py-[8px]">
+              <Image
+                src={member.profilePic}
+                alt="맴버 프로필"
+                width={40}
+                height={40}
+                className="rounded-[9.92px] "
+              />
+              <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>
+            </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>
+      <Modal
+        isOpen={isUserProfileModalOpen}
+        onClose={handleSecondModalCancel}
+        onConfirm={handleSecondModalConfirm}
+        confirmText={
+          selectedUser?.memberStatus === 'PENDING' ? '가입승인' : '닫기'
+        }
+        cancelText={
+          selectedUser?.memberStatus === 'PENDING'
+            ? '가입거절'
+            : selectedUser?.memberStatus === 'APPROVED'
+              ? '내보내기'
+              : '닫기'
+        }
+        closeOnly={
+          !(
+            selectedUser?.memberStatus === 'PENDING' ||
+            selectedUser?.memberStatus === 'APPROVED'
+          )
+        }
+        modalClassName="w-[450px] overflow-hidden bg-BG_2"
+        buttonClassName="w-full"
+      >
+        <ModalProfile userId={selectedUser?.userId} meetingId={meetingId} />
+      </Modal>
+      <Modal
+        isOpen={isUserListModalOpen}
+        onClose={() => setIsUserListModalOpen(false)}
+        onConfirm={handleConfirm}
+        showOnly
+        modalClassName="h-[590px] w-[520px] overflow-y-auto"
+      >
+        <ModalUserList
+          memberList={memberList}
+          setSelectedUser={setSelectedUser}
+          setIsUserProfileModalOpen={setIsUserProfileModalOpen}
+          setIsUserListModalOpen={setIsUserListModalOpen}
+        />
+      </Modal>
+    </div>
+  );
+};
+
+export default CardRightSection;

src/app/(user-page)/components/Created.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import HorizonCard from '@/components/ui/HorizonCard';
+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';
+
+const Created = () => {
+  const router = useRouter();
+
+  const {
+    data: meetingData,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    error,
+  } = useInfiniteMyMeetingManageQueries();
+
+  const lastMeetingRef = useInfiniteScroll({
+    fetchNextPage,
+    isFetchingNextPage,
+    hasNextPage,
+  });
+
+  if (isLoading || !meetingData) {
+    return <p>loading...</p>;
+  }
+
+  const handleMoveDetailPage = (meetingId: number) => {
+    /**
+     * TODO
+     * 추후 category 수정
+     */
+    router.push(`/meeting/study/${meetingId}`);
+  };
+
+  return (
+    <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
+                  }
+                >
+                  <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"
+                    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>
+  );
+};
+export default Created;