[9.14(목) 북스탁 프로젝트] 도서 검색결과 페이지를 만들어보자 ~!

 

 

 

일단 주요기능을 보여주기위해 간단하게 CSS를 만들었다.

백단까지 연결되면 예쁘게 만들어볼 예정이다~!

 

헤더의 검색창에서 도서명을 검색하면

현재 북스탁에 등록되어있는 경매건들이 검색되어진다.

 

 

 

지금의 데이터베이스에는 경매건이 등록되어있지않기 때문에 일단은 

 

  const [books, setBooks] = useState([
    {
      id: 1,
      title: '어린왕자',
      coverImage: 'http://placeholder.com/50x70',
      startPrice: '11,000',
      updatePrice: '9,000',
      userId: '닉네임',
      startDate: '2023-09-12',
      endDate: '2023-09-27',
      views: 10,
      interest: 0
    }
  ]);

 

useState로 임의로 초기값을 설정해놓았다.

반응형

 

 

        <tbody className="table-group-divider">
          {books.map((book) => (
            <tr key={book.id}>
              <th scope="row">{book.id}</th>
              <td><img src={book.coverImage} alt="" /></td>
              <td><Link to={`/${book.id}`}>{book.title}</Link></td>
              <td>시작가: {book.startPrice}원
                <br />현재가: {book.updatePrice}원</td>
              <td><Link to={`/${book.userId}`}>{book.userId}</Link></td>
              <td>{book.startDate} /<br />{book.endDate}</td>
              <td>{book.views}</td>
              <td>

                {/* 관심등록 버튼 */}
                <button className='interestBtn'>
                  <img
                    src="https://cheolsusee.com/img/es_img/btn_rows_scrap_add_05.png"
                    alt=""
                  />
                </button>
                {book.interest}
              </td>
            </tr>
          ))}
        </tbody>

 

이렇게 tbody의 코드를 구성했다.

아직 백단이랑 연결을 하지않고 임의로 작성을 해놓았기때문에 {}값은 정확하지 않다.

 

검색결과페이지를 만들어 놓으니까 점점 역경매라는 주요 기능구현에 다가가고 있는 것 같아 신기한 기분?

설레는 기분이 든다.ㅎㅎ