도서 정리 프로젝트(3)

스타일/레이아웃

• 포인트 컬러 : 책은 가을의 양식, 가을하면 따듯한 베이지톤이 생각났다. 또, 이번 2022 트렌드 컬러를 참고하여 마침 우리나라의 인기 색상이 아래와 같은 색이었다. (#FFEBCD) 이렇게 확정은 아니지만 이런 비슷한 느낌의 컬러를 포인트로만 사용해볼 예정이다.
• 페이지 핵심 기능(검색) : 처음에는 내가 읽은 책 목록을 보여주는 것을 중심으로 진행하려고 했으나, 내가 필요한 책들을 찾고 기록하는게 핵심 기능이라고 생각했다. 그래서 사용자가 페이지에 접속했을 때, 검색창을 가장 접근하기 쉬운 상단에 위치시켰다.

페이지 레이아웃

• 내비게이션 바 : 스크롤을 내려도 검색창에 접근할 수 있도록 작은 검색창과 나의 페이지로 이동하기 위한 사용자 아이콘 버튼을 위치시켰다.
• 검색창 : 제목 검색만 가능하며, 검색 아이콘을 추가하여 버튼을 눌렀을 때, 상호작용 하도록 수정할 예정이다.
• 도서 목록
  • 페이지에 접속했을 때, 프론트엔드 검색어로 검색한 결과가 나타난다.
  • 카테고리 클릭 시, 목록이 해당 카테고리에 맞는 도서를 출력한다.
  • 목록은 10개씩 불러오며, 일정 스크롤을 내릴 경우 다음 10개를 출력한다. (무한스크롤)
  • 반응형을 고려하여 목록 표시

// BookList.js 컴포넌트

<section>
  <WrapBookList>
  <H2Title>도서 목록</H2Title>
    <ListCategory>
      <li><button type='button' name='frontend'>프론트엔드</button></li>
      <li><button type='button' name='webDev'>웹개발</button></li>
      <li><button type='button' name='webDesign'>웹디자인</button></li>
    </ListCategory>
    <SecFrontend>
      <H3hide>프론트엔드 도서 목록</H3hide>
      <ListBook> {/* 이후 API를 mapping한 코드로 변경할 예정 */}
        <Book />
        <Book />
        <Book />
        <Book />
        <Book />
        <Book />
        <Book />
        <Book />
      </ListBook>
    </SecFrontend>
  </WrapBookList>
</section>

 

/* Book.js 컴포넌트의 style-components */

const ItmeBook = styled.li`
  float: left;
  margin: 15px;
  width: calc(25% - 30px); /* 한 줄에 4개의 도서를 표시하기 위한 스타일, 각각 전체 width의 25%에서 양측 margin값(30px)을 뺀 값을 갖는다. */
  &:hover div {
    left: 0;
  }
  > button {
    width: 100%;
    padding: 0;
    overflow: hidden;
  }
`

 

예정 사항

1. 도서 목록에 mouseover 했을 경우 왼쪽에서부터 오른쪽으로 도서 화면을 채우며 도서 정보를 나타내주는 애니메이션이 있는데, 아직 영상기록을 못한 관계로 다음에 추가하자.
2. 도서를 클릭하면 해당 도서의 관련 정보를 출력해주는 모달창을 띄워주자.
   • 제목
   • 이미지
   • 소개
   • 저자
   • 출판일
   • 관련 링크