Merge pull request #259 from boostcampwm-2024/fix/something

[FE] 자잘한 버그 수정 & 즐겨찾기 페이지에서 취소 기능 추가
boostcampwm-2024 · Dec 4, 2024 · c6a158e · c6a158e
2 parents 0983370 + 8ccf20e
commit c6a158e
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 54 deletions.
diff --git a/FE/src/components/FallbackUI.tsx b/FE/src/components/FallbackUI.tsx
diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx
@@ -19,9 +19,12 @@ export default function Header() {
 
   useEffect(() => {
     const check = async () => {
-      const res = await checkAuth();
-      if (res.ok) setIsLogin(true);
-      else setIsLogin(false);
+      try {
+        const res = await checkAuth();
+        setIsLogin(res.isLogin);
+      } catch (error) {
+        console.log(error);
+      }
     };
 
     check();
@@ -42,7 +45,7 @@ export default function Header() {
   };
 
   return (
-    <header className='fixed left-0 top-0 h-[60px] w-full bg-white'>
+    <header className='fixed left-0 top-0 z-50 h-[60px] w-full bg-white'>
       <div className='mx-auto flex h-full max-w-[1280px] items-center justify-between px-8'>
         <Link to={'/'} className='flex items-center gap-2'>
           <picture>

diff --git a/FE/src/components/Mypage/BookMark.tsx b/FE/src/components/Mypage/BookMark.tsx
@@ -1,6 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { getBookmarkedStocks } from 'service/bookmark';
+import { HeartIcon } from '@heroicons/react/16/solid';
+import useBookmark from 'hooks/useBookmark';
 
 export default function BookMark() {
   const navigation = useNavigate();
@@ -9,38 +9,37 @@ export default function BookMark() {
     navigation(`/stocks/${code}`);
   };
 
-  const { data } = useQuery(
-    ['bookmark', 'stock'],
-    () => getBookmarkedStocks(),
-    {
-      staleTime: 1000,
-      suspense: true,
-    },
-  );
+  const { bookmarkQuery, unlike } = useBookmark();
+
+  const { data } = bookmarkQuery;
 
   return (
     <div className='mx-auto flex min-h-[500px] w-full flex-1 flex-col rounded-md bg-white p-4 shadow-md'>
-      <div className='flex border-b pb-2 text-sm font-bold'>
-        <p className='w-1/2 truncate text-left'>종목</p>
+      <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>
+        <p className='w-1/6 text-right'></p>
       </div>
 
-      <ul className='flex flex-col divide-y text-sm'>
+      <ul className='flex flex-col text-sm divide-y'>
         {data?.map((stock) => {
           const { code, name, stck_prpr, prdy_ctrt, prdy_vrss_sign } = stock;
 
           return (
             <li
               className='flex py-2 transition-colors hover:cursor-pointer hover:bg-gray-50'
               key={code}
-              onClick={() => handleClick(code)}
+              onClick={(e) => {
+                if ((e.target as HTMLElement).closest('button')) return;
+                handleClick(code);
+              }}
             >
-              <div className='flex w-1/2 gap-2 truncate text-left'>
+              <div className='flex w-1/2 gap-2 text-left truncate'>
                 <p className='font-semibold'>{name}</p>
                 <p className='text-gray-500'>{code}</p>
               </div>
-              <p className='w-1/4 truncate text-center'>
+              <p className='w-1/4 text-center truncate'>
                 {(+stck_prpr).toLocaleString()}원
               </p>
               <p
@@ -49,6 +48,11 @@ export default function BookMark() {
                 {+prdy_vrss_sign < 3 && '+'}
                 {prdy_ctrt}%
               </p>
+              <p className='w-1/6 text-right'>
+                <button onClick={() => unlike.mutate(code)}>
+                  <HeartIcon className='size-6 fill-juga-red-60' />
+                </button>
+              </p>
             </li>
           );
         })}

diff --git a/FE/src/components/Mypage/MyStocksList.tsx b/FE/src/components/Mypage/MyStocksList.tsx
@@ -44,7 +44,7 @@ export default function MyStocksList({ stocks }: MyStocksListProps) {
                 {(+stck_prpr).toLocaleString()}원
               </p>
               <p className='w-1/6 text-center'>
-                {avg_price.toLocaleString()}원
+                {Math.floor(avg_price).toLocaleString()}원
               </p>
               <p
                 className={`w-1/6 truncate text-right ${stockYield < 0 ? 'text-juga-blue-50' : 'text-juga-red-60'}`}

diff --git a/FE/src/components/Mypage/Order.tsx b/FE/src/components/Mypage/Order.tsx
@@ -2,25 +2,32 @@ import useOrders from 'hooks/useOrder';
 import useOrderCancelAlertModalStore from 'store/useOrderCancleAlertModalStore';
 import CancelAlertModal from './CancelAlertModal.tsx';
 import { formatTimestamp } from 'utils/format';
+import { useNavigate } from 'react-router-dom';
 
 export default function Order() {
   const { orderQuery, removeOrder } = useOrders();
 
   const { data } = orderQuery;
   const { isOpen, open } = useOrderCancelAlertModalStore();
 
+  const navigation = useNavigate();
+
+  const handleClick = (code: string) => {
+    navigation(`/stocks/${code}`);
+  };
+
   return (
     <div className='mx-auto flex min-h-[500px] w-full flex-col rounded-md bg-white p-4 shadow-md'>
-      <div className='flex border-b pb-2 text-sm font-bold'>
-        <p className='w-1/3 truncate text-left'>종목</p>
+      <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>
         <p className='w-1/4 text-center'>수량</p>
         <p className='w-1/4 text-center'>요청 가격</p>
         <p className='w-1/4 text-right'>요청 시간</p>
         <p className='w-1/6 text-right'></p>
       </div>
 
-      <ul className='flex flex-col divide-y text-sm'>
+      <ul className='flex flex-col text-sm divide-y'>
         {data?.map((order) => {
           const {
             id,
@@ -33,8 +40,12 @@ export default function Order() {
           } = order;
 
           return (
-            <li className='flex py-2' key={id}>
-              <div className='flex w-1/3 gap-2 truncate text-left'>
+            <li
+              className='flex py-2 transition-colors hover:cursor-pointer hover:bg-gray-50'
+              key={id}
+              onClick={() => handleClick(stock_code)}
+            >
+              <div className='flex w-1/3 gap-2 text-left truncate'>
                 <p className='font-semibold'>{stock_name}</p>
                 <p className='text-gray-500'>{stock_code}</p>
               </div>
@@ -47,15 +58,15 @@ export default function Order() {
               >
                 {trade_type === 'BUY' ? '매수' : '매도'}
               </p>
-              <p className='w-1/4 truncate text-center'>{amount}</p>
+              <p className='w-1/4 text-center truncate'>{amount}</p>
               <p className='w-1/4 text-center'>{price.toLocaleString()}원</p>
-              <p className='w-1/4 truncate text-right'>
+              <p className='w-1/4 text-right truncate'>
                 {formatTimestamp(created_at)}
               </p>
               <p className='w-1/6 text-right'>
                 <button
                   onClick={() => open(order, () => removeOrder.mutate(id))}
-                  className='rounded-lg bg-juga-grayscale-500 px-2 py-1 text-xs text-white transition hover:bg-juga-grayscale-black'
+                  className='px-2 py-1 text-xs text-white transition rounded-lg bg-juga-grayscale-500 hover:bg-juga-grayscale-black'
                 >
                   취소
                 </button>

diff --git a/FE/src/components/StocksDetail/TradeSection/BuySection.tsx b/FE/src/components/StocksDetail/TradeSection/BuySection.tsx
@@ -38,7 +38,7 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
 
   const { isOpen, toggleModal } = useTradeAlertModalStore();
 
-  const [count, setCount] = useState<number>(0);
+  const [count, setCount] = useState<number>(1);
 
   const [upperLimitFlag, setUpperLimitFlag] = useState<boolean>(false);
   const [lowerLimitFlag, setLowerLimitFlag] = useState<boolean>(false);
@@ -110,14 +110,14 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
     <>
       <form className='flex flex-col' onSubmit={handleBuy}>
         <div className='my-4'>
-          <div className='flex h-12 items-center justify-between'>
+          <div className='flex items-center justify-between h-12'>
             <p className='mr-3 w-14'>매수 가격</p>
             <input
               type='text'
               value={(+currPrice).toLocaleString()}
               onChange={handlePriceChange}
               onBlur={handlePriceInputBlur}
-              className='flex-1 rounded-lg py-1'
+              className='flex-1 py-1 rounded-lg'
             />
           </div>
           {lowerLimitFlag && (
@@ -130,13 +130,13 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
               이 주식의 최대 가격은 {(+stck_mxpr).toLocaleString()}입니다.
             </div>
           )}
-          <div className='flex h-12 items-center justify-between'>
+          <div className='flex items-center justify-between h-12'>
             <p className='mr-3 w-14'> 수량</p>
             <input
               type='text'
               value={count}
               onChange={handleCountChange}
-              className='flex-1 rounded-lg py-1'
+              className='flex-1 py-1 rounded-lg'
               min={1}
             />
           </div>
@@ -155,7 +155,7 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
           </div>
         </div>
 
-        <div className='flex h-10 flex-col justify-center'>
+        <div className='flex flex-col justify-center h-10'>
           {lackAssetFlag && (
             <p className='text-xs text-juga-red-60'>잔액이 부족해요!</p>
           )}
@@ -164,7 +164,7 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
           className={
             'rounded-lg bg-juga-red-60 py-2 text-white disabled:bg-juga-grayscale-100'
           }
-          disabled={!isLogin}
+          disabled={!isLogin || count === 0}
         >
           매수하기
         </button>

diff --git a/FE/src/components/StocksDetail/TradeSection/SellSection.tsx b/FE/src/components/StocksDetail/TradeSection/SellSection.tsx
@@ -63,7 +63,7 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
   if (isError) return <div>error</div>;
 
   const quantity = data.quantity;
-  const avg_price = data.avg_price;
+  const avg_price = Math.floor(data.avg_price);
 
   const pl = (+currPrice - avg_price) * count;
   const totalPrice = +currPrice * count;
@@ -204,7 +204,7 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
           className={
             'rounded-lg bg-juga-blue-50 py-2 text-white disabled:bg-juga-grayscale-100'
           }
-          disabled={!isLogin}
+          disabled={!isLogin || count === 0}
         >
           매도하기
         </button>

diff --git a/FE/src/hooks/useBookmark.ts b/FE/src/hooks/useBookmark.ts
@@ -0,0 +1,25 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { bookmark, getBookmarkedStocks, unbookmark } from 'service/bookmark';
+
+export default function useBookmark() {
+  const queryClient = useQueryClient();
+
+  const bookmarkQuery = useQuery(
+    ['bookmark', 'stock'],
+    () => getBookmarkedStocks(),
+    {
+      staleTime: 1000,
+      suspense: true,
+    },
+  );
+
+  const like = useMutation((code: string) => bookmark(code), {
+    onSuccess: () => queryClient.invalidateQueries(['bookmark', 'stock']),
+  });
+
+  const unlike = useMutation((code: string) => unbookmark(code), {
+    onSuccess: () => queryClient.invalidateQueries(['bookmark', 'stock']),
+  });
+
+  return { bookmarkQuery, like, unlike };
+}
diff --git a/FE/src/service/auth.ts b/FE/src/service/auth.ts
@@ -14,15 +14,15 @@ export async function login(
   }).then((res) => res.json());
 }
 
-export async function checkAuth() {
+export async function checkAuth(): Promise<{ isLogin: boolean }> {
   const url = import.meta.env.PROD
     ? `${import.meta.env.VITE_API_URL}/auth/check`
     : '/api/auth/check';
 
   return fetch(url, {
     credentials: 'include',
     headers: { 'Content-Type': 'application/json' },
-  });
+  }).then((res) => res.json());
 }
 
 export async function logout() {