From 2996bc3464d86b503a03ad8716b5a8d9cde17e2b Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Wed, 13 Nov 2024 19:23:59 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=EA=B1=B0=EB=9E=98=EC=B1=84?=
 =?UTF-8?q?=EA=B2=B0=20=ED=98=84=ED=99=A9=20API=20=EC=97=B0=EA=B2=B0=20#61?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/Search/SearchCard.tsx       |  4 +-
 .../components/StocksDetail/PriceDataType.ts  |  7 ++++
 .../components/StocksDetail/PriceSection.tsx  | 40 ++++++++++++++-----
 .../StocksDetail/PriceTableColumn.tsx         |  2 +-
 .../StocksDetail/PriceTableLiveCard.tsx       | 31 +++++++++-----
 5 files changed, 61 insertions(+), 23 deletions(-)
 create mode 100644 FE/src/components/StocksDetail/PriceDataType.ts

diff --git a/FE/src/components/Search/SearchCard.tsx b/FE/src/components/Search/SearchCard.tsx
index 77a3fb10..3bfa86c1 100644
--- a/FE/src/components/Search/SearchCard.tsx
+++ b/FE/src/components/Search/SearchCard.tsx
@@ -29,9 +29,9 @@ export default function SearchCard({ data }: SearchCardProps) {
     >
       <div className={'my-2 flex w-full items-center justify-between px-4'}>
         <div className={'flex-1 flex-col'}>
-          <p className='text-left font-medium text-gray-900'>
+          <div className='text-left font-medium text-gray-900'>
             <SearchCardHighLight text={name} highlight={searchInput} />
-          </p>
+          </div>
           <div className={'text-left text-xs font-normal text-gray-500'}>
             {code}
           </div>
diff --git a/FE/src/components/StocksDetail/PriceDataType.ts b/FE/src/components/StocksDetail/PriceDataType.ts
new file mode 100644
index 00000000..2f8fa7b7
--- /dev/null
+++ b/FE/src/components/StocksDetail/PriceDataType.ts
@@ -0,0 +1,7 @@
+export type PriceDataType = {
+  stck_cntg_hour: string;
+  stck_prpr: 'string';
+  prdy_vrss_sign: 'string';
+  cntg_vol: 'string';
+  prdy_ctrt: 'string';
+};
diff --git a/FE/src/components/StocksDetail/PriceSection.tsx b/FE/src/components/StocksDetail/PriceSection.tsx
index df4f2cee..21904cf6 100644
--- a/FE/src/components/StocksDetail/PriceSection.tsx
+++ b/FE/src/components/StocksDetail/PriceSection.tsx
@@ -2,11 +2,31 @@ import { useEffect, useRef, useState } from 'react';
 import PriceTableColumn from './PriceTableColumn.tsx';
 import PriceTableLiveCard from './PriceTableLiveCard.tsx';
 import PriceTableDayCard from './PriceTableDayCard.tsx';
+import { useParams } from 'react-router-dom';
+import { useQuery } from '@tanstack/react-query';
+import { PriceDataType } from './PriceDataType.ts';
+
+export const tradeHistoryApi = async (id: string) => {
+  const response = await fetch(
+    `http://223.130.151.42:3000/api/stocks/${id}/trade-history`,
+  );
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
+  }
+  return response.json();
+};
 
 export default function PriceSection() {
   const [buttonFlag, setButtonFlag] = useState(true);
   const indicatorRef = useRef<HTMLDivElement>(null);
   const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);
