뉴스피드 프로젝트의 시작!!!!!
역시 처음 시작은 막막하다..ㅠㅠ😭😭 API를 받아오기 전까지 더미 데이터로 작업을 진행하며 필요한 정보를 더미 데이터에 입력하며 진행하는데 단순히 기능 구현만을 생각하기보다는 더미 데이터에서의 조건을 만들고 넣어야 하기에 머리가 터질뻔!!!!🔥🔥
아래는 오늘 개발한 부분!!!!
//임시 로그인 정보
const fakeId = userData[0].idx;
function Home() {
const naviGate = useNavigate();
const goToButtonClick = (id) => {
naviGate(`/detail/${id}`);
};
//리 랜더링될 때마다 false값이 부여되어 책의 전체가 계속 보인다. 해결방법) 못찾음 ㅠㅠ
const [loginCheck, setLoginCheck] = useState(false);
//로그인 여부 확인
const loginData = userData.find((user) => (user.idx === fakeId ? true : false));
//좋아요 및 날짜 기준으로 정렬
// 좋아요 내림차순, 날짜는 오름차순
const orderData = loginData.review.sort((a, b) => {
//좋아요가 같을 경우
if (a.like === b.like) {
//날짜를 기준으로 정렬
return new Date(a.date) - new Date(b.date);
}
return b.like - a.like;
});
console.log(orderData);
// 사용자가 작성한 리뷰의 책에 대한 정보
const reviewBook = bookData.filter((bookItem) => {
return orderData.find((reviewItem) => reviewItem.itemId === bookItem.itemId);
});
useEffect(() => {
setLoginCheck(loginData);
}, []);
return (
<>
<header>
<div>HOME</div>
<div>
<button>마이페이지</button>
<button>로그인</button>
</div>
</header>
<Test>
{loginCheck ? (
<>
<List />
</>
) : (
reviewBook.map((book) => (
<div key={book.itemId}>
<img src={book.coverSmallUrl} alt="대체이미지" />
<p>{book.title}</p>
<div>
<span>{book.publisher}</span>
<button
onClick={() => {
goToButtonClick(book.itemId);
}}
>
button
</button>
</div>
</div>
))
)}
</Test>
<footer>
<span>github</span>
<p>주소 링크</p>
</footer>
</>
);
}
export default Home;