Merge branch 'KEA-ACCELER:develop' into develop

.env copy

@@ -1,4 +1,7 @@
 # GitHub Auth
 
 REACT_APP_CLIENT_ID=
-GH_LOGIN_REDIRECT_URL=http://localhost:3000/login
+GH_LOGIN_REDIRECT_URL=http://localhost:3000/login
+
+REACT_APP_YORKIE_API_URL=
+REACT_APP_YORKIE_API_KEY=

Dockerfile

@@ -2,9 +2,13 @@ FROM node:lts AS build
 
 ARG REACT_APP_CLIENT_ID
 ARG REACT_APP_ALOG_API_URL
+ARG REACT_APP_YORKIE_API_URL
+ARG REACT_APP_YORKIE_API_KEY
 
 ENV REACT_APP_CLIENT_ID=$REACT_APP_CLIENT_ID
 ENV REACT_APP_ALOG_API_URL=$REACT_APP_ALOG_API_URL
+ENV REACT_APP_YORKIE_API_URL=$REACT_APP_YORKIE_API_URL
+ENV REACT_APP_YORKIE_API_KEY=$REACT_APP_YORKIE_API_KEY
 
 WORKDIR /app
 

src/components/Notification/Notification.css

@@ -1,7 +1,7 @@
 .Notification .offcanvas-body {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   height: 100%;
 }
 
@@ -27,7 +27,8 @@
 }
 
 .Notification .issue-container .issue-msg-time .issue-time {
-  margin-left: 1rem;
+  margin-right: 1.5rem;
+  margin-bottom: 0.5rem;
   color: gray;
 }
 
@@ -38,14 +39,26 @@
 }
 
 .Notification .issue-container .issue-img-content .issue-content {
-  margin-left: 0.5rem;
+  margin-right: 0.5rem;
 }
 
 .Notification .issue-container .issue-img-content .checkImg {
+  margin-right: 1rem;
+  width: 1.4rem;
+  height: auto;
+}
+
+.checkImg:hover {
+  cursor: pointer;
+  scale: 1.1;
+}
+
+.Notification .issue-container .issue-img-content .checkedImg {
+  margin-right: 1rem;
   width: 1.4rem;
   height: auto;
 }
 
 .Notification .issue-container .issue-status {
   margin-left: 2rem;
-}
+}

src/components/Notification/Notification.js

@@ -1,33 +1,53 @@
 import Button from "react-bootstrap/Button";
 import Offcanvas from "react-bootstrap/Offcanvas";
 import "./Notification.css";
