[BE] locust를 통해 비교하기 위해 MySQL로 랭킹 계산 로직 구현

BE/src/news/news.service.ts

@@ -1,6 +1,7 @@
-import { Injectable } from '@nestjs/common';
+import { Injectable, InternalServerErrorException } from '@nestjs/common';
 import { Cron } from '@nestjs/schedule';
-import { In } from 'typeorm';
+import { InjectDataSource } from '@nestjs/typeorm';
+import { DataSource, In } from 'typeorm';
 import { NaverApiDomianService } from './naver-api-domian.service';
 import { NewsApiResponse } from './interface/news-value.interface';
 import { NewsDataOutputDto } from './dto/news-data-output.dto';
@@ -14,6 +15,7 @@ export class NewsService {
   constructor(
     private readonly naverApiDomainService: NaverApiDomianService,
     private readonly newsRepository: NewsRepository,
+    @InjectDataSource() private dataSource: DataSource,
   ) {}
 
   async getNews(): Promise<NewsResponseDto> {
@@ -46,18 +48,41 @@ export class NewsService {
     };
   }
 
-  @Cron('*/1 8-16 * * 1-5')
+  @Cron('*/1 * * * *')
   async cronNewsData() {
-    await this.newsRepository.delete({ query: In(['증권', '주식']) });
-    await this.getNewsDataByQuery('주식');
-    await this.getNewsDataByQuery('증권');
-
-    await this.newsRepository.update(
-      {},
-      {
-        updatedAt: new Date(),
-      },
-    );
+    const queryRunner = this.dataSource.createQueryRunner();
+
+    try {
+      if (!queryRunner.isTransactionActive) {
+        await queryRunner.startTransaction('SERIALIZABLE');
+      }
+
+      await this.newsRepository.delete({ query: In(['증권', '주식']) });
+      const stockNews = await this.getNewsDataByQuery('주식');
+      const securityNews = await this.getNewsDataByQuery('증권');
+
+      const allNews = [...stockNews, ...securityNews];
+      const uniqueNews = allNews.filter(
+        (news, index) =>
+          allNews.findIndex((i) => i.originallink === news.originallink) ===
+          index,
+      );
+
+      await this.newsRepository.save(uniqueNews);
+      await this.newsRepository.update(
+        {},
+        {
+          updatedAt: new Date(),
+        },
+      );
+
+      await queryRunner.commitTransaction();
+    } catch (err) {
+      await queryRunner.rollbackTransaction();
+      throw new InternalServerErrorException(err);
+    } finally {
+      await queryRunner.release();
+    }
   }
 
   private async getNewsDataByQuery(value: string) {
@@ -67,9 +92,7 @@ export class NewsService {
 
     const response =
       await this.naverApiDomainService.requestApi<NewsApiResponse>(queryParams);
-    const formattedData = this.formatNewsData(value, response.items);
-
-    return this.newsRepository.save(formattedData);
+    return this.newsRepository.save(this.formatNewsData(value, response.items));
   }
 
   private formatNewsData(query: string, items: NewsDataOutputDto[]) {

BE/src/ranking/ranking.service.ts

@@ -104,7 +104,7 @@ export class RankingService {
     };
   }
 
-  @Cron('0 16 * * 1-5')
+  @Cron('*/1 8-16 * * 1-5')
   async updateRanking() {
     const [profitRateRanking, assetRanking] = await Promise.all([
       this.calculateRanking(SortType.PROFIT_RATE),

BE/src/stockSocket/stock-execute-order.repository.ts

@@ -27,7 +27,7 @@ export class StockExecuteOrderRepository extends Repository<Order> {
       .getRawMany();
   }
 
-  async checkExecutableOrder(stockCode, value) {
+  async checkExecutableBuyOrder(stockCode, value) {
     const queryRunner = this.dataSource.createQueryRunner();
     await queryRunner.startTransaction();
 
@@ -39,26 +39,48 @@ export class StockExecuteOrderRepository extends Repository<Order> {
           status: StatusType.PENDING,
           price: MoreThanOrEqual(value),
         },
+        lock: {
+          mode: 'pessimistic_write',
+        },
       });
 
+      await Promise.all(
+        buyOrders.map((buyOrder) => this.executeBuy(queryRunner, buyOrder)),
+      );
+
+      await queryRunner.commitTransaction();
+      return buyOrders.length;
+    } catch (err) {
+      await queryRunner.rollbackTransaction();
+      throw new InternalServerErrorException(err);
+    } finally {
+      await queryRunner.release();
+    }
+  }
+
+  async checkExecutableSellOrder(stockCode, value) {
+    const queryRunner = this.dataSource.createQueryRunner();
+    await queryRunner.startTransaction();
+
+    try {
       const sellOrders = await queryRunner.manager.find(Order, {
         where: {
           stock_code: stockCode,
           trade_type: TradeType.SELL,
           status: StatusType.PENDING,
           price: LessThanOrEqual(value),
         },
+        lock: {
+          mode: 'pessimistic_write',
+        },
       });
 
-      await Promise.all(
-        buyOrders.map((buyOrder) => this.executeBuy(queryRunner, buyOrder)),
-      );
       await Promise.all(
         sellOrders.map((sellOrder) => this.executeSell(queryRunner, sellOrder)),
       );
 
       await queryRunner.commitTransaction();
-      return buyOrders.length + sellOrders.length;
+      return sellOrders.length;
     } catch (err) {
       await queryRunner.rollbackTransaction();
       throw new InternalServerErrorException(err);
@@ -158,8 +180,6 @@ export class StockExecuteOrderRepository extends Repository<Order> {
       .where({ user_id: order.user_id, stock_code: order.stock_code })
       .setParameters({ newQuantity: order.amount })
       .execute();
-
-    await queryRunner.commitTransaction();
   }
 
   private calculateFee(totalPrice: number) {

BE/src/stockSocket/stock-price-socket.service.ts

@@ -103,14 +103,20 @@ export class StockPriceSocketService extends BaseStockSocketDomainService {
   }
 
   private async checkExecutableOrder(stockCode: string, value) {
-    const affectedRow =
-      await this.stockExecuteOrderRepository.checkExecutableOrder(
+    const affectedBuyRow =
+      await this.stockExecuteOrderRepository.checkExecutableBuyOrder(
+        stockCode,
+        value,
+      );
+
+    const affectedSellRow =
+      await this.stockExecuteOrderRepository.checkExecutableSellOrder(
         stockCode,
         value,
       );
 
     if (
-      affectedRow > 0 &&
+      affectedBuyRow + affectedSellRow > 0 &&
       !(await this.stockExecuteOrderRepository.existsBy({
         stock_code: stockCode,
         status: StatusType.PENDING,

FE/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="src/assets/favicon.ico" type="image/x-icon" />
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css"

FE/package.json

@@ -17,6 +17,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-router-dom": "^6.27.0",
+    "react-toastify": "^10.0.6",
     "socket.io-client": "^4.8.1",
     "vite-tsconfig-paths": "^5.0.1",
     "zustand": "^5.0.1"

FE/src/App.tsx

@@ -12,6 +12,8 @@ import Login from 'components/Login';
 import SearchModal from './components/Search';
 import MyPage from 'page/MyPage';
 import Rank from 'page/Rank.tsx';
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 function App() {
   return (
@@ -39,6 +41,7 @@ function Layout() {
       </main>
       <Login />
       <SearchModal />
+      <ToastContainer />
     </>
   );
 }

FE/src/components/Header.tsx

@@ -3,7 +3,8 @@ import useAuthStore from 'store/authStore';
 import useLoginModalStore from 'store/useLoginModalStore';
 import useSearchModalStore from '../store/useSearchModalStore.ts';
 import useSearchInputStore from '../store/useSearchInputStore.ts';
-import logo from 'assets/Logo.png';
+import logoPng from 'assets/logo.png';
+import logoWebp from 'assets/logo.webp';
 import { checkAuth, logout } from 'service/auth.ts';
 import { useEffect } from 'react';
 
@@ -42,7 +43,14 @@ export default function Header() {
     <header className='fixed left-0 top-0 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'>
-          <img src={logo} className={'h-[32px]'} />
+          <picture>
+            <source
+              srcSet={logoWebp}
+              type='image/webp'
+              className={'h-[32px]'}
+            />
+            <img src={logoPng} className={'h-[32px]'} />
+          </picture>
           <h1 className='text-xl font-bold text-juga-grayscale-black'>JuGa</h1>
         </Link>
 

FE/src/components/Mypage/Account.tsx

@@ -20,8 +20,6 @@ export default function Account() {
 
   const { asset, stocks } = data;
 
-  console.log(asset, stocks);
-
   return (
     <div className='flex min-h-[500px] flex-col gap-3'>
       <AccountCondition asset={asset} />

FE/src/components/Mypage/BookMark.tsx

@@ -0,0 +1,61 @@
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { getBookmarkedStocks } from 'service/bookmark';
+
+export default function BookMark() {
+  const navigation = useNavigate();
+
+  const handleClick = (code: string) => {
+    navigation(`/stocks/${code}`);
+  };
+
+  const { data, isLoading, isError } = useQuery(
+    ['bookmark', 'stock'],
+    () => getBookmarkedStocks(),
+    {
+      staleTime: 1000,
+    },
+  );
+
+  if (isLoading) return <div>loading</div>;
+  if (!data) return <div>No data</div>;
+  if (isError) return <div>error</div>;
+
+  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 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'>
+        {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)}
+            >
+              <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 text-center truncate'>
+                {(+stck_prpr).toLocaleString()}원
+              </p>
+              <p
+                className={`w-1/4 truncate text-right ${+prdy_vrss_sign > 3 ? 'text-juga-blue-50' : 'text-juga-red-60'}`}
+              >
+                {+prdy_vrss_sign < 3 && '+'}
+                {prdy_ctrt}%
+              </p>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}