fix: (QA/2) 매칭 결과 화면에서 뒤로가기 후 탭 유지

src/pages/home/components/calendar-section.tsx

@@ -33,7 +33,7 @@ const CalendarSection = ({
           onDateChange(date);
         }}
       />
-      <section className="mt-[3.5rem] flex justify-between">
+      <section className="mt-[2.5rem] flex justify-between">
         <TabList colorMode="home" activeType={activeType} onTabChange={handleTabChange} />
         <CalendarButton onOpenBottomSheet={onOpenBottomSheet} />
       </section>

src/pages/login/login-with-splash.tsx

@@ -0,0 +1,18 @@
+import Splash from '@pages/login/components/splash';
+import Login from '@pages/login/login';
+import { useEffect, useState } from 'react';
+
+const LoginWithSplash = () => {
+  const [showSplash, setShowSplash] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setShowSplash(false), 1200);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (showSplash) return <Splash />;
+
+  return <Login />;
+};
+
+export default LoginWithSplash;

src/pages/match/components/mate-header.tsx

@@ -5,10 +5,10 @@ interface MateHeaderProps {
   isGroupMatching?: boolean;
 }
 
-const MateHeader = ({ isGroupMatching }: MateHeaderProps) => (
+const MateHeader = ({ isGroupMatching, nickname }: MateHeaderProps) => (
   <section className="gap-[0.8rem] text-center">
     <h1 className="title_24_sb text-gray-black">
-      {isGroupMatching ? MATCHING_HEADER_MESSAGE.group : MATCHING_HEADER_MESSAGE.single}
+      {MATCHING_HEADER_MESSAGE(nickname, !!isGroupMatching)}
     </h1>
     <p className="body_16_m text-gray-600">상대의 정보를 확인하고, 매칭을 요청해 보세요.</p>
   </section>

src/pages/match/components/mate.tsx

@@ -28,10 +28,7 @@ const Mate = ({ matchId, onRequestClick, isGroupMatching = true }: MateProps) =>
   return (
     <div className="h-full flex-col-between">
       <section className="w-full flex-col-center gap-[4rem] pt-[4rem]">
-        <MateHeader
-          nickname={mates[currentIndex]?.nickname?.[0] ?? ''}
-          isGroupMatching={isGroupMatching}
-        />
+        <MateHeader nickname={data?.nickname ?? ''} isGroupMatching={isGroupMatching} />
         <MateCarousel
           mates={mates}
           currentIndex={currentIndex}

src/pages/match/constants/matching.ts

@@ -8,18 +8,19 @@ export const MATCHING_COMPLETE_MESSAGE = {
   single: '상대방이 요청을 승인하면 매칭이 성사돼요.',
 };
 
-export const MATCHING_HEADER_MESSAGE = {
-  group: '사용자님과 딱 맞는 그룹원이에요!',
-  single: '사용자님과 딱 맞는 메이트예요!',
-};
+export const MATCHING_HEADER_MESSAGE = (nickname: string, isGroup: boolean) =>
+  ({
+    group: `${nickname} 님과 딱 맞는 그룹원이에요!`,
+    single: `${nickname} 님과 딱 맞는 메이트예요!`,
+  })[isGroup ? 'group' : 'single'];
 
 export const MATCHING_DESCRIPTION = {
   group: {
-    description: '그룹 매칭은 최대 2건까지 신청할 수 있어요.',
+    description: '동시에 진행할 수 있는 그룹 매칭은 최대 2개예요.',
     subDescription: '단, 하루에 한 경기만 매칭이 성사되며 같은 날짜의 중복 매칭은 불가능해요!',
   },
   single: {
-    description: '1:1 매칭은 최대 3건까지 요청할 수 있어요.',
+    description: '동시에 진행할 수 있는 1:1 매칭은 최대 3개예요.',
     subDescription: '단, 하루에 한 경기만 매칭이 성사되며 같은 날짜의 중복 매칭은 불가능해요!',
   },
 };
@@ -34,7 +35,7 @@ export const MAX_CREATE_DESCRIPTION = {
 };
 
 export const MATCHING_GUIDE_MESSAGE_TITLE = (nickname: string) =>
-  `${nickname}님을 위한\n맞춤 매칭이 생성되었어요!`;
+  `${nickname} 님을 위한\n맞춤 매칭이 생성되었어요!`;
 
 export const MATCHING_GUIDE_MESSAGE_DESCRIPTION =
   '딱! 맞는 메이트의 요청이 도착하면\n' + "'매칭 현황'에서 확인할 수 있어요.";

src/pages/match/create/create.tsx

@@ -1,21 +1,35 @@
+import Loading from '@pages/loading/loading';
 import ButtonSection from '@pages/match/create/components/button-section';
 import MatchCardSection from '@pages/match/create/components/match-card-section';
 import { isInvalidMatchId } from '@pages/match/utils/match-validators';
 import { ROUTES } from '@routes/routes-config';
+import { useEffect, useState } from 'react';
 import { Navigate, useParams, useSearchParams } from 'react-router-dom';
 
 const Create = () => {
   const [searchParams] = useSearchParams();
   const { matchId } = useParams();
+  const [isLoading, setIsLoading] = useState(true);
   const matchTypeParam = searchParams.get('type');
   const matchType =
     matchTypeParam === 'single' || matchTypeParam === 'group' ? matchTypeParam : undefined;
 
   const numericMatchId = Number(matchId);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsLoading(false);
+    }, 1500);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   if (isInvalidMatchId(matchId?.toString()) || !matchType) {
     return <Navigate to={ROUTES.ERROR} replace />;
   }
+  if (isLoading) {
+    return <Loading />;
+  }
 
   return (
     <div className="h-full flex-col-between gap-[2.4rem] px-[1.6rem] pt-[9.6rem]">

src/pages/match/groups/mates.tsx

@@ -29,6 +29,7 @@ const MatesPage = () => {
           description={MATCHING_DESCRIPTION.group.description}
           subDescription={MATCHING_DESCRIPTION.group.subDescription}
           isGroupMatching={true}
+          matchId={numericMatchId}
         />
       )}
     </>

src/pages/match/hooks/mapMatchData.ts

@@ -0,0 +1,22 @@
+import type {
+  ChipColor,
+  GroupCardProps,
+  SingleCardProps,
+} from '@components/card/match-card/types/card';
+import type { getGroupMatchMate, singleMatchMate } from '@/shared/types/match-types';
+
+export const mapSingleMatchData = (mates: singleMatchMate[] = []): SingleCardProps[] => {
+  return mates.map((mate) => ({
+    ...mate,
+    type: 'single',
+    imgUrl: [mate.imgUrl],
+    chips: [mate.team, mate.style].map((v) => v as ChipColor),
+  }));
+};
+
+export const mapGroupMatchData = (mates: getGroupMatchMate[] = []): GroupCardProps[] => {
+  return mates.map((mate) => ({
+    ...mate,
+    type: 'group',
+  }));
+};

src/pages/match/hooks/useMatchTabState.ts

@@ -0,0 +1,42 @@
+import type { TabType } from '@components/tab/tab/tab-content';
+import { ROUTES } from '@routes/routes-config';
+import { useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+export const useMatchTabState = () => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const isTabType = (value: string | null): value is TabType => {
+    return value === '1:1' || value === '그룹';
+  };
+
+  const tabParam = searchParams.get('tab');
+  const filterParam = searchParams.get('filter');
+  const initialTab: TabType = isTabType(tabParam) ? tabParam : '1:1';
+  const initialFilter = filterParam || '전체';
+
+  const [tabState, setTabState] = useState({ type: initialTab, filter: initialFilter });
+
+  const updateTabQuery = (type: TabType, filter: string) => {
+    const query = new URLSearchParams();
+    query.set('tab', type);
+    query.set('filter', filter);
+    navigate(`${ROUTES.MATCH}?${query.toString()}`, { replace: true });
+  };
+
+  const handleTabChange = (type: TabType) => {
+    setTabState({ type, filter: '전체' });
+    updateTabQuery(type, '전체');
+  };
+
+  const handleFilterChange = (filter: string) => {
+    setTabState((prev) => {
+      const next = { ...prev, filter };
+      updateTabQuery(next.type, filter);
+      return next;
+    });
+  };
+
+  return { tabState, handleTabChange, handleFilterChange };
+};

src/pages/match/match.tsx

@@ -1,65 +1,47 @@
 import { matchQueries } from '@apis/match/match-queries';
-import type {
-  ChipColor,
-  GroupCardProps,
-  SingleCardProps,
-} from '@components/card/match-card/types/card';
 import FillTabList from '@components/tab/fill-tab/fill-tab-list';
-import type { TabType } from '@components/tab/tab/tab-content';
 import TabContent from '@components/tab/tab/tab-content';
 import TabList from '@components/tab/tab/tab-list';
 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 { useState } from 'react';
-import type { getGroupMatchMate, singleMatchMate } from '@/shared/types/match-types';
 
 const Match = () => {
-  const [tabState, setTabState] = useState<{ type: TabType; filter: string }>({
-    type: '1:1',
-    filter: '전체',
-  });
-
+  const { tabState, handleTabChange, handleFilterChange } = useMatchTabState();
   const { type: activeType, filter } = tabState;
   const statusParam = filter === '전체' ? '' : filter;
 
-  const handleTabChange = (type: TabType) => {
-    setTabState({ type, filter: '전체' });
-  };
-
-  const handleFilterChange = (filter: string) => {
-    setTabState((prev) => ({ ...prev, filter }));
-  };
-
-  const { data: singleData } = useQuery<{ mates: singleMatchMate[] }>({
+  const { data: singleData } = useQuery({
     ...matchQueries.SINGLE_MATCH_STATUS(statusParam),
     enabled: activeType === '1:1',
   });
 
-  const { data: groupData } = useQuery<{ mates: getGroupMatchMate[] }>({
+  const { data: groupData } = useQuery({
     ...matchQueries.GROUP_MATCH_STATUS(statusParam),
     enabled: activeType === '그룹',
   });
 
-  const singleCards: SingleCardProps[] = (singleData?.mates ?? []).map((card) => ({
-    ...card,
-    type: 'single',
-    imgUrl: [card.imgUrl],
-    chips: [card.team, card.style].map((v) => v as ChipColor),
-  }));
-
-  const groupCards: GroupCardProps[] = (groupData?.mates ?? []).map((card) => ({
-    ...card,
-    type: 'group',
-  }));
-
   const contentMap = {
-    '1:1': <MatchTabPanel key="single" cards={singleCards} filter={filter} />,
-    그룹: <MatchTabPanel key="group" cards={groupCards} filter={filter} />,
+    '1:1': (
+      <MatchTabPanel
+        key="single"
+        cards={mapSingleMatchData(singleData?.mates)}
+        filter={filter}
+      />
+    ),
+    그룹: (
+      <MatchTabPanel
+        key="group"
+        cards={mapGroupMatchData(groupData?.mates)}
+        filter={filter}
+      />
+    ),
   };
 
   return (
-    <div className="scrollbar-hide h-full grow flex-col">
+    <div className="h-full grow flex-col">
       <nav className="sticky top-0 z-[var(--z-under-header-section)] w-full bg-gray-100">
         <TabList
           className="px-[1.6rem]"

src/pages/onboarding/components/date-select.tsx

@@ -1,31 +1,23 @@
-import BottomSheet from '@components/bottom-sheet/bottom-sheet';
+import { gameQueries } from '@apis/game/game-queries';
+import GameMatchBottomSheet from '@components/bottom-sheet/game-match/game-match-bottom-sheet';
 import useBottomSheet from '@components/bottom-sheet/hooks/use-bottom-sheet';
-import Button from '@components/button/button/button';
-import ButtonGame from '@components/button/button-game/button-game';
 import MonthCalendar from '@components/calendar/month-calendar';
 import { getInitialSelectedDate } from '@components/calendar/utils/date-grid';
-import Icon from '@components/icon/icon';
-import { mockGameDatas } from '@mocks/mockGameData';
+import { TAB_TYPES } from '@components/tab/tab/constants/tab-type';
+import { useQuery } from '@tanstack/react-query';
 import { format } from 'date-fns';
-import { ko } from 'date-fns/locale';
 import { useState } from 'react';
 
-interface DateSelectProps {
-  onComplete: () => void;
-}
-
-const DateSelect = ({ onComplete }: DateSelectProps) => {
+const DateSelect = () => {
   const initialSelectedDate = getInitialSelectedDate(new Date());
-
   const [selectedDate, setSelectedDate] = useState<Date | null>(initialSelectedDate);
   const [currentMonth, setCurrentMonth] = useState<Date>(initialSelectedDate);
-  const [selectedGameId, setSelectedGameId] = useState<number | null>(null);
+  const activeType = TAB_TYPES.GROUP;
 
   const { isOpen, open, close } = useBottomSheet();
 
   const handleDateSelect = (date: Date) => {
     setSelectedDate(date);
-    setSelectedGameId(null);
     open();
   };
 
@@ -34,9 +26,10 @@ const DateSelect = ({ onComplete }: DateSelectProps) => {
     setSelectedDate(null);
   };
 
-  const handleGameClick = (id: number) => {
-    setSelectedGameId(id);
-  };
+  const dateStr = format(selectedDate ?? new Date(), 'yyyy-MM-dd');
+  const { data } = useQuery({
+    ...gameQueries.GAME_LIST(dateStr),
+  });
 
   return (
     <div className="h-full w-full flex-col-between px-[1.6rem] pt-[1.6rem]">
@@ -56,45 +49,14 @@ const DateSelect = ({ onComplete }: DateSelectProps) => {
         />
       </div>
 
-      <BottomSheet isOpen={isOpen} onClose={close}>
-        <div className="flex-col gap-[1.6rem]">
-          <div className="flex-col gap-[1.3rem] px-[1.6rem] pt-[1.6rem]">
-            <p className="cap_14_m text-gray-black">
-              {selectedDate && format(selectedDate, 'M월 d일 EEEE', { locale: ko })}
-            </p>
-            <div className="flex-col-center gap-[0.8rem]">
-              {mockGameDatas.map((game) => (
-                <ButtonGame
-                  key={game.id}
-                  awayTeam={game.awayTeam}
-                  homeTeam={game.homeTeam}
-                  gameTime={game.gameTime}
-                  stadium={game.stadium}
-                  selected={selectedGameId === game.id}
-                  onClick={() => handleGameClick(game.id)}
-                />
-              ))}
-            </div>
-          </div>
-
-          <div className="flex-col-center gap-[1.2rem]">
-            <div className="flex-row-center gap-[0.8rem]">
-              <Icon name="caution" size={1.8} />
-              <p className="cap_12_m text-gray-600">하루에 한 경기만 매칭 생성이 가능해요.</p>
-            </div>
-            <div className="w-full p-[1.6rem]">
-              <Button
-                label="맞춤 매칭 생성하기"
-                disabled={!selectedGameId}
-                onClick={() => {
-                  close();
-                  onComplete();
-                }}
-              />
-            </div>
-          </div>
-        </div>
-      </BottomSheet>
+      <GameMatchBottomSheet
+        isOpen={isOpen}
+        onClose={close}
+        date={format(selectedDate ?? new Date(), 'yyyy-MM-dd')}
+        gameSchedule={data ?? []}
+        activeType={activeType}
+        fromOnboarding={true}
+      />
     </div>
   );
 };