fix: 회원가입 design, gaEvent 수정 및 매칭 현황 내 중복 데이터 오류 해결

src/pages/match/components/match-tab-pannel.tsx

@@ -1,38 +1,55 @@
 import { matchMutations } from '@apis/match/match-mutations';
+import { matchQueries } from '@apis/match/match-queries';
 import Card from '@components/card/match-card/card';
 import type { GroupCardProps, SingleCardProps } from '@components/card/match-card/types/card';
 import { getColorType } from '@components/card/match-card/utils/get-color-type';
 import EmptyView from '@components/ui/empty-view';
 import { cn } from '@libs/cn';
 import { CLICKABLE_STATUS_MAP } from '@pages/match/constants/matching';
-import type { MatchCardData } from '@pages/match/create/types/match-data-type';
 import {
   getCardColor,
   getPendingToast,
   isClickable,
   statusToCategory,
 } from '@pages/match/utils/match-status';
 import { ROUTES } from '@routes/routes-config';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { showErrorToast } from '@/shared/utils/show-error-toast';
+import { mapGroupMatchData, mapSingleMatchData } from '../hooks/mapMatchData';
 
 type MatchableCardProps = SingleCardProps | GroupCardProps;
 
 interface MatchTabPanelProps {
-  cards: MatchableCardProps[];
+  activeType: '1:1' | '그룹';
+  statusParam: string;
   filter: string;
-  onCardClick: (card: MatchCardData) => void;
+  onCardClick: (card: MatchableCardProps) => void;
 }
 
