[Feat] 주식주문 관련 거래가능 여부 안내 메시지 구현

- 거래량 유무에 따라 거래 가능여부를 안내하는 메세지 조건부 렌더링 되도록 구현 Issues #17
codestates-seb · Sep 12, 2023 · c1e0c25 · c1e0c25
1 parent bbbd055
commit c1e0c25
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 34 deletions.
diff --git a/client/src/components/StockOrderSection/PriceSetting.tsx b/client/src/components/StockOrderSection/PriceSetting.tsx
@@ -8,6 +8,9 @@ import { StockInfoProps } from "../../models/stockInfoProps";
 const priceSettingTitle: string = "가격";
 const unitText: string = "원";
 
+const noVolumeNotification: string = " [거래량 없음] 주문 시 대기 처리 됩니다";
+const existVolumeNotification: string = " [거래량 있음] 주문 시 체결 처리 됩니다";
+
 const PriceSetting = (props: OwnProps) => {
   const { stockInfo, companyId } = props;
 
@@ -118,36 +121,26 @@ const PriceSetting = (props: OwnProps) => {
   }, [companyId]);
 
   return (
-    <>
-      <Container>
-        <div className="PriceCategoryBox">
-          <div className="Title">{priceSettingTitle}</div>
-        </div>
-        <div className="PriceSettingBox">
-          <PriceController defaultValue={orderPrice} value={orderPrice} onChange={handleWriteOrderPrice} onKeyDown={handleInputArrowBtn} onFocus={handleCheckTradePossibility} onBlur={handleRemoveNoVolumeNotification} />
-          <UnitContent>{unitText}</UnitContent>
-          <div className="DirectionBox">
-            <button className="PriceUp" onClick={handlePlusOrderPrice} onBlur={handleRemoveNoVolumeNotification}>
-              &#8896;
-            </button>
-            <button className="PriceDown" onClick={handleMinusOrderPrice} onBlur={handleRemoveNoVolumeNotification}>
-              &#8897;
-            </button>
-          </div>
+    <Container>
+      <div className="PriceCategoryBox">
+        <div className="Title">{priceSettingTitle}</div>
+      </div>
+      <div className="PriceSettingBox">
+        <PriceController defaultValue={orderPrice} value={orderPrice} onChange={handleWriteOrderPrice} onKeyDown={handleInputArrowBtn} onFocus={handleCheckTradePossibility} onBlur={handleRemoveNoVolumeNotification} />
+        <UnitContent>{unitText}</UnitContent>
+        <div className="DirectionBox">
+          <button className="PriceUp" onClick={handlePlusOrderPrice} onBlur={handleRemoveNoVolumeNotification}>
+            &#8896;
+          </button>
+          <button className="PriceDown" onClick={handleMinusOrderPrice} onBlur={handleRemoveNoVolumeNotification}>
+            &#8897;
+          </button>
         </div>
-      </Container>
-
-      {/* 거래 불가 테스트 */}
-      {!orderPossibility && (
-        <NoTradingVolume>
-          <div className="container">
-            거래 불가하며 예약 거래 됨을 공지
-            <div></div>
-            <div></div>
-          </div>
-        </NoTradingVolume>
-      )}
-    </>
+      </div>
+      <CheckTradingVolume orderPossibility={orderPossibility}>
+        <div>&#10004; {orderPossibility ? `${existVolumeNotification}` : `${noVolumeNotification}`}</div>
+      </CheckTradingVolume>
+    </Container>
   );
 };
 
@@ -160,6 +153,7 @@ interface OwnProps {
 
 // component 생성
 const Container = styled.div`
+  position: relative;
   width: 100%;
   margin-top: 21px;
   margin-bottom: 34px;
@@ -247,8 +241,11 @@ const UnitContent = styled.div`
   background-color: #ffffff;
 `;
 
-const NoTradingVolume = styled.div`
+const CheckTradingVolume = styled.div<{ orderPossibility: boolean }>`
   position: absolute;
-  top: 222px;
-  right: 4%;
+  top: 61px;
+  left: 2px;
+  font-size: 0.77em;
+  color: ${(props) => (props.orderPossibility ? "#2679ed" : "#e22926")};
+  transition: color 0.3s ease-in-out; /* 전환 효과 설정 */
 `;
diff --git a/client/src/components/StockOrderSection/StockOrder.tsx b/client/src/components/StockOrderSection/StockOrder.tsx
@@ -73,8 +73,8 @@ const StockOrder = ({ corpName }: { corpName: string }) => {
 
   // 주문 실패 케이스 1) 개장시간  2) 가격/거래량 설정
   // 🔴 3시 30분 이후 작업 위해 closingTime 조건 해제
-  const orderFailureCase01 = nonBusinessDay;
-  // const orderFailureCase01 = nonBusinessDay || closingTime;
+  // const orderFailureCase01 = nonBusinessDay;
+  const orderFailureCase01 = nonBusinessDay || closingTime;
   const orderFailureCase02 = orderPrice === 0 || orderVolume === 0;
 
   return (