From 3caa70195af5a0df04dfbd194008866b71ca5ddd Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Fri, 18 Jun 2021 16:09:34 +0900 Subject: [PATCH 1/2] =?UTF-8?q?add:=20=EB=8D=B0=EB=AA=A8=EB=A5=BC=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EC=9D=B4=EC=8A=88=20api=20get?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../IssueCategoryFilter.tsx | 2 +- .../src/components/IssueList/IssueList.tsx | 43 ++++++++++++++++++- frontend/src/components/common/Header.tsx | 8 +++- frontend/src/components/common/icons/plus.tsx | 6 +-- frontend/src/lib/API/API.js | 33 ++++++++++++++ 5 files changed, 86 insertions(+), 6 deletions(-) create mode 100644 frontend/src/lib/API/API.js diff --git a/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx index a8c3514ce..b7d3a83c4 100644 --- a/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx +++ b/frontend/src/components/IssueCategoryFilter/IssueCategoryFilter.tsx @@ -39,7 +39,7 @@ const IssueCategoryFilter = () => { 레이블 마일스톤 - ﹢ 이슈 작성 + ﹢ 이슈 작성 ) diff --git a/frontend/src/components/IssueList/IssueList.tsx b/frontend/src/components/IssueList/IssueList.tsx index 5a278dd6b..15462b88c 100644 --- a/frontend/src/components/IssueList/IssueList.tsx +++ b/frontend/src/components/IssueList/IssueList.tsx @@ -1,10 +1,12 @@ -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import styled from 'styled-components'; import DropDown from 'components/common/DropDown'; import ArrowIcon from 'components/common/icons/ArrowIcon'; import Label from 'components/common/Label'; +import API from 'lib/API/API'; + const IssueManagerFilterInfo = { name: "담당자", header: "담당자 필터", @@ -56,6 +58,18 @@ const IssueAuthorFilterInfo = { } const IssueList = () => { + const [issues, setIssues] = useState([]); + + useEffect(() => { + const fetchIssues = async () => { + const result = await API.get.issues("is open"); + console.log("fetchIssues", result) + setIssues(result.issueList); + } + fetchIssues(); + }, []) + + if (issues.length === 0) {return <>} return ( @@ -93,6 +107,27 @@ const IssueList = () => { ) })} + { + issues.map((issue) => { + return ( + + + + + + + {issue.issueDTO.issueInfo.title} + + #{issue.issueDTO.issueInfo.issueId} + + + + + + ) + }) + } ) } @@ -174,4 +209,10 @@ const IssueListProfileLayer = styled(IssueListLayer)` margin-left: auto; `; +const ProfileImg = styled.img` + width: 50px; + height: 50px; + border-radius: 50%; +`; + export default IssueList; \ No newline at end of file diff --git a/frontend/src/components/common/Header.tsx b/frontend/src/components/common/Header.tsx index dace0672b..774421e9f 100644 --- a/frontend/src/components/common/Header.tsx +++ b/frontend/src/components/common/Header.tsx @@ -1,5 +1,6 @@ import { useState, useEffect} from 'react'; import styled from 'styled-components'; +import { Link, withRouter } from 'react-router-dom'; import ResponsiveLayout from 'components/common/ResponsiveLayout'; @@ -15,11 +16,15 @@ const Header = () => { } }, []) + const handleHeaderClick = () => { + window.location.href = "/issues"; + } + if (!userInfo) return <>; return ( - Issue Tracker + Issue Tracker {userInfo.profileImage && } @@ -39,6 +44,7 @@ const HeaderTitle = styled.span` font-weight: 500; font-style: italic; font-size: 3.2rem; + cursor: pointer; `; const HeaderThumbnail = styled.img` diff --git a/frontend/src/components/common/icons/plus.tsx b/frontend/src/components/common/icons/plus.tsx index 135f3f3d6..7611daf3f 100644 --- a/frontend/src/components/common/icons/plus.tsx +++ b/frontend/src/components/common/icons/plus.tsx @@ -3,10 +3,10 @@ import React from 'react' const Plus = () => { return ( - - + + ) } -export default Plus; +export default Plus; \ No newline at end of file diff --git a/frontend/src/lib/API/API.js b/frontend/src/lib/API/API.js new file mode 100644 index 000000000..cac53c14e --- /dev/null +++ b/frontend/src/lib/API/API.js @@ -0,0 +1,33 @@ +// useFetch 커스텀훅으로 수정예정 + +const END_POINT = "http://ec2-13-124-158-166.ap-northeast-2.compute.amazonaws.com/api" + +const TOKEN = JSON.parse(localStorage.getItem("issue-tracker-user")); + +const headerMaker = ({token}) => { + return { + headers: { + 'Content-Type': 'application/json', + 'Authorization': `bearer ${token}` + }, + } +} + +const API = { + get: { + issues: async (query) => { + let targetURL = `${END_POINT}/issues`; + if (query) targetURL += `?searchFilter=${query}`; + return await fetch(targetURL, {...headerMaker({token: TOKEN.accessToken})}).then((response) => { + return response.json(); + }); + // console.log("API call", result); + } + }, + post: {}, + patch: {}, + put: {}, + delete: {} +} + +export default API; \ No newline at end of file From f50b4dc71900fe64f5aea634ccebd2685c4cc7f5 Mon Sep 17 00:00:00 2001 From: Jaeuk-YOO Date: Fri, 18 Jun 2021 16:12:53 +0900 Subject: [PATCH 2/2] =?UTF-8?q?add:=20=EB=8D=B0=EB=AA=A8=EB=A5=BC=20?= =?UTF-8?q?=EC=9C=84=ED=95=9C=20=EC=9D=B4=EC=8A=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=8B=9C=20=ED=95=AB=ED=94=BD=EC=8A=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/pages/AddIssuePage.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/AddIssuePage.tsx b/frontend/src/pages/AddIssuePage.tsx index 5acf75905..8c781e1a3 100644 --- a/frontend/src/pages/AddIssuePage.tsx +++ b/frontend/src/pages/AddIssuePage.tsx @@ -1,5 +1,7 @@ -import styled from 'styled-components'; import { useEffect, useState, useRef } from 'react' +import { Link } from 'react-router-dom' +import styled from 'styled-components'; + import ResponsiveLayout from '../components/common/ResponsiveLayout'; import Plus from '../components/common/icons/Plus'; import Close from '../components/common/icons/Close'; @@ -151,7 +153,9 @@ const AddIssuePage = () => { 작성 취소 - 완료 + + 완료 + )