Merge pull request #42 from happbob/feat/OD-1

Feat: 매칭 요청이 없을 때 홈>매칭 탭 비활성화

Author: gustn99

src/pages/Home/HomeTabBar.tsx

@@ -45,7 +45,18 @@ const HomeTabBar: React.FC<HomeTabBarProps> = ({ onOpenBottomSheet }) => {
 	};
 
 	const handleSwiperChange = (swiper: SwiperCore) => {
-		setActiveIndex(swiper.activeIndex);
+		// 매칭 요청이 없고 1번 index에 있을 때 0번 탭 비활성화
+		if (!hasMatchingRequests && swiper.activeIndex === 1) {
+			console.log(1);
+			swiper.allowSlidePrev = false;
+			setActiveIndex(swiper.activeIndex);
+		}
+		// 매칭 요청이 있을 때 양쪽 스와이퍼 가능
+		else {
+			console.log(3);
+			swiper.allowSlidePrev = true;
+			setActiveIndex(swiper.activeIndex);
+		}
 	};
 
 	const fetchMatchingRequests = async () => {
@@ -100,6 +111,7 @@ const HomeTabBar: React.FC<HomeTabBarProps> = ({ onOpenBottomSheet }) => {
 						swiperRef.current = swiper;
 					}}
 					onSlideChange={handleSwiperChange}
+					allowSlidePrev={hasMatchingRequests}
 					spaceBetween={0}
 					slidesPerView={1}
 					autoHeight={true}
@@ -109,7 +121,13 @@ const HomeTabBar: React.FC<HomeTabBarProps> = ({ onOpenBottomSheet }) => {
 					<SwiperSlide
 						style={{ height: 'auto', visibility: hasMatchingRequests && isMatchingReady ? 'visible' : 'hidden' }}
 					>
-						<Matching tooltipRef={cardRef} />
+						<Matching
+							tooltipRef={cardRef}
+							swipeToOOTD={() => {
+								setHasMatchingRequests(false);
+								swiperRef.current?.slideNext();
+							}}
+						/>
 					</SwiperSlide>
 					<SwiperSlide style={{ height: 'auto' }}>
 						<OOTD tooltipRef={ootdTooltipRef} onMoreClick={onOpenBottomSheet} />

src/pages/Home/Matching/index.tsx

@@ -10,7 +10,12 @@ interface Relationship {
 	requestStatus: string; // 추가된 필드
 }
 
-const Matching: React.FC<{ tooltipRef: React.MutableRefObject<HTMLDivElement | null> }> = ({ tooltipRef }) => {
+interface MatchingProps {
+	tooltipRef: React.MutableRefObject<HTMLDivElement | null>;
+	swipeToOOTD: () => void;
+}
+
+const Matching: React.FC<MatchingProps> = ({ tooltipRef, swipeToOOTD }) => {
 	const [matchingCount, setMatchingCount] = useState<number>(0);
 
 	useEffect(() => {
@@ -33,7 +38,11 @@ const Matching: React.FC<{ tooltipRef: React.MutableRefObject<HTMLDivElement | n
 
 	// 매칭 요청이 제거되었을 때 호출되는 함수
 	const handleRemoveMatching = () => {
-		setMatchingCount((prevCount) => Math.max(0, prevCount - 1));
+		if (matchingCount !== 1) {
+			setMatchingCount((prevCount) => Math.max(0, prevCount - 1));
+		} else {
+			swipeToOOTD();
+		}
 	};
 
 	return (