From 018e588a58a14d3b88d8ed9fcfd5ad4fd73a8be6 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Wed, 16 Jun 2021 17:29:45 +0900 Subject: [PATCH 1/8] =?UTF-8?q?add:=20=EC=B5=9C=EC=86=8C=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/frontend/src/App.css b/frontend/src/App.css index 44fb98d85..d006b6a58 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -12,6 +12,9 @@ a { :root { --TitleFontSize: 4.2rem; } +body { + min-width: 1046px; +} /* ====== Custom CSS - Dico, ppamppam ====== */ From 048d044b89a6f95b6306474b66de57bf5b534906 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Wed, 16 Jun 2021 17:30:03 +0900 Subject: [PATCH 2/8] =?UTF-8?q?add:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=84=ED=8F=AC=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/frontend/src/App.js b/frontend/src/App.js index ac170985a..b7ca389fc 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -7,6 +7,7 @@ import OAuthCallbackPage from 'pages/OAuthCallbackPage'; import IssueListPage from 'pages/IssueListPage'; import AddIssuePage from 'pages/AddIssuePage'; +import Header from 'components/common/Header'; // import CountMyRecoil from './components/Count/CountMyRecoil'; function App() { @@ -18,6 +19,10 @@ function App() { */} + { + window.location.pathname !== "/signin" + &&
+ } From 7894480fc133482a6cdd4457d903a28d7e2c26e3 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Wed, 16 Jun 2021 17:30:20 +0900 Subject: [PATCH 3/8] =?UTF-8?q?add:=20=ED=97=A4=EB=8D=94=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Header.tsx | 49 +++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 frontend/src/components/common/Header.tsx diff --git a/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx new file mode 100644 index 000000000..dace0672b --- /dev/null +++ b/frontend/src/components/common/Header.tsx @@ -0,0 +1,49 @@ +import { useState, useEffect} from 'react'; +import styled from 'styled-components'; + +import ResponsiveLayout from 'components/common/ResponsiveLayout'; + +const Header = () => { + + const [userInfo, setUserInfo] = useState(); + useEffect(() => { + if (localStorage.getItem("issue-tracker-user")) { + const parsedIssueTrackerUser = JSON.parse(localStorage.getItem("issue-tracker-user") as string); + setUserInfo(parsedIssueTrackerUser); + } else { + setUserInfo({}); + } + }, []) + + if (!userInfo) return <>; + + return ( + + Issue Tracker + {userInfo.profileImage && + + } + + ) +} + +const HeaderLayout = styled(ResponsiveLayout)` + padding-top: 27px; + padding-bottom: 27px; + background-color: #F7F7FC; + + display: flex; + justify-content: space-between; +`; +const HeaderTitle = styled.span` + font-weight: 500; + font-style: italic; + font-size: 3.2rem; +`; + +const HeaderThumbnail = styled.img` + width: 36px; + border-radius: 50%; + +`; +export default Header; From b9665abc4b0b0e295c2e34b35befe1715370e644 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Wed, 16 Jun 2021 17:31:20 +0900 Subject: [PATCH 4/8] =?UTF-8?q?fix:=20=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IssueCategoryFilter.tsx | 137 +++++++++++++++ .../src/components/IssueList/IssueList.tsx | 161 ++++++++++++++++++ frontend/src/components/common/DropDown.tsx | 98 +++++++++++ 3 files changed, 396 insertions(+) create mode 100644 frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx create mode 100644 frontend/src/components/IssueList/IssueList.tsx create mode 100644 frontend/src/components/common/DropDown.tsx diff --git a/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx new file mode 100644 index 000000000..de5a5c1a6 --- /dev/null +++ b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx @@ -0,0 +1,137 @@ +import { useState } from 'react'; +import styled from 'styled-components'; + +import DropDown from 'components/common/DropDown'; + +const IssueCategoryFilter = () => { + const [isClicked, setIsClicked] = useState(false); + const IssueCategoryFilterInfo = { + name: "필터", + header: "이슈 필터", + elements: [ + {contents: "열린 이슈", value: "OPENED"}, + {contents: "내가 작성한 이슈", value: "WRITTEN"}, + {contents: "나에게 할당된 이슈", value: "ASSIGNED"}, + {contents: "내가 댓글을 남긴 이슈", value: "REPLIED"}, + {contents: "닫힌 이슈", value: "CLOSED"}, + ] + } + + const handleFilterButtonClick = () => { + if (isClicked) setIsClicked(false); + else setIsClicked(true); + } + + return ( + + + + {/* 필터 */} + + + + + + + 레이블 + 마일스톤 + ﹢ 이슈 작성 + + + ) +} + +const FilterDropdownButton = styled.button` + padding: 0 30px; + background: #F7F7FC; + border: 1px solid #D9DBE9; + border-radius: 11px 0px 0px 11px; + + flex-basis: 120px; +`; + +const FilterCategoryButton = styled.button` + padding: 0 30px; + background: #F7F7FC; + border: 1px solid #D9DBE9; + border-radius: ${({type}) => type === "left" ? '11px 0px 0px 11px' : '0px 11px 11px 0px'}; + + flex-basis: 160px; +`; +const IssueCreateButton = styled.button` + padding: 0 30px; + margin-left: 15px; + color: white; + background-color: #007AFF; + border: none; + border-radius: 11px; + + flex-basis: 160px; +`; + +const FilterSearchInput = styled.input` + background: #EFF0F6; + border: 1px solid #D9DBE9; + border-radius: 0 11px 11px 0; + + flex-grow: 1; +`; + +const FilterRadio = styled.input`` +const FilterDropdownUnorderedList = styled.ul``; +const FilterDropdownElement = styled.li` + height: 44px; + padding: 8px 16px; + border: 1px solid #D9DBE9; + background-color: #FEFEFE; + + margin: -1px; + display: flex; + align-items: center; + justify-content: space-between; +`; +const FilterDropdownHeader = styled.header` + height: 48px; + padding: 8px 16px; + + display: flex; + align-items: center; + justify-content: space-between; +`; + +const FilterHeaderLayer = styled.div` + width: 100%; + height: 40px; + display: flex; + justify-content: space-between; +`; +const FilterHeaderBlock = styled.div` + width: 100%; + height: 100%; + display: flex; + justify-content: flex-end; + + & + & { + margin-left: 15px; + } +` + +const FilterDropDownLayer = styled.div` + width: 240px; + position: absolute; + margin-top: 50px; + + display: ${({isClicked}) => isClicked ? "block" : "none" }; + background: #D9DBE9; + border: 1px solid #D9DBE9; + border-radius: 16px; + + ul { + list-style-type: none; + margin-block: 0; + margin-inline: 0; + padding-inline: 0; + } +`; + +export default IssueCategoryFilter; \ No newline at end of file diff --git a/frontend/src/components/IssueList/IssueList.tsx b/frontend/src/components/IssueList/IssueList.tsx new file mode 100644 index 000000000..14e6ea827 --- /dev/null +++ b/frontend/src/components/IssueList/IssueList.tsx @@ -0,0 +1,161 @@ +import { useState } from 'react'; +import styled from 'styled-components'; + +import DropDown from 'components/common/DropDown'; + +const IssueManagerFilterInfo = { + name: "담당자", + header: "담당자 필터", + alignment: "reverse", + elements: [ + {contents: "담당자가 없는 이슈", value: 0, options:{}}, + // {} 동적 생성 + ] +} + +const IssueLabelFilterInfo = { + name: "레이블", + header: "레이블 필터", + alignment: "reverse", + elements: [ + {contents: "레이블이 없는 이슈", value: 0, options:{}}, + {contents: "bug", value: 1, options:{color: "red"}}, + {contents: "documentation", value: 2, options:{color: "blue"}}, + // {} 동적 생성 + ] +} + +const IssueMilestoneFilterInfo = { + name: "마일스톤", + header: "마일스톤 필터", + alignment: "reverse", + elements: [ + {contents: "마일스톤이 없는 이슈", value: 0, options:{}}, + {contents: "마스터즈 코스", value: 1, options:{}}, + + // {} 동적 생성 + ] +} + +const IssueAuthorFilterInfo = { + name: "작성자", + header: "작성자 필터", + alignment: "reverse", + elements: [ + {contents: "테스트 계정", value: 0, options:{}}, + // {contents: "마스터즈 코스", value: 1, options:{}}, + + // {} 동적 생성 + ] +} + +const IssueList = () => { + return ( + + + + + + + + + + + + + + + + + + {Array(3).fill(true).map((each) => { + return ( + + + + + + 디코 + 최고다 + + + profile img + + + ) + })} + + ) +} + +const IssueListLayout = styled.div` + width: 100%; + border: 1px solid #D9DBE9; + border-radius: 16px; + + display: flex; + flex-direction: column; + + div:last-child { + border-radius: 0 0 16px 16px; + } +`; + +const IssueListHeader = styled.div` + width: 100%; + background: #F7F7FC; + + padding: 16px 32px; + border-radius: 16px 16px 0px 0px; + border-bottom: 1px solid #D9DBE9; + box-sizing: border-box; + + display: flex; +`; + +const IssueListContents = styled.div` + width: 100%; + background-color: white; + + padding: 16px 32px; + box-sizing: border-box; + + display: flex; + + & + & { + border-top: 1px solid #D9DBE9; + } + +`; + +const IssueListLayer = styled.div` + display: flex; +`; +const IssueListCheckBoxLayer = styled(IssueListLayer)` + margin-right: 30px; + align-items: center; +`; +const IssueListButtonGroupLayer = styled(IssueListLayer)` + +`; +const IssueListFilterGroupLayer = styled(IssueListLayer)` + margin-left: auto; +`; + +const IssueListDetailInfomationLayer = styled(IssueListLayer)` + flex-direction: column; + width: 100%; +` + +const DetailInformationTitle = styled(IssueListLayer)` + margin-top: 10px; +`; +const DetailInformationContents = styled(IssueListLayer)` + margin-top: 10px; +`; + +const IssueListProfileLayer = styled(IssueListLayer)` + margin-left: auto; +`; + +export default IssueList; \ No newline at end of file diff --git a/frontend/src/components/common/DropDown.tsx b/frontend/src/components/common/DropDown.tsx new file mode 100644 index 000000000..39348da23 --- /dev/null +++ b/frontend/src/components/common/DropDown.tsx @@ -0,0 +1,98 @@ +import { useState } from 'react'; +import styled from 'styled-components'; + +const DropDown = ({ info }) => { + + const [isClicked, setIsClicked] = useState(false); + + const handleDropDownButtonClick = () => { + if (isClicked) setIsClicked(false); + else setIsClicked(true); + } + + return ( + + + {info.name} + + {isClicked && + + + {info.header} + + {info.elements.map((element) => { + return ( + + {element.contents} + + ) + })} + + + } + + ) +} + +const DropdownLayout = styled.div` + display: flex; + justify-content: ${({alignment}) => !alignment ? '': 'flex-end'}; +`; +const DropdownButton = styled.button` + padding: 0 30px; + background: #F7F7FC; + border: 1px solid #D9DBE9; + border-radius: 11px 0px 0px 11px; + + flex-basis: 120px; +`; + +const DropDownLayer = styled.div` + width: 240px; + position: absolute; + margin-top: 45px; + + /* background: #D9DBE9; */ + border: 1px solid #D9DBE9; + border-radius: 16px; + + ul { + list-style-type: none; + margin-block: 0; + margin-inline: 0; + padding-inline: 0; + } +`; + +const DropdownHeader = styled.header` + height: 48px; + padding: 8px 16px; + background-color: #D9DBE9; + border-radius: 16px 16px 0 0; + + display: flex; + align-items: center; + justify-content: space-between; +`; + +const DropdownUnorderedList = styled.ul``; +const DropdownElement = styled.li` + height: 44px; + padding: 8px 16px; + /* border: 1px solid #D9DBE9; */ + border-radius: 0 0 16px 16px; + background-color: #FEFEFE; + + /* margin: -1px; */ + display: flex; + align-items: center; + justify-content: space-between; + + & + & { + border-top: 1px solid #D9DBE9; + } +`; + +const Radio = styled.input`` + +export default DropDown; \ No newline at end of file From b47e637bcb97ae6624b08fded5e8b04ba1d9560a Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Wed, 16 Jun 2021 17:31:34 +0900 Subject: [PATCH 5/8] =?UTF-8?q?fix:=20=EC=98=A4=EC=96=B4=EC=8A=A4=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=A4=91=20=ED=91=9C=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/OAuthCallbackPage.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/OAuthCallbackPage.tsx b/frontend/src/pages/OAuthCallbackPage.tsx index c53e11e29..afcab23cf 100644 --- a/frontend/src/pages/OAuthCallbackPage.tsx +++ b/frontend/src/pages/OAuthCallbackPage.tsx @@ -13,13 +13,16 @@ const OAuthCallbackPage = () => { localStorage.setItem("issue-tracker-user", JSON.stringify(checkedUserInfo)); alert(`안녕하세요 ${checkedUserInfo.name}`); - window.location.href = '/'; + window.location.href = '/issues'; } fetchCode(); }, []) - return <>; + return ( +

로그인 중입니다

+ ); + } export default OAuthCallbackPage From 37c83fea108951124b281d5cfbbac02eeb2098e1 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Wed, 16 Jun 2021 17:31:55 +0900 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20=ED=86=A0=ED=81=B0=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/SigninPage.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/pages/SigninPage.tsx b/frontend/src/pages/SigninPage.tsx index dbf8efc27..45f6af38b 100644 --- a/frontend/src/pages/SigninPage.tsx +++ b/frontend/src/pages/SigninPage.tsx @@ -1,3 +1,4 @@ +import { useEffect } from 'react'; import styled from 'styled-components'; import ResponsiveLayout from '../components/common/ResponsiveLayout'; @@ -5,6 +6,13 @@ import ResponsiveLayout from '../components/common/ResponsiveLayout'; import * as Signin from '../components/SignIn'; const SigninPage = () => { + useEffect(() => { + // for test + if (localStorage.getItem("issue-tracker-user")) { + localStorage.removeItem("issue-tracker-user"); + } + }, []); + return ( From 8ae0fd53f1aea31edb38af4aa66174fde0dbd6a0 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Wed, 16 Jun 2021 17:32:09 +0900 Subject: [PATCH 7/8] =?UTF-8?q?add:=20=EC=9D=B4=EC=8A=88=20=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/IssueListPage.tsx | 148 ++------------------------- 1 file changed, 11 insertions(+), 137 deletions(-) diff --git a/frontend/src/pages/IssueListPage.tsx b/frontend/src/pages/IssueListPage.tsx index d50f34085..528f42a42 100644 --- a/frontend/src/pages/IssueListPage.tsx +++ b/frontend/src/pages/IssueListPage.tsx @@ -1,155 +1,25 @@ -import {useState} from 'react'; import styled from 'styled-components'; import ResponsiveLayout from 'components/common/ResponsiveLayout'; +import IssueCategoryFilter from 'components/IssueCategoryFilter/IssueCategoryFilter'; + +import IssueList from 'components/IssueList/IssueList'; const IssueListPage = () => { - const [isClicked, setIsClicked] = useState(false); - const handleFilterButtonClick = () => { - if (isClicked) setIsClicked(false); - else setIsClicked(true); - } - return ( -

이슈

- - - - - 필터 - - - - - - 레이블 - 마일스톤 - ﹢ 이슈 작성 - - - - 이슈 필터 - - - 열린 이슈 - - - 내가 작성한 이슈 - - - 나에게 할당된 이슈 - - - 내가 댓글을 남긴 이슈 - - - 닫힌 이슈 - - - - - - + + ) } -const FilterDropdownButton = styled.button` - padding: 0 30px; - background: #F7F7FC; - border: 1px solid #D9DBE9; - border-radius: 11px 0px 0px 11px; - - flex-basis: 120px; -`; - -const FilterCategoryButton = styled.button` - padding: 0 30px; - background: #F7F7FC; - border: 1px solid #D9DBE9; - border-radius: ${({type}) => type === "left" ? '11px 0px 0px 11px' : '0px 11px 11px 0px'}; - - flex-basis: 160px; -`; -const IssueCreateButton = styled.button` - padding: 0 30px; - margin-left: 15px; - color: white; - background-color: #007AFF; - border: none; - border-radius: 11px; - - flex-basis: 160px; -`; - -const FilterSearchInput = styled.input` - width: 100%; - background: #EFF0F6; - border: 1px solid #D9DBE9; - border-radius: 0px 11px 11px 0px; -`; - -const FilterRadio = styled.input`` -const FilterDropdownUnorderedList = styled.ul``; -const FilterDropdownElement = styled.li` - height: 44px; - padding: 8px 16px; - border: 1px solid #D9DBE9; - background-color: #FEFEFE; - - margin: -1px; - display: flex; - align-items: center; - justify-content: space-between; -`; -const FilterDropdownHeader = styled.header` - height: 48px; - padding: 8px 16px; - - display: flex; - align-items: center; - justify-content: space-between; -`; - -const FilterHeaderLayer = styled.div` - width: 100%; - height: 40px; - display: flex; - justify-content: space-between; -`; -const FilterHeaderBlock = styled.div` - width: 100%; - height: 100%; - display: flex; - - & + & { - margin-left: 15px; - } -` - -const FilterDropDownLayer = styled.div` - width: 240px; - position: absolute; - margin-top: 50px; - - display: ${({isClicked}) => isClicked ? "block" : "none" }; - background: #D9DBE9; - border: 1px solid #D9DBE9; - border-radius: 16px; - - ul { - list-style-type: none; - margin-block: 0; - margin-inline: 0; - padding-inline: 0; - } -`; - const IssueListLayout = styled.div` + background-color: #F7F7FC; + height: calc(100vh - 10px); `; const IssueListBlock = styled(ResponsiveLayout)` @@ -159,6 +29,10 @@ const IssueListBlock = styled(ResponsiveLayout)` display: flex; flex-direction: column; + + & > div + div { + margin-top: 24px; + } ` export default IssueListPage; \ No newline at end of file From 661f68d4bb98e1f85822d8b1d0a3ae7edaaee3f5 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Wed, 16 Jun 2021 17:32:33 +0900 Subject: [PATCH 8/8] =?UTF-8?q?fix:=20ResponsiveLayout=20=ED=95=AB?= =?UTF-8?q?=ED=94=BD=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/ResponsiveLayout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/common/ResponsiveLayout.tsx b/frontend/src/components/common/ResponsiveLayout.tsx index 286f23ebf..1ec0620c4 100644 --- a/frontend/src/components/common/ResponsiveLayout.tsx +++ b/frontend/src/components/common/ResponsiveLayout.tsx @@ -15,4 +15,4 @@ const ResponsiveLayer = styled.div` padding: 0 80px; box-sizing: border-box; ` -export default ResponsiveLayout +export default ResponsiveLayout; \ No newline at end of file