Javascript에서 View-Master 효과 재현

저는 이번 주에 표준 썸네일 보기를 기반으로 서브렛을 공유하고 찾기 위한 플랫폼인 React 프로젝트를 작업하고 있었습니다. 예를 들어 목록 보기(아파트에는 쓸모가 없습니다!) 또는 지도 보기와 반대입니다. 아파트 찾기는 연애와 같다. 귀찮게 보러 가기 전에 먼저 보고 싶은 것이다.

각 목록은 개별 구성 요소로 렌더링되었습니다. 여기에 썸네일 사진을 통합하는 것은 충분히 쉬웠습니다. 내가 초안을 작성한 db.json 파일에 저장된 대로 목록 개체 내의 이미지 배열에서 첫 번째 이미지를 호출하기만 하면 되었습니다. 개체는 다음과 같이 생겼습니다.

{
      "id": 3,
      "title": "Sun-dappled 1 bedroom",
      "description": "Clean and open 1 bed 1 bath apartment right in the middle of downtown LA. Come take a look today and make it your own!",
      "location": "Los Angeles, California",
      "price": 2170,
      "bedrooms": 1,
      "baths": 1,
      "availability": "10/11",
      "email": "[email protected]",
      "image": [
        "./images/image3.jpg",
        "./images/image9.jpg",
        "./images/image16.jpg"
      ]
    }

따라서 html 구성 요소는 <img src={listing.image[0]} alt={listing.title} />와 같이 간단합니다.

그러나 썸네일 보기에 남아 있는 동안 이미지를 뒤집어 이미지를 미리 볼 수 있는 효과를 얻는 방법은 무엇입니까? View-Master 릴을 통해 보는 것처럼?

나는 온라인에서 스니핑한 .png 아이콘을 사용하여 이미지를 마운트할 두 개의 버튼(오른쪽과 왼쪽)을 만들기로 결정했습니다. 수동으로 위치를 지정하고 .css 파일에 호버 효과를 생성하여 기본적으로 보기에서 숨겨지고 방문하는 커서를 정중하게 맞이할 때만 나타납니다.



코드는 매우 간단했습니다.

CSS:

.button-container {
  visibility: hidden;
}

.image-container:hover .button-container {
  visibility: visible;
}

js:

<div className="image-container">
  <img src={listing.image[0]} alt={listing.title} />
  <div className="button-container">
    <button className="right-btn"><span className='right-icon'></span></button>
    <button className="left-btn"><span className='left-icon'></span></button>
  </div>
</div>

그러나 실제 기능은 어떻습니까? 저는 항상 두 가지 상태의 솔루션을 선호해 왔습니다. 그래서 위에서 저는 이미지에 대한 상태를 설정했고, 자연스럽게 첫 번째로 기본값이 설정되었고, 호출할 이미지 인덱스에 대한 상태는 자연스럽게 기본값이 0으로 설정되었습니다.

const [imageToDisplay, setImageToDisplay] = useState(listing.image[0])
const [imageToDisplayIndex, setImageToDisplayIndex] = useState(0)

그런 다음 반환된 html 구성 요소를 업데이트하여 상태 변수와 필수 onClick 기능을 통합했습니다.

<div className="image-container">
  <img src={imageToDisplay} alt={listing.title} />
  <div className="button-container">
    <button onClick={handleRightClick} className="right-btn"><span className='right-icon'></span></button>
    <button onClick={handleLeftClick} className="left-btn"><span className='left-icon'></span></button>
  </div>
</div>

상태 변수를 업데이트해야 하는 앞에서 언급한 핸들 함수만 남았습니다. 오른쪽 클릭에 대한 간단한 알고리즘을 구성했습니다. 배열의 길이가 여전히 1 + 인덱스(또는 소위 "imageToDisplayIndex")보다 크면 인덱스를 1씩 늘리고 이미지를 업데이트합니다. 아직 배열의 끝에 도달하지 않았기 때문입니다. (인덱싱이 0에서 시작하기 때문에 1을 추가해야 합니다.) 그렇지 않으면 최종 이미지에 도달했다고 말하고 카운터를 재설정하고 이미지를 배열의 첫 번째 이미지로 만듭니다.
(기본 구성 요소를 클릭할 수 있으므로 stopPropagation()도 호출해야 합니다. 그렇지 않으면 오른쪽 버튼을 클릭하면 전체 목록 카드를 클릭하는 것처럼 작동합니다.)

왼쪽 클릭의 경우 논리는 동일하며 반대입니다. 첫 번째 이미지보다 앞서 있는 경우 인덱스를 1씩 줄입니다. 그러나 첫 번째 이미지에 있는 경우 인덱스와 이미지를 배열의 마지막 이미지로 설정합니다(즉, 배열의 길이 - 1).

function handleRightClick(e){
  e.stopPropagation()
  if (listing.image.length > (imageToDisplayIndex+1)){
    setImageToDisplay(listing.image[imageToDisplayIndex+1])
    setImageToDisplayIndex(imageToDisplayIndex+1)
  }
  else{
    setImageToDisplayIndex(0)
    setImageToDisplay(listing.image[0])
  }
}

function handleLeftClick(e){
  e.stopPropagation()
  if (imageToDisplayIndex > 0){
    setImageToDisplay(listing.image[imageToDisplayIndex-1])
    setImageToDisplayIndex(imageToDisplayIndex-1)
  }
  else{
    setImageToDisplay(listing.image[listing.image.length-1])
    setImageToDisplayIndex(listing.image.length-1)
  }
} 

결과는 다음과 같습니다! 물론 이것들은 뻔뻔한 재고 사진입니다. 분명히 그들은 같은 속성에 속하지 않습니다.



어딘가에 있는 일부 라이브러리를 이용하여 이것을 작성하는 보다 효율적인 방법이 있다고 확신합니다. 하지만 부동산 게임에 뛰어들려면 직접 해보는 연습을 해야 하지 않나요?