From fabcf366b1d51d8f44c5ccb8a7c6d25cf490f47c Mon Sep 17 00:00:00 2001 From: Hyeonsu Kim <86764406+borimong@users.noreply.github.com> Date: Sun, 3 Nov 2024 16:48:52 +0900 Subject: [PATCH] Feat/#940 (#944) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 공동모임장 기본 틀 구현 * feat: button에 타입 지정해줘서 원치 않는 submit 안되도록 방지하기 * feat: 멘션을 포함한 input 틀 완성(완전히 디자인 똑같이 구현은 x) * fix: +버튼 앞에 고정 * design: input창 열려있을 때 버튼 밝아지는 것 유지 * feat: 모임 개설 - 공동 모임장 추가 뷰,기능 구현 완료 * design: 피그마상에서는 8px로 되어있어서 수정 * design: mobile 반응형 디자인 구현 * fix: coLeader.map is not a function 버그 해결 * feat: 모바일 멘션 바텀시트 구현 * design: 모임장 프로필 디자인 변경 * design: 불필요한 margin 제거 * chore: 이해를 돕는 주석 첨가, 불필요한 콘솔 제거 * update: API 버전 최신화 * fix: 웹뷰-피드 작성 모달 무한 렌더링 이슈 * update: 멘션 유저 리스트 조회 API 최신화 * feat: isCoLeader 변수 추가 * update: API 최신화 (approvedCount) * feat: 멘션 타입에 userId 추가 * feat: isCoLeader 선택적 타입 정의 * feat: formData에 coLeaderUserIds 추가 * feat: ProfileAnchor 컴포넌트 분리 * feat: 모임 상세 페이지에 ProfileAnchor 적용 * feat: 모임 수정에 공동 모임장 데이터 출력 * feat: 모임 수정 시 다이얼로그 워딩 변경 --------- Co-authored-by: ocahs9 --- pages/edit/index.tsx | 1 + src/__generated__/schema2.d.ts | 161 ++++++++++++------ src/api/API_LEGACY/meeting/index.ts | 1 + src/api/user/index.ts | 3 +- src/components/feed/Mention/index.tsx | 1 + .../feed/Modal/FeedFormPresentation.tsx | 10 +- .../form/Presentation/CoLeader/index.tsx | 10 +- src/components/form/Presentation/index.tsx | 5 +- src/components/form/SearchMention/index.tsx | 1 + .../RecruitmentStatusModalContent/index.tsx | 8 +- .../MeetingController/ProfileAnchor.tsx | 96 +++++++++++ .../meetingDetail/MeetingController/index.tsx | 91 ++-------- .../page/meetingList/Card/DesktopSizeCard.tsx | 7 +- .../meetingList/Card/MobileSize/index.tsx | 5 +- .../page/meetingList/Card/index.tsx | 5 +- src/components/page/meetingList/Grid/List.tsx | 26 ++- 16 files changed, 283 insertions(+), 148 deletions(-) create mode 100644 src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx diff --git a/pages/edit/index.tsx b/pages/edit/index.tsx index 7a52f891..cc98324a 100644 --- a/pages/edit/index.tsx +++ b/pages/edit/index.tsx @@ -100,6 +100,7 @@ const EditPage = () => { joinableParts, canJoinOnlyActiveGeneration: formData?.canJoinOnlyActiveGeneration, note: formData?.note ?? '', + coLeader: formData?.coMeetingLeaders, }, }); } diff --git a/src/__generated__/schema2.d.ts b/src/__generated__/schema2.d.ts index 6ccd5e4d..a17ebabf 100644 --- a/src/__generated__/schema2.d.ts +++ b/src/__generated__/schema2.d.ts @@ -102,26 +102,25 @@ export interface paths { /** 로그인/회원가입 */ post: operations["loginUser"]; }; + "/user/v2": { + /** 전체 사용자 조회 */ + get: operations["getAllUser"]; + }; "/user/v2/profile/me": { /** 유저 본인 프로필 조회 */ get: operations["getUserOwnProfile"]; }; - "/user/v2/profile/me/temp": { - /** [TEMP] 유저 본인 프로필 조회 */ - get: operations["getUserOwnProfileTemp"]; - }; "/user/v2/mention": { - /** 멘션 사용자 조회 */ + /** + * 멘션 사용자 조회 + * @deprecated + */ get: operations["getAllMentionUser"]; }; "/user/v2/meeting": { /** 내가 만든 모임 조회 */ get: operations["getCreatedMeetingByUser"]; }; - "/user/v2/meeting/temp": { - /** [TEMP] 내가 만든 모임 조회 */ - get: operations["getCreatedMeetingByUserTemp"]; - }; "/user/v2/meeting/all": { /** 내가 속한 모임 조회 */ get: operations["getAllMeetingByUser"]; @@ -130,10 +129,6 @@ export interface paths { /** 내가 신청한 모임 조회 */ get: operations["getAppliedMeetingByUser"]; }; - "/user/v2/apply/temp": { - /** [TEMP] 내가 신청한 모임 조회 */ - get: operations["getAppliedMeetingByUserTemp"]; - }; "/post/v2/count": { /** 모임 게시글 개수 조회 */ get: operations["getPostCount"]; @@ -320,6 +315,11 @@ export interface components { * ] */ joinableParts: ("PM" | "DESIGN" | "IOS" | "ANDROID" | "SERVER" | "WEB")[]; + /** + * @description 공동 모임장 userId (크루에서 사용하는 userId) + * @example [251, 942] + */ + coLeaderUserIds?: number[]; }; /** @description 모임 지원자 상태 변경 request body dto */ ApplyV2UpdateStatusBodyDto: { @@ -570,6 +570,42 @@ export interface components { */ accessToken: string; }; + /** @description 전체 사용자 조회 응답 Dto */ + UserV2GetAllUserDto: { + /** + * Format: int32 + * @description 크루에서 사용하는 userId + * @example 103 + */ + userId: number; + /** + * Format: int32 + * @description 메이커스 프로덕트에서 범용적으로 사용하는 userId + * @example 403 + */ + orgId: number; + /** + * @description 유저 이름 + * @example 홍길동 + */ + userName: string; + /** + * @description 최근 파트 + * @example 서버 + */ + recentPart: string; + /** + * Format: int32 + * @description 최근 기수 + * @example 33 + */ + recentGeneration: number; + /** + * @description 유저 프로필 사진 + * @example [url] 형식 + */ + profileImageUrl?: string; + }; /** @description 유저 본인 프로필 조회 응답 Dto */ UserV2GetUserOwnProfileResponseDto: { /** @@ -600,10 +636,6 @@ export interface components { */ hasActivities: boolean; }; - /** @description 임시 응답 Dto */ - TempResponseDto: { - data: components["schemas"]["UserV2GetUserOwnProfileResponseDto"]; - }; /** @description 멘션 유저 조회 응답 Dto */ UserV2GetAllMentionUserDto: { /** @@ -719,6 +751,11 @@ export interface components { * @enum {integer} */ status: 0 | 1 | 2; + /** + * @description 공동 모임장 여부 + * @example false + */ + isCoLeader: boolean; /** * @description 모임 사진 * @example [url] 형식 @@ -748,10 +785,16 @@ export interface components { user: components["schemas"]["MeetingCreatorDto"]; /** * Format: int32 - * @description 신청 수 + * @description [DEPRECATED] TODO: FE에서 수정 완료 후 삭제 * @example 7 */ appliedCount: number; + /** + * Format: int32 + * @description 신청자 수 + * @example 7 + */ + approvedCount: number; }; /** @description 활동 기수 */ UserActivityVO: { @@ -1177,10 +1220,15 @@ export interface components { user: components["schemas"]["MeetingCreatorDto"]; /** * Format: int32 - * @description 신청 승인 수 - * @example 7 + * @description TODO: FE에서 수정 완료 후 삭제 */ appliedCount: number; + /** + * Format: int32 + * @description 승인된 신청자 수 + * @example 3 + */ + approvedCount: number; }; /** @description 모임 조회 응답 Dto */ MeetingV2GetAllMeetingDto: { @@ -1272,6 +1320,31 @@ export interface components { status: number; user: components["schemas"]["ApplicantByMeetingDto"]; }; + /** @description 공동 모임장 조회 dto */ + MeetingV2CoLeaderResponseDto: { + /** + * Format: int32 + * @description 공동 모임장 id, 크루에서 사용하는 userId + * @example 203 + */ + userId: number; + /** + * Format: int32 + * @description 공동 모임장 org id, 메이커스 프로덕트에서 범용적으로 사용하는 userId + * @example 789 + */ + orgId: number; + /** + * @description 공동 모임장 이름 + * @example 공동 모임장 이름 + */ + userName: string; + /** + * @description 공동 모임장 프로필 이미지 url + * @example [url 형식] + */ + userprofileImage: string; + }; /** @description 모임 상세 조회 dto */ MeetingV2GetMeetingByIdResponseDto: { /** @@ -1381,6 +1454,13 @@ export interface components { * ] */ joinableParts: ("PM" | "DESIGN" | "IOS" | "ANDROID" | "SERVER" | "WEB")[]; + /** @description 공동 모임장 목록 */ + coMeetingLeaders?: components["schemas"]["MeetingV2CoLeaderResponseDto"][]; + /** + * @description 공동 모임장 여부 + * @example false + */ + isCoLeader: boolean; /** * Format: int32 * @description 모임 상태, 0: 모집전, 1: 모집중, 2: 모집종료 @@ -2373,33 +2453,34 @@ export interface operations { 500: never; }; }; - /** 유저 본인 프로필 조회 */ - getUserOwnProfile: { + /** 전체 사용자 조회 */ + getAllUser: { responses: { /** @description 성공 */ 200: { content: { - "application/json;charset=UTF-8": components["schemas"]["UserV2GetUserOwnProfileResponseDto"]; + "application/json;charset=UTF-8": components["schemas"]["UserV2GetAllUserDto"][]; }; }; - /** @description 해당 유저가 없는 경우 */ - 400: never; }; }; - /** [TEMP] 유저 본인 프로필 조회 */ - getUserOwnProfileTemp: { + /** 유저 본인 프로필 조회 */ + getUserOwnProfile: { responses: { /** @description 성공 */ 200: { content: { - "application/json;charset=UTF-8": components["schemas"]["TempResponseDto"]; + "application/json;charset=UTF-8": components["schemas"]["UserV2GetUserOwnProfileResponseDto"]; }; }; /** @description 해당 유저가 없는 경우 */ 400: never; }; }; - /** 멘션 사용자 조회 */ + /** + * 멘션 사용자 조회 + * @deprecated + */ getAllMentionUser: { responses: { /** @description 성공 */ @@ -2421,17 +2502,6 @@ export interface operations { }; }; }; - /** [TEMP] 내가 만든 모임 조회 */ - getCreatedMeetingByUserTemp: { - responses: { - /** @description 성공 */ - 200: { - content: { - "application/json;charset=UTF-8": components["schemas"]["TempResponseDto"]; - }; - }; - }; - }; /** 내가 속한 모임 조회 */ getAllMeetingByUser: { responses: { @@ -2456,17 +2526,6 @@ export interface operations { }; }; }; - /** [TEMP] 내가 신청한 모임 조회 */ - getAppliedMeetingByUserTemp: { - responses: { - /** @description 성공 */ - 200: { - content: { - "application/json;charset=UTF-8": components["schemas"]["TempResponseDto"]; - }; - }; - }; - }; /** 모임 게시글 개수 조회 */ getPostCount: { parameters: { diff --git a/src/api/API_LEGACY/meeting/index.ts b/src/api/API_LEGACY/meeting/index.ts index 1f5aa8b6..bea250f1 100644 --- a/src/api/API_LEGACY/meeting/index.ts +++ b/src/api/API_LEGACY/meeting/index.ts @@ -245,6 +245,7 @@ const serializeFormData = (formData: FormType) => { //targetDesc: formData.detail.targetDesc, note: formData.detail.note, detail: undefined, + coLeaderUserIds: formData.detail.coLeader?.map(user => user.userId), }; return data; }; diff --git a/src/api/user/index.ts b/src/api/user/index.ts index 584b3319..b4ae6c21 100644 --- a/src/api/user/index.ts +++ b/src/api/user/index.ts @@ -16,6 +16,7 @@ export interface UserResponse { export type ApplicationStatusType = 'WAITING' | 'APPROVE' | 'REJECT'; export const getMentionUsers = async () => { - const { data } = await api.get('/user/v2/mention'); + //타입 지정하지 않은 이유: Suggestion의 id, display 를 사용해야하기 때문 + const { data } = await api.get('/user/v2'); return data; }; diff --git a/src/components/feed/Mention/index.tsx b/src/components/feed/Mention/index.tsx index 23de227e..a6862d25 100644 --- a/src/components/feed/Mention/index.tsx +++ b/src/components/feed/Mention/index.tsx @@ -10,6 +10,7 @@ import { MentionContext } from './MentionContext'; interface mentionableDataType { id: number; display: string; + userId: number; orgId: number; userName: string; recentPart: string; diff --git a/src/components/feed/Modal/FeedFormPresentation.tsx b/src/components/feed/Modal/FeedFormPresentation.tsx index 187dcaa9..e7eca656 100644 --- a/src/components/feed/Modal/FeedFormPresentation.tsx +++ b/src/components/feed/Modal/FeedFormPresentation.tsx @@ -60,11 +60,13 @@ function FeedFormPresentation({ const [remainingHeight, setRemainingHeight] = useState(100); const [selectedMeeting, setSelectedMeeting] = useState(undefined); const [isMobileDevice, setIsMobileDevice] = useState(false); - const userAgent = navigator.userAgent; - if (/android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent)) { - setIsMobileDevice(true); - } + useEffect(() => { + const userAgent = navigator.userAgent; + if (/android/i.test(userAgent) || /iPad|iPhone|iPod/.test(userAgent)) { + setIsMobileDevice(true); + } + }, []); const handleWindowResize = () => { setTextareaHeightChangeFlag(flag => !flag); diff --git a/src/components/form/Presentation/CoLeader/index.tsx b/src/components/form/Presentation/CoLeader/index.tsx index 31c36cba..0d0e386a 100644 --- a/src/components/form/Presentation/CoLeader/index.tsx +++ b/src/components/form/Presentation/CoLeader/index.tsx @@ -19,10 +19,12 @@ interface mentionableDataType { id: number; display: string; orgId: number; + userId: number; userName: string; recentPart: string; recentGeneration: number; profileImageUrl: string; + userprofileImage?: string; } const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps) => { @@ -138,11 +140,13 @@ const CoLeader = ({ value: coLeaders = [], onChange, error }: CoLeaderFieldProps {/*추가된 공동 모임장 프로필 렌더링 */} - {coLeaders.map((leader, idx) => ( - + {coLeaders?.map((leader, idx) => ( + - {leader.profileImageUrl ? ( + {leader?.profileImageUrl ? ( {leader.userName} + ) : leader?.userprofileImage ? ( + {leader.userName} ) : ( )} diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx index fb3dc7e9..fb462101 100644 --- a/src/components/form/Presentation/index.tsx +++ b/src/components/form/Presentation/index.tsx @@ -64,6 +64,7 @@ function Presentation({ const { open } = useDialog(); const [isSoptScheduleOpen, setIsSoptScheduleOpen] = useState(false); const soptScheduleRef = useRef(null); + const isEdit = router.asPath.includes('/edit'); const schedule: React.ReactNode = ( <> @@ -152,12 +153,12 @@ function Presentation({ }; const dialogOption: DialogOptionType = { - title: '모임을 개설하시겠습니까?', + title: `모임을 ${isEdit ? '수정' : '개설'}하시겠습니까?`, description: '모임에 대한 설명이 충분히 작성되었는지 확인해 주세요', type: 'default', typeOptions: { cancelButtonText: '취소', - approveButtonText: '개설하기', + approveButtonText: `${isEdit ? '수정' : '개설'}하기`, buttonFunction: () => { if (formRef.current) { formRef.current.requestSubmit(); diff --git a/src/components/form/SearchMention/index.tsx b/src/components/form/SearchMention/index.tsx index 41881454..af7c186b 100644 --- a/src/components/form/SearchMention/index.tsx +++ b/src/components/form/SearchMention/index.tsx @@ -10,6 +10,7 @@ interface mentionableDataType { id: number; display: string; orgId: number; + userId: number; userName: string; recentPart: string; recentGeneration: number; diff --git a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx index 40f60726..4adce93c 100644 --- a/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx +++ b/src/components/page/meetingDetail/MeetingController/Modal/Content/RecruitmentStatusModalContent/index.tsx @@ -9,6 +9,7 @@ interface RecruitmentStatusModalContentProps { meetingId: number; appliedInfo: paths['/meeting/v2/{meetingId}']['get']['responses']['200']['content']['application/json;charset=UTF-8']['appliedInfo']; isHost: boolean; + isCoLeader: boolean; isApplied: boolean; } @@ -16,10 +17,11 @@ const RecruitmentStatusModalContent = ({ meetingId, appliedInfo, isHost, + isCoLeader, isApplied, }: RecruitmentStatusModalContentProps) => { const total = appliedInfo.length; - const isBottomVisible = total > 0 || isHost || isApplied; + const isBottomVisible = total > 0 || isHost || isApplied || isCoLeader; return ( <> @@ -33,10 +35,10 @@ const RecruitmentStatusModalContent = ({ {isBottomVisible && ( {total > 0 && 총 {total}명 신청} - {(isHost || isApplied) && ( + {(isHost || isApplied || isCoLeader) && ( ampli.clickMemberManagement()}> - {isHost ? '신청자 관리' : isApplied && '참여자 리스트'} + {isHost ? '신청자 관리' : (isCoLeader || isApplied) && '참여자 리스트'} diff --git a/src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx b/src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx new file mode 100644 index 00000000..78b973af --- /dev/null +++ b/src/components/page/meetingDetail/MeetingController/ProfileAnchor.tsx @@ -0,0 +1,96 @@ +import { fontsObject } from '@sopt-makers/fonts'; +import { styled } from 'stitches.config'; +import { playgroundURL } from '@constants/url'; +import { playgroundLink } from '@sopt-makers/playground-common'; +import { ampli } from '@/ampli'; +import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect'; + +interface ProfileAnchorProps { + profileData: { + orgId: number; + userprofileImage?: string; + userName: string; + }; +} + +const ProfileAnchor = ({ profileData }: ProfileAnchorProps) => { + return ( + ampli.clickOwnerProfile({ group_owner_id: Number(profileData.orgId) })} + > + {profileData.userprofileImage ? : } + {profileData.userName} + {/* */} + + ); +}; + +export default ProfileAnchor; + +const SProfileAnchor = styled('a', { + flexType: 'verticalCenter', + color: '$gray10', + width: 'fit-content', + bg: '$gray900', + br: '10px', + + display: 'flex', + padding: '12px 16px', + justifyContent: 'center', + alignItems: 'center', + gap: '14px', + '@mobile': { + padding: '5px 8px', + gap: '6px', + br: '6.25px', + }, + + img: { + width: '$48', + height: '$48', + borderRadius: '50%', + objectFit: 'cover', + + background: '$gray700', + '@tablet': { + width: '$32', + height: '$32', + }, + '@mobile': { + width: '$20', + height: '$20', + }, + }, + + '& > svg:first-child': { + width: '$48', + height: '$48', + + '@tablet': { + width: '$32', + height: '$32', + }, + '@mobile': { + width: '$20', + height: '$20', + }, + }, + + '& > span': { + ...fontsObject.TITLE_3_24_SB, + fontWeight: 500, + + '@tablet': { + fontStyle: 'T5', + }, + '@mobile': { + ...fontsObject.LABEL_5_11_SB, + }, + }, + + // '>' 아이콘이 사라지면서 지금은 사용 안함. + '& > svg:last-child > path': { + stroke: `$gray200`, + }, +}); diff --git a/src/components/page/meetingDetail/MeetingController/index.tsx b/src/components/page/meetingDetail/MeetingController/index.tsx index 622bdeaa..444dd95e 100644 --- a/src/components/page/meetingDetail/MeetingController/index.tsx +++ b/src/components/page/meetingDetail/MeetingController/index.tsx @@ -13,18 +13,15 @@ import GuestConfirmModal from './Modal/Confirm/GuestConfirmModal'; import ApplicationModalContent from './Modal/Content/ApplicationModalContent'; import RecruitmentStatusModalContent from './Modal/Content/RecruitmentStatusModalContent'; import { PostApplicationRequest, GetMeetingResponse } from '@api/API_LEGACY/meeting'; -import { playgroundURL } from '@constants/url'; import { ERecruitmentStatus, RECRUITMENT_STATUS } from '@constants/option'; -import ProfileDefaultIcon from '@assets/svg/profile_default.svg?rect'; import ArrowSmallRightIcon from '@assets/svg/arrow_small_right.svg'; import MentorTooltip from './MentorTooltip'; -import { getResizedImage } from '@utils/image'; import { useQueryMyProfile } from '@api/API_LEGACY/user/hooks'; import { ampli } from '@/ampli'; import ButtonLoader from '@components/loader/ButtonLoader'; import { useDialog } from '@sopt-makers/ui'; import { ReactNode } from 'react'; -import { fontsObject } from '@sopt-makers/fonts'; +import ProfileAnchor from './ProfileAnchor'; interface DetailHeaderProps { detailData: GetMeetingResponse; @@ -81,6 +78,8 @@ const MeetingController = ({ approved, approvedApplyCount, capacity, + isCoLeader, + coMeetingLeaders, host: isHost, apply: isApplied, isMentorNeeded, @@ -243,16 +242,12 @@ const MeetingController = ({ {title} - ampli.clickOwnerProfile({ group_owner_id: Number(hostId) })} - > - {hostProfileImage ? : } - {hostName} - {/* */} - - {isMentorNeeded && } + + {coMeetingLeaders?.map((item: typeof coMeetingLeaders[number]) => ( + + ))} + {isMentorNeeded && }
@@ -309,6 +304,7 @@ const MeetingController = ({ meetingId={Number(meetingId)} appliedInfo={appliedInfo} isHost={isHost} + isCoLeader={isCoLeader} isApplied={isApplied} /> )} @@ -405,75 +401,12 @@ const SPeriod = styled('div', { }, }); -const SProfileAnchor = styled('a', { - flexType: 'verticalCenter', - color: '$gray10', - width: 'fit-content', - bg: '$gray900', - br: '10px', - - display: 'flex', - padding: '12px 16px', - justifyContent: 'center', - alignItems: 'center', - gap: '14px', +const SHostWrapper = styled('div', { + position: 'relative', + gap: '16px', '@mobile': { - padding: '5px 8px', gap: '6px', - br: '6.25px', - }, - - img: { - width: '$48', - height: '$48', - borderRadius: '50%', - objectFit: 'cover', - - background: '$gray700', - '@tablet': { - width: '$32', - height: '$32', - }, - '@mobile': { - width: '$20', - height: '$20', - }, - }, - - '& > svg:first-child': { - width: '$48', - height: '$48', - - '@tablet': { - width: '$32', - height: '$32', - }, - '@mobile': { - width: '$20', - height: '$20', - }, }, - - '& > span': { - ...fontsObject.TITLE_3_24_SB, - fontWeight: 500, - - '@tablet': { - fontStyle: 'T5', - }, - '@mobile': { - ...fontsObject.LABEL_5_11_SB, - }, - }, - - // '>' 아이콘이 사라지면서 지금은 사용 안함. - '& > svg:last-child > path': { - stroke: `$gray200`, - }, -}); - -const SHostWrapper = styled('div', { - position: 'relative', }); const Button = styled('button', { diff --git a/src/components/page/meetingList/Card/DesktopSizeCard.tsx b/src/components/page/meetingList/Card/DesktopSizeCard.tsx index 9a83ca7e..374bce3a 100644 --- a/src/components/page/meetingList/Card/DesktopSizeCard.tsx +++ b/src/components/page/meetingList/Card/DesktopSizeCard.tsx @@ -8,7 +8,10 @@ import { getResizedImage } from '@utils/image'; import { paths } from '@/__generated__/schema2'; interface CardProps { - meetingData: paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number]; + meetingData: Omit< + paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number], + 'isCoLeader' + > & { isCoLeader?: boolean }; isAllParts: boolean; } @@ -61,7 +64,7 @@ function DesktopSizeCard({ meetingData, isAllParts }: CardProps) { 모집 현황 - {meetingData.appliedCount}/{meetingData.capacity}명 + {meetingData.approvedCount}/{meetingData.capacity}명
diff --git a/src/components/page/meetingList/Card/MobileSize/index.tsx b/src/components/page/meetingList/Card/MobileSize/index.tsx index c4a28063..a6b1eb0c 100644 --- a/src/components/page/meetingList/Card/MobileSize/index.tsx +++ b/src/components/page/meetingList/Card/MobileSize/index.tsx @@ -3,7 +3,10 @@ import ListType from './ListType'; import { paths } from '@/__generated__/schema2'; export interface MobileSizeCardProps { - meetingData: paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number]; + meetingData: Omit< + paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number], + 'isCoLeader' + > & { isCoLeader?: boolean }; isAllParts: boolean; mobileType: 'list' | 'card'; } diff --git a/src/components/page/meetingList/Card/index.tsx b/src/components/page/meetingList/Card/index.tsx index f99def4e..f1a17012 100644 --- a/src/components/page/meetingList/Card/index.tsx +++ b/src/components/page/meetingList/Card/index.tsx @@ -10,7 +10,10 @@ import { paths } from '@/__generated__/schema2'; interface CardProps { bottom?: ReactNode; - meetingData: paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number]; + meetingData: Omit< + paths['/user/v2/meeting']['get']['responses']['200']['content']['application/json;charset=UTF-8']['meetings'][number], + 'isCoLeader' + > & { isCoLeader?: boolean }; mobileType: 'list' | 'card'; } diff --git a/src/components/page/meetingList/Grid/List.tsx b/src/components/page/meetingList/Grid/List.tsx index a1bad002..f3b1c2aa 100644 --- a/src/components/page/meetingList/Grid/List.tsx +++ b/src/components/page/meetingList/Grid/List.tsx @@ -93,6 +93,7 @@ const PaginationWrapper = styled('div', { export function MeetingListOfMine() { const { data: mineData, isLoading } = useQueryMeetingListOfMine(); + console.log(mineData); useScrollRestorationAfterLoading(isLoading); return (
@@ -104,7 +105,13 @@ export function MeetingListOfMine() { key={meetingData.id} meetingData={meetingData} mobileType="card" - bottom={} + bottom={ + meetingData?.isCoLeader ? ( + + ) : ( + + ) + } /> ))} @@ -146,3 +153,20 @@ const SMeetingCount = styled('p', { fontAg: '12_semibold_100', }, }); + +const SBlankManageMentButton = styled('div', { + width: '128px', + padding: '12px 12px 13px 14px', + borderRadius: '71px', + fontAg: '16_bold_100', + whiteSpace: 'nowrap', + //background: '$gray800', + '@tablet': { + width: '91px', + //todo: 참여자 리스트 버튼으로 바꾸기 + height: '30px', + marginTop: '16px', + fontStyle: 'T6', + padding: '6px 6px 6px 12px', + }, +});