반응형 SVG2 next.js 에 typescript, storybook 설정하기 🎠 내 tmi... 쿠키파킹의 웹사이트는 원래 react.js로 개발했었다. 쿠키파팅 서비스에는 디렉토리 공유 기능이 있다. 우리는 사용자들이 카톡으로 공유 링크를 전달하는 경우가 많을 것이라고 예측했다. 카톡으로 웹 사이트 링크를 전달하는 경우 카톡에서 자체적으로 메타태그들을 인식해서 사이트 이름, 썸네일 등을 띄워준다. 그런데 spa 특성상 공유 링크를 전달하게 되면, 디렉토리에 해당하는 메타태그들 값이 뜨는 것이 아니라 모든 페이지가 동일한 값이 뜬다는 불편함이 있었다. 그래서 이 문제를 해결하기 위해 웹 사이트를 next.js로 바꾸기로 결정했다. 앞으로 추가하게 될 기능들이나, SEO를 위해서도 next.js로 바꾸는 것이 맞는 선택이라고 생각했다. 이왕 옮기는 김에 typescript로 전환하.. 2021. 7. 25. ReactComponent를 통해 svg 를 컴포넌트처럼 사용하기 ReactComponent를 통해 svg 파일을 컴포넌트처럼 사용하면 fill 속성을 변경하여 svg 에셋의 색을 설정할 수 있다! svg 파일 코드를 뜯어보면 다음과 같다 혹은 이런 형식이다. 첫번째 svg의 경우 색상을 바꾸는 방법은 다음과 같다. import styled from "styled-components"; import { PlusIcon } from "@assets/icons/common"; const IconBox = () => { return ( ); }; const Container = styled.div` width: 20px; height: 20px .plus_icon{ width: 10px; height: 10px; path { fill: #ffffff; } } `; 이렇게 s.. 2021. 7. 24. 이전 1 다음 반응형
