From c4e9153cfda014f4fdb77b5d22ec503cecf47621 Mon Sep 17 00:00:00 2001 From: ywlee Date: Tue, 24 Oct 2023 19:42:48 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20=EC=9D=BC=EB=8B=A8=20=EC=B9=A9=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=95=98=EB=8D=98=20=EA=B2=83=20=EC=BB=A4?= =?UTF-8?q?=EB=B0=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Chip/Chip.tsx | 9 ++- components/Filter/Filter.tsx | 13 +--- pages/index.tsx | 123 +++++++++++++++++++++-------------- 3 files changed, 82 insertions(+), 63 deletions(-) diff --git a/components/Chip/Chip.tsx b/components/Chip/Chip.tsx index 0fec21c..2f8b3ab 100644 --- a/components/Chip/Chip.tsx +++ b/components/Chip/Chip.tsx @@ -7,10 +7,11 @@ interface ChipProps { onDelete?: () => void; clicked?: boolean; onChipClick?: (label: string) => void; + onlyText?: boolean; } /** Chip Component 1차 개발 */ -export default function Chip({ label, onDelete, clicked, onChipClick }: ChipProps) { +export default function Chip({ label, onDelete, clicked, onChipClick, onlyText }: ChipProps) { const [fillStroke, setFillStroke] = useState(''); const [fillText, setFillText] = useState(''); useEffect(() => { @@ -31,13 +32,15 @@ export default function Chip({ label, onDelete, clicked, onChipClick }: ChipProp return (
{label} - {onDelete && ( + {!onlyText && ( diff --git a/components/Filter/Filter.tsx b/components/Filter/Filter.tsx index a0aedf6..80b47c6 100644 --- a/components/Filter/Filter.tsx +++ b/components/Filter/Filter.tsx @@ -23,9 +23,11 @@ interface GuDong { export default function Filter({ getChildData, closeModal, + focus, }: { getChildData: (data: any) => void; closeModal: () => void; + focus?: number; }) { const { register, handleSubmit, watch, reset } = useForm({ mode: 'onChange' }); const [selectedLocations, setSelectedLocations] = useState([]); @@ -151,16 +153,7 @@ export default function Filter({ useEffect(() => { const formattedSelectedLocation = selectedLocations.map((item) => item.dong.value); - if ( - !selectedLocations.length && - !minDeposit && - !maxDeposit && - !minMonthlyRent && - !maxMonthlyRent && - !dateAvailable && - !housingChecked.length && - !furnishingChecked.length - ) { + if (minDeposit === undefined) { return; } diff --git a/pages/index.tsx b/pages/index.tsx index d1cc9cb..f9f9756 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,6 +14,7 @@ import isEmpty from 'lodash-es/isEmpty'; import useUserInfo from '@/hooks/useUserInfo.ts'; import { getProfile } from '@/api/userInfo'; import { UserInfoProps } from '@/context/UserInfoProvider.tsx'; +import { lte } from 'lodash-es'; type HomeProps = NextPage & { getLayout: (page: React.ReactElement, ctx: NextPageContext) => React.ReactNode; @@ -28,11 +29,18 @@ const FILTER_LABEL: Record = { furnishingTypes: 'Furnishing', }; +const defaultFilters = Object.values(FILTER_LABEL).map((value) => { + return { + selected: false, + value, + }; +}); + function Home() { const [rooms, setRooms] = useState([]); const [profile, setProfile] = useState(); - const [filters, setFilters] = useState([]); - const [clickedChip, setClickedChip] = useState(''); + const [filters, setFilters] = useState<{ selected: boolean; value: string }[]>(defaultFilters); + const [clickedChip, setClickedChip] = useState(-1); const router = useRouter(); const { openModal, closeModal } = useModal(); const [page, setPage] = useState(0); @@ -54,20 +62,26 @@ function Home() { } }; - const makeFilters = (filterParams: Record) => { - const resultFilter: string[] = []; + const formatFilters = (filterParams: Record) => { + let resultFilter = [...defaultFilters]; + Object.keys(filterParams).forEach((key) => { if (!isEmpty(filterParams[key])) { - resultFilter.push(FILTER_LABEL[key]); + resultFilter = resultFilter.filter((item) => item.value !== FILTER_LABEL[key]); + resultFilter.unshift({ + selected: true, + value: FILTER_LABEL[key], + }); } }); + setFilters(() => [...resultFilter]); }; const target = useRef(null); const getChildData = async (childData: Record) => { - makeFilters(childData); + formatFilters(childData); setPage(0); setSearchParams(childData); setRooms([]); @@ -90,7 +104,7 @@ function Home() { custom: true, customHeader: false, }, - children: , + children: , }); }; @@ -106,10 +120,6 @@ function Home() { }; useEffect(() => { - if (!page) { - return; - } - const fetchData = async () => { const data = await getRooms({ ...searchParams, page }); setRooms((prevRooms) => [...prevRooms, ...(data?.content || [])]); @@ -137,28 +147,43 @@ function Home() { }; // Chip 클릭 했을 때 이벤트 - const handleChipClick = (label: React.SetStateAction) => { - setClickedChip(label); + const handleChipClick = (index: number) => { + setClickedChip(index); }; - // 맨 처음 Filter 에서 불러올 때 첫번째 항목이 선택되어 있도록 수정 - const handlePropsClick = (option: string, index: number) => { - let result = false; - if ((clickedChip || '') !== '' && filters.length > 1) { - result = filters[0] === option; - } else if (filters.length === 1) { - result = option === filters[0]; + useEffect(() => { + if (clickedChip > -1) { + openFilterPopup(); + setClickedChip(-1); } - return result; - }; - // 옵션 제거 시 실행될 함수 - const handleOptionRemove = (option: string, index: number) => { - const resultFilters = filters.filter((item) => item !== option); - setFilters(() => [...resultFilters]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [clickedChip]); + + // // 맨 처음 Filter 에서 불러올 때 첫번째 항목이 선택되어 있도록 수정 + // const handlePropsClick = (option: string, index: number) => { + // let result = false; + // if ((clickedChip || '') !== '' && filters.length > 1) { + // result = filters[0] === option; + // } else if (filters.length === 1) { + // result = option === filters[0]; + // } + // return result; + // }; + // // 옵션 제거 시 실행될 함수 + const handleOptionRemove = (option: { selected: boolean; value: string }, index: number) => { + let result = [...filters]; + result = result.filter((item) => item.value !== option.value); + result.push({ + selected: false, + value: option.value, + }); + + setFilters(() => [...result]); const selectedOption = Object.keys(FILTER_LABEL).find((key) => { - return FILTER_LABEL[key] === option; + return FILTER_LABEL[key] === option.value; }); + setPage(0); setRooms([]); setSearchParams((prev) => { @@ -168,33 +193,31 @@ function Home() { }; }); - // 선택된 칩이 없거나 클릭된 칩이 삭제된 칩인 경우에 맨 처음 칩을 clickedChip으로 설정 - if ((clickedChip || '') === '') { - setClickedChip(filters?.[0]); - } + // if ((clickedChip || '') === '') { + // setFilters(() => [...defaultFilters]); + // } }; return ( -
-
- - {filters.map((label, index) => { - return ( -
+ <> +
+
+ +
+
+ {filters.map((filter, index) => { + return ( handleOptionRemove?.(label, index)} - onChipClick={() => handleChipClick?.(label)} - clicked={handlePropsClick?.(label, index)} + key={`${filter.value}-${index}`} + label={filter.value} + onlyText={!filter.selected} + onDelete={() => handleOptionRemove?.(filter, index)} + onChipClick={() => handleChipClick?.(index)} + clicked={filter.selected} /> -
- ); - })} + ); + })} +
There are {`${totalElements} rooms`} in total! @@ -213,7 +236,7 @@ function Home() {
- + ); }