[team-12] Eamon & Autumn 3주차 PR

fe/package.json

@@ -14,6 +14,7 @@
  "@types/react-router-dom": "^5.1.7",
  "@types/styled-components": "^5.1.9",
  "axios": "^0.21.1",
+ "jwt-decode": "^3.1.2",
  "material-ui-popup-state": "^1.8.3",
  "qs": "^6.7.0",
  "react": "^17.0.2",

fe/src/App.tsx

@@ -1,37 +1,26 @@
-import { Route, BrowserRouter, Switch } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import GlobalStyle from 'style/GlobalStyle';
 import { theme } from 'style/theme';
-import IssuesPage from 'pages/IssuesPage';
-import LoginPage from 'pages/LoginPage';
-import OAuthPage from 'pages/OAuthPage';
 import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
 import { unstable_createMuiStrictModeTheme } from '@material-ui/core/styles';
-import NewIssuePage from 'pages/NewIssuePage';
+import { RecoilRoot } from 'recoil';
+import { Suspense } from 'react';
+
+import Router from 'Router';
 const MuiTheme = unstable_createMuiStrictModeTheme();
+
 function App() {
  return (
- <MuiThemeProvider theme={MuiTheme}>
- <ThemeProvider theme={theme}>
- <GlobalStyle />
- <BrowserRouter>
- <Switch>
- <Route path={['/', '/issues']} exact>
- <IssuesPage />
- </Route>
- <Route path={'/issues/new-issue'} exact>
- <NewIssuePage />
- </Route>
- <Route path="/login" exact>
- <LoginPage />
- </Route>
- <Route path="/login/oauth">
- <OAuthPage />
- </Route>
- </Switch>
- </BrowserRouter>
- </ThemeProvider>
- </MuiThemeProvider>
+ <RecoilRoot>
+ <Suspense fallback={<div>Loading...</div>}>
+ <MuiThemeProvider theme={MuiTheme}>
+ <ThemeProvider theme={theme}>
+ <GlobalStyle />
+ <Router />
+ </ThemeProvider>
+ </MuiThemeProvider>
+ </Suspense>
+ </RecoilRoot>
  );
 }
 

fe/src/Router.tsx

@@ -0,0 +1,45 @@
+import { Route, BrowserRouter, Switch } from 'react-router-dom';
+import IssuesPage from 'pages/IssuesPage';
+import LoginPage from 'pages/LoginPage';
+import OAuthPage from 'pages/OAuthPage';
+import NewIssuePage from 'pages/NewIssuePage';
+import LabelPage from 'pages/LabelPage';
+import MilestoneListPage from 'pages/MilestoneListPage';
+import IssueDetailPage from 'pages/IssueDetailPage';
+import Header from 'components/header/Header';
+
+const Router = () => {
+ return (
+ <BrowserRouter>
+ <Switch>
+ <Route path="/" exact>
+ <LoginPage />
+ </Route>
+ <Route path="/login/callback">
+ <OAuthPage />
+ </Route>
+ <Header />
+ </Switch>
+
+ <Switch>
+ <Route path={'/issues/new-issue'}>
+ <NewIssuePage />
+ </Route>
+ <Route path="/issues/:id">
+ <IssueDetailPage />
+ </Route>
+ <Route path="/issues">
+ <IssuesPage />
+ </Route>
+ <Route path="/labels" exact>
+ <LabelPage />
+ </Route>
+ <Route path="/milestones" exact>
+ <MilestoneListPage />
+ </Route>
+ </Switch>
+ </BrowserRouter>
+ );
+};
+
+export default Router;

fe/src/api/index.ts

@@ -0,0 +1,10 @@
+import axios from 'axios';
+import { setInterceptors } from './interceptors';
+
+
+
+function createInstanceWithAuth() {
+ const instance = axios.create();
+ return setInterceptors(instance);
+}
+export const instanceWithAuth = createInstanceWithAuth();

fe/src/api/interceptors.ts

