<aside> 📎 새로 개발한 SW 설명

</aside>

1️⃣  메인페이지

처음 접속했을 때의 메인 화면은 아래와 같다.

각 맛집 사진을 누르면, 상세정보 페이지로 이동한다.

사진 위에 마우스 hover 시, 맛집 정보를 확인할 수 있다.

배너 아래로 화면을 3행 3열로 나누어서, 각 맛집 사진들을 배치했다.

맛집 사진 위에 마우스를 올리면 맛집정보가 보이도록 구현했는데, 아래 함수를 사용해서 <MainIMG> 위에 마우스가 onMouseOver되면 isMouseOver(index) 함수가 호출이 되어 정보를 보여주는 info[index]가 true가 되도록 했다. 여기서 index는 각 맛집에 대한 인덱스이다.

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);
  }

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

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

<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>

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)};
`;

2️⃣ 리스트 페이지

왼쪽의 라벨에서 카테고리를 선택하면 위치별로 맛집 리스트를 확인할 수 있다.

리스트 페이지는 네비게이션바에 있는 #맛집리스트 를 눌러서 이동할 수 있다. 리스트 페이지에서는 맛집 데이터들을 “이대 정문, 이대 후문, 신촌” 으로 맛집 위치 카테고리에 따라 보여준다.

왼쪽 라벨을 클릭할 때마다 tab의 값이 달라져서 리스트의 목록들도 tab에 따라 바뀌게 된다.

let [tab, setTab] = useState(0); // 0 정문, 1 후문, 2 신촌

<ListPlace01
			tab={tab}
      onClick={() => {
			    setTab(0);
       }}
>
      이대 정문
</ListPlace01>
<ListPlace02
       tab={tab}
       onClick={() => {
         setTab(1);
	    }}
>
      이대 후문
</ListPlace02>
<ListPlace03
       tab={tab}
       onClick={() => {
         setTab(2);
      }}
>
      신촌
</ListPlace03>

이대 정문 식당에 대한 데이터베이스는 firestore에서 ‘place01’ 컬렉션에 있기 때문에, 컬렉션에 접근할 때 사용할 변수 ref 값을 다음과 같이 할당한다.

const ref = db.collection("place01");