Skip to content
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

Merged
merged 3 commits into from
Nov 9, 2020

Conversation

moaikang
Copy link
Collaborator

@moaikang moaikang commented Nov 9, 2020

스크린샷 2020-11-09 오후 5 40 12

Issue Number

Close #222

변경사항

  • styled-icons 의존성 추가

새로운 기능

  • issueDetail 페이지에 있는 SideBar 컴포넌트 제작

작업 유형

  • 신규 기능 추가
  • 버그 수정
  • 리펙토링
  • 문서 업데이트

체크리스트

  • Merge 하는 브랜치가 올바른가?
  • 코딩컨벤션을 준수하는가?
  • PR과 관련없는 변경사항이 없는가?
  • 내 코드에 대한 자기 검토가 되었는가?
  • 변경사항이 효과적이거나 동작이 작동한다는 것을 보증하는 테스트를 추가하였는가?
  • 새로운 테스트와 기존의 테스트가 변경사항에 대해 만족하는가?

moaikang added 3 commits November 9, 2020 16:31
아이콘을 사용하기 위해서 styled-icons 종속성을 추가하였다.
issue Sidebar 메뉴에 들어가는 Item 컴포넌트를 개발하였다.
재사용을 고려하여 props와 children을 사용하여 만들었다.
이슈 상세화면에 있는 사이드바 컴포넌트를 구현하였다.
progress Bar은 추후 팀원이 컴포넌트를 만들어 주면 그때 컴포넌트를 바꿔 넣을 계획이다.
@moaikang moaikang added Feature 🎨 기능에 대한 추가사항입니다. FE 💻 프론트엔드 0_Merge: Dev-Web Dev-Web 브랜치로 Merge 합니다. labels Nov 9, 2020
@moaikang moaikang self-assigned this Nov 9, 2020
@moaikang moaikang changed the title Feature/web/issue sidebar [FE] Issue sidebar component Nov 9, 2020
display: flex;
align-items: center;

margin-bottom: 7px;
Copy link
Collaborator

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;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 margin 부분과 마찬가지 입니다

Comment on lines +9 to +24
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>
)
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

childeren 을 받아서 재활용 할 수 있어서 좋은 것 같습니다!

@moaikang moaikang merged commit 84e2f68 into boostcamp-2020:dev-web Nov 9, 2020
@moaikang moaikang deleted the feature/web/issue-sidebar branch November 20, 2020 06:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
0_Merge: Dev-Web Dev-Web 브랜치로 Merge 합니다. FE 💻 프론트엔드 Feature 🎨 기능에 대한 추가사항입니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants