[FE] Filter Menu Ui #30

Elllin · 2020-06-15T12:50:45Z

개요

Filter Menu Ui

작업사항

material-ui-popup-state 설치
GlobalStyle 변수 추가, 폰트 크기 변경
app.js에서 header 제외 mainWrap으로 감싸서 width 조정
(header 제외하고는 width가 100%가 아닌 것 같아 추가했습니다.)
filter 버튼 추가
menuList 컴포넌트를 새로 만들었는데 이슈 목록 filter에서도 재사용 가능할 것 같아 common 폴더에 넣어놨습니다. 아래 사용방법 기록해 놨으니 참고해서 사용해 주세요

MenuList 컴포넌트 사용방법

props는 text, title을 받습니다
사용 용도는 두 가지가 있습니다
1. title로써 상단에 사용
2. menuList로써 hover와 마우스 클릭이 되는 list로 사용
title로 사용 시 : props로 title을 사용하고 title에 들어갈 text를 넣어주면 됩니다.

  (예) <MenuList title="Filter lssues" />

menuList로 사용 시 : props로 text를 사용하고 list에 들어갈 text를 넣어주면 됩니다.

  (예) <MenuList text="Open issues" />

변경로직

전체 font-size

변경전

 font-size: 1rem;

변경후

font-size: 14px;

기타

material-ui 사용법이 익숙지 않아 menuList가 아직 지저분하고 재사용이 얼마나 될지는 모르겠지만 우선 공통 컴포넌트에 추가해 두었습니다.
font size나 app에서 mainWrap는 변경하셔도 됩니다.

closed #10

material ui popup 버튼 삽입

스타일 디폴트로 수정, 다운아이콘 추가

버튼 border, popup background color 변수로 분리

title일 경우 따로 렌더링 하는 함수를 구현했지만 중복이라 렌더 함수 하나로 변수에 변하는 값을 넣어서 처리

text값은 상수로 분리

sungik-choi · 2020-06-15T14:37:07Z

FE/src/App.js


 import GlobalStyle from "./style/GlobalStyle";
+import styled from "styled-components";


제 생각에는, 이번 프로젝트에서 styled-components의 사용은 할 수 있으면 하지 않는 게 좋은 방법같아요. 익숙치 않고 어렵겠지만,(저도 그래요) MaterialUI를 사용하는 만큼, 커스텀 스타일링도 라이브러리가 제공하는 API에 따라서 해보려고 합니다.

필요하다면 MaterialUI에서 제공하는 @material-ui/styles를 통해 스타일링 해보려고 해요.

엘린님은 어떻게 생각하세요?

styled-components 와 함께 사용하는 방식을 정리해놓은 MaterialUI의 문서와 블로그도 있네요. 혹시 필요하시다면...

https://material-ui.com/guides/interoperability/

블로그

네 좋습니다! styled-components는 최대한 안 쓰는 쪽으로 하겠습니다. 하지만 MaterialUI를 전부 공부하기에는 시간이 많지 않아 아직 부족한 부분은 styled-components를 조금씩 쓰기로 하고 프로젝트 마지막 부분에 시간이 난다면 이 부분은 MaterialUI로 수정하는 쪽으로 하면 시간관리 측면에서 더 좋을 것 같습니다!!

sungik-choi · 2020-06-15T14:39:15Z

FE/src/App.js

    </>
  );
 };

+const MainWrap = styled.div`


이 부분은 MaterialUI의 Container를 사용해보는거 어때요?
styled-component를 사용하지 않고 가운데 정렬하는 Container를 구현할 수 있을 거 같아요.

Container : The container centers your content horizontally. It's the most basic layout element.

와 감사합니다 Container를 몰랐는데 덕분에 알게 되었습니다! 수정하도록 하겠습니다!

sungik-choi · 2020-06-15T14:42:10Z

FE/src/App.js

    </>
  );
 };

+const MainWrap = styled.div`
+  margin: 0 auto;
+  width: 80%;


해당 API 문서의 maxWidth 속성으로 너비를 조절할 수 있을 거 같아요.

Sizing

sungik-choi · 2020-06-15T14:44:21Z

FE/src/components/Issues/Navigation/Filter/Menu.jsx

@@ -1,7 +1,76 @@
 import React from "react";

+import MenuList from "../../../common/MenuList";


제가 작업하면서 절대경로를 추가했으니 PR 보낼 때 변경사항 알려드리겠습니다!

sungik-choi · 2020-06-15T14:46:35Z

FE/src/components/Issues/Navigation/Filter/Menu.jsx

+
+import Button from "@material-ui/core/Button";
+import Popover from "@material-ui/core/Popover";
+import PopupState, { bindTrigger, bindPopover } from "material-ui-popup-state";


신기하네요. MaterialUI 드롭다운 버튼 라이브러리인가요???

