test: finalDemo

tukcom2023CD · Jun 21, 2023 · f68167d · f68167d
1 parent d49c290
commit f68167d
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 23 deletions.
diff --git a/front/src/components/graph/AnalysisContribute.tsx b/front/src/components/graph/AnalysisContribute.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Radar,
+  RadarChart,
+  PolarGrid,
+  PolarAngleAxis,
+  ResponsiveContainer,
+} from 'recharts';
+import refresh from '../../images/refresh.png';
+
+const data = [
+  {
+    subject: '커뮤니케이션',
+    A: 330,
+    fullMark: 700,
+  },
+  {
+    subject: '위기 대처',
+    A: 30,
+    fullMark: 700,
+  },
+  {
+    subject: '개발',
+    A: 630,
+    fullMark: 700,
+  },
+  {
+    subject: '리팩터링',
+    A: 240,
+    fullMark: 700,
+  },
+  {
+    subject: '기획',
+    A: 300,
+    fullMark: 700,
+  },
+];
+
+function AnaylsisContribute() {
+  return (
+    <div className='flex flex-col bg-white w-[1000px] h-[400px] border'>
+      <div className='flex justify-between items-center p-5 h-[50px] bg-[#6A6A6A]'>
+        <p className='text-white text-md font-bold'>프로젝트 기여도</p>
+        <img
+          className='w-[24px] h-[24px] bg-[#EAEAEA] rounded-[5px]'
+          alt='refresh'
+          src={refresh}
+        />
+      </div>
+      <div className='flex m-auto w-[1000px] h-[500px]'>
+        {' '}
+        {/* 부모 요소의 크기 조정 */}
+        <div className='m-auto w-[500px] h-[300px]'>
+          {' '}
+          {/* RadarChart 영역 */}
+          <ResponsiveContainer width='100%' height='100%'>
+            <RadarChart cx='50%' cy='50%' outerRadius='80%' data={data}>
+              <PolarGrid />
+              <PolarAngleAxis dataKey='subject' />
+              <Radar
+                name='Mike'
+                dataKey='A'
+                stroke='#8884d8'
+                fill='#8884d8'
+                fillOpacity={0.6}
+              />
+            </RadarChart>
+          </ResponsiveContainer>
+        </div>
+        <div className='flex flex-col justify-center items-start space-y-2 w-[400px] p-2 m-auto'>
+          <p>개발 : 630P</p>
+          <p>기획 : 300P</p>
+          <p>위기 대처 : 30P</p>
+          <p>커뮤니케이션 : 330P</p>
+          <p>리팩터링 : 240P</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default AnaylsisContribute;
diff --git a/front/src/components/main/ProjectContribution.tsx b/front/src/components/main/ProjectContribution.tsx
@@ -11,33 +11,28 @@ import refresh from '../../images/refresh.png';
 const data = [
   {
     subject: '커뮤니케이션',
-    A: 120,
-    B: 110,
-    fullMark: 150,
+    A: 330,
+    fullMark: 700,
   },
   {
     subject: '위기 대처',
-    A: 98,
-    B: 130,
-    fullMark: 150,
+    A: 30,
+    fullMark: 700,
   },
   {
     subject: '개발',
-    A: 86,
-    B: 130,
-    fullMark: 150,
+    A: 630,
+    fullMark: 700,
   },
   {
     subject: '리팩터링',
-    A: 100,
-    B: 100,
-    fullMark: 150,
+    A: 240,
+    fullMark: 700,
   },
   {
     subject: '기획',
-    A: 85,
-    B: 90,
-    fullMark: 150,
+    A: 300,
+    fullMark: 700,
   },
 ];
 
@@ -52,10 +47,10 @@ function ProjectContribution() {
           src={refresh}
         />
       </div>
-      <div className='flex m-auto w-[400px] h-[400px]'>
+      <div className='flex m-auto w-[500px] h-[500px]'>
         {' '}
         {/* 부모 요소의 크기 조정 */}
-        <div className='m-auto w-[400px] h-[400px]'>
+        <div className='m-auto w-[500px] h-[300px]'>
           {' '}
           {/* RadarChart 영역 */}
           <ResponsiveContainer width='100%' height='100%'>

diff --git a/front/src/components/main/ProjectProgress.tsx b/front/src/components/main/ProjectProgress.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react';
-import { PieChart, Pie, Cell } from 'recharts';
+import { PieChart, Pie, Cell, Label } from 'recharts';
 import refresh from '../../images/refresh.png';
 
 const data = [
@@ -39,11 +39,20 @@ function ProjectProgress() {
                   fill={colors[index % colors.length]}
                 />
               ))}
+              <Label
+                value={`${data[0].value}%`}
+                position='top'
+                fill='#fff'
+                fontSize={18}
+                fontWeight='bold'
+              />
             </Pie>
           </PieChart>
-          <div className='flex flex-col w-[220px] h-[200px'>
-            <div className='flex justify-center items-center m-auto text-[30px] font-bold mb-[10px]'>
-              80%
+          <div className='flex flex-col w-[220px]'>
+            <div className='flex flex-col justify-center items-center m-auto text-[30px] font-bold mb-[10px] space-y-3'>
+              <p className='text-[18px]'>프로젝트명 : 졸업작품</p>
+              <p>진행률 : 80%</p>
+              <p className='text-sm'>2023-03-02~2023-06-28</p>
             </div>
           </div>
         </div>

diff --git a/front/src/pages/graph/Graph.tsx b/front/src/pages/graph/Graph.tsx
@@ -1,17 +1,21 @@
 import React from 'react';
 import Menu from '../../components/frames/Side/Sidebar';
 import ProjectProgress from '../../components/main/ProjectProgress';
+import AnalysisContribute from '../../components/graph/AnalysisContribute';
 import profileImg from '../../images/members.png';
 
 function Graph() {
   return (
     <div className='flex m-auto w-[1440px] h-[100vh]'>
       <Menu />
       <div className='flex flex-col justfiy-center items-center m-auto w-[1024px] h-[800px] bg-white rounded-[10px] border overflow-y-auto'>
-        <div className='flex justify-between items-center w-full p-5 h-[50px] bg-[#6A6A6A]'>
+        <div
+          className='flex justify-between items-center w-full p-5 h-[50px] bg-[#6A6A6A]'
+          style={{ position: 'sticky', top: 0, zIndex: 999 }}
+        >
           <p className='text-white text-md font-bold'>프로젝트</p>
         </div>
-        <div className='flex mt-5'>
+        <div className='flex mt-5 mb-3'>
           <div className='flex flex-col justify-start items-start p-3 w-[300px] mr-[50px]'>
             <p className='font-bold text-lg'>프로젝트 마스터</p>
             <div className='flex justify-center items-start space-x-5'>
@@ -35,6 +39,7 @@ function Graph() {
           </div>
           <ProjectProgress />
         </div>
+        <AnalysisContribute />
       </div>
     </div>
   );