[next.js] - 툴팁 컴포넌트 만들기

마이페이지 디자인 안에 들어있는 helpbox, 공통 컴포넌트로 만들기 위해 따로 빼서 작업준비!

디자이너가 원하는 디자인은 요런 형식.

 

- 페이지가 렌더링될 때마다 helpbox는 화면에 나오도록(초기 상태값 true로)하기

- close 버튼 클릭 시 helpbox는 사라지게, helpbox와 관련된 텍스트 클릭 시 다시 helpbox보이게(toggle형식으로)하기

- helpbox안에 들어가는 내용은 각각 중요내용, 보충내용으로 나눠서 입력할 수 있게하기.

 

이 helpbox를 컴포넌트로 뺀 후 마이페이지에도 적용할 수 있도록 해보려한다.

 

먼저 props로 전달할 데이터론 '화살표의 위치표시'와 '핵심내용', '핵심내용'을 보충할 내용 

 

 

제일 아리송가리송했던 부분, 화살표를 left1/4, right1/4를 해도 피그마의 디자인처럼 옆으로 가지않아 계속 끙끙거렸었다.

right-5인가, 아닌데.. left를 써야하는 부분인가.. 라 생각하다. 단순한 부분에서 전혀다른 부분을 건드리고 있었다는 걸 깨달았다.

이 몸집을 조정해야했었다.

 

 

coreText가 없을 경우도 포함하여 툴팁컴포넌트 완료! 뿌듯하다😊