[Feat/#300] 링크 복사하기 버튼, link tooltip 구현 #301
Conversation
| <> | ||
| <SteppingWrapper> | ||
| <Header position={'stepping'} /> | ||
| <LinkToolTipIcon onClick={notify} /> | ||
| <SteppingBody steppingType={steppingType} meetingTitle={meetingTitle} /> | ||
| <SteppingBtnSection steppingType={steppingType} /> | ||
| <div /> | ||
| </SteppingWrapper> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default SteppingLayout; | ||
|
|
||
| const LinkToolTipIcon = styled(LinkTooltipIc)` | ||
| position: relative; | ||
| left: 10.3rem; | ||
| cursor: pointer; | ||
| `; |
There was a problem hiding this comment.
tooltip을 통째로 svg로 저장하는 방식은 좋은 패턴은 아닌 것 같습니다..!
텍스트나 tooltip 형태 등 여러 가능한 변화에 대한 확장성을 해치기 때문입니다.
tooltip은 css만으로도 만들 수 있어서, 이 방법을 제안드리고 싶은데요!
const LinkTooltip = styled.div`
position: relative;
background: ${({ theme }) => theme.colors.grey9};
border-radius: 0.6rem;
padding: 0.6rem 0.8rem;
&:before {
position: absolute;
top: -7px;
left: 50%;
width: 0;
height: 0;
border-right: 9px solid transparent;
border-bottom: 9px solid #252525;
border-left: 9px solid transparent;
transform: translateX(-50%);
content: '';
}
`;이렇게 before 속성만으로 삼각형을 만들어낼 수 있습니다.
return (
<>
<SteppingWrapper>
<Header position={'stepping'} />
<LinkTooltip>
<Text font="body4" color={theme.colors.grey5}>
링크 복사하기
</Text>
</LinkTooltip>
<SteppingBody steppingType={steppingType} meetingTitle={meetingTitle} />
<SteppingBtnSection steppingType={steppingType} />
</SteppingWrapper>
</>
);
위 코드만으로 만든 tooltip입니다.
다만 단점은 있습니다. 실제 디자인을 완벽하게 반영할 수 없다는 건데요, 예를들어 현재 디자인본에서는 저 위쪽 삼각형의 끝이 살짝 둥글게 처리가 되어있지만 해당 부분을 css로 조절할 수는 없습니다.
그러나 이 정도 사항에 대해서는 디자인 쪽과 충분히 합의볼 수 있는 내용이라고 생각합니다!
좀 더 신빙성(?)을 드리고자 네이버에서의 tooltip이 어떻게 구현되고 있는지 찾아봤습니다. (물론 네이버 코드가 다 정답은 아니지만요..)
제가 제안드린 코드와 동일하게 before 요소로 만든 걸 보실 수 있습니다.
There was a problem hiding this comment.
추가로.. 저러한 css코드로 어떻게 삼각형 형태가 만들어지는 것인지 궁금해서 알아봤는데요.
이 이미지를 보시면 이해에 도움이 될 것 같습니다.
각 테두리는 사다리꼴 모양을 가지고 있습니다. 요소의 네 모서리에서 각 테두리가 45도 각도로 만나기 때문에요.
이 상태에서 width:0 height:0으로 요소자체는 보이지 않게 하고 top을 제외한 left,right,bottom 테두리만 추가하게 되면 세개의 테두리가 만나는 지점이 삼각형을 이루게 됩니다.
| @@ -51,16 +53,20 @@ function SteppingLayout({ steppingType }: SteppingProps) { | |||
| <> | |||
| <SteppingWrapper> | |||
| <Header position={'stepping'} /> | |||
| <LinkToolTipIcon onClick={notify} /> | |||
There was a problem hiding this comment.
tooltip에 onClick이벤트로 링크 복사 토스트를 넣어놓으셨는데 이건 의도와 다르다고 생각합니다!
tooltip은 특정 영역에 대해 부가설명을 하는 역할이기 때문에, tooltip을 직접 클릭하는 건 아니라고 이해하고 있습니다. tooltip이 가리키는 링크 복사 아이콘을 클릭하라고 유도하는 것이죠!
혹시 다른 생각이시라면 디자인쪽에 문의해보는 것도 좋을 것 같습니다!!
There was a problem hiding this comment.
그리고 문제를 하나 발견했습니다..그 tooltip이 가리키는 링크 복사 아이콘을 누르면 토스트만 뜨고 링크 복사는 안되네요;;;;; 이걸 여태껏 몰랐다니(충격)
혹시 하는김에 이것도 같이 수정해주실 수 있을까요,,?
ljh0608
changed the title
simeunseo
changed the title
🌀 해당 이슈 번호
🔹 어떤 것을 변경했나요?
🔹 어떻게 구현했나요?
현재 헤더가 position이라는 props 받아 분기처리해주고 있어서 stepping일 때 link복사하기 버튼을 넣는것으로 일단 구현했습니다.
툴팁은 현재 화면에서 relative를 주어서 헤더 아래로 위치시켰습니다.
🔹 PR 포인트를 알려주세요!
간단한 PR이라 없습니다.
🔹 스크린샷을 남겨주세요!