Skip to content

Commit

Permalink
[feat] 일단 칩 관련 하던 것 커밋
Browse files Browse the repository at this point in the history
  • Loading branch information
@zestlee1106
zestlee1106 committed Oct 24, 2023
1 parent a4190d9 commit c4e9153
Show file tree
Hide file tree
Showing 3 changed files with 82 additions and 63 deletions.
9 changes: 6 additions & 3 deletions components/Chip/Chip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand All @@ -31,13 +32,15 @@ export default function Chip({ label, onDelete, clicked, onChipClick }: ChipProp

return (
<div
className={`pl-[12px] pr-[3.75px] inline-flex items-center mr-2 mb-2 bg-opacity-10 py-1 font-semibold ${fillText}`}
className={`pl-[12px] pr-[3.75px] inline-flex items-center mr-2 bg-opacity-10 py-1 font-semibold ${fillText} ${
onlyText ? 'border-g3 border-[1px] rounded-[2px] pr-[12px]' : ''
}`}
onClick={onDivClick}
>
<Typography variant="label" fontStyle="semiBold" font="pretendard" color={clicked ? 'r1' : 'g5'}>
{label}
</Typography>
{onDelete && (
{!onlyText && (
<button className="focus:outline-none" onClick={handleDelete} aria-label="Delete">
<Close width={10.5} height={10.5} className="m-[7px] stroke-r1 stroke-[2]" />
</button>
Expand Down
13 changes: 3 additions & 10 deletions components/Filter/Filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<GuDong[]>([]);
Expand Down Expand Up @@ -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;
}

Expand Down
123 changes: 73 additions & 50 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -28,11 +29,18 @@ const FILTER_LABEL: Record<string, string> = {
furnishingTypes: 'Furnishing',
};

const defaultFilters = Object.values(FILTER_LABEL).map((value) => {
return {
selected: false,
value,
};
});

function Home() {
const [rooms, setRooms] = useState<RoomSearch[]>([]);
const [profile, setProfile] = useState<UserInfoProps>();
const [filters, setFilters] = useState<string[]>([]);
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);
Expand All @@ -54,20 +62,26 @@ function Home() {
}
};

const makeFilters = (filterParams: Record<string, string>) => {
const resultFilter: string[] = [];
const formatFilters = (filterParams: Record<string, string>) => {
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<string, string>) => {
makeFilters(childData);
formatFilters(childData);
setPage(0);
setSearchParams(childData);
setRooms([]);
Expand All @@ -90,7 +104,7 @@ function Home() {
custom: true,
customHeader: false,
},
children: <Filter closeModal={closeModal} getChildData={getChildData} />,
children: <Filter closeModal={closeModal} getChildData={getChildData} focus={clickedChip} />,
});
};

Expand All @@ -106,10 +120,6 @@ function Home() {
};

useEffect(() => {
if (!page) {
return;
}

const fetchData = async () => {
const data = await getRooms({ ...searchParams, page });
setRooms((prevRooms) => [...prevRooms, ...(data?.content || [])]);
Expand Down Expand Up @@ -137,28 +147,43 @@ function Home() {
};

// Chip 클릭 했을 때 이벤트
const handleChipClick = (label: React.SetStateAction<string>) => {
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) => {
Expand All @@ -168,33 +193,31 @@ function Home() {
};
});

// 선택된 칩이 없거나 클릭된 칩이 삭제된 칩인 경우에 맨 처음 칩을 clickedChip으로 설정
if ((clickedChip || '') === '') {
setClickedChip(filters?.[0]);
}
// if ((clickedChip || '') === '') {
// setFilters(() => [...defaultFilters]);
// }
};

return (
<div>
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }} className="mb-[8px]">
<FilterImg
className="stroke-g7 stroke-[2] cursor-pointer "
onClick={openFilterPopup}
style={{ alignSelf: 'flex-start' }}
/>
{filters.map((label, index) => {
return (
<div style={{ marginLeft: index === 0 ? '4px' : '0', marginRight: '-4px' }} key={index}>
<>
<div className="mb-[8px] flex">
<div className="mr-[4px]" onClick={openFilterPopup}>
<FilterImg className="stroke-g7 stroke-[2] cursor-pointer " style={{ alignSelf: 'flex-start' }} />
</div>
<div className="whitespace-nowrap overflow-x-auto">
{filters.map((filter, index) => {
return (
<Chip
key={`${label}-${index}`}
label={label}
onDelete={() => 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}
/>
</div>
);
})}
);
})}
</div>
</div>
<Typography variant="body" customClassName="text-left font-bold text-[16px] text-g7">
There are <span className="text-r1">{`${totalElements} rooms`}</span> in total!
Expand All @@ -213,7 +236,7 @@ function Home() {
</div>
</div>
</div>
</div>
</>
);
}

Expand Down

0 comments on commit c4e9153

Please sign in to comment.