[22-2] COMONG - 메인 페이지

ℹ️  페이지 소개

메인 페이지는 처음 접속했을 때 가장 먼저 보이는 화면이다. '무엇을 먹을지 고민될 때는? 커몽으로 COME ON' 배너 아래로 화면을 3행 3열로 나누어서 9개의 맛집 사진들을 배치했다.

커몽 추천 맛집은 우리 조가 추천하는 맛집으로, 매달 테마를 정해 그 테마에 맞는 식당을 세분화된 위치별로 9개 추천해 준다.

추가적으로 우측 사진처럼 맛집 사진 위에 마우스를 올리면 맛집 정보가 보이도록 구현했다.

🔎 코드 설명

let [info, setInfo] = useState([
    false, false, false, false, false, false, false, false, false,
]); // index 0번부터 8번까지 각각 정보를 보여줄지 말지 선택함

function outMouseOver(index) {
    let newInfo = [...info];
    newInfo[index] = false;
    setInfo(newInfo);
}

function isMouseOver(index) {
    let newInfo = [...info];
    newInfo[index] = true;
	setInfo(newInfo);
}

위 코드는 맛집 정보를 보여주는 기능의 주요 함수이다.<MainIMG> 위에 마우스가 onMouseOver 되면 isMouseOver(index) 함수가 호출이 되어 맛집 정보를 보여주는 info[index] 가 true가 된다. 여기서 index는 각 맛집에 대한 인덱스이다.

---

<Column1>
	<IMGWrap>
		<MainIMG
				src={main0}
        onMouseOver={() => {
		        isMouseOver(0);
        }}
        onClick={() => {
            navigate(`/detail/${MainData[0].id}`);
        }}
     />
   </IMGWrap>
	<IMGInfo
        info={info[0]}
        onMouseOut={() => {
              outMouseOver(0);
         }}
        onClick={() => {
              navigate(`/detail/${MainData[0].id}`);
         }}>
			<InfoContainer>
				<InfoCol>
					<Row1>
						<RestName>{MainData[0].name}</RestName>
            <RestCategory>| {MainData[0].category}</RestCategory>
					</Row1>
          <Row2>
            <MapPinIMG src={mappin} alt="mappin" />
            <InfoText>{MainData[0].address}</InfoText>
          </Row2>
          <Row3>
            <ClockIMG src={clock} alt="clock" />
						<InfoText>{MainData[0].business_hours}</InfoText>
          </Row3>
				</InfoCol>
			</InfoContainer>
	</IMGInfo>
</Column1>

다음 코드는 첫 번째 식당의 정보를 보여주는 기능을 구현한 부분이다.

이미지에 마우스가 오버되었을 때, info[0]가 true가 되기 때문에 이를 <IMGInfo> 태그의 styled component 에 전달해서 true일 때는 visibility 속성을 visible 로 설정하고, false일 때는 hidden 으로 설정해서 맛집 정보 화면이 마우스 오버 여부에 따라 결정되도록 했다.

<IMGInfo> 의 styled component 는 다음과 같다.

export const IMGInfo = styled.div`
  display: flex;
  justify-content: center;
  position: absolute;
  opacity: ${({ info }) => (info === true ? 0.9 : 1)};
  visibility: ${({ info }) => (info === true ? "visible" : "hidden")};
  top: ${({ info }) => (info === true ? "50%" : 0)};
  width: ${({ info }) => (info === true ? "90%" : 0)};
  height: ${({ info }) => (info === true ? "50%" : 0)};
  background: ${({ info }) => (info === true ? "rgba(255, 255, 255, 0.9)" : 0)};
`;