[FE] Issue sidebar component

web/client/package.json

@@ -35,6 +35,7 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "styled-components": "^5.2.1",
+    "styled-icons": "^10.22.0",
     "styled-reset": "^4.3.0",
     "ts-loader": "^8.0.10",
     "typescript": "^4.0.5",

web/client/src/components/issue-sidebar/item/index.tsx

@@ -0,0 +1,24 @@
+import React, {useState} from 'react'
+import * as S from './style'
+
+interface IssueSideBarItemProps {
+  menuName: string,
+  children: React.ReactNode
+}
+
+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>
+  )
+}

web/client/src/components/issue-sidebar/item/style.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+import {Settings} from '@styled-icons/ionicons-sharp/Settings';
+
+export const SettingIcon = styled(Settings)<{isHover: boolean}>`
+  display: block;
+  color: ${props => props.isHover ? '#5490E2' : 'grey'};
+
+  width: 15px;
+  height: 15px;
+`;
+
+export const ItemWrapper = styled.div`
+  padding: 10px;
+
+
+  width: 280px;
+`;
+
+export const ItemHead = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  margin-bottom: 10px;
+
+  box-sizing: border-box;
+`;
+
+export const MenuName = styled.div<{isHover: boolean}>`
+  color: ${props => props.isHover ? '#5490E2' : '#555'};
+  font-weight: 700;
+`;
+
+export const ItemBody = styled.div`
+  padding-bottom: 20px;
+
+  border-bottom : 1px solid #ccc;
+`;

web/client/src/components/issue-sidebar/sidebar/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import * as S from './style';
+import ProfileImage from '../../profile-image';
+import IssueSideBarItem from '../item';
+
+interface AsigneeProfileProps {
+  userName:string,
+  img: string
+}
+
+function AssigneeProfile ({userName, img} : AsigneeProfileProps) {
+  return (
+    <S.AssigneeProfileWrapper>
+      <ProfileImage img={img} size={20}/>
+      <S.AssigneeName>{userName}</S.AssigneeName>
+    </S.AssigneeProfileWrapper>
+  )
+}
+
+interface LabelProps {
+  name: string,
+  color: string
+}
+
+function Label({name, color} :LabelProps) {
+  return (
+    <S.LabelWrapper color={color}>{name}</S.LabelWrapper>
+  )
+}
+
+
+export default function IssueSideBar() {
+  return (
+    <>
+      <IssueSideBarItem menuName="Assignees">
+        <div>
+          <AssigneeProfile userName="moaikang" img=""/>
+          <AssigneeProfile userName="moaikang" img=""/>
+        </div>
+      </IssueSideBarItem>
+
+      <IssueSideBarItem menuName="Labels">
+        <Label name="라벨" color="#A3EEEF"/>
+      </IssueSideBarItem>
+
+      <IssueSideBarItem menuName="Milestone">
+        <div>Progress Commponent</div>
+      </IssueSideBarItem>
+    </>
+  )
+}

web/client/src/components/issue-sidebar/sidebar/style.tsx

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+
+export const AssigneeProfileWrapper = styled.div`
+  display: flex;
+  align-items: center;
+
+  margin-bottom: 7px;
+`
+
+export const AssigneeName = styled.div`
+  margin-left: 10px;  
+
+  font-weight: 700;
+  color: #333;
+`;
+
+export const LabelWrapper = styled.div<{color: string}>`
+  padding: 6px 5px;
+
+  border-radius: 6px;
+
+  background: ${props => props.color};
+
+  font-weight: 700;
+
+  box-sizing:border-box;
+`;