SVG 썸네일형 리스트형 노래맞히기 게임 구현하기(feat. holwer.js, classList) 프로젝트: SNU FESTIVAL 키워드: trigger css animation, classList, svg, holwer.js, Web Audio API 상황: 페스월드 축제의 미니게임인 '노래 맞히기'는 노래의 아주 짧은 부분만 듣고 제목을 맞히는 게임이다. 키보드 조작이나 화면 터치를 통해 음악이 재생되도록 하고, 시각적인 재미를 줄 수 있도록 애니메이션도 곁들이고자 한다. 해결 과정 페이지 단에서 addEventListener로 키보드 조작을 감지하고, A를 눌렀다면 'KeyA'에 해당하는 음악과 애니메이션을 재생하면 된다. function reducer(state, action) { if (action.type === 'toggle') { const { key } = action; return.. 더보기 svg mask fill 속성은 white로 지정하기 프로젝트: loplat UI 키워드: svg, mask, fill 상황 팀원분께서 IconButton이라는 컴포넌트를 개발하셨는데, 이상한 점이 있다고 하셨다. "svg에 border와 동일한 색상을 설정했는데 svg의 색상이 border색상보다 좀더 밝게 나타납니다." 실제로 확인해보니 border color와 svg fill 에 동일한 색상을 전달하지만, storybook 상에는 색상이 다르게 보이는 것을 확인했다. border-color: ${({ border }) => border.default}; svg path { fill: ${({ text }) => text.default}; } 해결 과정 개발자도구로 확인한 결과, svg path에는 정상적으로 fill 속성이 채워져있었다. fill의 색.. 더보기 SVGR id collision issue 해결하기 프로젝트: loplat UI 키워드: svgr, svg, id collision, unique id, sed, regex 상황 loplat UI에서 svgr을 이용하여 Icon 컴포넌트를 만든다. 실제 프로젝트에서 Icon을 사용할 때, 하나의 아이콘을 2번 렌더링하면 이미지가 깨지는 현상을 발견했다. // 2번 렌더링 ... 원인이 무엇인지 고민해보니 svg 속성 중 id가 random값이 아닌 고정값인 것을 확인했다. __a, __b 가 suffix로 붙지만 'infocircle_outline_svg__a' 라는 id값 자체는 고정이라 컴포넌트를 2번 렌더링하면 id 충돌이 일어나는 것이다. loplat UI 코드를 통해 svgr 이 만들어주는 id는 static하는 것을 확인했다. // id 고.. 더보기 이전 1 다음
