PinHouse · kyungchan3007 · Feb 13, 2026 · Feb 13, 2026
diff --git a/src/features/listings/ui/listingsCardDetail/button/button.tsx b/src/features/listings/ui/listingsCardDetail/button/button.tsx
@@ -0,0 +1,19 @@
+import { useDetailFilterResultButton } from "@/src/features/listings/ui/listingsCardDetail/hooks/hooks";
+
+type ListingCardDetailProps = {
+  filteredCount: number;
+  handleCloseSheet: () => void;
+};
+export const ListingCardDetailOut = ({ filteredCount, handleCloseSheet }: ListingCardDetailProps) => {
+  return (
+    <div>
+      <button
+        onClick={handleCloseSheet}
+        type="button"
+        className="w-full rounded-xl bg-greyscale-grey-900 py-4 text-base font-semibold leading-[140%] tracking-[-0.01em] text-white"
+      >
+        {filteredCount}개의 단지가 있어요
+      </button>
+    </div>
+  );
+};
diff --git a/...tures/listings/ui/listingsCardDetail/components/DetailSectionFilter/DetailFilterSheet.tsx b/...tures/listings/ui/listingsCardDetail/components/DetailSectionFilter/DetailFilterSheet.tsx
@@ -1,5 +1,4 @@
 "use client";
-
 import { AnimatePresence, motion } from "framer-motion";
 import { useSearchParams } from "next/navigation";
 import { useRef } from "react";
@@ -13,15 +12,17 @@ import { DistanceFilter } from "./DistanceFilter";
 import { CostFilter } from "./components/CostFilter";
 import { RegionFilter } from "./components/regionFilter";
 import { AreaFilter } from "./components/areaFilter";
