Merge pull request #35 from Moaguide-develop/feat/productpage

빌드 오류 수정
Moaguide-develop · Sep 29, 2024 · 4384188 · 4384188
2 parents d980cec + 75f0240
commit 4384188
Show file tree

Hide file tree

Showing 4 changed files with 297 additions and 0 deletions.
diff --git a/src/components/product/detail/cow/CowPriceChart.tsx b/src/components/product/detail/cow/CowPriceChart.tsx
@@ -0,0 +1,152 @@
+import React, { useRef, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+// 각 기간에 해당하는 데이터의 타입 정의
+type TimePeriod = '3개월' | '6개월' | '1년';
+
+const CowPriceChart = () => {
+  const chartRef = useRef(null);
+
+  const [chartData, setChartData] = useState<TimePeriod>('1년');
+
+  const dataSets: Record<TimePeriod, { labels: string[]; data: number[] }> = {
+    '3개월': {
+      labels: ['2023-10', '2023-11', '2023-12'],
+      data: [4500, 3000, 3500]
+    },
+    '6개월': {
+      labels: ['2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12'],
+      data: [4200, 3900, 3500, 4500, 3000, 3500]
+    },
+    '1년': {
+      labels: [
+        '2023-01',
+        '2023-02',
+        '2023-03',
+        '2023-04',
+        '2023-05',
+        '2023-06',
+        '2023-07',
+        '2023-08',
+        '2023-09',
+        '2023-10',
+        '2023-11',
+        '2023-12'
+      ],
+      data: [4000, 4300, 3700, 3500, 4200, 4000, 3900, 3500, 4200, 4500, 3000, 3500]
+    }
+  };
+
+  const data = {
+    labels: dataSets[chartData].labels,
+    datasets: [
+      {
+        label: '주가',
+        data: dataSets[chartData].data,
+        borderColor: '#8a4af3',
+        backgroundColor: '#8a4af3',
+        pointBackgroundColor: '#8a4af3',
+        pointBorderColor: '#8a4af3',
+        pointRadius: 5,
+        pointHoverRadius: 7,
+        fill: false,
+        datalabels: {
+          display: false // 선 차트에는 숫자 표시 비활성화
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        intersect: false
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          maxRotation: 45,
+          minRotation: 45
+        },
+        offset: true // x축의 첫 번째 데이터 포인트를 약간 오른쪽으로 이동
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        max: 6000,
+        grid: {
+          display: false
+        }
+      }
+    },
+    elements: {
+      line: {
+        tension: 0
+      },
+      point: {
+        pointStyle: 'circle'
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="mb-4  flex justify-end">
+        <button
+          className={`w-[55px] mr-2 p-2  rounded-lg ${chartData === '3개월' ? 'bg-purple-500 text-white' : 'bg-gray-300  '}`}
+          onClick={() => setChartData('3개월')}>
+          3개월
+        </button>
+        <button
+          className={`w-[55px] mr-2 p-2 rounded-lg ${chartData === '6개월' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setChartData('6개월')}>
+          6개월
+        </button>
+        <button
+          className={`w-[55px] p-2 rounded-lg ${chartData === '1년' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setChartData('1년')}>
+          1년
+        </button>
+      </div>
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-4xl h-[400px]">
+          <Line ref={chartRef} data={data} options={options} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default CowPriceChart;
diff --git a/src/components/product/detail/cow/CowProductDetail.tsx b/src/components/product/detail/cow/CowProductDetail.tsx
@@ -0,0 +1,13 @@
+import CowPriceChart from './CowPriceChart';
+
+const CowProductDetail = ({ url }: { url: string }) => {
+  console.log(url);
+  return (
+    <div className="max-w-[1000px] mx-auto mt-[32px]">
+      <div className=" text-lg font-bold mb-[20px]">한우 가격</div>
+      <CowPriceChart />
+    </div>
+  );
+};
+
+export default CowProductDetail;
diff --git a/src/components/product/detail/cow/CowProfit.tsx b/src/components/product/detail/cow/CowProfit.tsx
@@ -0,0 +1,131 @@
+'use client';
+import { getCowProductProfitDetail } from '@/factory/ProductProfitDetail/CowProductProfitDetail';
+
+const CowProfit = ({ url }: { url: string }) => {
+  const { data, isLoading } = getCowProductProfitDetail(url);
+  console.log(data);
+  return (
+    <div className="max-w-[1000px] mx-auto mt-[32px]">
+      <div>
+        <div className="text-base font-bold  mb-[15px] ">발행 정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px] ">상품명</div>
+            <div className="">{data?.publish.name}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">증권 종류</div>
+            <div className="">{data?.publish.type}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">발행 증권수</div>
+            <div className="">{data?.publish.piece.toLocaleString()}주</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">발행가액</div>
+            <div className="">{data?.publish.basePrice.toLocaleString()}원</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">총 모집액</div>
+            <div className="">{Number(data?.publish.totalPrice).toLocaleString()}원</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">모집방법</div>
+            <div className="">{data?.publish.recruitingType}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">권리구조</div>
+            <div className="">{data?.publish.rightsStructure}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">수익구조</div>
+            <div className="">{data?.publish.revenueStructure}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">청약공고일</div>
+            <div className="">{data?.publish.subscriptionDate}</div>
+          </div>
+        </div>
+
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">납일기일</div>
+            <div className="">{data?.publish.paymentDate}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">배정공고일</div>
+            <div className="">{data?.publish.allocationDate}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">배정기준일</div>
+            <div className="">{data?.publish.criteriaDate}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className=" w-full h-[1px] my-[40px] bg-gray-200" />
+
+      <div>
+        <div className="text-base font-bold  mb-[15px] ">농가정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px] ">인증번호</div>
+            <div className="">{data?.farm.certificationNumber}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">인증기관</div>
+            <div className="">{data?.farm.certificationAgency}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">관리책임자</div>
+            <div className="">{data?.farm.manager.toLocaleString()}주</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">인증 두수</div>
+            <div className="">{data?.farm.certifiedHeads.toLocaleString()}원</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">축종</div>
+            <div className="">{data?.farm.cattleBreed.toLocaleString()}원</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">최초인증일</div>
+            <div className="">{data?.farm.initialDate}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CowProfit;
diff --git a/src/types/CowProductType.ts b/src/types/CowProductType.ts
@@ -9,6 +9,7 @@ export interface ICowProductDetail {
   totalPrice: number;
   recruitmentDate: string;
   minInvestment: number;
+  link: string;
 }
 
 export interface ICowProductProfitDetail {