next.js grid, map 안의 background image 최적화 및 글자 위에 보이기 | pages router

 

[참고]

Optimizing: Images | Next.js

 

 

1. next/Image 태그를 import 한다

2. fill 과 objectFit, sizes를 아래코드와 같이 설정한다.

3. Image태그의 부모요소에 position: "relative"를 설정한다. (크기가 지정되어있지 않을 경우 width, height도 설정)

 

++ background-image 위에 글자 보이게 하는법 

4. Image태그의 부모요소 (여기서는 Item)의 background-color를 투명하게 만든다. 

5. 글자를 div 태그로 감싸고 absolute를 준다.

6. 중앙정렬 한다.

7. z-index를 넣어 앞에 위치하게 한다.

 

 

전체코드

import React from "react";
import { Grid, Paper } from "@mui/material";
import { experimentalStyled as styled } from "@mui/material/styles";
import { countinents, mainCountries } from "@statics/continents";
import { useRouter } from "next/router";
import { MainCountriesProps } from "types/regions";
import Image from "next/image";

const Continent = () => {
	const Item = styled(Paper)(({ theme }) => ({
		width: 179,
		height: 170,
		padding: theme.spacing(7),
		justifyContent: "center",
		textAlign: "center",
		textShadow: "0px 0px 5px #FFF",
		fontWeight: 700,
		color: "black",
		position: "relative",
		bgcolor: "transparent",
		cursor: "pointer"
	}));

	const router = useRouter();

	const handleContinent = (item: string) => {
		let continent = item.toLowerCase().replace(/ /g, "_");
		router.push({
			pathname: "/magazineList",
			query: {
				continent: continent,
				title: item,
			},
		});
	};

	const handleMainCountries = (item: MainCountriesProps) => {
		router.push({
			pathname: "/magazineList",
			query: {
				region_id: item.regionId,
				title: item.name,
			},
		});
	};

	return (
		<>
			<Grid container spacing={3}>
				{countinents.map((item, index) => (
					<Grid item md={3} key={index}>
						<Item
							onClick={(e) => {
								e.preventDefault();
								handleContinent(item as string);
							}}>
							<Image
								src={`/images/continent/${item
									.toLowerCase()
									.replace(/ /g, "_")}.svg`}
								alt={item}
								fill
								sizes="100vw"
								style={{
									objectFit: "cover",
								}}
							/>
							<div
								style={{
									position: "absolute",
									top: "50%",
									left: "50%",
									transform: "translate(-50%, -50%)",
									zIndex: "1",
								}}>
								{item}
							</div>
						</Item>
					</Grid>
				))}
			</Grid>
		</>
	);
};

export default Continent;