The Book I Read #7

간단하게 스타일의 변화를 주려고 한다. 일단 최초 메인 화면 시 나타나는 data의 개수를 줄이고 후에 버튼을 클릭함으로 나타나게끔 구현할 예정이다.

<div className="book-container">
        <h1 className="book-title">
          <img src="https://velog.velcdn.com/images/minhyepark-dev/post/ecfb987e-f0cb-43c3-86f9-bffa58e9ba1c/blog_book2.jpg" />
        </h1>
        <div className="books">
          {books.slice(0, more).map((book) => (
            <div className="book" key={book.id}>
              {book.cover && <img src={book.cover} alt="" />}
              <h2>{book.title}</h2>
              <p>{book.desc.slice(0, 50)}...</p>
              <span>{book.price}원</span>
              <div className="btn-wrap">
                <button className="duBtn" onClick={() => handleDelete(book.id)}>
                  🗑 삭제
                </button>
                <button className="duBtn">
                  <Link className="link" to={`/update/${book.id}`}>
                    🖋 수정
                  </Link>
                </button>
              </div>
            </div>
          ))}
        </div>
        <div className="addmore-wrap">
          <span
            className={more < books.length ? `moreBtn` : `noBtn`}
            onClick={() => setMore(more + 2)}
          >
            👇
          </span>
          <button className="addBtn">
            <Link to="/add" className="link">
              🔥 독후감 쓰기
            </Link>
          </button>
        </div>
      </div>

최초 데이터를 가져와 slice를 통하여 more값만큼 보여지게 한 후, 증가하는 값에 따라 class명을 변경하여 스타일링 하였다.

.moreBtn {
      position: absolute;
      bottom: 6%;
      right: 4%;
      color: var(--btn-font-color);
      font-size: 1.5rem;
      cursor: pointer;

      &:hover {
        bottom: 0;
        transition: all 0.2s ease;
      }
    }
    .noBtn {
      display: none;
    }

모바일 버전과 데스크탑 버전