search

JangAyeon / book_curly

도서 API + 마켓컬리
0 stars 0 forks source link

Component #13

Open JangAyeon opened 2 years ago

JangAyeon commented 2 years ago

⭐ 재사용성 높은 요소는 컴포넌트형으로 관리

JangAyeon commented 2 years ago

Category Section

image image
JangAyeon commented 2 years ago

카테고리 명에 따라 id로 API호출하는 방식 value : 화면에 사용자에게 보여줄 카테고리명 key : API 호출 시 사용자가 선택한 카테고리명으로 호출할 id 값

  const CategoryArray = [
    { key: 101, value: "소설" },
    { key: 101, value: "시/에세이" },
    { key: 119, value: "인문" },
    { key: 110, value: "아동" },
    { key: 112, value: "청소년" },
    { key: 117, value: "경제경영" },
    { key: 118, value: "자기계발" },
    { key: 122, value: "컴퓨터/인터넷" },
    { key: 115, value: "국어/외국어" },
    { key: 200, value: "외국도서" },
    { key: 428, value: "블루레이" },
    { key: 400, value: "CD/DVD" },
  ];
JangAyeon commented 2 years ago

https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute

JangAyeon commented 2 years ago
image

  1. map 함수로 카테고리 버튼 생성

    • li 태그 속성 value값으로 카테고리 key 값 부여 - -> API 호출 params로 이용 -> 해당 값으로 이전 클릭, 현재 클릭 카테고리 비교해서 CSS 부여
    • li 태그 내 value 값으로 카테고리명 
      <ul className="list">
{CategoryArray.map((Category) => (
  <li
    onClick={(e) => {
      setActive(e);
    }}
    value={Category.key}
  >
    {Category.value}
  </li>
))}
</ul>

  2. 이전 클릭 카테고리와 현재 클릭 카테고리 비교할 state 선언

    const [CurrentClick, setCurrentClick] = useState(CategoryArray[0].key); //카테고리 중 첫번째 default로
const [PrevClick, setPrevClick] = useState(null); //처음에는 이전 선택 없음

  3. 클릭 발생 시 클릭 li의 value로 CurrentClick의 state 설정

    const setActive = (e) => {
setCurrentClick(e.target.value);
};

  4. 현재 선택한 li 태그에 선택한 li 태그 class에 active 제거 & 이전에 선택한 li 태그 class에 active 제거

    useEffect(
(e) => {
  if (CurrentClick !== null) { //클릭을 통해 받은 카테고리 key
    console.log(CurrentClick);
    let current = document.querySelector(
      `div.Category ul.list li[value="${CurrentClick}"]`
    ); //클릭한 카테고리의 key를 value 속성으로 가진 li 받아오기
    console.log("curr_click", current);
    current.setAttribute("class", "active"); //li .태그 속성 중 class에 active 부여
  }

  if (PrevClick !== null) {  //이전에 선택한 카테고리가 있는 경우
    console.log(PrevClick);
    let prev = document.querySelector(
      `div.Category ul.list li[value="${PrevClick}"]`
    ); //이전의 선택 카테고리 key 값인 PrevClick과 li 태그 내 value를 이용해 DOM 가져오기
    console.log("prev_click", prev);
    prev.setAttribute("class", "");
//이전 선택으로 class에 부여된 active 삭제
  }
  setPrevClick(CurrentClick); 
//현재 클릭한 카테고리 key를 Prevclick 설정  
/*(다음번 새로운 카테고리 선택 발생 시 해당 PrevClick 값을 이용해 li 태그 받아옴 -> li 태그 속성의  class에 부여된 acitve 삭제*/
},
[CurrentClick]
);

  5. CSS 부여

    li {
  display: block;
  color: $txt-dark-gray;
  background-color: $bg-gray-1;
  line-height: 16px;
  margin: 0px 5px 20px;
  padding: 10px 20px;
  border-radius: 22px;
  &:hover {
    cursor: pointer;
    color: $bg-sub-purple;
    background-color: $bg-light-purple;
  }
}
li.active {
  color: $main-white;
  background-color: $main-purple;
}
JangAyeon commented 2 years ago

Grid Book List

  1. 한 줄에 3개씩 나열

    .Grid {
@include CenterContainer();
@include flexCenter();
display: grid;

/* 3개씩 반복해서 배열 */
grid-template-columns: repeat(3, auto);

/* 간격 조정 */
gap: 0px 5%;
}

  2. 책 각기 다른 이미지 사이즈 조절 이미지 div 높이 지정하고 너비는 grid에 조정한 값을 100% 채우기

    .Item_img {
height: 435px;
img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
}
}

  3. 사진 아래 텍스트가 div에 담겨 서로 정렬이 어긋남 align-items: start; 를 통해 세로 정렬 기준 설정 (위쪽 맞춤)

JangAyeon commented 2 years ago

User Profile