Merge pull request #13 from im-na0/feature/#5

Feat: 프로젝트 페이지 마크업

package.json

@@ -8,6 +8,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "@toast-ui/editor": "^3.2.2",
+    "@toast-ui/react-editor": "^3.2.3",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.50",
     "@types/react": "^18.2.21",
@@ -53,6 +54,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/react-beautiful-dnd": "^13.1.4",
     "@types/styled-components": "^5.1.27",
     "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",

src/components/project/ProjectAssignee.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { UserOutlined } from "@ant-design/icons";
+import styled from "styled-components";
+
+const ProjectAssigneeInfo = styled.div`
+  margin-bottom: 6px;
+  .text-block {
+    display: inline-block;
+    font-size: 12px;
+    padding: 3px 5px;
+    margin-left: 6px;
+    &.user-block {
+      background-color: lightgrey;
+    }
+  }
+`;
+
+const ProjectAssignee = ({ assignees }: { assignees: string[] }) => {
+  return (
+    <ProjectAssigneeInfo>
+      <UserOutlined />
+      {assignees.map((assignee) => (
+        <span className="text-block user-block" key={assignee}>
+          {assignee}
+        </span>
+      ))}
+    </ProjectAssigneeInfo>
+  );
+};
+
+export default ProjectAssignee;

src/components/project/ProjectDate.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { CalendarOutlined } from "@ant-design/icons";
+import styled from "styled-components";
+
+const ProjectDateInfo = styled.div`
+  margin-bottom: 6px;
+  .text-block {
+    display: inline-block;
+    font-size: 12px;
+    padding: 3px 5px;
+    margin-left: 6px;
+    &.date-block {
+      background-color: lightpink;
+    }
+  }
+`;
+
+const ProjectDate = ({ duration }: { duration: string }) => {
+  return (
+    <ProjectDateInfo>
+      <CalendarOutlined />
+      <span className="text-block date-block">{duration}</span>
+    </ProjectDateInfo>
+  );
+};
+
+export default ProjectDate;

src/components/project/ProjectDetailInfo.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Button } from "antd";
+import { DeleteFilled, EditFilled } from "@ant-design/icons";
+import ProjectMdViewer from "./ProjectMdViewer";
+import ProjectDate from "./ProjectDate";
+import ProjectAssignee from "./ProjectAssignee";
+
+const ProjectDetailInfo = () => {
+  return (
+    <div className="project-container">
+      <div className="project__top-title">
+        <h3>프로젝트 상세 정보</h3>
+        <div className="project__top-btns">
+          <Button type="primary" icon={<EditFilled />} size="large">
+            프로젝트 수정
+          </Button>
+          <Button danger icon={<DeleteFilled />} size="large">
+            프로젝트 삭제
+          </Button>
+        </div>
+      </div>
+      <h2>OO전자 토이 프로젝트 생성</h2>
+      <ProjectDate duration={"2023.09.10 ~ 2023.09.20"} />
+      <ProjectAssignee assignees={["김OO", "이XX"]} />
+      <ProjectMdViewer />
+    </div>
+  );
+};
+
+export default ProjectDetailInfo;

src/components/project/ProjectDragDrop.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { DragDropContext } from "react-beautiful-dnd";
+import ProjectDroppable from "./ProjectDroppable";
+
+export interface ProjectInfo {
+  id: string;
+  title: string;
+  status: "progress" | "completed" | "plus";
+  order: number;
+  assignees: string[];
+  duration: string;
+}
+
+export const projectList: ProjectInfo[] = [
+  {
+    id: "1",
+    title: "주어진 업무를 잘 수행 하기a",
+    status: "progress",
+    order: 1,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+  {
+    id: "2",
+    title: "주어진 업무를 잘 수행 하기b",
+    status: "progress",
+    order: 2,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+  {
+    id: "3",
+    title: "주어진 업무를 잘 수행 하기c",
+    status: "progress",
+    order: 3,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+];
+export const projectList2: ProjectInfo[] = [
+  {
+    id: "4",
+    title: "주어진 업무를 잘 수행 하기a",
+    status: "plus",
+    order: 1,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+  {
+    id: "5",
+    title: "주어진 업무를 잘 수행 하기b",
+    status: "plus",
+    order: 2,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+];
+export const projectList3: ProjectInfo[] = [
+  {
+    id: "6",
+    title: "주어진 업무를 잘 수행 하기a",
+    status: "completed",
+    order: 1,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+  {
+    id: "7",
+    title: "주어진 업무를 잘 수행 하기b",
+    status: "completed",
+    order: 2,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+  {
+    id: "8",
+    title: "주어진 업무를 잘 수행 하기c",
+    status: "completed",
+    order: 3,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+  {
+    id: "9",
+    title: "주어진 업무를 잘 수행 하기c",
+    status: "completed",
+    order: 3,
+    assignees: ["김OO"],
+    duration: "2023.09.10 ~ 2023.09.20",
+  },
+];
+
+const ProjectDragDrop = () => {
+  const onDragEnd = () => {
+    console.log("");
+  };
+  return (
+    <DragDropContext onDragEnd={onDragEnd}>
+      <div className="drag-drop-wrap">
+        <ProjectDroppable id="progress" projectList={projectList} />
+        <ProjectDroppable id="plus" projectList={projectList2} />
+        <ProjectDroppable id="completed" projectList={projectList3} />
+      </div>
+    </DragDropContext>
+  );
+};
+
+export default ProjectDragDrop;