Final Commit - plz (#67)

* Connect Topic - Issue

* Change Top bar, Left Team Section, Change my work, My assined Issue

* Connect Profile img

* hot fix

src/components/Modal/IssueModal.js

@@ -7,7 +7,7 @@ import "react-clock/dist/Clock.css";
 import "./IssueModal.css";
 import { AuthenticationContext } from "../../service/authentication/authentication.context";
 import { PostCreateIssue, UpdateIssueImage, UpdateIssueDate, UpdateIssueAssignee, RemoveIssueImage } from "../../service/issues/issues.service";
-import { GetProjectMembers } from "../../service/projects/projects.service";
+import { GetProjectMembers, GetAllTopics } from "../../service/projects/projects.service";
 
 const IssueModal = ({ issue, show, handleClose, handleAddIssue, isEditing, column, teamPk, projectPk }) => {
   const { userToken, userData } = useContext(AuthenticationContext);
@@ -21,19 +21,24 @@ const IssueModal = ({ issue, show, handleClose, handleAddIssue, isEditing, colum
   const [startDate, setStartDate] = useState(new Date());
   const [endDate, setEndDate] = useState(new Date());
   const [projectMembers, setProjectMembers] = useState([]);
+  const [selectedTopic, setSelectedTopic] = useState(null);
+  const [issueTopics, setIssueTopics] = useState([]);
 
   useEffect(() => {
     if (isEditing && issue) {
       setIssueContent(issue.content);
       setPreviewSource(issue.imageDataUrl);
       setIssueStatus(issue.status);
-
       // projectMembers에서 issueAssigneePk와 일치하는 멤버 찾기
       const matchingAssignee = projectMembers.find((member) => member.userPk === issue.issueAssigneePk);
       setAssignee(matchingAssignee ? matchingAssignee.userNN : "할당되지 않음");
-      // setAssignee(issue.assignee);
+
+      const matchingTopic = issueTopics.find((topic) => topic.pk === issue.topicPk);
+      setSelectedTopic(matchingTopic ? matchingTopic : null);
+
       setStartDate(issue.startDate);
       setEndDate(issue.endDate);
+      console.log("Issue: ", issue);
     } else {
       // 이 부분은 새 이슈를 만들거나 다른 이슈를 선택했을 때 초기화를 위함
       setIssueContent("");
@@ -43,8 +48,9 @@ const IssueModal = ({ issue, show, handleClose, handleAddIssue, isEditing, colum
       setAssignee("할당되지 않음");
       setStartDate(new Date());
       setEndDate(new Date());
+      setSelectedTopic("할당되지 않음");
     }
-  }, [isEditing, issue, projectMembers]);
+  }, [isEditing, issue, projectMembers, issueTopics]);
 
   useEffect(() => {
     if (isEditing && issue) {
@@ -82,6 +88,22 @@ const IssueModal = ({ issue, show, handleClose, handleAddIssue, isEditing, colum
     fetchProjectMembers();
   }, [projectPk, userToken, isEditing]);
 
+  useEffect(() => {
+    const fetchIssueTopic = async () => {
+      const params = { projectPk, keyword: "", sortType: "ASC", page: 0, size: 100, userToken: userToken };
+      try {
+        const response = await GetAllTopics(params);
+        console.log("Project Topic Response:", response);
+        setIssueTopics(response.data.data.content); // 상태 변수 이름 변경
+        console.log(response.data.data.content);
+      } catch (error) {
+        console.error("프로젝트 토픽 가져오기에 실패했습니다:", error);
+      }
+    };
+
+    fetchIssueTopic();
+  }, [projectPk, userToken, isEditing]);
+
   useEffect(() => {
     const updateAssignee = async () => {
       if (isEditing && issue) {
@@ -129,7 +151,7 @@ const IssueModal = ({ issue, show, handleClose, handleAddIssue, isEditing, colum
     const issueData = {
       pjPk: projectPk,
       teamPk: teamPk,
-      topicPk: 1, // topicPk 임시로 설정
+      topicPk: selectedTopic ? selectedTopic.pk : 0,
       issueAuthorPk: 1,
       issueContent: issueContent,
       issueStatus: issueStatus,
@@ -180,6 +202,30 @@ const IssueModal = ({ issue, show, handleClose, handleAddIssue, isEditing, colum
             </Form.Select>
           </Form.Group>
 
+          <Form.Group className="issueTopic mb-3" controlId="issueTopic">
+            <Form.Label>연결 토픽</Form.Label>
+            <Form.Select
+              value={selectedTopic?.pk}
+              onChange={(e) => {
+                const selectedTopicPk = e.target.value;
+                const selected = issueTopics.find((topic) => parseInt(topic.pk) === parseInt(selectedTopicPk));
+                setSelectedTopic(selected);
+                console.log("issueTopics:", issueTopics);
+                console.log("selected topic:", selectedTopicPk);
+                console.log("selected:", selected);
+              }}
+            >
+              <option value="할당되지 않음">할당되지 않음</option>
+              {issueTopics &&
+                issueTopics.length > 0 &&
+                issueTopics.map((topic) => (
+                  <option value={topic.pk} key={topic.pk}>
+                    {topic.name}
+                  </option>
+                ))}
+            </Form.Select>
+          </Form.Group>
+
           <Form.Group className="issueFile mb-3" controlId="issueFile">
             <Form.Label>첨부 파일</Form.Label>
             <Form.Control type="file" onChange={handleFileChange} />

src/components/MyWork/MyWork.css

@@ -1,7 +1,6 @@
 .MyWork .offcanvas-body {
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
   height: 100%;
 }
 
@@ -46,3 +45,7 @@
 .MyWork .issue-container .issue-content {
   font-size: 1.2rem;
 }
+
+.MyWork .MyWork-issue-container {
+  margin: 10%;
+}

src/components/MyWork/MyWork.js

@@ -1,43 +1,51 @@
-import { useState } from "react";
+import { useState, useContext, useEffect } from "react";
 import Button from "react-bootstrap/Button";
 import Offcanvas from "react-bootstrap/Offcanvas";
 import { useNavigate } from "react-router-dom";
 import "./MyWork.css";
 import Check from "../../assets/images/check.png";
+import { AuthenticationContext } from "../../service/authentication/authentication.context";
+import { GetMyIssues } from "../../service/issues/issues.service";
 
 function MyWork({ show, handleClose }) {
   const navigate = useNavigate();
   const [showMyWorkplace, setShowMyWorkplace] = useState(false);
+  const { userData, userToken } = useContext(AuthenticationContext);
 
   const handleMyWorkplace = () => {
     setShowMyWorkplace(false);
     navigate("/myMyWorkplace");
   };
 
-  const tasks = [
-    {
-      type: "진행중",
-      issues: [
-        {
-          content: "객관식 답변 처리",
-        },
-        {
-          content: "주관식 답변 처리",
-        },
-      ],
-    },
-    {
-      type: "해야 할 일",
-      issues: [
-        {
-          content: "통계 페이지 구현",
-        },
-        {
-          content: "커뮤니티 페이지 구현",
-        },
-      ],
-    },
-  ];
+  const [tasks, setTasks] = useState([]);
+
+  const issueAssigneePk = userData ? userData.userPk : null;
+  const page = 0;
+  const size = 10;
+
+  useEffect(() => {
+    if (issueAssigneePk) {
+      GetMyIssues(issueAssigneePk, page, size, userToken)
+        .then((res) => {
+          const todoIssues = res.data.filter((issue) => issue.issueStatus === "TODO");
+          const inProgressIssues = res.data.filter((issue) => issue.issueStatus === "INPROGRESS");
+
+          setTasks([
+            {
+              type: "진행중",
+              issues: inProgressIssues.map((issue) => ({ content: issue.issueDescription })),
+            },
+            {
+              type: "해야 할 일",
+              issues: todoIssues.map((issue) => ({ content: issue.issueDescription })),
+            },
+          ]);
+        })
+        .catch((err) => {
+          // 오류 처리 로직
+        });
+    }
+  }, []);
 
   return (
     <div>
@@ -54,7 +62,7 @@ function MyWork({ show, handleClose }) {
         </Offcanvas.Header>
         <Offcanvas.Body className="offcanvas-body">
           {tasks.map((task, index) => (
-            <div key={index}>
+            <div className="MyWork-issue-container" key={index}>
               <div className="task-type">{task.type}</div>
               {task.issues.map((issue, issueIndex) => (
                 <div className="issue-container" key={issueIndex}>
@@ -64,11 +72,6 @@ function MyWork({ show, handleClose }) {
               ))}
             </div>
           ))}
-          <div className="button-container">
-            <Button variant="text" onClick={handleMyWorkplace}>
-              내 작업 페이지로 이동
-            </Button>
-          </div>
         </Offcanvas.Body>
       </Offcanvas>
     </div>

src/navigation/AppRouter.tsx

@@ -16,7 +16,7 @@ import TeamInfo from "../pages/TeamInfo/TeamInfo";
 import TeamSetting from "../pages/TeamSetting/TeamSetting";
 import { ProjectAccess } from "../pages/ProjectSetting/ProjectAccess";
 import { ProjectSetting } from "../pages/ProjectSetting/ProjectSetting";
-import { Profile } from "../pages/Profile/Profile";
+import Profile from "../pages/Profile/Profile";
 import { GithubLogin } from "../pages/Login/GithubLogin";
 import React from "react";
 

src/navigation/LeftTeamSection.css

@@ -30,7 +30,13 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  margin-top: 10%;
 }
+
+.LeftTeamSection .teams .teams-title {
+  margin-top: 20px;
+}
+
 .LeftTeamSection .teamWrapper {
   display: flex;
   align-items: center;

src/navigation/LeftTeamSection.js

@@ -34,21 +34,18 @@ const LeftTeamSection = () => {
   return (
     <div className="LeftTeamSection">
       <FadeIn className="container">
-        <Button
-          className="all-button"
-          variant="outline-primary"
-          onClick={() => {
-            console.log("Select All:");
-            setSelectedTeamPk(9999);
-            navigate("/myProjects");
-          }}
-        >
-          All
-        </Button>
-        <Button className="private-button" variant="outline-primary" onClick={() => navigate("/Private")}>
-          Private
-        </Button>
         <div className="teams">
+          <Button
+            className="all-button"
+            variant="outline-primary"
+            onClick={() => {
+              console.log("Select All:");
+              setSelectedTeamPk(9999);
+              navigate("/myProjects");
+            }}
+          >
+            All
+          </Button>
           <h4 className="teams-title">Teams</h4>
           {teams.map((it) => (
             <div className="teamWrapper">

src/navigation/TopNavBar.tsx

@@ -9,7 +9,7 @@ import Logo from "../assets/logo/alog-logo.png";
 import { useNavigate } from "react-router-dom";
 import { TextButton } from "../components/Buttons";
 import { AuthenticationContext } from "../service/authentication/authentication.context";
-
+import Bell from "../assets/images/bell.png";
 import Notification from "../components/Notification/Notification";
 import MyWork from "../components/MyWork/MyWork";
 
@@ -27,26 +27,20 @@ const LoggedInNav = ({ onNotificationClick, onMyWorkClick }: LoggedInNavProps) =
       <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="me-auto">
           <TextButton onClick={onMyWorkClick}>내 작업</TextButton>
-          <NavDropdown title="프로젝트" id="basic-nav-dropdown">
-            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
-            <NavDropdown.Divider />
-            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
-          </NavDropdown>
-          <NavDropdown title="팀" id="basic-nav-dropdown">
-            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
-            <NavDropdown.Divider />
-            <NavDropdown.Item onClick={() => navigate("/teamInfo")}>Team Info</NavDropdown.Item>
-          </NavDropdown>
-          <Button variant="outline-primary">만들기</Button>
+          <TextButton title="프로젝트" onClick={() => navigate("/myProjects")}>
+            프로젝트
+          </TextButton>
         </Nav>
       </Navbar.Collapse>
       <Navbar.Collapse className="justify-content-end">
-        <TextButton onClick={onNotificationClick}>알람</TextButton>
-        <TextButton>설정</TextButton>
+        <img
+          src={Bell}
+          className="moveCreateRN"
+          alt="moveCreateRN"
+          onClick={onNotificationClick}
+          style={{ width: "20px", height: "20px", margin: "10px", cursor: "pointer" }}
+        />
+
         <TextButton
           onClick={() => {
             navigate("/profile");
@@ -71,15 +65,7 @@ const LoggedOutNav = () => {
   return (
     <>
       <Navbar.Collapse id="basic-navbar-nav">
-        <Nav className="me-auto">
-          <NavDropdown title="Company" id="basic-nav-dropdown">
-            <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
-            <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
-            <NavDropdown.Divider />
-            <NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
-          </NavDropdown>
-        </Nav>
+        <Nav className="me-auto"></Nav>
       </Navbar.Collapse>
       <Navbar.Collapse className="justify-content-end">
         <TextButton onClick={() => navigate("/signin")}>Sign In</TextButton>

src/pages/Board/Board.js

@@ -134,7 +134,7 @@ const Board = () => {
     return newUrl;
   };
 
-  const handleAddIssue = (issueContent, issueStatus, imageDataUrl, assignee, reporter, startDate, endDate, teamPk, projectPk) => {
+  const handleAddIssue = (issueContent, issueStatus, imageDataUrl, assignee, reporter, startDate, endDate, issuePk, teamPk, projectPk) => {
     // 새 이슈 객체를 생성
     const newIssue = {
       id: `${issueStatus}-${new Date().getTime()}`,
@@ -147,6 +147,7 @@ const Board = () => {
       endDate,
       teamPk,
       projectPk,
+      issuePk,
     };
 
     // 새 이슈를 리스트에 추가