feat: 멤버 추천 카드 CTA 쪽지 모달 연결 (#2068)

* feat: 멤버 추천 카드 CTA 쪽지 모달 연결

* feat: 홈 배너 추가

* fix: recommendations activity 배열 -> 객체 수정

* feat: 멤버 목록 페이지 밸런스게임 모달 추가

* feat: 배너 정책 변경 반영

* feat: 홈팝업 정책 변경 반영

* fix: WorkPreferneceMemberCard storybook 필드 수정

---------

Co-authored-by: moonseonghui <msh9980@naver.com>

Author: imddoy

public/icons/img/banner_balancegame_desktop.png

@@ -28,17 +28,12 @@ export const getRecommendations = createEndpoint({
           workPlace: z.string(),
           feedbackStyle: z.string(),
         }),
-        activities: z
-          .array(
-            z.object({
-              id: z.number(),
-              generation: z.number(),
-              part: z.string(),
-              team: z.string().nullable(),
-            }),
-          )
-          .optional()
-          .default([]),
+        activity: z.object({
+          id: z.number(),
+          generation: z.number(),
+          part: z.string(),
+          team: z.string().nullable(),
+        }),
       }),
     ),
   }),

public/icons/img/banner_balancegame_mobile.png

@@ -4,14 +4,25 @@ import { FC } from 'react';
 import AdsBanner from '@/components/common/Banner/AdsBanner';
 import { ClosingBanner } from '@/components/common/Banner/ClosingBanner';
 import WelcomeBannerContainer from '@/components/common/Banner/WelcomeBanner/WelcomeBannerContainer';
+import BalanceGameBanner from '@/components/common/Banner/BalanceGameBanner';
+import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
 interface ActiveBannerSlotProps {}
 
 const ActiveBannerSlot: FC<ActiveBannerSlotProps> = ({}) => {
   const isTimecapsopOpen = false; // 타임캡솝 오픈 기간에만 이 값을 true로 변경
+  const { data: myData } = useGetMemberOfMe();
+  const isBalanceGameOpen = true;
+
   return (
     <StyledActiveBanner>
       {/* 이 밑에 노출할 배너를 넣으세요. */}
-      {isTimecapsopOpen ? <WelcomeBannerContainer /> : <AdsBanner />}
+      {isTimecapsopOpen ? (
+        <WelcomeBannerContainer />
+      ) : isBalanceGameOpen && myData?.enableWorkPreferenceEvent ? (
+        <BalanceGameBanner />
+      ) : (
+        <AdsBanner />
+      )}
     </StyledActiveBanner>
   );
 };

src/api/endpoint/members/getRecommendations.ts

