Skip to content

Commit

Permalink
Merge pull request #44 from ppamppamman/fe/feature/issues
Browse files Browse the repository at this point in the history
[FE] 데모 전 핫픽스
  • Loading branch information
ppamppamman authored Jun 18, 2021
2 parents cfe4573 + f50b4dc commit 0b24213
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 8 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const IssueCategoryFilter = () => {
<FilterCategoryButton type={'left'}> 레이블 </FilterCategoryButton>
<FilterCategoryButton type={'right'}> 마일스톤 </FilterCategoryButton>

<Link to="/"> <IssueCreateButton> ﹢ 이슈 작성 </IssueCreateButton> </Link>
<Link to="/add/issue"> <IssueCreateButton> ﹢ 이슈 작성 </IssueCreateButton> </Link>
</FilterHeaderBlock>
</FilterHeaderLayer>
)
Expand Down
43 changes: 42 additions & 1 deletion frontend/src/components/IssueList/IssueList.tsx
Original file line number Diff line number Diff line change
@@ -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: "담당자 필터",
Expand Down Expand Up @@ -56,6 +58,18 @@ const IssueAuthorFilterInfo = {
}

const IssueList = () => {
const [issues, setIssues] = useState<any>([]);

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 (
<IssueListLayout>
<IssueListHeader>
Expand Down Expand Up @@ -93,6 +107,27 @@ const IssueList = () => {
</IssueListContents>
)
})}
{
issues.map((issue) => {
return (
<IssueListContents>
<IssueListCheckBoxLayer>
<input type="checkbox" />
</IssueListCheckBoxLayer>
<IssueListDetailInfomationLayer>
<DetailInformationTitleArea>
<DetailInformationTitle> {issue.issueDTO.issueInfo.title} </DetailInformationTitle>
<Label type={"DEFAULT"} value={"레이블 이름"} />
</DetailInformationTitleArea>
<DetailInformationContents>#{issue.issueDTO.issueInfo.issueId} </DetailInformationContents>
</IssueListDetailInfomationLayer>
<IssueListProfileLayer>
<ProfileImg src={issue.issueDTO.userDTO.profileImage} />
</IssueListProfileLayer>
</IssueListContents>
)
})
}
</IssueListLayout>
)
}
Expand Down Expand Up @@ -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;
8 changes: 7 additions & 1 deletion frontend/src/components/common/Header.tsx
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -15,11 +16,15 @@ const Header = () => {
}
}, [])

const handleHeaderClick = () => {
window.location.href = "/issues";
}

if (!userInfo) return <></>;

return (
<HeaderLayout>
<HeaderTitle>Issue Tracker</HeaderTitle>
<HeaderTitle onClick={handleHeaderClick}>Issue Tracker</HeaderTitle>
{userInfo.profileImage &&
<HeaderThumbnail src={userInfo.profileImage}></HeaderThumbnail>
}
Expand All @@ -39,6 +44,7 @@ const HeaderTitle = styled.span`
font-weight: 500;
font-style: italic;
font-size: 3.2rem;
cursor: pointer;
`;

const HeaderThumbnail = styled.img`
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/common/icons/plus.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import React from 'react'
const Plus = () => {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 3.3335V12.6668" stroke="#6E7191" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.33337 8H12.6667" stroke="#6E7191" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 3.3335V12.6668" stroke="#6E7191" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3.33337 8H12.6667" stroke="#6E7191" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
)
}

export default Plus;
export default Plus;
33 changes: 33 additions & 0 deletions frontend/src/lib/API/API.js
Original file line number Diff line number Diff line change
@@ -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;
8 changes: 6 additions & 2 deletions frontend/src/pages/AddIssuePage.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -151,7 +153,9 @@ const AddIssuePage = () => {
</ContentBlock>
<ButtonBlock>
<CancelButton><Close/>작성 취소</CancelButton>
<UploadButton>완료</UploadButton>
<Link to="/issues">
<UploadButton>완료</UploadButton>
</Link>
</ButtonBlock>
</AddIssueLayout>
)
Expand Down

0 comments on commit 0b24213

Please sign in to comment.