[재활용 프로젝트][리액트] 카카오 api map scss모듈 적용

목차

 

이번 프로젝트를 하면서 scss를 처음 써보게 되어서 scss로 map을 구성한 것을 정리해 보려고 한다.

 

완성된 모습

버튼을 맵 위에 올려 놓으려고 애를 좀 먹었다..

 

KaKaoMap.module.scss

.category {
  display: flex;
  flex-direction: row;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
}
.mapWrap {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}
.category_button {
  // border-radius: 10px;
  width: 100px;
  height: 100px;
  border: none;
}

 

 

scss모듈 불러와서 본 map에 적용하기

import React, { useEffect, useRef, useState } from 'react';
import getGeolocation from 'utils/getGeolocation';
import {
  Map,
  MapMarker,
  MapTypeControl,
  ZoomControl,
} from 'react-kakao-maps-sdk';

import Marker, { MarkerProps } from './Marker';
import markers, { DataMarkerProps } from './data';
import styles from './KaKaoMap.module.scss';
import UseKakaoLoader from './UseKakoaLoader';

const { kakao } = window;

export default function KaKaoMap() {
  UseKakaoLoader();
  const { longitude, latitude } = getGeolocation();
  const mapRef = useRef<kakao.maps.Map>(null);
  // 초기 배열 기본값
  const FirstMarker: DataMarkerProps[] = markers.filter(
    (category) => category.name === 'coffee',
  );
  const [selectedCategory, setSelectedCategory] =
    useState<DataMarkerProps[]>(FirstMarker);
  // 누른 마커만 표시하는 함수
  function DeleteMarks(name: string) {
    // 원본 배열 가져옴
    setSelectedCategory(markers);
    const newMarkers: DataMarkerProps[] = markers.filter(
      (category) => category.name === name, // 일치하는 배열만 추출
    );

    // 배열 재설정
    setSelectedCategory(newMarkers);
  }

  return (
    <div>
      <div className={styles.mapWrap}>
        <Map
          center={{
            lat: latitude,
            lng: longitude,
          }} // 지도의 중심 좌표
          style={{
            width: '100vw',
            height: '100vh',
            position: 'relative',
            overflow: 'hidden',
          }} // 지도 크기
          level={3} // 지도 확대 레벨
          ref={mapRef}
        >
          <MapTypeControl position="TOPRIGHT" />
          <ZoomControl position="RIGHT" />
          <MapMarker position={{ lat: latitude, lng: longitude }}>
            {/* <div style={{ padding: '5px', color: '#000' }} /> */}
          </MapMarker>
          {/* 맵 중첩이가능함 */}
          {selectedCategory.map((mark: DataMarkerProps, index: number) => {
            return (
              <Marker
                key={`${mark.Positions[index].lat},${mark.Positions[index].lng}`}
                Positions={mark.Positions}
                Origin={mark.Origin}
              />
            );
          })}
        </Map>

        <div className={styles.category}>
          {markers.map((mark, index: number) => {
            return (
              <button
                type="button"
                className={styles.category_button}
                key={`${mark.Positions[index].lat},${mark.Positions[index].lng}`}
                onClick={() => DeleteMarks(mark.name)}
              >
                <img
                  src={`/img/${mark.name}.png`}
                  alt="img"
                  width="100px"
                  height="100px"
                />
                {/* {mark.name} */}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

 

 

적용 방법

import styles from './App.module.scss';


function App() {
  return (
    <div className={styles.App}>
      <header className={styles.header}>
        <img src={logo} className={styles.logo} alt='logo' />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className={styles.link}
          href='https://reactjs.org'
          target='_blank'
          rel='noopener noreferrer'
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

 

 

참고

https://velog.io/@seul06/React-Component-Styling

SCSS & CSS Module