feat: 멤버탭 내 커피챗 진입점 연결, 쪽지 모달에서 커피챗 삭제 (#1628)

* feat: 멤버 리스트 내 커피챗 뱃지 클릭시 커피챗 상세 페이지로 이동 * feat: 쪽지 모달에서 커피챗 뱃지 삭제 * feat: 커피챗 버튼 클릭시 멤버 카드가 클릭되지 않도록 이벤트전파 방지 * fix: mouseEvent type 수정 * fix: mouseEvent type 수정
sopt-makers · Nov 3, 2024 · 7889e29 · 7889e29
1 parent 60a57d7
commit 7889e29
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 21 deletions.
diff --git a/src/components/members/detail/MessageSection/MessageModal.tsx b/src/components/members/detail/MessageSection/MessageModal.tsx
@@ -30,10 +30,6 @@ interface Category {
   value: MessageCategory;
 }
 const CATEGORY: Category[] = [
-  {
-    icon: '/icons/icon-coffeechat.svg',
-    value: MessageCategory.COFFEE_CHAT,
-  },
   {
     icon: '/icons/icon-network.svg',
     value: MessageCategory.NETWORK,
@@ -99,19 +95,19 @@ const MessageModal: FC<MessageModalProps> = ({
   };
 
   const submit = async ({ content, email }: MessageForm) => {
-    if(isPending){
+    if (isPending) {
       return;
     }
-      const result = await confirm({
-        title: '쪽지를 보내시겠습니까?',
-        description: '쪽지는 상대방의 이메일로 전달됩니다.',
-        okButtonColor: colors.white,
-        okButtonTextColor: colors.black,
-        okButtonText: '전송하기',
-        cancelButtonText: '돌아가기',
-        zIndex: zIndex.헤더+102,
-        width: 400,
-      });
+    const result = await confirm({
+      title: '쪽지를 보내시겠습니까?',
+      description: '쪽지는 상대방의 이메일로 전달됩니다.',
+      okButtonColor: colors.white,
+      okButtonTextColor: colors.black,
+      okButtonText: '전송하기',
+      cancelButtonText: '돌아가기',
+      zIndex: zIndex.헤더 + 102,
+      width: 400,
+    });
     try {
       if (!selectedCategory) {
         return;
@@ -126,7 +122,7 @@ const MessageModal: FC<MessageModalProps> = ({
         await alert({
           title: '쪽지 보내기',
           description: '성공적으로 전송되었어요!',
-          zIndex:zIndex.헤더+103
+          zIndex: zIndex.헤더 + 103,
         });
         onLog?.({ category: selectedCategory });
         props.onClose();
@@ -187,7 +183,7 @@ const MessageModal: FC<MessageModalProps> = ({
             selectedCategory === MessageCategory.COFFEE_CHAT ? COFFEECHAT_PLACEHOLDER : '전달할 내용을 입력해주세요!'
           }
         />
-        <StyledButton isDisabled={!isValid||isPending}>
+        <StyledButton isDisabled={!isValid || isPending}>
           {isPending ? (
             <Loading color='white' />
           ) : (
@@ -218,6 +214,7 @@ const StyledForm = styled.form`
   display: flex;
   flex-direction: column;
   align-items: center;
+  width: 100%;
 `;
 
 const ProfileImage = styled.img`
@@ -246,11 +243,11 @@ const StyledCategory = styled.section`
   display: flex;
   flex-wrap: wrap;
   row-gap: 10px;
-  column-gap: 12px;
+  column-gap: 10px;
   align-items: center;
   justify-content: center;
   margin-top: 46px;
-  min-width: 370px;
+  max-width: 224px;
 `;
 
 const StyledCategoryItem = styled.div<{ isSelected: boolean }>`

diff --git a/src/components/members/main/MemberCard/index.tsx b/src/components/members/main/MemberCard/index.tsx
@@ -2,6 +2,8 @@ import styled from '@emotion/styled';
 import * as AspectRatio from '@radix-ui/react-aspect-ratio';
 import { colors } from '@sopt-makers/colors';
 import { m } from 'framer-motion';
+import { useRouter } from 'next/router';
+import { playgroundLink } from 'playground-common/export';
 import { FC, SyntheticEvent } from 'react';
 
 import ResizedImage from '@/components/common/ResizedImage';
@@ -14,6 +16,7 @@ import IconCoffee from '@/public/icons/icon-coffee.svg';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 interface MemberCardProps {
+  memberId: number;
   name: string;
   belongs: string;
   intro: string;
@@ -38,6 +41,7 @@ const ELLIPSIS_WIDTH = 26;
 const BADGE_GAP = 4;
 
 const MemberCard: FC<MemberCardProps> = ({
+  memberId,
   name,
   belongs,
   badges,
@@ -53,6 +57,12 @@ const MemberCard: FC<MemberCardProps> = ({
     BADGE_GAP,
   );
 
+  const router = useRouter();
+  const onCoffeeChatButtonClick = (e: React.MouseEvent<Element, MouseEvent>) => {
+    e.stopPropagation();
+    router.push(playgroundLink.coffeechatDetail(memberId));
+  };
+
   return (
     <MotionMemberCard whileHover='hover'>
       <ProfileImage>
@@ -102,8 +112,7 @@ const MemberCard: FC<MemberCardProps> = ({
         </Intro>
       </ContentArea>
       <SideButtons>
-        {/* TODO: CoffeeChatButton에 커피챗 상세로 이동하는 onClick 넘겨주기 */}
-        {isCoffeeChatActivate && <CoffeeChatButton />}
+        {isCoffeeChatActivate && <CoffeeChatButton onClick={onCoffeeChatButtonClick} />}
         {email && email.length > 0 && <MessageButton name={name} onClick={onMessage} />}
       </SideButtons>
     </MotionMemberCard>

diff --git a/src/components/members/main/MemberList/index.tsx b/src/components/members/main/MemberList/index.tsx
@@ -189,6 +189,7 @@ const MemberList: FC<MemberListProps> = ({ banner }) => {
   }, 0);
 
   const handleClickCard = (profile: Profile) => {
+    debugger;
     logClickEvent('memberCard', { id: profile.id, name: profile.name });
   };
 
@@ -335,6 +336,7 @@ const MemberList: FC<MemberListProps> = ({ banner }) => {
                       onClick={() => handleClickCard(profile)}
                     >
                       <MemberCard
+                        memberId={profile.id}
                         name={profile.name}
                         belongs={belongs}
                         badges={badges}