[Feat] 로그인 요청 화면 구현

- 미로그인 상태에서 주식주문창 오픈 시 로그인 요청창 뜨도록 구현 - 로그인 버튼과 로그인 모달창 연결 예정 Issues #17
codestates-seb · Sep 9, 2023 · 4e672df · 4e672df
1 parent db99234
commit 4e672df
Showing 1 changed file with 52 additions and 11 deletions.
diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx
@@ -7,13 +7,20 @@ import { StateProps } from "../../models/stateProps";
 import OrderRequest from "./OrderRequest";
 import OrderResult from "./OrderResult";
 
+const loginRequiredText: string = "로그인이 필요한 서비스입니다";
+const loginBtnText: string = "StockHolm 로그인";
+
 const titleText: string = "주식주문";
 const marketType: string = "코스피";
 
 // dummyData
 import { dummyStockName } from "./dummyData";
+import { useState } from "react";
 
 const StockOrderSection = () => {
+  // 🔴 로그인 구현될 때까지 임시
+  const [login, setLogin] = useState(true);
+
   const companyId = useSelector((state: StateProps) => state.companyId);
   const stockOrderSet = useSelector((state: StateProps) => state.stockOrderSet);
   const dispatch = useDispatch();
@@ -43,17 +50,26 @@ const StockOrderSection = () => {
           &#10005;
         </button>
       </UpperBar>
-      <StockName>
-        <img className="CorpLogo" src={dummyStockName.corpLogo} />
-        <div className="NameContainer">
-          <div className="CorpName">{corpName}</div>
-          <div className="StockCode">
-            {stockCode} {marketType}
-          </div>
-        </div>
-      </StockName>
-      <OrderRequest />
-      <OrderResult />
+      {!login ? (
+        <LoginRequiredIndicator>
+          <div className="Notification">{loginRequiredText}</div>
+          <button className="LoginButton">{loginBtnText}</button>
+        </LoginRequiredIndicator>
+      ) : (
+        <>
+          <StockName>
+            <img className="CorpLogo" src={dummyStockName.corpLogo} />
+            <div className="NameContainer">
+              <div className="CorpName">{corpName}</div>
+              <div className="StockCode">
+                {stockCode} {marketType}
+              </div>
+            </div>
+          </StockName>
+          <OrderRequest />
+          <OrderResult />
+        </>
+      )}
     </Container>
   );
 };
@@ -103,6 +119,31 @@ const UpperBar = styled.div`
   }
 `;
 
+const LoginRequiredIndicator = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+
+  .Notification {
+    color: #999999;
+  }
+
+  .LoginButton {
+    width: 170px;
+    height: 32px;
+    font-size: 15px;
+    font-weight: 400;
+    color: white;
+    background-color: #e22926;
+    border: none;
+    border-radius: 0.3rem;
+  }
+`;
+
 const StockName = styled.section`
   width: 100%;
   height: 64px;