+import { ListingCardDetailOut } from "@/src/features/listings/ui/listingsCardDetail/button/button";
+import { useDetailFilterResultButton } from "@/src/features/listings/ui/listingsCardDetail/hooks/hooks";
 
 export const DetailFilterSheet = () => {
   const open = useDetailFilterSheetStore(s => s.open);
-  const closeSheet = useDetailFilterSheetStore(s => s.closeSheet);
   const searchParams = useSearchParams();
   const anchorRef = useRef<HTMLSpanElement>(null);
   const portalRoot = usePortalTarget("mobile-overlay-root");
   const section = parseDetailSection(searchParams);
   useScrollLock({ locked: open, anchorRef });
+  const { filteredCount, handleCloseSheet } = useDetailFilterResultButton();
 
   const content = (
     <AnimatePresence>
@@ -31,15 +32,15 @@ export const DetailFilterSheet = () => {
             className="pointer-events-auto absolute inset-0 bg-black/40"
             onClick={e => {
               e.stopPropagation();
-              closeSheet();
+              handleCloseSheet();
             }}
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
           />
 
           <motion.div
-            className="pointer-events-auto absolute bottom-0 left-0 right-0 flex h-[80vh] flex-col rounded-t-2xl bg-white shadow-xl"
+            className="pointer-events-auto absolute bottom-0 left-0 right-0 flex h-[70dvh] flex-col rounded-t-2xl bg-white shadow-xl"
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
@@ -50,27 +51,33 @@ export const DetailFilterSheet = () => {
 
             <div className="flex items-center justify-between px-5 pb-2">
               <h2 className="text-sm font-bold">단지 필터</h2>
-              <button onClick={closeSheet}>✕</button>
+              <button onClick={handleCloseSheet}>✕</button>
             </div>
 
             <DetailFilterTab />
 
-            <div className="flex-1 overflow-y-auto p-5">
-              <motion.div
-                key={section}
-                initial={{ x: 20, opacity: 0 }}
-                animate={{ x: 0, opacity: 1 }}
-                exit={{ x: -100, opacity: 0 }}
-                transition={{ duration: 0.5, ease: "easeInOut" }}
-                className="h-full"
-              >
+            <motion.div
+              key={section}
+              initial={{ x: 20, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: -100, opacity: 0 }}
+              transition={{ duration: 0.5, ease: "easeInOut" }}
+              className="flex min-h-0 flex-1 flex-col"
+            >
+              <div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden px-5 pt-5">
                 {section === "distance" && <DistanceFilter />}
                 {section === "cost" && <CostFilter />}
                 {section === "region" && <RegionFilter />}
                 {section === "area" && <AreaFilter />}
                 {/* {section === "around" && <AroundFilter />} */}
-              </motion.div>
-            </div>
+              </div>
+              <div className="px-5 pb-5 pt-5">
+                <ListingCardDetailOut
+                  handleCloseSheet={handleCloseSheet}
+                  filteredCount={filteredCount}
+                />
+              </div>
+            </motion.div>
           </motion.div>
         </>
       )}

diff --git a/...features/listings/ui/listingsCardDetail/components/DetailSectionFilter/DistanceFilter.tsx b/...features/listings/ui/listingsCardDetail/components/DetailSectionFilter/DistanceFilter.tsx
@@ -8,6 +8,7 @@ import {
   getDefaultPinPointLabel,
   mapPinPointToOptions,
 } from "@/src/features/listings/hooks/listingsHooks";
+import { ListingCardDetailOut } from "@/src/features/listings/ui/listingsCardDetail/button/button";
 
 const SLIDER_MIN = 0;
 const SLIDER_MAX = 120;
@@ -20,7 +21,7 @@ export const DistanceFilter = () => {
   const hasPinPoints = pinPointList.myPinPoint.length > 0;
   const { setPinPointId } = useOAuthStore();
   const { distance, setDistance } = useListingDetailFilter();
-  const { filteredCount } = useListingDetailCountStore();
+
 
   const onChageValue = (selectedKey: string) => {
     setPinPointId(selectedKey);
@@ -75,14 +76,6 @@ export const DistanceFilter = () => {
         />
       </section>
 
-      <div className="mt-auto pt-8">
-        <button
-          type="button"
-          className="w-full rounded-xl bg-greyscale-grey-900 py-4 text-base font-semibold leading-[140%] tracking-[-0.01em] text-white"
-        >
-          {filteredCount}개의 단지가 있어요
-        </button>
-      </div>
     </div>
   );
 };
diff --git a/...s/listings/ui/listingsCardDetail/components/DetailSectionFilter/components/CostFilter.tsx b/...s/listings/ui/listingsCardDetail/components/DetailSectionFilter/components/CostFilter.tsx
@@ -8,6 +8,7 @@ import { useParams } from "next/navigation";
 import { useListingDetailNoticeSheet } from "@/src/entities/listings/hooks/useListingDetailSheetHooks";
 import { CostResponse } from "@/src/entities/listings/model/type";
 import { useListingDetailCountStore, useListingDetailFilter } from "@/src/features/listings/model";
+import { ListingCardDetailOut } from "@/src/features/listings/ui/listingsCardDetail/button/button";
 
 const DEPOSIT_STEP = 10;
 const WON_UNIT = 1;
@@ -94,7 +95,7 @@ export const CostFilter = () => {
     if (!isManualDeposit) {
       setMaxDeposit(deposit);
     } else {
-      setMaxDeposit(handleDepositInput);
+      setMaxDeposit(handleDepositInput === "" ? "0" :handleDepositInput);
     }
   }, [deposit, handleDepositInput]);
 
@@ -110,6 +111,10 @@ export const CostFilter = () => {
   // 직접 입력 시 숫자만 추려서 포맷
   const handleDepositChangeText = (event: ChangeEvent<HTMLInputElement>) => {
     const values = event.target.value;
+    console.log(values)
+    if(values === ""){
+      return setHandleDepositInput("");
+    }
     const numericValue = Number(values.replace(/[^0-9]/g, ""));
     setHandleDepositInput(formatNumber(toKRW(numericValue)));
   };
@@ -126,7 +131,7 @@ export const CostFilter = () => {
   };
 
   return (
-    <div className="flex h-full flex-col overflow-hidden bg-white">
+    <div className="flex h-full flex-col bg-white">
       <section className="flex flex-col gap-5">
         <div className="flex flex-col gap-1">
           <p className="text-base font-semibold leading-[140%] tracking-[-0.01em] text-greyscale-grey-900">
@@ -169,7 +174,7 @@ export const CostFilter = () => {
           <Input
             size="default"
             variant="default"
-            value={maxDeposit}
+            value={maxDeposit === "" ? "0" : maxDeposit}
             disabled={!isManualDeposit}
             inputMode="numeric"
             onChange={handleDepositChangeText}
@@ -203,15 +208,6 @@ export const CostFilter = () => {
           </div>
         </div>
       </section>
-
-      <div className="mt-auto">
-        <button
-          type="button"
-          className="w-full rounded-xl bg-greyscale-grey-900 py-4 text-base font-semibold leading-[140%] tracking-[-0.01em] text-white"
-        >
-          {filteredCount}개의 단지가 있어요
-        </button>
-      </div>
     </div>
   );
 };
diff --git a/...s/listings/ui/listingsCardDetail/components/DetailSectionFilter/components/areaFilter.tsx b/...s/listings/ui/listingsCardDetail/components/DetailSectionFilter/components/areaFilter.tsx
@@ -10,6 +10,7 @@ import { Checkbox } from "@/src/shared/lib/headlessUi/checkBox/checkbox";
 import { TagButton } from "@/src/shared/ui/button/tagButton";
 import { Spinner } from "@/src/shared/ui/spinner/default";
 import { useParams } from "next/navigation";
+import { ListingCardDetailOut } from "@/src/features/listings/ui/listingsCardDetail/button/button";
 
 export const AreaFilter = () => {
   const { id } = useParams() as { id: string };
@@ -56,14 +57,7 @@ export const AreaFilter = () => {
           </div>
         ))}
       </div>
-      <div className="mt-auto pt-8">
-        <button
-          type="button"
-          className="w-full rounded-xl bg-greyscale-grey-900 py-4 text-base font-semibold leading-[140%] tracking-[-0.01em] text-white"
-        >
-          {filteredCount}개의 단지가 있어요
-        </button>
-      </div>
+
     </div>
   );
 };

diff --git a/...listings/ui/listingsCardDetail/components/DetailSectionFilter/components/regionFilter.tsx b/...listings/ui/listingsCardDetail/components/DetailSectionFilter/components/regionFilter.tsx
@@ -11,6 +11,7 @@ import { TagButton } from "@/src/shared/ui/button/tagButton";
 import { Spinner } from "@/src/shared/ui/spinner/default";
 import { useParams } from "next/navigation";
 import { useState } from "react";
+import { ListingCardDetailOut } from "@/src/features/listings/ui/listingsCardDetail/button/button";
 
 export const RegionFilter = () => {
   const { id } = useParams() as { id: string };
@@ -57,14 +58,7 @@ export const RegionFilter = () => {
           </div>
         ))}
       </div>
