Fix: Popular Sports Local Filter Drag

src/components/Lesson/LocalFilter/LocalFilter.types.ts

@@ -10,4 +10,5 @@ export interface LocalFilterProps {
   placeholderType?: string; // 지도 탭과 강좌 탭 페이지에 따른 드롭다운 요소 디자인 차이 구분용
   additionalBottomSheetClass?: string;
   isSpecialMode?: boolean;
+  onToggleOpen?: (isOpen: boolean) => void; // 부모 컴포넌트에서 바텀시트 열림 상태 업데이트 함수 추가
 }

src/components/Lesson/LocalFilter/index.tsx

@@ -19,6 +19,7 @@ export default function LocalFilter({
   placeholderType,
   additionalBottomSheetClass,
   isSpecialMode,
+  onToggleOpen,
 }: LocalFilterProps) {
   const [isOpen, setIsOpen] = useState(false);
   const filterRef = useRef<HTMLDivElement>(null);
@@ -35,10 +36,14 @@ export default function LocalFilter({
       document.body.style.overflow = '';
     }
 
+    if (onToggleOpen) {
+      onToggleOpen(isOpen);
+    }
+
     return () => {
       document.body.style.overflow = '';
     };
-  }, [isOpen]);
+  }, [isOpen, onToggleOpen]);
 
   const handleOptionClick = (key: string) => {
     onChange(key);

src/components/MapHome/FacilityInfo/index.tsx

@@ -75,19 +75,13 @@ export default function FacilityInfo({
   }, [facility, initialPosition]);
 
   const getLabelItem = () => {
-    if (!facility || !facility.items || facility.items.length === 0) {
+    if (!facility || !facility.items || facility.items.length === 0)
       return '없음';
-    }
 
     if (filterItem && facility.items.includes(filterItem)) {
       return filterItem;
     }
 
-    const filteredItems = facility.items.filter(item => item === filterItem);
-    if (filteredItems.length > 0) {
-      return filterItem;
-    }
-
     const frequency: Record<string, number> = {};
     facility.items.forEach(item => {
       frequency[item] = (frequency[item] || 0) + 1;
@@ -97,7 +91,7 @@ export default function FacilityInfo({
       a[1] > b[1] ? a : b
     )[0];
 
-    return mostFrequentItem || '없음';
+    return mostFrequentItem;
   };
 
   if (!facility) return null;
@@ -141,8 +135,8 @@ export default function FacilityInfo({
         </div>
         <div className={styles.chipsContainer}>
           <Chips
-            chipState={filterItem ? 'sports' : 'label'}
-            text={getLabelItem() || ''}
+            chipState="sports"
+            text={getLabelItem()}
             serialNumber={isNormalFacility ? true : false}
           />
         </div>

src/components/MapHome/PopularSports/index.tsx

@@ -31,6 +31,7 @@ export default function PopularSports({
   const [isNextStep, setIsNextStep] = useState(false);
   const [selectedCityCode, setSelectedCityCode] = useState<string>('11');
   const [selectedLocalCode, setSelectedLocalCode] = useState<string>('');
+  const [isFilterOpen, setIsFilterOpen] = useState(false);
 
   // 시도 선택 시 구/군 옵션 설정
   useEffect(() => {
@@ -75,13 +76,14 @@ export default function PopularSports({
 
   // 드래그 이벤트 핸들러
   const handleDragStart = (event: React.MouseEvent | React.TouchEvent) => {
+    if (isFilterOpen) return; // 필터가 열려 있을 때 드래그 막기
     setIsDragging(true);
     initialY.current =
       'touches' in event ? event.touches[0].clientY : event.clientY;
   };
 
   const handleDragMove = (event: React.MouseEvent | React.TouchEvent) => {
-    if (!isDragging) return;
+    if (!isDragging || isFilterOpen) return;
 
     const currentY =
       'touches' in event ? event.touches[0].clientY : event.clientY;
@@ -110,6 +112,15 @@ export default function PopularSports({
     );
   };
 
+  // 바텀시트 열림 상태 변경 핸들러
+  const handleToggleFilterOpen = (isOpen: boolean) => {
+    setIsFilterOpen(isOpen);
+    if (isOpen) {
+      // 필터가 열리면 PopularSports의 위치를 초기화
+      setPosition(0);
+    }
+  };
+
   return (
     <div
       className={styles.popularSportsContainer}
@@ -144,6 +155,7 @@ export default function PopularSports({
               isNextStep={isNextStep}
               additionalBottomSheetClass={styles.customBottomSheet}
               isSpecialMode={mode === 'special'}
+              onToggleOpen={handleToggleFilterOpen}
             />
           </div>
         </header>