feat(profile): complete profile box UI #421
Conversation
✅ Deploy Preview for biseo-preview ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
minjoo0729
added
enhancement
| <div | ||
| css={[{ position: "relative" }]} | ||
| onMouseEnter={() => setHover(true)} | ||
| onMouseLeave={() => setHover(false)} | ||
| > |
There was a problem hiding this comment.
알파벳이 보이는 박스에서 마우스가 없어지면 setHover(false)가 되어서 아래 Profile UI로 갈 수 없는 상황을 막기 위해, 해당 박스와 Profile UI를 묶는 상위 div를 만들어서 해당 div에 setHover를 설정했습니당
그런데 해당 div 안에 gap, margin, padding이 생기면 해당 부분에서는 hover가 false가 되요,,
의도대로 동작은 잘하지만 이 방법이 괜찮은 방법인지 모르겠어서 혹시 관련해서 더 좋은 방법이 있을까요?!?
| <div | ||
| css={[align.center, { position: "absolute", right: "0px", zIndex: 1000 }]} | ||
| > | ||
| <div css={[h(5)]} /> |
There was a problem hiding this comment.
gap, margin, 또는 padding으로 5px을 띄우면 해당 간격을 마우스가 지날 때 setHover(false)가 되는 바람에 투명 div를 만들었습니다
뭔가 하드코딩 느낌이라 바꾸고 싶은데 방법을 모르겠어요..
There was a problem hiding this comment.
Atom 컴포넌트로 spacer 컴포넌트를 만들어서 이용하는 것도 하나의 방법일 것 같아요
https://seya01.medium.com/how-to-style-margin-with-react-d250d512d0a0
| <div | ||
| css={[align.center, { position: "absolute", right: "0px", zIndex: 1000 }]} | ||
| > |
There was a problem hiding this comment.
알파벳 보이는 버튼 위치에 종속적으로 위치시키기 위해서 position: absolute랑 right: 0px으로 위치 종속시켰습니당
| </Text> | ||
| </Button> | ||
| <div | ||
| css={[{ position: "relative" }]} |
There was a problem hiding this comment.
여기 {[{...}]}으로 묶는 방법 말고 조금 더 깔끔하게 작성할 수 있는 방법이 있나요?
There was a problem hiding this comment.
대괄호 생략하고 그냥 쌍중괄호 쓰기...? 아이템이 하나면 대괄호 생략 가능해용
There was a problem hiding this comment.
아 style={{...}}는 해봣믄데 css={{...}}는 안해봐서 모르겟군 되지 않ㅎ을까 둘다 inline css니까...??
|
옹 저 gap hover 관련해서 좀 검색해봣는데 이해는 못했지만 ::before 를 쓰라는 얘기도 잇구 민주 한것처럼 투명 div도 괜찮은 꼼수 같긴 하군 https://www.reddit.com/r/webdev/comments/aod6nc/how_to_add_a_gap_between_a_css_dropdown_menu_and/?rdt=45487 |
minjoo0729
dismissed
babycroc’s stale review
The merge-base changed after approval.
| <div | ||
| css={[align.center, { position: "absolute", right: "0px", zIndex: 1000 }]} | ||
| > | ||
| <div css={[h(5)]} /> |
There was a problem hiding this comment.
Atom 컴포넌트로 spacer 컴포넌트를 만들어서 이용하는 것도 하나의 방법일 것 같아요
https://seya01.medium.com/how-to-style-margin-with-react-d250d512d0a0
| </Text> | ||
| </Button> | ||
| <div | ||
| css={[{ position: "relative" }]} |
minjoo0729
dismissed
SnowSuno’s stale review
The merge-base changed after approval.
요약 *
It closes #347
p.s. eslint 짱이네용 근데 에러 해결을 조금 미루다가 커밋을 통으로 해버렸어요... 앞으로 나눠서 잘 커밋하겠습니당..
로그아웃 UI 제작
원래 1번째 알파벳이 보이는 버튼을 박스 형태의 div로 바꾸었고, 관련 부분 css 토큰화 형식으로 변경했습니다.
알파벳이 보이는 박스는 relative로, Profile UI는 absolute로 position 설정해서 Profile UI 위치를 박스 위치에 종속시켰습니다.
알파벳이 보이는 박스에 hover한 뒤에 아래 profile UI로 가면 hover 상태가 false가 되는 상황이어서 div로 알파벳이 보이는 박스와 profile UI를 모두 감싼 뒤에 해당 div에 setHover를 사용했습니다
스크린샷
이후 Task *
도와주세요.. 모르겠어요 ㅠㅜㅠ
위에 있는 알파벳 박스와 profile 창 사이의 gap 설정하면 gap을 지나는 도중에 hover가 false로 바뀌는 상황이라 우선 투명 div로 박스 아래 5px를 투명 div로 만들어서 묶어둔 상황 (뭔가 하드코딩 느낌이라 바꾸고 싶은데 방법을 모르겠어요,,,ㅠ)