-      <div className="mt-auto pt-8">
-        <button
-          type="button"
-          className="w-full rounded-xl bg-greyscale-grey-900 py-4 text-base font-semibold leading-[140%] tracking-[-0.01em] text-white"
-        >
-          {filteredCount}개의 단지가 있어요
-        </button>
-      </div>
+
     </div>
   );
 };

diff --git a/...ures/listings/ui/listingsCardDetail/components/listingsCardDetailOutOfCriteriaSection.tsx b/...ures/listings/ui/listingsCardDetail/components/listingsCardDetailOutOfCriteriaSection.tsx
@@ -2,11 +2,13 @@ import { ListingsCardTile } from "./listingsCardTile";
 import { ComplexList } from "@/src/entities/listings/model/type";
 
 type ListingsCardDetailOutOfCriteriaSectionProps = {
-  listings: ComplexList;
+  listings: ComplexList,
+  className?: string
 };
 
 export const ListingsCardDetailOutOfCriteriaSection = ({
-  listings,
+ listings,
+ className,
 }: ListingsCardDetailOutOfCriteriaSectionProps) => {
   if (listings.complexes.length === 0) return;
   return (

diff --git a/src/features/listings/ui/listingsCardDetail/components/listingsCardDetailSummary.tsx b/src/features/listings/ui/listingsCardDetail/components/listingsCardDetailSummary.tsx
@@ -3,9 +3,11 @@ import { TagButton } from "@/src/shared/ui/button/tagButton";
 import { cn } from "@/lib/utils";
 
 export const ListingsCardDetailSummary = ({
-  basicInfo,
-}: {
-  basicInfo: ListingDetailResponseWithColor["data"]["basicInfo"];
+                                            basicInfo,
+                                            className,
+                                          }: {
+  basicInfo: ListingDetailResponseWithColor["data"]["basicInfo"],
+  className?: string
 }) => {
   return (
     <section className="p-5">

diff --git a/src/features/listings/ui/listingsCardDetail/hooks/hooks.ts b/src/features/listings/ui/listingsCardDetail/hooks/hooks.ts
@@ -0,0 +1,40 @@
+import {
+  useDetailFilterSheetStore,
+  useListingDetailCountStore,
+} from "@/src/features/listings/model";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+
+export const useDetailFilterResultButton = () => {
+  const { filteredCount } = useListingDetailCountStore();
+  const router = useRouter();
+  const { id } = useParams() as { id: string };
+  const searchParams = useSearchParams();
+  const closeSheet = useDetailFilterSheetStore(s => s.closeSheet);
+
+  const resetListingsQuery = () => {
+    try {
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete("section");
+      router.replace(`/listings/${id}`);
+    } catch (error) {
+      console.error("[ListingFilterPartialSheet] Failed to reset query", error);
+    }
+  };
+
+  const handleCloseSheet = () => {
+    try {
+      closeSheet();
+      resetListingsQuery();
+    } catch (error) {
+      console.error("[ListingFilterPartialSheet] Failed to close sheet", error);
+    }
+
+  };
+
+
+    return {
+      filteredCount,
+      handleCloseSheet,
+    }
+
+};
diff --git a/src/widgets/listingsSection/ui/listingsCardDetailSection/listingsCardDetailSection.tsx b/src/widgets/listingsSection/ui/listingsCardDetailSection/listingsCardDetailSection.tsx
@@ -48,7 +48,9 @@ export const ListingsCardDetailSection = ({ id }: { id: string }) => {
           <>
             <ListingsCardDetailHeader />
             <main>
-              {!open && <ListingsCardDetailSummary basicInfo={basicInfo} />}
+              <ListingsCardDetailSummary
+                basicInfo={basicInfo}
+              />
 
               <ListingsCardDetailCompareButton paramId={id} />
               <ListingsCardDetailFilterBar />
@@ -58,7 +60,9 @@ export const ListingsCardDetailSection = ({ id }: { id: string }) => {
                 onFilteredCount={nonFiltered.totalCount}
               />
 
-              {!open && <ListingsCardDetailOutOfCriteriaSection listings={nonFiltered} />}
+              <ListingsCardDetailOutOfCriteriaSection
+                listings={nonFiltered}
+              />
             </main>
           </>
         )}