[디벨로퍼] 채용 사이트 프로젝트 3

합격 보상금 그라데이션 영역

합격보상금쪽 그라데이션 영역을 추가했다. 북마크 버튼도 있다. relative 속성을 주고 픽셀단위로 옮기고 자르고 하면서 맞추고 있는데, 이게 맞나 싶으면서도 잘 굴러가서 기분이 좋다. 픽셀 단위의 하드코딩으로 조정해야 할 때가 있는 것 같다(꼼수긴 하지만)

네이버 지도 API쪽을 연동했다. 네이버클라우드 회원가입해서 결제수단 등록하고 서비스 신청해서 CLIENT-ID를 받으면 된다. 이후에 받은 CLIENT-ID값으로 script 태그에 넣어주면 된다. 내부적으로 id가 map인 요소에 지도를 띄워준다. 지도에 대한 속성 처리 및 이미지 올리는 부분은 다음 글을 참고했다. 

 

https://velog.io/@nagosu/React-Typescript%EB%A1%9C-%EB%84%A4%EC%9D%B4%EB%B2%84%EC%A7%80%EB%8F%84-API-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

https://navermaps.github.io/maps.js.ncp/docs/tutorial-digest.example.html 

 

다이얼로그를 추가했다. 공유하기 버튼을 누르면 나온다. 개인적으로 차크라UI에서 다이얼로그를 다루는 훅을 제공했던 것 같은데, 예제에 그런 내용이 보이지 않아서 신기했다. 그냥 Dialog 자체 컴포넌트 + 버튼 컴포넌트를 묶어가지고 처리하는 식으로 되어있다. 컴포넌트단 코드로만 다이얼로그를 처리해서 신기하고, 나는 Dialog 부분을 함수로 뺀 다음에 children을 받아서 버튼으로 처리했다.  DialogComponent(buttonChild) 이런 식으로

 

그 외에 북마크 버튼을 누르면 토스트가 나오게 처리했다(기본 차크라UI 토스트 사용)