TIL 31. 2024-02-08

뉴스피드 프로젝트의 시작!!!!!

역시 처음 시작은 막막하다..ㅠㅠ😭😭 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;