-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[FE] Issue sidebar component #229
[FE] Issue sidebar component #229
Conversation
아이콘을 사용하기 위해서 styled-icons 종속성을 추가하였다.
issue Sidebar 메뉴에 들어가는 Item 컴포넌트를 개발하였다. 재사용을 고려하여 props와 children을 사용하여 만들었다.
이슈 상세화면에 있는 사이드바 컴포넌트를 구현하였다. progress Bar은 추후 팀원이 컴포넌트를 만들어 주면 그때 컴포넌트를 바꿔 넣을 계획이다.
display: flex; | ||
align-items: center; | ||
|
||
margin-bottom: 7px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
pixel 로 margin 을 설정하면 화면 크기에 따라 모양이 바뀌지 않을까요?
`; | ||
|
||
export const LabelWrapper = styled.div<{color: string}>` | ||
padding: 6px 5px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
여기도 margin 부분과 마찬가지 입니다
export default function IssueSideBarItem({menuName, children} : IssueSideBarItemProps) { | ||
const [isHover, setIsHover] = useState<boolean>(false); | ||
|
||
return ( | ||
<S.ItemWrapper> | ||
<S.ItemHead> | ||
<S.MenuName onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} isHover={isHover}>{menuName}</S.MenuName> | ||
<S.SettingIcon onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)} isHover={isHover}/> | ||
</S.ItemHead> | ||
|
||
<S.ItemBody> | ||
{children} | ||
</S.ItemBody> | ||
</S.ItemWrapper> | ||
) | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
childeren 을 받아서 재활용 할 수 있어서 좋은 것 같습니다!
Issue Number
Close #222
변경사항
새로운 기능
작업 유형
체크리스트