-import { useNavigate } from "react-router-dom";
-import { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { useEffect, useState, useContext } from "react";
 import Check from "../../assets/images/check.png";
+import Uncheck from "../../assets/images/uncheck.png";
+import { AuthenticationContext } from "../../service/authentication/authentication.context";
+import { GetNotifications, CheckNotification } from "../../service/notification/notification.service";
 
 function Notification({ show, handleClose }) {
+  const location = useLocation();
   const navigate = useNavigate();
+  const userToken = useContext(AuthenticationContext).userToken;
+  const [notifications, setNotifications] = useState([]);
 
   const [showViewAll, setShowViewAll] = useState(false);
 
   const handleViewAll = () => {
     setShowViewAll(false);
-    navigate("/myIssues");
+    navigate("/myIssues", { state: { from: location.state } });
   };
 
-  const alarms = [
-    {
-      date: "2023-07-27",
-      issues: [
-        {
-          message: "Faker이(가) 귀하에게 이슈를 할당",
-          time: "5분 전",
-          content: "주관식 답변 처리",
-          status: "해야 할 일",
-        },
-      ],
-    },
-  ];
+  const getMinutesAgo = (datetime) => {
+    const date = new Date(datetime);
+    const now = new Date();
+    return Math.round((now.getTime() - date.getTime()) / 60000);
+  }
+
+  // const alarms = [
+  //   {
+  //     datetime: "2023-07-27",
+  //     issues: [
+  //       {
+  //         message: "Faker이(가) 귀하에게 이슈를 할당",
+  //         time: "5분 전",
+  //         content: "주관식 답변 처리",
+  //         status: "해야 할 일",
+  //       },
+  //     ],
+  //   },
+  // ];
+
+  useEffect(() => {
+    GetNotifications(userToken).then((newNoti) => {
+      if (newNoti != null) {
+        setNotifications(newNoti);
+      }
+    });
+  }, []);
 
   return (
     <div>
@@ -36,22 +56,34 @@ function Notification({ show, handleClose }) {
           <Offcanvas.Title>알림</Offcanvas.Title>
         </Offcanvas.Header>
         <Offcanvas.Body className="offcanvas-body">
-          {alarms.map((alarm, index) => (
-            <div key={index}>
-              <div className="issue-date">{alarm.date}</div>
-              {alarm.issues.map((issue, issueIndex) => (
-                <div className="issue-container" key={issueIndex}>
-                  <div className="issue-msg-time">
-                    <div className="issue-msg">{issue.message} </div> <div className="issue-time">{issue.time} </div>
-                  </div>
-                  <div className="issue-img-content">
-                    <img src={Check} alt="Checkmark" className="checkImg" />
-                    <div className="issue-content">{issue.content}</div>
-                  </div>
-
-                  <div className="issue-status">● {issue.status}</div>
+          {notifications.map((noti, index) => (
+            <div key={index} style={ {marginBottom: '5%' }}>
+              <div className="issue-date">{noti.Datetime.substring(0,10)}</div>
+              <div className="issue-container" key={noti.Id}>
+                <div className="issue-msg-time">
+                  <div className="issue-msg">{noti.MsgContent} </div> 
                 </div>
-              ))}
+                <div className="issue-img-content">
+                  {noti.IsChecked ? 
+                  <img src={Check} alt="Checkmark" className="checkedImg" />
+                  : <img src={Uncheck} alt="Checkmark" className="checkImg" onClick={() => {
+                    CheckNotification(userToken, noti.Id).then((res) => {
+                      if (res.data === 'ok') {
+                        GetNotifications(userToken).then((newNoti) => {
+                          if (newNoti != null) {
+                            setNotifications(newNoti);
+                          }
+                        });
+                      }
+                    });
+                  }} />
+                  }
+                  <div className="issue-time">{getMinutesAgo(noti.Datetime) + 'min ago'}</div>
+                  {/* <div className="issue-content">{'읽음 표시'}</div> */}
+                </div>
+
+                {/* <div className="issue-status">● {issue.status}</div> */}
+              </div>
             </div>
           ))}
           <div className="button-container">

src/navigation/AppRouter.tsx

@@ -42,7 +42,7 @@ const AppRouter = (): JSX.Element => {
             <Route path="/:teamPk/:projectPk/Board" element={<Board />} />
             <Route path="/:teamPk/:projectPk/Timeline" element={<Timeline />} />
             <Route path="/:teamPk/:projectPk/ReleaseNote" element={<ReleaseNote />} />
-            <Route path="/:teamPk/:projectPk/CreateReleaseNote" element={<CreateReleaseNote />} />
+            <Route path="/:teamPk/:projectPk/CreateReleaseNote/:notePk" element={<CreateReleaseNote />} />
           </Route>
         </Route>
       </Routes>

src/pages/ReleaseNote/CreateReleaseNote.tsx

@@ -1,13 +1,15 @@
 import { Button, Fade } from "react-bootstrap";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useLocation, useParams } from "react-router-dom";
 import "./CreateReleaseNote.css";
 import { RNBadge } from "../../components/RNBadge";
 import { FloatingWrapper } from "../../components/FloatingWrapper";
 import { RNColumn } from "../../components/RNColumn";
 import { RNColumnContentData, RNTag, ReleaseNoteColumnData, ReleaseNoteData } from "../../interfaces/releaseNote.interface";
-import { useRef, useState, useEffect } from "react";
+import { useRef, useState, useEffect, useContext } from "react";
+import { AuthenticationContext } from "../../service/authentication/authentication.context";
+import axios from "axios";
 import FadeIn from "../../animation/FadeIn";
-import yorkie, { Text as YorkieText, OperationInfo } from "yorkie-js-sdk";
+import yorkie, { Text as YorkieText, Document as YorkieDocument } from 'yorkie-js-sdk';
 
 const yorkieApiURL: string = process.env.REACT_APP_YORKIE_API_URL!;
 const yorkieApiKey: string = process.env.REACT_APP_YORKIE_API_KEY!;
@@ -27,14 +29,14 @@ const initialDisplayData: ReleaseNoteData = {
 
 export const CreateReleaseNote = () => {
   const navigate = useNavigate();
+  const location = useLocation();
+  const pjPk = useParams().projectPk;
+  const teamPk = useParams().teamPk;
+  const notePk = useParams().notePk;
+  const { userToken } = useContext(AuthenticationContext);
   const [render, setRender] = useState({});
   const [client, setClient] = useState(new yorkie.Client(yorkieApiURL, { apiKey: yorkieApiKey }));
-  const [doc, setDoc] = useState(
-    new yorkie.Document<ReleaseNoteData>(
-      // `release-note-${Math.floor(Math.random() * 100000)}`,
-      `release-note-42`
-    )
-  );
+  const [doc, setDoc] = useState<YorkieDocument<ReleaseNoteData>>(new YorkieDocument<ReleaseNoteData>('rn-' + notePk));
 
   const toggleTag = (tag: RNTag) => {
     doc.update((root) => {
@@ -50,7 +52,7 @@ export const CreateReleaseNote = () => {
   };
 
   const onSaveRelaseNote = () => {
-    navigate("/releasenote");
+    navigate(`/${teamPk}/${pjPk}/ReleaseNote`, { state: location.state });
   };
 
   useEffect(() => {

src/pages/ReleaseNote/ReleaseNote.css

@@ -17,7 +17,7 @@
 .ReleaseNote .mainWrapper {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   width: 100%;
   padding-right: 6%;
 }

src/pages/ReleaseNote/ReleaseNote.tsx

@@ -1,27 +1,66 @@
 import { Button } from "react-bootstrap";
-import { useNavigate, useLocation } from "react-router-dom";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 import "./ReleaseNote.css";
 import { FloatingWrapper } from "../../components/FloatingWrapper";
 import { RNBadge } from "../../components/RNBadge";
 import { ReleaseNoteData } from "../../interfaces/releaseNote.interface";
 import { BsDot } from "react-icons/bs";
-import { Dispatch, useEffect, useState } from "react";
+import { Dispatch, useEffect, useState, useContext } from "react";
 import FadeIn from "../../animation/FadeIn";
-import move from "../../assets/images/move.png";
+import move from "../../assets/images/move.png"; 
+import { PostReleaseNote, GetReleaseNoteList, GetReleaseNote } from "../../service/release/release.service";
+import { AuthenticationContext } from "../../service/authentication/authentication.context";
+import yorkie, { Text as YorkieText, Document as YorkieDocument } from 'yorkie-js-sdk';
+
+const yorkieApiURL: string = process.env.REACT_APP_YORKIE_API_URL!;
+const yorkieApiKey: string = process.env.REACT_APP_YORKIE_API_KEY!;
+
+type ReleaseNoteList = {
+  data: ReleaseNoteData,
+  pk: number,
+}
 
 export const ReleaseNote = () => {
   const navigation = useNavigate();
-  const [RNData, setRNData] = useState<ReleaseNoteData[]>(JSON.parse(localStorage.getItem("RNData")!) || []);
   const location = useLocation();
-  const [teamPk, projectPk] = location.pathname.split("/").slice(1, 3);
+  const pjPk = useParams().projectPk;
+  const teamPk = useParams().teamPk;
+  const userToken = useContext(AuthenticationContext).userToken;
+  const [RNData, setRNData] = useState<ReleaseNoteList[]>([]);
+
+  const getReleaseNoteData = async (data: any) => {
+    const newReleaseNoteList: ReleaseNoteList[] = [];
+    for (let i = 0; i < data.length; i++) {
+      console.log("get release note data", data[i])
+      const client = new yorkie.Client(yorkieApiURL, { apiKey: yorkieApiKey });
+      await client.activate();
+      const doc = new YorkieDocument<ReleaseNoteData>('rn-' + data[i].notePk);
+      await client.attach(doc);
+      newReleaseNoteList.push({ data: doc.getRoot(), pk: data[i].notePk });
+      await client.detach(doc);
+      await client.deactivate();
+    }
+    return newReleaseNoteList;
+  }
+
+  useEffect(() => {
+    GetReleaseNoteList(Number(pjPk), Number(teamPk), userToken).then(async (res) => {
+      const data = await getReleaseNoteData(res.data.data.rspList);
+      setRNData(data);
+    });
+  }, []);
 
   return (
     <div className="ReleaseNote">
       <FadeIn className="mainWrapper">
         <div className="topWrapper">
           <h1>ReleaseNotes</h1>
 
-          <Button className="createNewBtn" variant="outline-primary" onClick={() => navigation(`/${teamPk}/${projectPk}/CreateReleaseNote`)}>
+          <Button className="createNewBtn" variant="outline-primary" onClick={() => {
+            PostReleaseNote(Number(pjPk), Number(teamPk), true, userToken).then((res) => {
+              navigation(`/${teamPk}/${pjPk}/CreateReleaseNote/${res.data.data}`, { state: location.state } );
+            });
+          }}>
             Create New
           </Button>
         </div>
@@ -30,12 +69,14 @@ export const ReleaseNote = () => {
             ? RNData!.map((it) => (
                 <FloatingWrapper className="releaseNote" width="90%" borderRadius="25px">
                   <div className="titleWrapper">
-                    <h5 className="version">{it.version}</h5>
-                    <div className="date">{it.date}</div>
-                    <img src={move} className="moveCreateRN" onClick={() => navigation(`/${teamPk}/${projectPk}/CreateReleaseNote`, { state: it })} />
+                    <h5 className="version">{it.data.version}</h5>
+                    <div className="date">{it.data.date}</div>
+                    <img src={move} className="moveCreateRN" alt="moveCreateRN" onClick={() => {
+                      navigation(`/${teamPk}/${pjPk}/CreateReleaseNote/${it.pk}`, { state: location.state } );
+                    }} />
                   </div>
 
-                  {it.content.map(
+                  {it.data.content.map(
                     (contentItem) =>
                       contentItem.show && (
                         <div className="releaseNoteContentItem">
@@ -59,7 +100,7 @@ export const ReleaseNote = () => {
       <FadeIn>
         <FloatingWrapper className="rightNavigation" width="150px" height="fit-content">
           {RNData.map((it) => (
-            <a className="navContent">{it.version}</a>
+            <a className="navContent">{it.data.version}</a>
           ))}
         </FloatingWrapper>
       </FadeIn>

src/service/notification/notification.service.js

@@ -0,0 +1,33 @@
+import axios from "axios";
+
+const API_URL = process.env.REACT_APP_ALOG_API_URL;
+
+export const GetNotifications = (userToken) => {
+  const data = axios.get(API_URL + "/api/noti", {
+    headers: {
+      Authorization: `Bearer ${userToken}`,
+    }
+  }).then((res) => {
+    console.log(res);
+    return res.data.data
+  }).catch((err) => {
+    console.log(err);
+    return null
+  });
+  return data;
+}
+
+export const CheckNotification = (userToken, notiId) => {
+  const data = axios.put(API_URL + "/api/noti?id=" + notiId, null, {
+    headers: {
+      Authorization: `Bearer ${userToken}`,
+    }
+  }).then((res) => {
+    console.log(res);
+    return res
+  }).catch((err) => {
+    console.log(err);
+    return null
+  });
+  return data;
+}