refatctor:핀포인트 home 화면 리펙토링 및 핀포인트 설정시 재조회 로직 리펙토링

src/entities/listings/hooks/useListingDetailHooks.ts

@@ -206,7 +206,7 @@ export const useListingRouteDetail = <T, TParam extends object>({
 
 export const useListingFilterDetail = <T>() => {
   return useQuery<IResponse<T>, Error, T>({
-    queryKey: ["pinpoint"],
+    queryKey: ["pinpointSettings"],
     staleTime: 1000 * 60 * 5,
     placeholderData: previousData => previousData,
     queryFn: () => PostBasicRequest<T, IResponse<T>, {}, IResponse<T>>(endPoint["pinpoint"], "get"),

src/features/home/hooks/hooks.tsx

@@ -3,6 +3,8 @@ import { useRouter } from "next/navigation";
 import { useHomeSheetStore } from "@/src/features/home/model/homeStore";
 import { useOAuthStore } from "@/src/features/login/model";
 import { PinPointPlace } from "@/src/entities/listings/model/type";
+import { useMemo } from "react";
+import { homeSheetParseObject } from "@/src/features/listings/model";
 
 export const useHomeGlobalSearch = (globalData?: GlobalListType): GlobalSearchSection[] => {
   if (!globalData) return [];
@@ -36,7 +38,7 @@ export const useHomeGlobalSearch = (globalData?: GlobalListType): GlobalSearchSe
   ];
 };
 
-export const usePinhouseRouter = () => {
+export const usePinhouseRouter = (searchParams: URLSearchParams) => {
   const router = useRouter();
   const closeSheet = useHomeSheetStore(s => s.closeSheet);
   const replaceRouter = () => {
@@ -46,11 +48,17 @@ export const usePinhouseRouter = () => {
 
   const handleSetPinpoint = () => {
     router.push("/mypage/pinpoints");
+    closeSheet();
   };
 
+  const mode = useMemo(() => {
+    return homeSheetParseObject(searchParams);
+  }, [searchParams]);
+
   return {
     replaceRouter,
     handleSetPinpoint,
+    mode,
   };
 };
 

src/features/home/ui/components/components/pinpointSelectedButton.tsx

@@ -4,9 +4,14 @@ import { cn } from "@/lib/utils";
 type PinpointSelectedButtonType = {
   mode: "pinpoints" | "maxTime";
   handleSetPinpoint: () => void;
+  replaceRouter:() => void;
 };
 
-export const PinpointSelectedButton = ({ mode, handleSetPinpoint }: PinpointSelectedButtonType) => {
+export const PinpointSelectedButton = ({
+  mode,
+  handleSetPinpoint,
+  replaceRouter,
+}: PinpointSelectedButtonType) => {
   return (
     <div className="flex gap-3">
       <Button
@@ -20,7 +25,11 @@ export const PinpointSelectedButton = ({ mode, handleSetPinpoint }: PinpointSele
       >
         핀포인트 설정
       </Button>
-      <Button className="flex-1 bg-[#2E2A3B] text-sm font-medium text-white" radius="sm">
+      <Button
+        className="flex-1 bg-[#2E2A3B] text-sm font-medium text-white"
+        radius="sm"
+        onClick={replaceRouter}
+      >
         저장하기
       </Button>
     </div>

src/features/home/ui/components/homeFullSheet.tsx

@@ -1,23 +1,21 @@
 "use client";
-import { homeSheetParseObject } from "@/src/features/listings/model";
+
 import { AnimatePresence, motion } from "framer-motion";
 import { useSearchParams } from "next/navigation";
 import { useHomeSheetStore } from "../../model/homeStore";
-import { useMemo } from "react";
 import { PinpointRowBox } from "./pinpointRowBoxs";
 import { MaxTimeSliderBox } from "./maxTime";
-import { Button } from "@/src/shared/lib/headlessUi";
-import { cn } from "@/lib/utils";
 import { usePinhouseRouter } from "@/src/features/home/hooks/hooks";
 import { PinpointSelectedButton } from "@/src/features/home/ui/components/components/pinpointSelectedButton";
+import type { ReadonlyURLSearchParams } from "next/navigation";
 
 export const HomeSheet = () => {
   const open = useHomeSheetStore(s => s.open);
   const searchParams = useSearchParams();
-  const mode = useMemo(() => {
-    return homeSheetParseObject(searchParams);
-  }, [searchParams]);
-  const { replaceRouter, handleSetPinpoint } = usePinhouseRouter();
+
+  const { replaceRouter, handleSetPinpoint, mode } = usePinhouseRouter(
+    searchParams as ReadonlyURLSearchParams
+  );
 
   return (
     <AnimatePresence>
@@ -38,7 +36,6 @@ export const HomeSheet = () => {
             exit={{ y: "100%" }}
             transition={{ type: "spring", stiffness: 260, damping: 30 }}
           >
-            {/* <div className="mx-auto mb-3 mt-2 h-1.5 w-12 rounded-full bg-gray-300" /> */}
 
             <div className="flex items-center justify-between">
               <h2 className="text-lg font-bold">{mode?.label}</h2>
@@ -57,27 +54,12 @@ export const HomeSheet = () => {
                 {mode?.key === "pinpoints" && <PinpointRowBox />}
                 {mode?.key === "maxTime" && <MaxTimeSliderBox />}
                 {!mode ? null : (
-                  <PinpointSelectedButton mode={mode?.key} handleSetPinpoint={handleSetPinpoint} />
+                  <PinpointSelectedButton
+                    mode={mode?.key}
+                    handleSetPinpoint={handleSetPinpoint}
+                    replaceRouter={replaceRouter}
+                  />
                 )}
-                {/*<div className="flex gap-3">*/}
-                {/*  <Button*/}
-                {/*    className={cn(*/}
-                {/*      "flex-1 border-greyscale-grey-100 bg-white text-sm font-medium text-gray-800",*/}
-                {/*      mode?.key === "maxTime" ? "hidden" : "block"*/}
-                {/*    )}*/}
-                {/*    variant="outline"*/}
-                {/*    radius="sm"*/}
-                {/*    onClick={handleSetPinpoint}*/}
-                {/*  >*/}
-                {/*    핀포인트 설정*/}
-                {/*  </Button>*/}
-                {/*  <Button*/}
-                {/*    className="flex-1 bg-[#2E2A3B] text-sm font-medium text-white"*/}
-                {/*    radius="sm"*/}
-                {/*  >*/}
-                {/*    저장하기*/}
-                {/*  </Button>*/}
-                {/*</div>*/}
               </motion.div>
             </div>
           </motion.div>

src/features/home/ui/components/pinpointRowBoxs.tsx

@@ -5,7 +5,7 @@ import { PinpointRowBoxSkeleton } from "./skeleton/skeleton";
 import { usePinpointRowBox } from "@/src/features/home/hooks/hooks";
 
 export const PinpointRowBox = () => {
-  const { data, isLoading } = useListingFilterDetail<PinPointPlace>();
+  const { data } = useListingFilterDetail<PinPointPlace>();
   const pin = data?.pinPoints ?? null;
   const { pinpoints, pinPointId, onChangePinpoint } = usePinpointRowBox(pin);
 

src/features/home/ui/homeHeader.tsx

@@ -3,13 +3,10 @@ import { HomeScreenLogo } from "@/src/assets/icons/home/homeScreenLogo";
 import { PinhouseLogo } from "@/src/assets/icons/logo";
 import { useRouter } from "next/navigation";
 import { SearchLine } from "@/src/assets/icons/home";
+import { useHomeHeaderHooks } from "@/src/widgets/homeSection/hooks/homeHeaderHooks";
 
 export const HomeHeader = () => {
-  const router = useRouter();
-
-  const pageRouter = () => {
-    router.push("/home/search");
-  };
+  const { onRouteChange } = useHomeHeaderHooks();
 
   return (
     <header className="flex items-center justify-between pt-5">
@@ -18,7 +15,7 @@ export const HomeHeader = () => {
       </div>
       <div className="flex items-center gap-3">
         <button aria-label="검색">
-          <SearchLine onClick={pageRouter} />
+          <SearchLine onClick={onRouteChange} />
         </button>
       </div>
     </header>

src/features/home/ui/homeQuickStatsList.tsx

@@ -6,22 +6,12 @@ import { useHomeMaxTime, useHomeSheetStore } from "../model/homeStore";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useOAuthStore } from "../../login/model";
 import { splitAddress, transTime } from "@/src/shared/lib/utils";
+import { useHomeUseHooks } from "@/src/features/home/ui/homeUseHooks/homeUseHooks";
 
 export const QuickStatsList = () => {
-  const openSheet = useHomeSheetStore(s => s.openSheet);
-  const { pinPointId, pinPointName } = useOAuthStore();
-  const { maxTime } = useHomeMaxTime();
-  const [line1, line2] = splitAddress(pinPointName ?? "핀포인트 이름 설정해주세요");
-  const searchParams = useSearchParams();
-  const router = useRouter();
 
-  const onSelectSection = (key: string) => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("mode", key);
-    params.set("id", pinPointId ?? "");
-    router.push(`?${params.toString()}`, { scroll: false });
-    openSheet();
-  };
+  const { maxTime } = useHomeMaxTime();
+  const {line2, line1 , onSelectSection} = useHomeUseHooks();
 
   return (
     <div className="relative grid grid-cols-2 grid-rows-[auto,1fr] rounded-2xl bg-white p-4">

src/features/home/ui/homeUseHooks/homeUseHooks.ts

@@ -0,0 +1,25 @@
+import { useHomeSheetStore } from "@/src/features/home/model/homeStore";
+import { useOAuthStore } from "@/src/features/login/model";
+import { splitAddress } from "@/src/shared/lib/utils";
+import { useRouter, useSearchParams } from "next/navigation";
+
+export const useHomeUseHooks = () => {
+  const openSheet = useHomeSheetStore(s => s.openSheet);
+  const { pinPointId, pinPointName } = useOAuthStore();
+  const [line1, line2] = splitAddress(pinPointName ?? "핀포인트 이름 설정해주세요");
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const onSelectSection = (key: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("mode", key);
+    params.set("id", pinPointId ?? "");
+    router.push(`?${params.toString()}`, { scroll: false });
+    openSheet();
+  };
+
+  return {
+    line1,
+    line2,
+    onSelectSection
+  }
+}

src/features/mypage/hooks/useAddPinpoint.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { requestSetPinpoint } from "@/src/entities/address/api";
 
 export interface IPinpointData {
@@ -18,10 +18,14 @@ interface IUseAddPinpointParams {
  * 핀포인트만 추가하는 커스텀 훅 (마이페이지 등에서 사용)
  */
 export const useAddPinpoint = ({ onSuccess, onError }: IUseAddPinpointParams = {}) => {
+  const queryClient = useQueryClient();
+
   const mutation = useMutation({
     mutationFn: (data: IPinpointData) => requestSetPinpoint(data),
     onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["pinpointSettings"] });
       onSuccess?.();
+
     },
     onError: error => {
       console.error("핀포인트 추가 실패:", error);

src/widgets/homeSection/hooks/homeHeaderHooks.ts

@@ -0,0 +1,13 @@
+import { useRouter } from "next/navigation";
+import { useCallback } from "react";
+
+export const useHomeHeaderHooks = () => {
+  const router = useRouter();
+
+  const onRouteChange = useCallback(() => {
+    router.push("/home/search");
+  },[])
+  return {
+    onRouteChange,
+  }
+}