diff --git a/src/entities/home/hooks/homeHooks.ts b/src/entities/home/hooks/homeHooks.ts index 361299a..e4a67bf 100644 --- a/src/entities/home/hooks/homeHooks.ts +++ b/src/entities/home/hooks/homeHooks.ts @@ -12,7 +12,7 @@ import { useOAuthStore } from "@/src/features/login/model"; import { HOME_NOTICE_ENDPOINT, HOME_SEARCH_POPULAR_ENDPOINT } from "@/src/shared/api"; import { useHomeMaxTime } from "@/src/features/home/model/homeStore"; import { useDebounce } from "@/src/shared/hooks/useDebounce/useDebounce"; -import { ApiCategory, CATEGORY_MAP } from "@/src/features/home/hooks/hooks"; +import { ApiCategory, CATEGORY_MAP } from "@/src/features/home/model/model"; export const useNoticeInfinite = () => { const pinpointId = useOAuthStore(state => state.pinPointId); diff --git a/src/entities/listings/hooks/useListingDetailHooks.ts b/src/entities/listings/hooks/useListingDetailHooks.ts index c8c4dab..f86d439 100644 --- a/src/entities/listings/hooks/useListingDetailHooks.ts +++ b/src/entities/listings/hooks/useListingDetailHooks.ts @@ -208,6 +208,7 @@ export const useListingFilterDetail = () => { return useQuery, Error, T>({ queryKey: ["pinpoint"], staleTime: 1000 * 60 * 5, + placeholderData: previousData => previousData, queryFn: () => PostBasicRequest, {}, IResponse>(endPoint["pinpoint"], "get"), select: response => { if (response.data === undefined) { diff --git a/src/features/home/hooks/hooks.tsx b/src/features/home/hooks/hooks.tsx index 74b1e1a..5a2d3a3 100644 --- a/src/features/home/hooks/hooks.tsx +++ b/src/features/home/hooks/hooks.tsx @@ -1,22 +1,8 @@ -import { GlobalBuilding } from "@/src/assets/icons/home/globalBuilding"; -import { GlobalNoticeIncon } from "@/src/assets/icons/home/globalDoc"; -import { GlobalHouse } from "@/src/assets/icons/home/globalHouse"; -import { GlobalMapPin } from "@/src/assets/icons/home/globalMappin"; -import { GlobalPerson } from "@/src/assets/icons/home/globalPerson"; -import { - GlobalListType, - GlobalSearchSection, - SearchCategory, -} from "@/src/entities/home/model/type"; -import { ReactNode } from "react"; - -export const SEARCH_CATEGORY_CONFIG: Record = { - notices: { label: "공고명", icon: }, - complexes: { label: "단지명", icon: }, - targetGroups: { label: "모집대상", icon: }, - regions: { label: "지역", icon: }, - houseTypes: { label: "주택유형", icon: }, -}; +import { GlobalListType, GlobalSearchSection } from "@/src/entities/home/model/type"; +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"; export const useHomeGlobalSearch = (globalData?: GlobalListType): GlobalSearchSection[] => { if (!globalData) return []; @@ -50,13 +36,37 @@ export const useHomeGlobalSearch = (globalData?: GlobalListType): GlobalSearchSe ]; }; -export const CATEGORY_MAP = { - notices: "NOTICE", - complexes: "COMPLEX", - targetGroups: "TARGET_GROUP", - regions: "REGION", - houseTypes: "HOUSE_TYPE", -} as const; +export const usePinhouseRouter = () => { + const router = useRouter(); + const closeSheet = useHomeSheetStore(s => s.closeSheet); + const replaceRouter = () => { + router.replace("/home"); + closeSheet(); + }; -export type SearchCategoryMap = keyof typeof CATEGORY_MAP; -export type ApiCategory = (typeof CATEGORY_MAP)[SearchCategoryMap]; + const handleSetPinpoint = () => { + router.push("/mypage/pinpoints"); + }; + + return { + replaceRouter, + handleSetPinpoint, + }; +}; + +export const usePinpointRowBox = (data: PinPointPlace["pinPoints"] | null) => { + const pinpoints = data ?? null; + const pinPointId = useOAuthStore(s => s.pinPointId); + const setPinPointId = useOAuthStore(s => s.setPinPointId); + const setPinPointName = useOAuthStore(s => s.setPinpointName); + const onChangePinpoint = ({ id, name }: { id: string; name: string }) => { + setPinPointId(id); + setPinPointName(name); + }; + + return { + pinpoints, + pinPointId, + onChangePinpoint, + }; +}; diff --git a/src/features/home/model/model.tsx b/src/features/home/model/model.tsx new file mode 100644 index 0000000..c55fe7f --- /dev/null +++ b/src/features/home/model/model.tsx @@ -0,0 +1,26 @@ +import { SearchCategory } from "@/src/entities/home/model/type"; +import { ReactNode } from "react"; +import { GlobalNoticeIncon } from "@/src/assets/icons/home/globalDoc"; +import { GlobalBuilding } from "@/src/assets/icons/home/globalBuilding"; +import { GlobalPerson } from "@/src/assets/icons/home/globalPerson"; +import { GlobalMapPin } from "@/src/assets/icons/home/globalMappin"; +import { GlobalHouse } from "@/src/assets/icons/home/globalHouse"; + +export const SEARCH_CATEGORY_CONFIG: Record = { + notices: { label: "공고명", icon: }, + complexes: { label: "단지명", icon: }, + targetGroups: { label: "모집대상", icon: }, + regions: { label: "지역", icon: }, + houseTypes: { label: "주택유형", icon: }, +}; + +export const CATEGORY_MAP = { + notices: "NOTICE", + complexes: "COMPLEX", + targetGroups: "TARGET_GROUP", + regions: "REGION", + houseTypes: "HOUSE_TYPE", +} as const; + +export type SearchCategoryMap = keyof typeof CATEGORY_MAP; +export type ApiCategory = (typeof CATEGORY_MAP)[SearchCategoryMap]; diff --git a/src/features/home/ui/components/components/pinpointSelectedButton.tsx b/src/features/home/ui/components/components/pinpointSelectedButton.tsx new file mode 100644 index 0000000..6f62fde --- /dev/null +++ b/src/features/home/ui/components/components/pinpointSelectedButton.tsx @@ -0,0 +1,28 @@ +import { Button } from "@/src/shared/lib/headlessUi"; +import { cn } from "@/lib/utils"; + +type PinpointSelectedButtonType = { + mode: "pinpoints" | "maxTime"; + handleSetPinpoint: () => void; +}; + +export const PinpointSelectedButton = ({ mode, handleSetPinpoint }: PinpointSelectedButtonType) => { + return ( +
+ + +
+ ); +}; diff --git a/src/features/home/ui/components/homeFullSheet.tsx b/src/features/home/ui/components/homeFullSheet.tsx index 4a47dfc..fa7c3e0 100644 --- a/src/features/home/ui/components/homeFullSheet.tsx +++ b/src/features/home/ui/components/homeFullSheet.tsx @@ -1,32 +1,24 @@ "use client"; import { homeSheetParseObject } from "@/src/features/listings/model"; import { AnimatePresence, motion } from "framer-motion"; -import { useRouter, useSearchParams } from "next/navigation"; +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"; export const HomeSheet = () => { const open = useHomeSheetStore(s => s.open); - const closeSheet = useHomeSheetStore(s => s.closeSheet); const searchParams = useSearchParams(); - const mode = useMemo(() => { return homeSheetParseObject(searchParams); }, [searchParams]); + const { replaceRouter, handleSetPinpoint } = usePinhouseRouter(); - const router = useRouter(); - const replaceRouter = () => { - router.replace("/home"); - closeSheet(); - }; - - const handleSetPinpoint = () => { - router.push("/mypage/pinpoints"); - }; return ( {open && ( @@ -64,26 +56,28 @@ export const HomeSheet = () => { > {mode?.key === "pinpoints" && } {mode?.key === "maxTime" && } - -
- - -
+ {!mode ? null : ( + + )} + {/*
*/} + {/* */} + {/* 핀포인트 설정*/} + {/* */} + {/* */} + {/* 저장하기*/} + {/* */} + {/*
*/} diff --git a/src/features/home/ui/components/pinpointRowBoxs.tsx b/src/features/home/ui/components/pinpointRowBoxs.tsx index abaed83..393a090 100644 --- a/src/features/home/ui/components/pinpointRowBoxs.tsx +++ b/src/features/home/ui/components/pinpointRowBoxs.tsx @@ -1,18 +1,18 @@ import { useListingFilterDetail } from "@/src/entities/listings/hooks/useListingDetailHooks"; import { PinPointPlace } from "@/src/entities/listings/model/type"; -import { useOAuthStore } from "@/src/features/login/model"; import { PinpointItem } from "./components/pinpointId"; +import { PinpointRowBoxSkeleton } from "./skeleton/skeleton"; +import { usePinpointRowBox } from "@/src/features/home/hooks/hooks"; export const PinpointRowBox = () => { - const { data } = useListingFilterDetail(); - const pinpoints = data?.pinPoints; - const pinPointId = useOAuthStore(s => s.pinPointId); - const setPinPointId = useOAuthStore(s => s.setPinPointId); - const setPinPointName = useOAuthStore(s => s.setPinpointName); - const onChangePinpoint = ({ id, name }: { id: string; name: string }) => { - setPinPointId(id); - setPinPointName(name); - }; + const { data, isLoading } = useListingFilterDetail(); + const pin = data?.pinPoints ?? null; + const { pinpoints, pinPointId, onChangePinpoint } = usePinpointRowBox(pin); + + if (!pinpoints) { + return ; + } + return (
    diff --git a/src/features/home/ui/components/skeleton/skeleton.tsx b/src/features/home/ui/components/skeleton/skeleton.tsx new file mode 100644 index 0000000..6544afb --- /dev/null +++ b/src/features/home/ui/components/skeleton/skeleton.tsx @@ -0,0 +1,21 @@ +import { Skeleton } from "@/src/shared/ui/skeleton/skeleton"; + +const ITEMS = 3; + +export const PinpointRowBoxSkeleton = () => { + return ( +
    +
      + {Array.from({ length: ITEMS }).map((_, index) => ( +
    • +
      + + +
      + +
      • + ))} +
    +
    + ); +}; diff --git a/src/features/home/ui/result/homeResultSectionHeader.tsx b/src/features/home/ui/result/homeResultSectionHeader.tsx index 23f95d7..498bab6 100644 --- a/src/features/home/ui/result/homeResultSectionHeader.tsx +++ b/src/features/home/ui/result/homeResultSectionHeader.tsx @@ -1,5 +1,5 @@ import { SearchCategory } from "@/src/entities/home/model/type"; -import { SEARCH_CATEGORY_CONFIG } from "../../hooks/hooks"; +import { SEARCH_CATEGORY_CONFIG } from "@/src/features/home/model/model"; interface HomeResultSectionHeaderProps { category: SearchCategory; diff --git a/src/features/listings/model/listingsModel.ts b/src/features/listings/model/listingsModel.ts index 1616256..91a2a08 100644 --- a/src/features/listings/model/listingsModel.ts +++ b/src/features/listings/model/listingsModel.ts @@ -10,6 +10,7 @@ import { } from "@/src/entities/listings/model/type"; import { PinPoint, PinPointMap } from "@/src/shared/ui/dropDown/deafult/type"; import { SectionLabelMap, SectionMap } from "./filterPanelModel"; +import { useMemo } from "react"; export const REGION_CHECKBOX = [ { @@ -349,6 +350,7 @@ export const homeSheetParseObject = (searchParams: URLSearchParams): HomeSheetRe label, }; }; + // 사용처: 검색 결과가 없을 때/빈 검색어 화면에서 추천 태그 클릭 핸들러와 인기 키워드 전달 // - listingsSearchResult/components/searchNoResultView.tsx // - listingsSearchResult/components/searchEmptyQueryView.tsx