@@ -0,0 +1,54 @@
+import styled from '@emotion/styled';
+import { useRouter } from 'next/router';
+import { MB_BASE_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 { playgroundLink } from 'playground-common/export';
+
+const BalanceGameBanner = () => {
+  const router = useRouter();
+
+  return (
+    <>
+      <BannerContainer onClick={() => router.push(playgroundLink.memberList())}>
+        <BannerImageWrapper>
+          <picture>
+            <source media={MB_BASE_MEDIA_QUERY} srcSet={matchMemberBannerMobile.src} />
+            <BannerImage src={matchMemberBannerDesktop.src} alt='매칭 배너' />
+          </picture>
+        </BannerImageWrapper>
+      </BannerContainer>
+    </>
+  );
+};
+
+export default BalanceGameBanner;
+
+const BannerContainer = styled.header`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+  width: 100%;
+  min-height: 168px;
+  overflow: hidden;
+`;
+
+const BannerImageWrapper = styled.div`
+  @media ${MB_BASE_MEDIA_QUERY} {
+    width: 100%;
+    height: auto;
+  }
+`;
+
+const BannerImage = styled.img`
+  width: 100%;
+  height: 168px;
+  object-fit: cover;
+
+  @media ${MB_BASE_MEDIA_QUERY} {
+    width: 100%;
+    height: auto;
+  }
+`;

src/components/common/Banner/ActiveBannerSlot.tsx

@@ -2,34 +2,33 @@ import { useGetHomePopup } from '@/api/endpoint/homePopup/getHomePopup';
 import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
 import { HomePopup } from '@/components/common/HomePopup';
 import useModalState from '@/components/common/Modal/useModalState';
+import { useMatchMemberEvent } from '@/components/matchmember/hooks/useMatchMemberEvent';
 import MatchMemberModal from '@/components/matchmember/MatchMemberModal';
 import { LATEST_GENERATION } from '@/constants/generation';
 import { useEffect, useState } from 'react';
 
 const HomePopupContainer = () => {
   const { data: myData } = useGetMemberOfMe();
   const { data: homePopupData } = useGetHomePopup();
-
+  const { isSpecialPopupPeriod, canOpenModal, handleCloseForToday } = useMatchMemberEvent();
   const isLastGeneration = myData?.generation === LATEST_GENERATION;
 
-  const hasWorkPreference = myData?.hasWorkPreference ?? false;
-  const isSpecialPopupPeriod = true; // 이벤트용 팝업 오픈
   const { isOpen, onOpen, onClose } = useModalState();
-  const [isQA, setIsQA] = useState(false);
-  const shouldShowMatchModal =
-    isQA ||
-    (myData && isSpecialPopupPeriod && isLastGeneration && !hasWorkPreference && myData.enableWorkPreferenceEvent);
-  useEffect(() => {
-    setIsQA(localStorage.getItem('BALANCEGAME_OPEN') === 'true');
-  }, []);
   useEffect(() => {
-    if (shouldShowMatchModal) {
+    if (canOpenModal && isSpecialPopupPeriod) {
       onOpen();
     }
-  }, [shouldShowMatchModal]);
+  }, [canOpenModal, isSpecialPopupPeriod]);
   if (isSpecialPopupPeriod) {
-    if (!shouldShowMatchModal) return null;
-    return <MatchMemberModal isOpen={isOpen} onClose={onClose} />;
+    if (!canOpenModal) return null;
+    return (
+      <MatchMemberModal
+        isOpen={isOpen}
+        onClose={onClose}
+        handleCloseForToday={handleCloseForToday}
+        hasWorkPreference={myData?.hasWorkPreference}
+      />
+    );
   }
 
   if (!homePopupData || typeof homePopupData === 'string') {

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

@@ -18,22 +18,30 @@ import { usePostWorkPreferenceMutation } from '@/api/endpoint/members/postWorkPr
 import Loading from '@/components/common/Loading';
 import { LoggingClick } from '@/components/eventLogger/components/LoggingClick';
 import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
-import { LoggingImpression } from '@/components/eventLogger/components/LoggingImpression';
 
 interface MatchContentProps {
   step: number;
   value: BalanceGameValue;
   onChange: (key: QuestionKey, side: ChoiceSide) => void;
   onNextStep: () => void;
+  handleClose: () => void;
+  handleCloseForToday: () => void;
 }
 
-export const MatchContent = ({ step, value, onChange, onNextStep }: MatchContentProps) => {
+export const MatchContent = ({
+  step,
+  value,
+  onChange,
+  onNextStep,
+  handleClose,
+  handleCloseForToday,
+}: MatchContentProps) => {
   const router = useRouter();
   const { mutateAsync, isPending } = usePostWorkPreferenceMutation();
   const isValid = QUESTIONS.every((q) => value[q.key] !== undefined);
   const { logSubmitEvent } = useEventLogger();
 
-  if (step === 1)
+  if (step === 1) {
     return (
       <>
         <Text typography='SUIT_14_SB' color='#FFCA00'>
@@ -50,8 +58,19 @@ export const MatchContent = ({ step, value, onChange, onNextStep }: MatchContent
             5초만에 소울메이트 찾기
           </Button>
         </LoggingClick>
+        <CloseForTodayButton
+          onClick={() => {
+            handleCloseForToday();
+            handleClose();
+          }}
+        >
+          <Text typography='SUIT_14_SB' color={colors.gray200}>
+            다시 보지 않기
+          </Text>
+        </CloseForTodayButton>
       </>
     );
+  }
 
   if (step === 2) {
     const handleSubmit = async () => {
@@ -118,7 +137,7 @@ export const MatchContent = ({ step, value, onChange, onNextStep }: MatchContent
       <Spacing size={24} />
       <LoggingClick eventKey='newmember'>
         <Button size='lg' onClick={() => router.push(playgroundLink.memberList())}>
-          나랑 찰떡 멤버 더 찾아보기
+          다른 찰떡 멤버도 확인하기
         </Button>
       </LoggingClick>
     </>
@@ -142,3 +161,9 @@ const QuestionRow = styled.div`
     flex: 1;
   }
 `;
+
+const CloseForTodayButton = styled.button`
+  margin-top: 16px;
+  text-decoration: underline;
+  color: ${colors.gray200};
+`;

src/components/common/HomePopup/HomePopupContainer.tsx

@@ -17,40 +17,58 @@ import { LoggingImpression } from '@/components/eventLogger/components/LoggingIm
 interface MatchMemberModalProps {
   onClose: () => void;
   isOpen: boolean;
+  handleCloseForToday: () => void;
+  hasWorkPreference?: boolean;
 }
 
-const MatchMemberModal = ({ onClose, isOpen }: MatchMemberModalProps) => {
-  const router = useRouter();
+const MatchMemberModal = ({ onClose, isOpen, handleCloseForToday, hasWorkPreference }: MatchMemberModalProps) => {
   const [step, setStep] = useState(1);
   const [value, setValue] = useState<BalanceGameValue>({});
 
   const handleClose = () => {
     onClose();
-    router.push(playgroundLink.feedList());
   };
 
   const handleChange = (key: QuestionKey, side: ChoiceSide) => {
     setValue((prev) => ({ ...prev, [key]: side }));
   };
 
   const handleNextStep = () => {
-    setStep((prev) => prev + 1);
+    if (hasWorkPreference) {
+      setStep(3);
+    } else {
+      setStep((prev) => prev + 1);
+    }
   };
 
   return (
     <LoggingImpression eventKey='balancegame'>
       <Responsive only='desktop'>
         <StyledModal isOpen={isOpen} onClose={handleClose} zIndex={zIndex.헤더 + 100} step={step}>
           <StyledContent>
-            <MatchContent step={step} value={value} onChange={handleChange} onNextStep={handleNextStep} />
+            <MatchContent
+              step={step}
+              value={value}
+              onChange={handleChange}
+              onNextStep={handleNextStep}
+              handleClose={handleClose}
+              handleCloseForToday={handleCloseForToday}
+            />
           </StyledContent>
         </StyledModal>
       </Responsive>
 
       <Responsive only='mobile'>
         <StyledModalBottomSheet isOpen={isOpen} onClose={handleClose} step={step}>
           <StyledContent>
-            <MatchContent step={step} value={value} onChange={handleChange} onNextStep={handleNextStep} />
+            <MatchContent
+              step={step}
+              value={value}
+              onChange={handleChange}
+              onNextStep={handleNextStep}
+              handleClose={handleClose}
+              handleCloseForToday={handleCloseForToday}
+            />
           </StyledContent>
         </StyledModalBottomSheet>
       </Responsive>

src/components/matchmember/MatchContent.tsx

@@ -75,7 +75,7 @@ export const MemberCard = () => {
         </ImageBox>
         <Tag>
           <Circle />
-          {member.activities[0].generation}기 {member.activities[0].part}
+          {member.activity?.generation}기 {member.activity?.part}
         </Tag>
         <InfoBox>
           <Text typography='SUIT_20_SB' color={colors.gray10}>

src/components/matchmember/MatchMemberModal.tsx

@@ -0,0 +1,59 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { useGetMemberOfMe } from '@/api/endpoint/members/getMemberOfMe';
+import { LATEST_GENERATION } from '@/constants/generation';
+
+export const useMatchMemberEvent = () => {
+  const { data: myData } = useGetMemberOfMe();
+  const [isQA, setIsQA] = useState(false);
+  const [isClosedToday, setIsClosedToday] = useState(false);
+
+  const getKoreanDate = (): string => {
+    const koreanTime = new Date();
+    return `${koreanTime.getFullYear()}-${String(koreanTime.getMonth() + 1).padStart(2, '0')}-${String(
+      koreanTime.getDate(),
+    ).padStart(2, '0')}`;
+  };
+
+  useEffect(() => {
+    setIsQA(typeof window !== 'undefined' && localStorage.getItem('BALANCEGAME_OPEN') === 'true');
+  }, []);
+
+  const isLastGeneration = myData?.generation === LATEST_GENERATION;
+  const hasWorkPreference = myData?.hasWorkPreference ?? false;
+  const isSpecialPopupPeriod = true;
+
+  const handleCloseForToday = useCallback(() => {
+    const today = getKoreanDate();
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('popupClosedDate', today);
+    }
+    setIsClosedToday(true);
+  }, []);
+
+  useEffect(() => {
+    setIsQA(typeof window !== 'undefined' && localStorage.getItem('BALANCEGAME_OPEN') === 'true');
+    if (typeof window !== 'undefined') {
+      const storedDate = localStorage.getItem('popupClosedDate');
+      const today = getKoreanDate();
+
+      if (storedDate === today) {
+        setIsClosedToday(true);
+      } else {
+        setIsClosedToday(false);
+      }
+    }
+  }, []);
+
+  const canOpenModal =
+    !!myData &&
+    !isClosedToday &&
+    (isQA || (isSpecialPopupPeriod && isLastGeneration && !hasWorkPreference && myData.enableWorkPreferenceEvent));
+
+  return {
+    hasWorkPreference,
+    isSpecialPopupPeriod,
+    canOpenModal,
+    handleCloseForToday,
+  };
+};