240920 팀 프로젝트 몽글로드 5 - 선 색상 변경

이렇게 해서 맵으로 돌려줬더니 빨간색, 파란색 버튼만 화면에 보인다. (애국)
혹시 테일윈드 문제인가 싶어서 찾아보니까, 테일윈드는 콘플라워블루 이런거 취급안한단다. 내 최애 색인데 😥

어쩔 수 없이 스타일로 따로 빼줬더니 색이 좀 킹받게 변했다. 일단 다 제대로 뜨는거에 만족!
글고 코드스냅 줄 공백 왜 저런지 모르겠는데 내가 저런식으로 짠 거 아님..

선택한 색상을 지도에 반영하는 것까지 했다.

근데 생각해보니, 선 색만 바꿀게 아니라 채우기 색도 바꿔줘야했다.😅
뭔가 선 색상을 색상이름으로 설정하지않고, 헥스코드로 설정해주고 헥스코드를 손봐주면 동적으로 변경가능하지 않을까 싶어서 찾아봤다.

찾아보니 헥스코드 뒤에 숫자를 넣어서 투명도를 바꿔줄 수 있었다.(#000000=> #00000026)
뭔가 있을 것 같은데? 하고 찾아보면 의외로 다 있다! (근데 쉽게 색상을 진하게 만들어주는 건 없었다. 있으면 제보 부탁드립니다.)

잘 나온당 ㅎㅎ

const [selectedLineColor, setSelectedLineColor] = useState([]); 
// 중략
    const getRouteData = async () => {
      try {
// 중략       
        const names = response?.data.map((route) => route.routeName);
// 선 색 저장
        setSelectedLineColor(lineColor);
// 중략
              <Polygon
                path={path}
                strokeWeight={2}
                strokeColor={selectedLineColor[index] ? selectedLineColor[index] : "#FF7F50"}
                strokeOpacity={0.8}
                strokeStyle={"shortdash"}
                fillColor={selectedLineColor[index] ? selectedLineColor[index] + "80" : "#FF7F5080"}
                fillOpacity={0.7}
              />