2024.06.19 Today Yoonsung Learned

TIL

아웃소싱 팀프로젝트

1. Tab에 있는 항목들로 List에있는 카드정보들을 정렬할수있도록 기능구현하기

<div role="tablist" className="tabs tabs-boxed ml-auto">
	{
		[
			{value: '', label: "전체"},
			{value: "음식", label: "식당"},
            {value: "카페", label: "카페"},
            {value: "숙박", label: "펜션"},
            ].map((tab, index) => (
            <button key={index} role="tab" className={`tab ${filter === tab.value ? "tab-active" : ""}`} onClick={() => {
            setFilter(tab.value);
            }}>{tab.label}</button>
	))
	}
</div>

• all, 음식, 카페, 숙박 이라는 카테고리 별로 불러온 API 데이터 안에서 필터링 될수있게끔 useState와 useEffect 사용

const [ filteredMarkers, setFilteredMarkers ] = React.useState([]);
    useEffect(() => {
        console.log("filter", filter);
        setFilteredMarkers(markers.filter(marker => 
            filter === '' || marker.category_name.includes(filter)
        ));
    }, [markers, filter]);

,

 return (
            <div className="grid grid-cols-3 max-2xl:grid-cols-2 gap-10 box-border h-[74vh] md:overflow-y-auto">
                {(filteredMarkers ?? []).map((marker, index) => (
                    <div className="card max-w-xs bg-violet-50 shadow-xl" key={index} data-id={marker.id}>
         			.
         			.
         			.
         			.
         			.
			</div>