@@ -0,0 +1,31 @@
+import { AxiosInstance } from 'axios';
+
+export function setInterceptors(instance: AxiosInstance): AxiosInstance {
+ instance.interceptors.request.use(
+ function (config) {
+ const token = localStorage.getItem('jwt');
+ config.headers.Authorization = `Bearer ${token}`;
+
+ return config;
+ },
+ function (error) {
+ // Do something with request error
+ return Promise.reject(error);
+ }
+ );
+
+ // Add a response interceptor
+ instance.interceptors.response.use(
+ function (response) {
+ // Any status code that lie within the range of 2xx cause this function to trigger
+ // Do something with response data
+ return response;
+ },
+ function (error) {
+ // Any status codes that falls outside the range of 2xx cause this function to trigger
+ // Do something with response error
+ return Promise.reject(error);
+ }
+ );
+ return instance;
+}

fe/src/components/Issues/IssueItem.tsx

@@ -1,14 +1,10 @@
-import { Checkbox } from '@material-ui/core';
-import { ReactComponent as Open } from 'icons/openIssue.svg';
-import { ReactComponent as Close } from 'icons/closeIssue.svg';
-import { ReactComponent as Milestone } from 'icons/openMilestone.svg';
 import styled from 'styled-components';
 import { IssueItemType } from 'types/issueType';
 import AuthorAvatar from 'components/common/AuthorAvatar';
 import IssueItemLeft from './IssueItemLeft';
 
 const IssueItem = ({
- isOpen,
+ id,
  title,
  labeList,
  issueNumber,
@@ -19,14 +15,10 @@ const IssueItem = ({
  return (
  <StyledIssueItem>
  <IssueItemLeft
- {...{ title, labeList, issueNumber, createdTime, milestoneTitle }}
+ {...{ id, title, labeList, issueNumber, createdTime, milestoneTitle }}
  />
  <IssueItemRight>
- <AuthorAvatar
- name={author.name}
- profileImg={author.profileImg}
- size="S"
- />
+ <AuthorAvatar profileImg={author.profileImg} size="S" />
  </IssueItemRight>
  </StyledIssueItem>
  );

fe/src/components/Issues/IssueItemLeft.tsx

@@ -1,29 +1,46 @@
 import styled from 'styled-components';
 import { IssueItemLeftPropsType } from 'types/issueType';
 import { ReactComponent as Open } from 'icons/openIssue.svg';
-import { ReactComponent as Close } from 'icons/closeIssue.svg';
+// import { ReactComponent as Close } from 'icons/closeIssue.svg';
 import { ReactComponent as Milestone } from 'icons/openMilestone.svg';
 import { Checkbox } from '@material-ui/core';
 import Label from 'components/common/Label';
+import { useHistory } from 'react-router-dom';
+import { useSetRecoilState } from 'recoil';
+import { clickedIssueIdAtom } from 'stores/issueStore';
 
 const IssueItemLeft = ({
+ id,
  title,
  issueNumber,
  createdTime,
  milestoneTitle,
  labeList,
 }: IssueItemLeftPropsType) => {
+ const history = useHistory();
+ const setClickedIssueId = useSetRecoilState(clickedIssueIdAtom);
+
+ const routeToIssueDetailPage = () => {
+ setClickedIssueId(id);
+ history.push(`/issues/${issueNumber}`);
+ };
+
  return (
  <StyledIssueItemLeft>
  <IssueTitle>
  <Checkbox color="primary" />
- <span>
-  <OpenSvg />
+ <OpenSvg />
+ <span className="title" onClick={routeToIssueDetailPage}>
  {title}
  </span>
- {labeList.length
- ? labeList.map((label,idx) => <Label key={idx} {...{ ...label }} />)
- : null}
+ <Spacer />
+ <SelectedLables>
+ {labeList.length
+ ? labeList.map((label, idx) => (
+ <Label key={idx} {...{ ...label }} />
+ ))
+ : null}
+ </SelectedLables>
  </IssueTitle>
  <IssueSubtitle>
  #{issueNumber} {createdTime} <MilestoneSvg /> {milestoneTitle}
@@ -35,14 +52,19 @@ const IssueItemLeft = ({
 export default IssueItemLeft;
 
 const StyledIssueItemLeft = styled.div`
- ${({ theme }) => theme.style.flexColum};
+ ${({ theme }) => theme.style.flexColumn};
 `;
 
 const IssueTitle = styled.div`
  ${({ theme }) => theme.style.flexAlignItemsCenter};
-`;
-const IssueItemRight = styled.div`
- padding-right: 1.4rem;
+
+ .title {
+ font-weight: ${({ theme }) => theme.fontWeight.bold};
+ }
+ .title:hover {
+ color: ${({ theme }) => theme.color.darkBlue};
+ cursor: pointer;
+ }
 `;
 
 const OpenSvg = styled(Open)`
@@ -53,6 +75,15 @@ const OpenSvg = styled(Open)`
  margin-right: 0.2rem;
 `;
 
+const Spacer = styled.div`
+ width: 0.5rem;
+`;
+
+const SelectedLables = styled.div`
+ display: flex;
+ gap: 0.3rem;
+`;
+
 const MilestoneSvg = styled(Milestone)`
  path {
  stroke: inherit;

fe/src/components/Issues/IssueList.tsx

@@ -1,36 +1,14 @@
+import { useRecoilValue } from 'recoil';
+import { issuesQuery } from 'stores/issueStore';
 import styled from 'styled-components';
-import { IssueItemType } from 'types/issueType';
 import IssueItem from './IssueItem';
 
 export const IssueList = () => {
- const testIssueArray: IssueItemType[] = [
- {
- isOpen: true,
- title: '이슈 제목',
- labeList: [
- { title: '레이블 이름', colorCode: '#4444', textColor: 'white' },
- ],
- issueNumber: 1,
- author: { name: 'eamon', profileImg: undefined },
- createdTime: '2021-06-21 12:11',
- milestoneTitle: '마스터즈 코스',
- },
- {
- isOpen: true,
- title: '이슈 제목',
- labeList: [
- { title: '레이블 이름', colorCode: '#009999f0', textColor: 'black' },
- { title: '레이블 이름', colorCode: '#4444', textColor: 'black' },
- ],
- issueNumber: 2,
- author: { name: 'eamon', profileImg: undefined },
- createdTime: '2021-06-21 12:11',
- milestoneTitle: '마스터즈 코스',
- },
- ];
+ const IssuesArray = useRecoilValue(issuesQuery);
+
  return (
  <StyledIssueList>
- {testIssueArray.map((issue, idx) => (
+ {IssuesArray.map((issue, idx) => (
  <IssueItem {...issue} key={idx} />
  ))}
  </StyledIssueList>

fe/src/components/Issues/Issues.tsx

@@ -1,34 +1,18 @@
-import styled from 'styled-components';
+import { Wrapper, Upper, Lower } from 'components/common/Table';
 import IssueList from './IssueList';
 import IssuesHeader from './IssuesHeader';
 
 const Issues = () => {
  return (
- <StyledIssues>
- <StyledIssuesHeader>
+ <Wrapper>
+ <Upper>
  <IssuesHeader />
- </StyledIssuesHeader>
- <StyledIssuesContent>
+ </Upper>
+ <Lower>
  <IssueList />
- </StyledIssuesContent>
- </StyledIssues>
+ </Lower>
+ </Wrapper>
  );
 };
 
 export default Issues;
-
-const StyledIssues = styled.div`
- ${({ theme }) => theme.style.flexColum}
- box-sizing: border-box;
-`;
-
-const StyledIssuesHeader = styled.div`
- ${({ theme }) => theme.style.upperWrapper}
- width: 100%;
- box-sizing: border-box;
-`;
-
-const StyledIssuesContent = styled.div`
- ${({ theme }) => theme.style.lowerWrapper}
- box-sizing: border-box;
-`;