[FE] 주식 상세페이지 웹소켓 연결 & 거래창 UI 개선

FE/src/components/Mypage/Account.tsx

@@ -4,8 +4,10 @@ import MyStocksList from './MyStocksList';
 import { getAssets } from 'service/assets';
 
 export default function Account() {
-  const { data, isLoading, isError } = useQuery(['account', 'assets'], () =>
-    getAssets(),
+  const { data, isLoading, isError } = useQuery(
+    ['account', 'assets'],
+    () => getAssets(),
+    { staleTime: 1000 },
   );
 
   if (isLoading) return <div>loading</div>;
@@ -15,7 +17,7 @@ export default function Account() {
   const { asset, stocks } = data;
 
   return (
-    <div className='flex flex-col gap-3'>
+    <div className='flex min-h-[500px] flex-col gap-3'>
       <AccountCondition asset={asset} />
       <MyStocksList stocks={stocks} />
     </div>

FE/src/components/Mypage/CancleAlertModal.tsx

@@ -0,0 +1,38 @@
+import Overay from 'components/ModalOveray';
+import useOrderCancelAlertModalStore from 'store/orderCancleAlertModalStore';
+
+export default function CancleAlertModal() {
+  const { close, onSuccess, order } = useOrderCancelAlertModalStore();
+  if (!order) return;
+
+  const { stock_name, amount, trade_type } = order;
+
+  return (
+    <>
+      <Overay onClick={() => close()} />
+      <section className='fixed left-1/2 top-1/2 flex w-[440px] -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-2xl bg-white p-7 shadow-lg'>
+        <div className='text-lg font-semibold'>
+          {stock_name} {amount}주 {trade_type === 'BUY' ? '매수' : '매도'} 주문
+          요청을 취소하시겠습니까?
+        </div>
+        <div className='flex justify-center gap-2'>
+          <button
+            className='w-24 px-6 py-2 text-white transition rounded-xl bg-juga-grayscale-500 hover:bg-juga-grayscale-black'
+            onClick={() => {
+              onSuccess();
+              close();
+            }}
+          >
+            네
+          </button>
+          <button
+            className='w-24 px-6 py-2 text-gray-800 rounded-xl bg-juga-grayscale-100 hover:bg-juga-grayscale-200'
+            onClick={close}
+          >
+            아니오
+          </button>
+        </div>
+      </section>
+    </>
+  );
+}

FE/src/components/Mypage/MyInfo.tsx

@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query';
+import { getMyProfile } from 'service/user';
+
+export default function MyInfo() {
+  const { data, isLoading, isError } = useQuery(
+    ['myInfo', 'profile'],
+    () => getMyProfile(),
+    { staleTime: 1000 },
+  );
+
+  if (isLoading) return <div>loading</div>;
+  if (!data) return <div>No data</div>;
+  if (isError) return <div>error</div>;
+
+  const { name, email } = data;
+
+  return (
+    <div className='flex flex-col items-center p-6 text-lg'>
+      <div className='w-full px-40'>
+        <div className='flex items-center justify-between py-2 border-b'>
+          <p className='font-medium text-left text-jugagrayscale-400 w-28'>
+            Username
+          </p>
+          <p className='font-semibold text-jugagrayscale-500'>{name}</p>
+        </div>
+        <div className='flex items-center justify-between py-2'>
+          <p className='font-medium text-left text-jugagrayscale-400 w-28'>
+            Email
+          </p>
+          <p className='font-semibold text-jugagrayscale-500'>{email}</p>
+        </div>
+      </div>
+    </div>
+  );
+}

FE/src/components/Mypage/MyStocksList.tsx

@@ -6,14 +6,14 @@ type MyStocksListProps = {
 
 export default function MyStocksList({ stocks }: MyStocksListProps) {
   return (
-    <div className='flex flex-col w-full p-4 mx-auto bg-white rounded-md shadow-md'>
+    <div className='flex flex-col flex-1 w-full p-4 mx-auto bg-white rounded-md shadow-md'>
       <div className='flex pb-2 text-sm font-bold border-b'>
         <p className='w-1/2 text-left truncate'>종목</p>
         <p className='w-1/4 text-center'>보유 수량</p>
         <p className='w-1/4 text-right'>평균 가격</p>
       </div>
 
-      <ul className='flex flex-col text-sm divide-y min-h-48'>
+      <ul className='flex flex-col text-sm divide-y'>
         {stocks.map((stock) => {
           const { code, name, avg_price, quantity } = stock;
           return (

FE/src/components/Mypage/Order.tsx

@@ -1,21 +1,20 @@
 import useOrders from 'hooks/useOrder';
+import useOrderCancelAlertModalStore from 'store/orderCancleAlertModalStore';
 import { parseTimestamp } from 'utils/common';
+import CancleAlertModal from './CancleAlertModal';
 
 export default function Order() {
   const { orderQuery, removeOrder } = useOrders();
 
   const { data, isLoading, isError } = orderQuery;
+  const { isOpen, open } = useOrderCancelAlertModalStore();
 
   if (isLoading) return <div>loading</div>;
   if (!data) return <div>No data</div>;
   if (isError) return <div>error</div>;
 
-  const handleCancelOrder = (id: number) => {
-    removeOrder.mutate(id);
-  };
-
   return (
-    <div className='flex flex-col w-full p-4 mx-auto bg-white rounded-md shadow-md'>
+    <div className='mx-auto flex min-h-[500px] w-full flex-col rounded-md bg-white p-4 shadow-md'>
       <div className='flex pb-2 text-sm font-bold border-b'>
         <p className='w-1/3 text-left truncate'>종목</p>
         <p className='w-1/4 text-center'>요청 유형</p>
@@ -25,7 +24,7 @@ export default function Order() {
         <p className='w-1/6 text-right'></p>
       </div>
 
-      <ul className='flex flex-col text-sm divide-y min-h-48'>
+      <ul className='flex flex-col text-sm divide-y'>
         {data.map((order) => {
           const {
             id,
@@ -59,8 +58,8 @@ export default function Order() {
               </p>
               <p className='w-1/6 text-right'>
                 <button
-                  onClick={() => handleCancelOrder(id)}
-                  className='px-2 py-1 text-xs text-white transition rounded-lg bg-juga-grayscale-500 hover:bg-red-600'
+                  onClick={() => open(order, () => removeOrder.mutate(id))}
+                  className='px-2 py-1 text-xs text-white transition rounded-lg bg-juga-grayscale-500 hover:bg-juga-grayscale-black'
                 >
                   취소
                 </button>
@@ -69,6 +68,7 @@ export default function Order() {
           );
         })}
       </ul>
+      {isOpen && <CancleAlertModal />}
     </div>
   );
 }

FE/src/components/StocksDetail/Chart.tsx

@@ -64,12 +64,13 @@
     y: 0,
   });
 
-  const { data, isLoading } = useQuery({
-    queryKey: ['stocksChartData', code, timeCategory],
-    queryFn: () => getStocksChartDataByCode(code, timeCategory),
-    staleTime: 1000,
-    cacheTime: 1000 * 60,
-  });
+
+  const { data, isLoading } = useQuery(
+    ['stocksChartData', code, timeCategory],
+    () => getStocksChartDataByCode(code, timeCategory),
+    { staleTime: 1000 },
+  );
+
 
   const handleMouseDown = useCallback((e: MouseEvent) => {
     e.preventDefault();
@@ -284,7 +285,7 @@
         );
       }
     },
     [
       padding,
       upperLabelNum,
       lowerLabelNum,
@@ -360,7 +361,7 @@
 
   return (
     <div className='box-border flex h-[260px] flex-col items-center rounded-lg bg-white p-3'>
-      <div className='flex h-fit w-full items-center justify-between'>
+      <div className='flex items-center justify-between w-full h-fit'>
         <p className='font-semibold'>차트</p>
         <nav className='flex gap-4 text-sm'>
           {categories.map(({ label, value }) => (

FE/src/components/StocksDetail/Header.tsx

@@ -1,4 +1,8 @@
+import { useEffect, useState } from 'react';
+import { unsbscribe } from 'service/stocks';
 import { StockDetailType } from 'types';
+import { stringToLocaleString } from 'utils/common';
+import { socket } from 'utils/socket';
 
 type StocksDeatailHeaderProps = {
   code: string;
@@ -16,22 +20,48 @@ export default function Header({ code, data }: StocksDeatailHeaderProps) {
     per,
   } = data;
 
+  const [currPrice, setCurrPrice] = useState(stck_prpr);
+  const [currPrdyVrssSign, setCurrPrdyVrssSign] = useState(prdy_vrss_sign);
+  const [currPrdyVrss, setCurrPrdyVrss] = useState(prdy_vrss);
+  const [currPrdyRate, setCurrPrdyRate] = useState(prdy_ctrt);
+
+  useEffect(() => {
+    const handleSocketData = (data: {
+      stck_prpr: string;
+      prdy_vrss: string;
+      prdy_vrss_sign: string;
+      prdy_ctrt: string;
+    }) => {
+      const { stck_prpr, prdy_vrss, prdy_vrss_sign, prdy_ctrt } = data;
+      setCurrPrice(stck_prpr);
+      setCurrPrdyVrss(prdy_vrss);
+      setCurrPrdyVrssSign(prdy_vrss_sign);
+      setCurrPrdyRate(prdy_ctrt);
+    };
+
+    socket.on(`detail/${code}`, handleSocketData);
+
+    return () => {
+      unsbscribe(code);
+    };
+  }, [code]);
+
   const stockInfo: { label: string; value: string }[] = [
     { label: '시총', value: `${Number(hts_avls).toLocaleString()}억원` },
     { label: 'PER', value: `${per}배` },
   ];
 
   const colorStyleBySign =
-    prdy_vrss_sign === '3'
+    currPrdyVrssSign === '3'
       ? ''
-      : prdy_vrss_sign < '3'
+      : currPrdyVrssSign < '3'
         ? 'text-juga-red-60'
         : 'text-juga-blue-40';
 
-  const percentAbsolute = Math.abs(Number(prdy_ctrt)).toFixed(2);
+  const percentAbsolute = Math.abs(Number(currPrdyRate)).toFixed(2);
 
   const plusOrMinus =
-    prdy_vrss_sign === '3' ? '' : prdy_vrss_sign < '3' ? '+' : '-';
+    currPrdyVrssSign === '3' ? '' : currPrdyVrssSign < '3' ? '+' : '-';
 
   return (
     <div className='flex items-center justify-between w-full h-16 px-2'>
@@ -41,11 +71,11 @@ export default function Header({ code, data }: StocksDeatailHeaderProps) {
           <p className='text-juga-grayscale-200'>{code}</p>
         </div>
         <div className='flex items-center gap-2'>
-          <p className='text-lg'>{Number(stck_prpr).toLocaleString()}원</p>
+          <p className='text-lg'>{stringToLocaleString(currPrice)}원</p>
           <p>어제보다</p>
           <p className={`${colorStyleBySign}`}>
             {plusOrMinus}
-            {Math.abs(Number(prdy_vrss)).toLocaleString()}원 ({plusOrMinus}
+            {Math.abs(Number(currPrdyVrss)).toLocaleString()}원 ({plusOrMinus}
             {percentAbsolute}%)
           </p>
         </div>

FE/src/components/StocksDetail/TradeSection/BuySection.tsx

@@ -15,8 +15,10 @@ type BuySectionProps = {
 export default function BuySection({ code, detailInfo }: BuySectionProps) {
   const { stck_prpr, stck_mxpr, stck_llam, hts_kor_isnm } = detailInfo;
 
-  const { data, isLoading, isError } = useQuery(['detail', 'cash'], () =>
-    getCash(),
+  const { data, isLoading, isError } = useQuery(
+    ['detail', 'cash'],
+    () => getCash(),
+    { staleTime: 1000 },
   );
 
   const [currPrice, setCurrPrice] = useState<string>(stck_prpr);
@@ -32,17 +34,24 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
   const timerRef = useRef<number | null>(null);
 
   const handlePriceChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (!isNumericString(e.target.value)) return;
+    const s = e.target.value.replace(/,/g, '');
+    if (!isNumericString(s)) return;
+    setCurrPrice(s);
+  };
 
-    setCurrPrice(e.target.value);
+  const handleCountChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const s = e.target.value;
+    if (!isNumericString(s)) return;
+    setCount(+s);
   };
 
   if (isLoading) return <div>loading</div>;
   if (!data) return <div>No data</div>;
   if (isError) return <div>error</div>;
 
   const handlePriceInputBlur = (e: FocusEvent<HTMLInputElement>) => {
-    const n = +e.target.value;
+    const n = +e.target.value.replace(/,/g, '');
+
     if (n > +stck_mxpr) {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -93,14 +102,14 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
             <p className='mr-3 w-14'>매수 가격</p>
             <input
               type='text'
-              value={currPrice}
+              value={(+currPrice).toLocaleString()}
               onChange={handlePriceChange}
               onBlur={handlePriceInputBlur}
               className='flex-1 py-1 rounded-lg'
             />
           </div>
           {lowerLimitFlag && (
-            <div className='text-sm text-juga-red-60'>
+            <div className='text-xs text-juga-red-60'>
               이 주식의 최소 가격은 {(+stck_llam).toLocaleString()}입니다.
             </div>
           )}
@@ -112,9 +121,9 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
           <div className='flex items-center justify-between h-12'>
             <p className='mr-3 w-14'> 수량</p>
             <input
-              type='number'
+              type='text'
               value={count}
-              onChange={(e) => setCount(+e.target.value)}
+              onChange={handleCountChange}
               className='flex-1 py-1 rounded-lg'
               min={1}
             />