-const MatchTabPanel = ({ cards, filter, onCardClick }: MatchTabPanelProps) => {
+const MatchTabPanel = ({ activeType, filter, statusParam, onCardClick }: MatchTabPanelProps) => {
   const navigate = useNavigate();
+  const isSingle = activeType === '1:1';
 
-  const patchStageMutation = useMutation(matchMutations.MATCH_STAGE());
+  const { data: singleData } = useQuery({
+    ...matchQueries.SINGLE_MATCH_STATUS(statusParam),
+    enabled: isSingle,
+  });
+
+  const { data: groupData } = useQuery({
+    ...matchQueries.GROUP_MATCH_STATUS(statusParam),
+    enabled: !isSingle,
+  });
+
+  const cards: MatchableCardProps[] = isSingle
+    ? mapSingleMatchData(singleData?.results)
+    : mapGroupMatchData(groupData?.mates);
 
   const filteredCards =
     filter === '전체' ? cards : cards.filter((card) => statusToCategory(card.status) === filter);
 
+  const patchStageMutation = useMutation(matchMutations.MATCH_STAGE());
+
   const handleCardClick = async (card: MatchableCardProps) => {
     onCardClick(card);
 
@@ -70,9 +87,7 @@ const MatchTabPanel = ({ cards, filter, onCardClick }: MatchTabPanelProps) => {
             key={card.id}
             type="button"
             onClick={() => handleCardClick(card)}
-            className={cn('w-full', {
-              'cursor-pointer': isClickable(card.status),
-            })}
+            className={cn('w-full', { 'cursor-pointer': isClickable(card.status) })}
             aria-disabled={!isClickable(card.status)}
           >
             <Card

src/pages/match/match.tsx

@@ -1,51 +1,16 @@
-import { matchQueries } from '@apis/match/match-queries';
 import FillTabList from '@components/tab/fill-tab/fill-tab-list';
-import TabContent from '@components/tab/tab/tab-content';
 import TabList from '@components/tab/tab/tab-list';
 import { gaEvent } from '@libs/analytics';
 import MatchTabPanel from '@pages/match/components/match-tab-pannel';
-import { mapGroupMatchData, mapSingleMatchData } from '@pages/match/hooks/mapMatchData';
 import { useMatchTabState } from '@pages/match/hooks/useMatchTabState';
 import { fillTabItems } from '@pages/match/utils/match-status';
-import { useQuery } from '@tanstack/react-query';
-import { useEffect } from 'react';
 import type { MatchCardData } from './create/types/match-data-type';
 
 const Match = () => {
   const { tabState, handleTabChange, handleFilterChange } = useMatchTabState();
   const { type: activeType, filter } = tabState;
   const statusParam = filter === '전체' ? '' : filter;
 
-  const { data: singleData } = useQuery({
-    ...matchQueries.SINGLE_MATCH_STATUS(statusParam),
-    enabled: activeType === '1:1',
-  });
-
-  const { data: groupData } = useQuery({
-    ...matchQueries.GROUP_MATCH_STATUS(statusParam),
-    enabled: activeType === '그룹',
-  });
-
-  useEffect(() => {
-    if (activeType === '1:1' && singleData?.results) {
-      singleData.results.forEach((card) => {
-        gaEvent('match_card_view', {
-          match_id: card.id,
-          match_type: 'one_to_one',
-          match_status: card.status,
-        });
-      });
-    } else if (activeType === '그룹' && groupData?.mates) {
-      groupData.mates.forEach((card) => {
-        gaEvent('match_card_view', {
-          match_id: card.id,
-          match_type: 'group',
-          match_status: card.status,
-        });
-      });
-    }
-  }, [singleData, groupData, activeType]);
-
   const handleCardClick = (card: MatchCardData) => {
     gaEvent('match_card_click', {
       match_id: card.id,
@@ -54,25 +19,6 @@ const Match = () => {
     });
   };
 
-  const contentMap = {
-    '1:1': (
-      <MatchTabPanel
-        key="single"
-        cards={mapSingleMatchData(singleData?.results)}
-        filter={filter}
-        onCardClick={handleCardClick}
-      />
-    ),
-    그룹: (
-      <MatchTabPanel
-        key="group"
-        cards={mapGroupMatchData(groupData?.mates)}
-        filter={filter}
-        onCardClick={handleCardClick}
-      />
-    ),
-  };
-
   return (
     <div className="h-full grow flex-col">
       <nav className="sticky top-0 z-[var(--z-under-header-section)] w-full bg-gray-100">
@@ -89,7 +35,14 @@ const Match = () => {
           onChange={handleFilterChange}
         />
       </nav>
-      <TabContent activeType={activeType} contentMap={contentMap} />
+
+      <MatchTabPanel
+        key={`${activeType}-${statusParam}`}
+        activeType={activeType as '1:1' | '그룹'}
+        statusParam={statusParam}
+        filter={filter}
+        onCardClick={handleCardClick}
+      />
     </div>
   );
 };

src/pages/onboarding/utils/onboarding-button.ts

@@ -79,7 +79,6 @@ export const handleButtonClick = (
     if (selections.GROUP_ROLE === '그룹원') {
       goTo?.('COMPLETE');
     } else {
-      gaEvent('match_create_click', { match_type: 'group', role: 'creator' });
       gaEvent('condition_set_completed', { match_type: 'group' });
       goNext();
     }

src/pages/sign-up/components/signup-step.tsx

@@ -118,7 +118,7 @@ const SignupStep = () => {
   return (
     <form
       onSubmit={handleSubmit(onSubmit)}
-      className="h-full w-full flex-col justify-between gap-[4rem] px-[1.6rem] pt-[4rem] pb-[1.6rem]"
+      className="h-svh w-full flex-col justify-between gap-[4rem] px-[1.6rem] pt-[4rem] pb-[1.6rem]"
     >
       <div className="w-full flex-col gap-[4rem]">
         <h1 className="title_24_sb whitespace-pre-line">{NICKNAME_TITLE}</h1>

src/shared/components/bottom-sheet/game-match/game-match-bottom-sheet.tsx

@@ -6,6 +6,7 @@ import GameMatchList from '@components/bottom-sheet/game-match/game-match-list';
 import { formatDateWeekday } from '@components/bottom-sheet/game-match/utils/format-date-weekday';
 import { TAB_TYPES, type TabType } from '@components/tab/tab/constants/tab-type';
 import { MATCH_REQUEST_ERROR_MESSAGES } from '@constants/error-toast';
+import { gaEvent } from '@libs/analytics';
 import { ROUTES } from '@routes/routes-config';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { AxiosError } from 'axios';
@@ -60,6 +61,12 @@ const GameMatchBottomSheet = ({
     const selectedGame = gameSchedule[selectedIdx];
     if (!selectedGame) return;
 
+    const gaMatchType = activeType === TAB_TYPES.SINGLE ? 'one_to_one' : 'group';
+    gaEvent('match_create_click', {
+      match_type: gaMatchType,
+      role: 'creator',
+    });
+
     createMatchMutation.mutate(
       {
         gameId: selectedGame.id,