네 popover 이 부분을 참고하여 material-ui-popup-state install 후 사용하였습니다.

sungik-choi · 2020-06-15T14:48:26Z

FE/src/components/Issues/Navigation/Filter/Menu.jsx

+    border: "var(--button-border)",
+  },
+  filterText: {
+    fontSize: "13px",


px을 빼고 13 으로만 넘겨줘도 작동하는 거 같아요. (""도 빼고)

Typography API

sungik-choi · 2020-06-15T14:53:58Z

FE/src/components/Issues/Navigation/Navigation.jsx

 };

+const Nav = styled.nav`


nav 엘리먼트의 경우, <Box component="nav" /> 식으로 작성할 수 있을 거 같아요. styled-component의 as 속성과 비슷한 MaterialUI 속성인듯 합니다.

https://material-ui.com/components/box/#box

Overriding Material-UI components
The Box component wraps your component. It creates a new DOM element, a <div> by default that can be changed with the component property. Let's say you want to use a instead:

<Box component="span" m={1}> <Button /> </Box>

sungik-choi · 2020-06-15T14:56:50Z

FE/src/components/common/MenuList.jsx

+// 1. title로써 상단에 사용
+// 2. menuList로써 hover와 마우스 클릭이 되는 list로 사용
+// title로 사용 시 : props로 title을 사용하고 title에 들어갈 text를 넣어주면 됩니다.
+// (예) <MenuList title={"Filter lssues"} />


친절한 주석 감사합니다~!

<MenuList title="Filter Issues" /> 식으로 문자열의 경우 브라켓을 넣어주지 않아도 동작할 거에요

앗 이건 옮기는 과정에서 실수입니다!

sungik-choi · 2020-06-15T15:09:50Z

FE/src/style/GlobalStyle.jsx

 import reset from "styled-reset";

+const variables = css`
+  :root {
+    --button-border: 1px solid rgba(27, 31, 35, 0.2);


저도 이전 프로젝트를 진행했을 때는 이런 방식으로 스타일을 관리했었는데, 이번엔 라이브러리를 사용하는 만큼 스타일 전역변수들을 최대한(되도록이면 아예...) 사용하지 않는 방법으로 해보려고 하는데 엘린님은 어떠세요?

Github 사이트에서 color값을 추출한 뒤에 직접 만든 css variable 변수를 사용하는 대신, 간격이나 컬러 등 여러 css 속성들을 MaterialUI 내부에서 사용하고 있는 변수로 사용하면 스타일링 하는 시간을 더 줄일 수 있을 거 같아요. 이번에 crong님이 요구사항에 적어놓으신 material UI와 같은 라이브러리의 도움을 최대한 많이 받는다 부분이 이런 색상값을 따로 관리하거나 하는 일을 최대한으로 줄여라. 라고 저는 받아들였거든요.

아래 링크는 기본 테마 변수 목록입니다. MaterialUI에서 제공하는 기본 테마에 맞추고, 별도의 커스터마이징을 '최대한 안할수록' 서로가 만든 UI의 디자인 일관성을 최대한 높일 수 있을 거 같다고 생각해요(MaterialUI에서 만들어놓은 디자인이니까).

https://material-ui.com/customization/default-theme/?expand-path=$.palette

Github과 비슷하게 만들고 싶으면 아래 링크를 참고해서 커스터마이징할 수도 있을 거 같아요. 근데 개인적으론 똑같이 따라하는 건 중요치 않다고 생각하는 편입니다...

https://material-ui.com/customization/color/#color

https://material-ui.com/customization/palette/#palette

여기 MaterialUI의 디자인 시스템이 깔끔하게 전부 정리되어 있네요. 저도 봐야겠습니다

https://material-ui.com/system/basics/

- ModifyIssueStatusRequestDto

- issueDao.modifyIssueStats()

- issueService.modifyIssueStats()

Elllin · 2020-06-16T07:59:51Z

리뷰 달아주신 내용 참고해서 수정 후 다시 pr보내겠습니다! 달아주시고 링크가 정말 큰 도움이 되었습니다. 몰랐던 material-ui기능도 알게되었습니다! 친절한 리뷰 감사합니다^^

Elllin added 16 commits June 15, 2020 16:56

[FE/#10] Feat : popup-state설치 및 popup 버튼 구현

0cd174e

material ui popup 버튼 삽입

[FE/#10] Feat : 필터 버튼 스타일 수정, 아이콘 추가

35340c6

스타일 디폴트로 수정, 다운아이콘 추가

[FE/#10] Refactor : 스타일 인라인 추가에서 useStyles이용

36be8f7

[FE/#10] Feat : header 제외 width 80%로 조절

90b0771

[FE/#10] Refactor : header padding 제거

ab14111

[FE/#10] Feat : 팝업창 크기 조절 및 hover시 background color 효과

21992dc

[FE/#10] Feat : 글로벌 스타일 폰트사이즈 변경

72b672b

[FE/#10] Feat : nav 위치 변경 margin 추가

e0f4762

[FE/#10] Feat : 필터 버튼 border 추가 및 변수 지정

4a2b8e4

버튼 border, popup background color 변수로 분리

[FE/#10] Refactor : popup 전체 사이즈 및 폰트 사이즈 변경

1fb2101

[FE/#10] Refactor : menu list를 다른 컴포넌트로 분리

7eec740

[FE/#10] Feat : menuList title추가

0e60888

[FE/#10] Refactor : menu list 중복 렌더 컴포넌트 없앰

7f4102c

title일 경우 따로 렌더링 하는 함수를 구현했지만 중복이라 렌더 함수 하나로 변수에 변하는 값을 넣어서 처리

[FE/#10] Chore : menu list 재사용 가능함으로 common 폴더로 이동

a4cefd5

[FE/#10] Refactor : menuList title에 들어갈 text를 props를 통해 받음

8a03f98

text값은 상수로 분리

[FE/#10] Refactor : menuList사용법 주석 추가

d11bd20

Elllin added the 🍺 FE 프론트엔드 이슈 label Jun 15, 2020

Elllin added this to the FE WEEK 1 milestone Jun 15, 2020

Elllin assigned Elllin and sungik-choi Jun 15, 2020

Elllin changed the title ~~Fe/feature/filter menu~~ [FE] Filter Menu Ui Jun 15, 2020

Elllin linked an issue Jun 15, 2020 that may be closed by this pull request

[FE] 이슈목록 / 필터 버튼 팝업 UI #10

Closed

4 tasks

sungik-choi reviewed Jun 15, 2020

View reviewed changes

sungik-choi added this to Review in progress in FE 이슈 관리 프로젝트 Jun 15, 2020

[FE/#10] Refactor : app styled component 대신 container사용

0ed0e74

MuseopKim added a commit that referenced this pull request Jun 15, 2020

[BE/#30] Feat : 이슈 상태 수정 요청 DTO 추가

46d1220

- ModifyIssueStatusRequestDto

MuseopKim added a commit that referenced this pull request Jun 15, 2020

[BE/#30] Feat : 이슈 상태 수정 쿼리 추가

df3719e

- issueDao.modifyIssueStats()

MuseopKim added a commit that referenced this pull request Jun 15, 2020

[BE/#30] Feat : 이슈 상태 수정 로직 추가 (issueService)

f486d21

- issueService.modifyIssueStats()

MuseopKim added a commit that referenced this pull request Jun 15, 2020

[BE/#30] 이슈 상태 수정 기능 구현

07f6d4a

[FE/#10] Refactor : menuList에 key값 추가

3d69f5d

Elllin added 2 commits June 16, 2020 16:00

[FE/#10] Refactor : navigation에 nav태그 box로 변경

87281a2

[FE/#10] Refactor : styled components 사용을material ui로 변경

9d39da8

Elllin closed this Jun 16, 2020

FE 이슈 관리 프로젝트 automation moved this from Review in progress to Done Jun 16, 2020

sungik-choi deleted the fe/feature/filterMenu branch June 16, 2020 08:26

Elllin unassigned sungik-choi Jun 16, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] Filter Menu Ui #30

[FE] Filter Menu Ui #30

Elllin commented Jun 15, 2020 •

edited

sungik-choi Jun 15, 2020 •

edited

sungik-choi Jun 15, 2020

Elllin Jun 16, 2020

sungik-choi Jun 15, 2020

Elllin Jun 16, 2020

sungik-choi Jun 15, 2020

sungik-choi Jun 15, 2020

sungik-choi Jun 15, 2020

Elllin Jun 16, 2020

sungik-choi Jun 15, 2020 •

edited

sungik-choi Jun 15, 2020

sungik-choi Jun 15, 2020

sungik-choi Jun 15, 2020

Elllin Jun 16, 2020

sungik-choi Jun 15, 2020

sungik-choi Jun 15, 2020

Elllin commented Jun 16, 2020


		import GlobalStyle from "./style/GlobalStyle";
		import styled from "styled-components";

		@@ -1,7 +1,76 @@
		import React from "react";

		import MenuList from "../../../common/MenuList";

[FE] Filter Menu Ui #30

[FE] Filter Menu Ui #30

Conversation

Elllin commented Jun 15, 2020 • edited

개요

작업사항

MenuList 컴포넌트 사용방법

변경로직

변경전

변경후

기타

sungik-choi Jun 15, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sungik-choi Jun 15, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Elllin commented Jun 16, 2020

Elllin commented Jun 15, 2020 •

edited

sungik-choi Jun 15, 2020 •

edited

sungik-choi Jun 15, 2020 •

edited