[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;
-`;