[클라우딩 어플리케이션 엔지니어링 TIL] 240123 - 고양이 사진 검색 실습 6

Intro

---

추가 요구 사항 해결 하기에 대한 강의를 들었다.

전날 모의테스트에서 풀었던 마우스 오버 문제를 나는 이벤트 헨들러로 구현했는데 강사님은 CSS로 훨씬 간단하게 구현했다.

 

 

 

오늘 학습한 내용

---

---

👩‍💻 검색어 히스토리를 숨겼다가 인풋에 마우스가 오버될 때 보여주도록 UI를 바꿔주세요.

• style.css

.SearchResult .item .content {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-align: center;
  font-size: 30px;
  opacity: 0;
  transition: all 0.5s ease;
}

.SearchResult .item .content:hover {
  opacity: 1;
}

 

요소를 투명하게 만드는 opacity 속성을 이용해 처음엔 투명이었다가 마우스가 오버되었을 때 opacity를 1로 바꿔 화면에 노출되게 하는 방법이다.

자연스럽게 노출되기 위해 transition 속성도 적용하였다.

이 방법을 사용하려면 position: absolute; 를 활용해서 위치를 적절히 배치해주어야 한다.

JS에서 mouseover/out 이벤트를 적용하는 것보다 훨씬 구현이 간단하고 명확하다.

전날 TIL에서 봤듯이 mouseover/out 이벤트를 적용하면 코드도 훨씬 길어지고 직관적이지 않아 코드 보기 불편하다.

CSS로 설정할 수 있는 건 먼저 CSS를 활용하는 습관을 들여야겠다.

 

 

---

👩‍💻 모달 열고 닫기에 fade in/out을 적용해 주세요.

 

• style.css

.ImageInfo {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.ImageInfo.show {
  visibility: visible;
  opacity: 1;
}

 

• ImageInfo.js

setState(nextData) {
  this.data = nextData;
  this.render();
  this.setFade(nextData.visible);
}

setFade(visible) {
  if (visible) this.$imageInfo.classList.add('show');
  else this.$imageInfo.classList.remove('show');
}

 

 

 

---

👩‍💻 검색 결과 각 아이템에 마우스 오버시 고양이 이름을 노출합니다.

 

어제 풀었던 문제!!

CSS의 :hover 속성으로 아주 간단하게 다시 구현했다.

위의 검색어 히스토리를 숨겼다가 인풋에 마우스가 오버될 때 보여주도록 UI를 구현하는 문제에서 해결한 방법대로 진행했다.

.SearchResult .item {
  position: relative;
  background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
  cursor: pointer;
}

.SearchResult .item .content {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-align: center;
  font-size: 30px;
  opacity: 0;
  transition: all 0.5s ease;
}

.SearchResult .item .content:hover {
  opacity: 1;
}

 

content 클래스를 가진 div 요소에 고양이 이름을 표현하였는데 width, height를 100%로 설정한 뒤 top: 50%으로 지정하면 이미지 가운데에 글자가 올 수 있다.

 

 

---

👩‍💻 최대 검색 결과 갯수를 설정할 수 있는 select UI를 제공해 주세요.
option은 10개, 25개, 50개 입니다. (api는 50를 기본으로 지원하므로 BE 수정 필요)

 

select 요소를 추가하여 option 값에 따라 data를 가져오는 기능을 구현했다.

• api.js

const api = {

  ...
  
  fetchCatsWithLimit: (keyword, limit) => {
    return request(`${API_ENDPOINT}/api/cats/search?q=${keyword}&limit=${limit}`);
  },
  
  ...
}

• SearchInput.js

...
    // select UI
    const $limitCount = document.createElement('select');
    this.$limitCount = $limitCount;
    this.$limitCount.classList = 'LimitCount';

    $wrapper.appendChild(this.$limitCount);

    const LimitCountOptions = [10, 25, 50];
    LimitCountOptions.map((option) => {
      let $option = document.createElement('option');
      $option.value = option;
      $option.textContent = `${option}개`;

      $limitCount.appendChild($option);
    });

...

 

onSearch에 매개변수를 기존에 keyword 하나만 받았는데 limit을 추가로 받아 api를 호출하도록 구현했다.

 

 

 

---

👩‍💻 랜덤 고양이 배너 섹션 추가현재 검색 결과 목록 위에 배너 형태의 랜덤 고양이 섹션을 추가합니다.
앱이 구동될 때 /api/cats/random50 api를 요청하여 받는 결과를 별도의 섹션에 노출합니다.
검색 결과가 많더라도 화면에 5개만 노출하며 각 이미지는 좌, 우 슬라이드 이동 버튼을 갖습니다.
좌, 우 버튼을 클릭하면, 현재 노출된 이미지는 사라지고 이전 또는 다음 이미지를 보여줍니다. (트렌지션은 선택)

 

배너를 만들기 위해서는 CSS 스킬(?)이 필요하다.

Banner.js 코드에서 구현해야 할 것은..

1. banner 요소의 width 크기를 (배너 크기 * 배너에 보여 줄 이미지 갯수)로 지정해줘야 한다.

this.$banner.style.width = Number(this.$wrapper.clientWidth) * this.data.length + 'px';
this.$banner.querySelectorAll('li').forEach((item) => {
  item.style.width = this.$wrapper.clientWidth + 'px';
});

 

2. css에선 overflow: hidden 처리를 해줘야 함 + float: left로 배너 이미지인 li 요소들을 왼쪽에서 오른쪽으로 붙여준다.

.Banner {
  width: 100%;
  height: 300px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  position: relative;
}

.Banner ul {
  margin: 0;
  padding: 0;
  position: absolute;
  transition: all 0.3s ease;
}

.Banner ul li {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 300px;
  background-position: 50% 50%;
  background-size: cover;
}

.Banner button {
  position: absolute;
  top: 50%;
  z-index: 10;
  cursor: pointer;
}

.Banner .prevBtn {
  left: 10px;
}

.Banner .nextBtn {
  right: 10px;
}

 

3. prev/next button 요소를 클릭했을 때 배너 이미지가 넘어가는 기능 구현하기

changeCurrent(index) {
  this.current = index;
  this.moveTo(index);
}

moveTo(index) {
  let leftPosition = -Number(this.$wrapper.clientWidth) * index;
  this.$banner.style.left = leftPosition + 'px';
}

this.$prevButton.addEventListener('click', (e) => {
  let prev = this.current - 1;
  if (prev === -1) return;
  this.changeCurrent(prev);
});

this.$nextButton.addEventListener('click', (e) => {
  let next = this.current + 1;
  if (next === this.data.length) return;
  this.changeCurrent(next);
});

 

 

 

 

마무리

---

크게 어려운 내용은 없었지만 하다보면 CSS가 오히려 복잡해질 것 같은 느낌이다...

배너 UI도 웹페이지 개발에 거의 필수인데 다양한 방법으로 구현하는 것을 또 공부해봐야겠다.

공부할 게 너무 너무 너무 많다.