오늘의 목표
-
알고리즘 문제풀기
-
mvp주간까지 마져못한 css 오류 수정하기
알게 된것
- svg 컬러를 호버 하는 작업을 하다가 알게되었는데
svg 이미지 에 관한 컴포넌트를 만든곳에다가 호버시 색상을 변경하기를 하던와중
팀원분이 stroke에 대한 예기를 해주셔서 알게 되었다.
우선 호버를 할때 사용할 useState를 하나 생성하고 밖에 컬러와 안 컬러가 각각 호버가 되었을시 변경될 것을 지정해주었다.
``
const [isHovered, setIsHovered] = useState(false);
// 밖 컬러
const outerStrokeColor = isHovered ? '#FFC803' : '#E1E2E3';
// 안 컬러
const innerFillColor = isHovered ? '#FFC803' : '#E1E2E3';
``
그리고 나서 onMouseEnter 이벤트 핸들러를 사용하여 마우스가 아이콘 위로 진입할 때 isHovered를 true로 설정하고, onMouseLeave 이벤트 핸들러를 사용하여 마우스가 아이콘에서 빠져나갈 때 isHovered를 false로 설정을 한후
``
onMouseEnter={() => {
setIsHovered(true);
}}
onMouseLeave={() => {
setIsHovered(false);
}}
``
그리고 path 가 3개가 있었는데 위쪽 2군데에는 outerStorkeColor로 바깥라인을 관리하고
3번째 path는 전체 관리를 하는 곳에서 바깥라인과 안쪽라은을 관리함으로써 내가 원하던 호버를 완성하였다.
``
<path
d="M10 8V20H8V8H10Z"
fill={fill || 'black'}
stroke={outerStrokeColor}
/>
<path
d="M14 8V20H12V8H14Z"
fill={fill || 'black'}
stroke={outerStrokeColor}
/>
``
이렇게해서 호버시 호버가 안되었을시에 색을 변경할수있었다.
느낀점
- 오늘 어제 mvp발표를 한후 작은 오류 와 css를 수정을 하였고 또한 내일부터 고객 피드백을
위해서 설문지 작성을 하고 피드백을 하기위한 나머지 작업을 진행하였다.
오늘 css를하면서 svg 파일에 대한 구조를 좀더 많이 알수있는 날이었던거 같고
또한 tailwind에 대해서 알수있는 시간이었던거 같습니다.
