dev to main

src/api/endpoint/members/postWorkPreference.ts

@@ -1,4 +1,4 @@
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { z } from 'zod';
 
 import { createEndpoint } from '@/api/typedAxios';
@@ -14,7 +14,12 @@ export const postWorkPreference = createEndpoint({
 });
 
 export const usePostWorkPreferenceMutation = () => {
+  const queryClient = useQueryClient();
+
   return useMutation({
     mutationFn: (requestBody: WorkPreferenceType) => postWorkPreference.request(requestBody),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['getRecommendations'] });
+    },
   });
 };

src/components/common/Banner/BalanceGameBanner/index.tsx

@@ -1,19 +1,22 @@
 import styled from '@emotion/styled';
 import { useRouter } from 'next/router';
-import { MB_BASE_MEDIA_QUERY } from '@/styles/mediaQuery';
+import { MB_BASE_MEDIA_QUERY, PCTA_S_MEDIA_QUERY } from '@/styles/mediaQuery';
 import matchMemberBannerDesktop from '@/public/icons/img/banner_balancegame_desktop.png';
 import matchMemberBannerMobile from '@/public/icons/img/banner_balancegame_mobile.png';
+import matchMemberBannerMid from '@/public/icons/img/banner_balancegame_mid.png';
 import { playgroundLink } from 'playground-common/export';
 
 const BalanceGameBanner = () => {
   const router = useRouter();
+  const MB_MID_MEDIA_QUERY = '(min-width: 376px) and (max-width: 768px)';
 
   return (
     <>
       <BannerContainer onClick={() => router.push(playgroundLink.memberList())}>
         <BannerImageWrapper>
           <picture>
             <source media={MB_BASE_MEDIA_QUERY} srcSet={matchMemberBannerMobile.src} />
+            <source media={MB_MID_MEDIA_QUERY} srcSet={matchMemberBannerMid.src} />
             <BannerImage src={matchMemberBannerDesktop.src} alt='매칭 배너' />
           </picture>
         </BannerImageWrapper>
@@ -36,10 +39,8 @@ const BannerContainer = styled.header`
 `;
 
 const BannerImageWrapper = styled.div`
-  @media ${MB_BASE_MEDIA_QUERY} {
-    width: 100%;
-    height: auto;
-  }
+  width: 100%;
+  height: auto;
 `;
 
 const BannerImage = styled.img`

src/components/eventLogger/events.ts

@@ -3,6 +3,7 @@ import { string } from 'zod';
 type MemberCard = {
   id: number;
   name: string;
+  screen?: 'recommended' | 'TL' | 'member';
 };
 
 type CommunityFeedData = {
@@ -174,7 +175,11 @@ export interface ClickEvents {
   coffeechatToggleOff: undefined;
   coffeechatToggleOn: undefined;
   skillAdd: undefined;
-  messageBadge: undefined;
+  messageBadge:
+    | {
+        isRecommended?: boolean;
+      }
+    | undefined;
   gotoCoffeechat: GotoCoffeechat;
 
   // 광고
@@ -216,6 +221,11 @@ export interface ClickEvents {
   // 기획경선 특집
   balancegame: undefined;
   newmember: undefined;
+
+  TL_list: undefined;
+  TL_introduce: undefined;
+  TL_appjam: undefined;
+  refreshmember: undefined;
 }
 
 export interface SubmitEvents {
@@ -303,6 +313,7 @@ export interface ImpressionEvents {
     category?: string;
     screen?: '멤버' | '기획경선 홈팝업' | 'TL리스트';
   };
+  memberCard: MemberCard;
   ads: { bannerId: number; pageUrl: string; timeStamp: string };
   adPopup: undefined;
 

src/components/matchmember/MatchContent.tsx

@@ -1,23 +1,24 @@
-import { useRouter } from 'next/router';
-import Text from '@/components/common/Text';
+import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
-import { Spacing } from '@toss/emotion-utils';
-import promotion from '@/public/icons/img/popup/member_match.png';
 import { Button } from '@sopt-makers/ui';
-import styled from '@emotion/styled';
-import { MemberCard } from '@/components/matchmember/MemberCard';
-import { playgroundLink } from '@/constants/links';
+import { Spacing } from '@toss/emotion-utils';
+import { useRouter } from 'next/router';
+
+import { usePostWorkPreferenceMutation } from '@/api/endpoint/members/postWorkPreference';
+import Loading from '@/components/common/Loading';
+import Text from '@/components/common/Text';
+import { LoggingClick } from '@/components/eventLogger/components/LoggingClick';
+import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import {
   BalanceGameValue,
   ChoiceSide,
   convertAnswersToApiPayload,
   QuestionKey,
   QUESTIONS,
 } from '@/components/matchmember/constant';
-import { usePostWorkPreferenceMutation } from '@/api/endpoint/members/postWorkPreference';
-import Loading from '@/components/common/Loading';
-import { LoggingClick } from '@/components/eventLogger/components/LoggingClick';
-import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
+import { MemberCard } from '@/components/matchmember/MemberCard';
+import { playgroundLink } from '@/constants/links';
+import promotion from '@/public/icons/img/popup/member_match.png';
 
 interface MatchContentProps {
   step: number;
@@ -124,6 +125,15 @@ export const MatchContent = ({
       </>
     );
   }
+
+  const handleNavigateToMemberList = () => {
+    if (router.pathname === playgroundLink.memberList()) {
+      handleClose();
+    } else {
+      router.push(playgroundLink.memberList());
+    }
+  };
+
   return (
     <>
       <Text typography='SUIT_20_B' color={colors.gray10}>
@@ -136,7 +146,7 @@ export const MatchContent = ({
       <MemberCard />
       <Spacing size={24} />
       <LoggingClick eventKey='newmember'>
-        <Button size='lg' onClick={() => router.push(playgroundLink.memberList())}>
+        <Button size='lg' onClick={handleNavigateToMemberList}>
           다른 찰떡 멤버도 확인하기
         </Button>
       </LoggingClick>

src/components/matchmember/MatchMemberModal.tsx

@@ -24,6 +24,7 @@ interface MatchMemberModalProps {
 const MatchMemberModal = ({ onClose, isOpen, handleCloseForToday, hasWorkPreference }: MatchMemberModalProps) => {
   const [step, setStep] = useState(1);
   const [value, setValue] = useState<BalanceGameValue>({});
+  const router = useRouter();
 
   const handleClose = () => {
     onClose();
@@ -35,7 +36,7 @@ const MatchMemberModal = ({ onClose, isOpen, handleCloseForToday, hasWorkPrefere
 
   const handleNextStep = () => {
     if (hasWorkPreference) {
-      setStep(3);
+      router.push(playgroundLink.memberList());
     } else {
       setStep((prev) => prev + 1);
     }

src/components/matchmember/MemberCard.tsx

@@ -1,29 +1,40 @@
 import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import { fonts } from '@sopt-makers/fonts';
-import Text from '@/components/common/Text';
+import { Skeleton, useToast } from '@sopt-makers/ui';
+import axios from 'axios';
+import { useRouter } from 'next/router';
 import ProfileIcon from 'public/icons/icon-profile.svg';
-import ResizedImage from '@/components/common/ResizedImage';
-import { useGetRecommendations } from '@/api/endpoint/members/getRecommendations';
 import { useEffect, useState } from 'react';
-import { Skeleton, useToast } from '@sopt-makers/ui';
+
+import { useGetRecommendations } from '@/api/endpoint/members/getRecommendations';
+import ResizedImage from '@/components/common/ResizedImage';
+import Text from '@/components/common/Text';
+import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import { playgroundLink } from '@/constants/links';
-import { useRouter } from 'next/router';
 import NonIcon from '@/public/icons/img/popup/member_match_search.svg';
-import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
-import { useRunOnce } from '@/hooks/useRunOnce';
-import axios from 'axios';
 
 export const MemberCard = () => {
   const { data, isPending, isError, error } = useGetRecommendations();
   const [_isImageLoaded, setIsImageLoaded] = useState(false);
   const router = useRouter();
-  const { logImpressionEvent } = useEventLogger();
+  const { logImpressionEvent, logClickEvent } = useEventLogger();
   const { open: toastOpen } = useToast();
 
-  useRunOnce(() => {
-    logImpressionEvent('feedCard', { screen: '기획경선 홈팝업' });
-  }, []);
+  const member = data?.recommendations?.[0];
+
+  useEffect(() => {
+    if (member) {
+      logImpressionEvent('memberCard', { id: member.id, name: member.name, screen: 'recommended' });
+    }
+  }, [member, logImpressionEvent]);
+
+  const handleClickCard = () => {
+    if (member) {
+      logClickEvent('memberCard', { id: member.id, name: member.name, screen: 'recommended' });
+      router.push(playgroundLink.memberDetail(member.id));
+    }
+  };
 
   useEffect(() => {
     if (isError) {
@@ -62,7 +73,6 @@ export const MemberCard = () => {
       </CardWrapper>
     );
 
-  const member = data?.recommendations?.[0];
   if (!member)
     return (
       <NonWrapper>
@@ -74,7 +84,7 @@ export const MemberCard = () => {
     );
 
   return (
-    <CardWrapper onClick={() => router.push(playgroundLink.memberDetail(member.id))}>
+    <CardWrapper onClick={handleClickCard}>
       <Text typography='SUIT_12_SB' color='#ADC8E9'>
         케미 UP!
       </Text>
@@ -174,6 +184,9 @@ const Tag = styled.div`
   background: ${colors.orangeAlpha200};
   padding: 3px 6px;
   width: fit-content;
+  ${fonts.LABEL_12_SB};
+
+  color: ${colors.orange400};
 `;
 
 const Circle = styled.div`

src/components/matchmember/hooks/useMatchMemberEvent.ts

@@ -48,7 +48,7 @@ export const useMatchMemberEvent = () => {
   const canOpenModal =
     !!myData &&
     !isClosedToday &&
-    (isQA || (isSpecialPopupPeriod && isLastGeneration && !hasWorkPreference && myData.enableWorkPreferenceEvent));
+    (isQA || (isSpecialPopupPeriod && isLastGeneration && myData.enableWorkPreferenceEvent));
 
   return {
     hasWorkPreference,

src/components/members/detail/ActivitySection/MemberDetail.tsx

@@ -74,7 +74,7 @@ const MemberDetail: FC<MemberDetailProps> = ({ memberId }) => {
           memberId={memberId}
           isMine={profile.isMine}
         />
-        {(profile.sojuCapacity !== undefined && profile.sojuCapacity !== null ||
+        {((profile.sojuCapacity !== undefined && profile.sojuCapacity !== null) ||
           profile.mbti ||
           profile.interest ||
           profile.selfIntroduction ||

src/components/members/main/MemberCard/WorkPreferneceMemberCard.tsx

@@ -9,6 +9,7 @@ import { useRouter } from 'next/router';
 import useModalState from '@/components/common/Modal/useModalState';
 import ResizedImage from '@/components/common/ResizedImage';
 import Text from '@/components/common/Text';
+import { LoggingImpression } from '@/components/eventLogger/components/LoggingImpression';
 import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import MessageModal, { MessageCategory } from '@/components/members/detail/MessageSection/MessageModal';
 import { useVisibleBadges } from '@/components/members/main/hooks/useVisibleBadges';
@@ -88,16 +89,22 @@ const WorkPreferenceMemberCard = ({
   ];
 
   const { isOpen: isOpenMessageModal, onOpen: onOpenMessageModal, onClose: onCloseMessageModal } = useModalState();
-  const { logSubmitEvent } = useEventLogger();
+  const { logClickEvent, logSubmitEvent } = useEventLogger();
+
+  const handleClickMessage = () => {
+    logClickEvent('messageBadge', { isRecommended: true });
+    onOpenMessageModal();
+  };
+
+  const handleClickCard = () => {
+    logClickEvent('memberCard', { id, name, screen: 'recommended' });
+    router.push(`/members/${id}`);
+  };
 
   return (
-    <>
+    <LoggingImpression eventKey='memberCard' param={{ id, name, screen: 'recommended' }}>
       <MotionMemberCard whileHover='hover'>
-        <Container
-          onClick={() => {
-            router.push(`/members/${id}`);
-          }}
-        >
+        <Container onClick={handleClickCard}>
           <ProfileImageWrapper>
             {!isLoading && <GoodBadge />}
             <StyledImageArea>
@@ -185,7 +192,7 @@ const WorkPreferenceMemberCard = ({
           }
         />
       )}
-    </>
+    </LoggingImpression>
   );
 };