아웃소싱 프로젝트(1)

아웃소싱 프로젝트... 이번에는 간단하게 인포윈도우를 띄우는 작업과 전반적인 스타일링을 했다.

인포윈도우

원래는 MapMarker만 있었는데, 관련 문서도 찾아보면서 아래 코드를 추가했었다.

			clickable={true}
            // onMouseOver={() => setIsOpen(true)}
            onMouseOver={() => onMarkerMouseEventHandler(item.id, 'over')}
            onMouseOut={() => onMarkerMouseEventHandler(item.id, 'out')}

그리고 마커에 마우스를 갖다대면 마우스 오버관련 State를 만들어줬었다.
그래서 아래처럼 최종적으로 코드를 만들었었다.

          <MapMarker // 인포윈도우를 생성하고 지도에 표시합니다
            key={`${item.x - item.y}`}
            position={{ lat: item.y, lng: item.x }}
            clickable={true}
            // onMouseOver={() => setIsOpen(true)}
            onMouseOver={() => onMarkerMouseEventHandler(item.id, 'over')}
            onMouseOut={() => onMarkerMouseEventHandler(item.id, 'out')}
          >
            {isOpen && item.id === selectedMarker && (
              <div style={{ padding: '5px', color: '#000' }}>
                <p>{item?.place_name}</p>
                <p>{item?.phone}</p>
              </div>
            )}
          </MapMarker>

스타일링

색상을 고민하다가 최종적으로 모던하고 눈이 편안한 브라운계열로 컬러를 찾아서 적용했었고, 일러스트레이터로 필요한 아이콘들을 약간 수정도 했었다.

물론 관련해서 스타일링도 많이 했었다.
스타일링은 머릿속 생각대로 그대로 할때면 짜릿한 기분이 들었다.

그리고 용승님의 요청에 따라 작은 PC에서도 잘 보이도록 반응형 작업을 했다.
미디어쿼리로 작업하는건 역시 조금 불편하다. 좀더 좋은 게 있는지 찾아봐야할 것 같다.

오늘의 한줄평 : 너무 졸린다... 그렇지만 힘내자!