원하는 대로 설정할 수 있는 자유로운 이미지 레이아웃 만들기

 

nextJS 기반 웹사이트를 제작중이고 

컨텐츠를 사용자가 자유롭게 업로드하고 수정 및 삭제할 수 있어야 하기 때문에 cms(contentful)를 이용해 컨텐츠를 관리하고 데이터를 연결해 사용했다. 

 

웹사이트 제작 요구사항중 하나가

여러개의 이미지를 원하는 레이아웃 구성으로 배열하고 원할때 레이아웃 구성을 바꿀 수도 있게 하는 것이였다!

 

처음에 생각한 방법은 사용자 입장에서도 너무 불편하고 개발자 입장에서도 비합리적인 방법이였다. 

이미지를 저장하는 필드를 여러개 만들어놓는 방법을 생각했다.

1레이아웃 필드, 2레이아웃 필드를 번갈아가면서 여러개 만들어놓고,

원하는 필드에 이미지를 넣어 원하는 구성을 만들 수 있도록 했다.

 

그래서 사용자가 더 쉽고 자유롭게 이미지를 구성하는 방법을 고민했다.

사용자 입장에서는

1. 페이지에 넣을 이미지를 선택해 업로드하고

2. 원하는 레이아웃을 쉼표로 구분해 입력하면 된다. ex) 1,2,2,1,2

 

코드로 구현하기

images : 이미지 url이 저장된 리스트 

layoutArr :  사용자가 입력한 레이아웃 리스트 ex) layout = {1,2,2,1,2}

 

한 줄에 들어와야 할 이미지 url을 2차원 배열의 한 행에 저장하면 된다!

layoutArr = {1,2,2,1,2} 이면

layoutArr[0] = 1 이므로 imageArr[0] 에 image[0]

layoutArr[1] = 2 이므로 imageArr[1] 에 image[1], image[2]

layoutArr[0] = 2 이므로 imageArr[2] 에 image[3], image[4]

layoutArr[0] = 1 이므로 imageArr[3] 에 image[5]

layoutArr[0] = 2 이므로 imageArr[4] 에 image[6], image[7] 이 저장되는 것이다.

const createImageArr =(images, layoutArr)=>{
	const imageArr = [];
	let imageIdx = 0;
	for(let i = 0 ; i < layoutArr.length; i++){
		if(imageIdx > images.length - 1) break; //이미지랑 레이아웃 수가 안맞는 경우
		imageArr[i]=[];
		for(let j=0;j<layoutArr[i];j++){
			if(imageIdx > images.length - 1) break; //이미지랑 레이아웃 수가 안맞는 경우
			imageArr[i][j]= 'https:'+images[imageIdx++].fields.file.url || null;
		}
	}
	return imageArr;
}

const imageArray = createImageArr(images, layoutArr);

 

이미지들을 이차원 리스트에 저장했으면 이제 map함수로 이미지를 불러오면 된다.

행마다 flex 설정을 해주고 내부 아이템에 flex : 1 1 40% 해주면 된다. 

{imageArray.map((row, rowIndex) => (
	<div key={rowIndex} className="flex-layout">
		{row.map((imageURL, colIndex) => (
			<span key={colIndex} >
				<Image 
					alt="..."
					src={imageURL} 
					width={0} height={0}
					sizes="100vw"
				/>
			</span>
		))}
	</div>
))}

 .flex-layout{
    display: flex;
    flex-wrap: wrap;
    gap: 1.0417vw;
  }
  .flex-layout span{
    flex: 1 1 40%;
  }