카카오에서는 png를 주지만 svg를 익히기 위해서 svg 파일로 사용하였다. 다운 받은 것을 피그마에 올리고 다시 svg로 변환했는데 왜인지 안돼서,…………. 그냥 호은님 깃에서 따 왔다.
svg 파일은 assets/svg 에 jsx 파일로 저장해주었다.
svg태그는 전체적인 속성을 주고, g 와 path는 그림을 그려주는 것 같은데, 이는 더 공부가 필요하다
components/common/buttons 밑에 KakaoLogin 폴더를 만들어 보관. BtnKakaoLogin 컴포넌트 파일과 스타일 파일을 생성
컴포넌트는 구조와 스타일 나누어 한 폴더에 저장한다는 것을 항상 인지하자. 그리고 최상위 스타일은 Wrapper로 감싸주기.
svg 파일 정보가 잘 안나와서 일단 Wrapper를 버튼 타입으로 설정하여 감싸주고 안에 svg 파일을 넣어주었다. Start 파일에 있던 함수도 가져와 여기다가 구현해주었다.
그냥 버튼과 동일하게 잘 동작했다. 아직 구조가 잘 익숙하지 않아서 다른 깃을 많이 참고했고, 뭔가 감이 조금씩 오는 것 같은 느낌이다.