+  const { id } = useParams();
+
+  const { data } = useQuery({
+    queryKey: ['detail', id],
+    queryFn: () => tradeHistoryApi(id as string),
+    enabled: !!id,
+  });
 
   useEffect(() => {
     const tmpIndex = buttonFlag ? 0 : 1;
@@ -44,11 +64,11 @@ export default function PriceSection() {
             style={{ height: '28px' }}
           />
           <button
-            className={`${
+            className={`z-7 relative w-full rounded-lg px-4 py-1 ${
               buttonFlag
                 ? 'text-juga-grayscale-black'
                 : 'text-juga-grayscale-400'
-            } z-7 relative w-full rounded-lg px-4 py-1`}
+            }`}
             onClick={() => setButtonFlag(true)}
             ref={(el) => (buttonRefs.current[0] = el)}
           >
@@ -71,15 +91,13 @@ export default function PriceSection() {
           <table className={'w-full table-fixed text-xs font-normal'}>
             <PriceTableColumn viewMode={buttonFlag} />
             <tbody>
-              {Array(30)
-                .fill(null)
-                .map((_, index) =>
-                  buttonFlag ? (
-                    <PriceTableLiveCard key={index} />
-                  ) : (
-                    <PriceTableDayCard key={index} />
-                  ),
-                )}
+              {data?.map((eachData: PriceDataType, index: number) =>
+                buttonFlag ? (
+                  <PriceTableLiveCard key={index} data={eachData} />
+                ) : (
+                  <PriceTableDayCard key={index} />
+                ),
+              )}
             </tbody>
           </table>
         </div>
diff --git a/FE/src/components/StocksDetail/PriceTableColumn.tsx b/FE/src/components/StocksDetail/PriceTableColumn.tsx
index fbafc0fc..47e72308 100644
--- a/FE/src/components/StocksDetail/PriceTableColumn.tsx
+++ b/FE/src/components/StocksDetail/PriceTableColumn.tsx
@@ -24,7 +24,7 @@ export default function PriceTableColumn({ viewMode }: Props) {
         <th className={'px-4 py-1 text-left font-medium'}>채결가</th>
         <th className={'px-4 py-1 text-right font-medium'}>채결량(주)</th>
         <th className={'px-4 py-1 text-right font-medium'}>등락률</th>
-        <th className={'px-4 py-1 text-right font-medium'}>거래량(주)</th>
+        {/*<th className={'px-4 py-1 text-right font-medium'}>거래량(주)</th>*/}
         <th className={'px-4 py-1 text-right font-medium'}>시간</th>
       </tr>
     </thead>
diff --git a/FE/src/components/StocksDetail/PriceTableLiveCard.tsx b/FE/src/components/StocksDetail/PriceTableLiveCard.tsx
index 547a40ad..b34a482e 100644
--- a/FE/src/components/StocksDetail/PriceTableLiveCard.tsx
+++ b/FE/src/components/StocksDetail/PriceTableLiveCard.tsx
@@ -1,15 +1,28 @@
-export default function PriceTableLiveCard() {
+import { PriceDataType } from './PriceDataType.ts';
+
+type PriceTableLiveCardProps = {
+  data: PriceDataType;
+};
+export default function PriceTableLiveCard({ data }: PriceTableLiveCardProps) {
+  const percent = Number(data.prdy_ctrt);
+  const color = percent > 0 ? 'text-juga-red-60' : 'text-juga-blue-50';
+  function formatTime(time: string) {
+    const hour = time.slice(0, 2);
+    const min = time.slice(2, 4);
+    const sec = time.slice(4, 6);
+    return `${hour}.${min}.${sec}`;
+  }
   return (
     <tr className={'h-[30px] hover:bg-juga-grayscale-50'}>
-      <td className={'px-4 py-1 text-start'}>채결가</td>
-      <td className={'px-4 py-1 text-right'}>채결량 갯수</td>
-      <td
-        className={`px-4 py-1 text-right ${Math.round(Math.random() * 10) % 2 ? 'text-juga-blue-50' : 'text-juga-red-60'}`}
-      >
-        등략률 퍼센트
+      <td className={'px-4 py-1 text-start'}>{data.stck_prpr}</td>
+      <td className={'px-4 py-1 text-right'}>{data.cntg_vol}</td>
+      <td className={`px-4 py-1 text-right ${color}`}>
+        {percent > 0 ? `+${percent}` : `${percent}`}
+      </td>
+      {/*<td className={'px-4 py-1 text-right'}>거래량 갯수</td>*/}
+      <td className={'px-4 py-1 text-right'}>
+        {formatTime(data.stck_cntg_hour)}
       </td>
-      <td className={'px-4 py-1 text-right'}>거래량 갯수</td>
-      <td className={'px-4 py-1 text-right'}>시간</td>
     </tr>
   );
 }