Merge pull request #246 from 100-hours-a-week/feature/elle

Fix : feature/elle
100-hours-a-week · Sep 30, 2024 · 9e83cc1 · 9e83cc1
2 parents da5daf0 + de8bacd
commit 9e83cc1
Show file tree

Hide file tree

Showing 5 changed files with 224 additions and 203 deletions.
diff --git a/src/Component/Button/button.tsx b/src/Component/Button/button.tsx
@@ -1,5 +1,4 @@
-import styled from "styled-components";
-import React from "react";
+import styled, { css } from "styled-components";
 import { buttonSize, buttonType } from "../../Styles/button";
 import { ButtonStyleProps, ButtonProps } from "../../constants/interface";
 
@@ -9,12 +8,33 @@ const ButtonStyle = styled.button<ButtonStyleProps>`
 
   ${(props) => buttonSize[props.$size]}
   ${(props) => buttonType[props.$colorType]?.[props.$state]}
+
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
+
+  /* disabled 상태일 때의 배경색과 텍스트 색상 */
+  /* disabled 상태일 때의 스타일 적용 */
+  ${(props) =>
+    props.disabled
+      ? css`
+          background-color: #d3d3d3;
+          color: #777;
+          border: none;
+        `
+      : buttonType[props.$colorType]?.[props.$state]}
+
+  ${(props) => buttonSize[props.$size]}
 `;
 
-const Button = ({ onClick, children, ...styleprops }: ButtonProps) => {
+const Button = ({
+  onClick,
+  children,
+  disabled,
+  ...styleprops
+}: ButtonProps) => {
   return (
     <>
-      <ButtonStyle {...styleprops} onClick={onClick}>
+      <ButtonStyle {...styleprops} onClick={onClick} disabled={disabled}>
         {children}
       </ButtonStyle>
     </>

diff --git a/src/Component/Chart/chart.tsx b/src/Component/Chart/chart.tsx
@@ -44,14 +44,34 @@ const Chart = ({ data }: CandleData) => {
             show: true,
           },
           events: {
-            // Apply click event only to candlestick data points
             dataPointSelection: function (
               event: any,
               chartContext: any,
               opts: any
             ) {
-              // Update state to show modal when a candlestick is clicked
-              setIsOpen(true);
+              const { seriesIndex, dataPointIndex } = opts;
+
+              // 클릭한 데이터 포인트의 뉴스 데이터 가져오기
+              const news =
+                chartContext.w.config.series[seriesIndex].data[dataPointIndex]
+                  .z;
+              let newsHtml = "";
+
+              // 뉴스 데이터를 기반으로 HTML 생성
+              if (Array.isArray(news) && news.length > 0) {
+                news.forEach((newItem) => {
+                  newsHtml += `<li style="padding-top:1rem; padding-bottom:0.5rem; padding-left:0.5rem; list-style:none; border-bottom:1px solid rgba(209, 209, 214, 0.3);" onmouseover="this.style.backgroundColor='#E6E5FF';"
+                  onmouseout="this.style.backgroundColor='';"><a href=${newItem.url} target="_blank" rel="noopener noreferrer nofollow" 
+                  style="text-decoration:none; color: black; font-size:15px; font-family:SCDream2; transition: background-color 0.3s ease;">
+                  
+                  ${newItem.title}</a></li>`;
+                });
+                setNewsHtml(newsHtml); // 뉴스가 있는 경우 HTML을 설정
+                setIsOpen(true); // 뉴스가 있을 때 모달을 열기
+              } else {
+                setNewsHtml(""); // 뉴스가 없으면 빈 문자열로 설정
+                setIsOpen(false); // 뉴스가 없으면 모달을 닫기
+              }
             },
           },
         },

diff --git a/src/Component/Layout/Layout.tsx b/src/Component/Layout/Layout.tsx
@@ -32,9 +32,10 @@ const Layout = (props: { children: React.ReactNode }) => {
   const location = useLocation();
   const isLoginPage = location.pathname === "/nologin";
   const isGame = location.pathname.includes("/game");
-  const GameNav = location.pathname.includes(
-    "/rank" || "/total" || "gameStocks"
-  );
+  const GameNav =
+    location.pathname.includes("/game/rank") ||
+    location.pathname.includes("/game/result/total") ||
+    location.pathname.includes("/game/gameStocks");
 
   return (
     <Container className="Layout">

diff --git a/src/Game/Shop/shop.tsx b/src/Game/Shop/shop.tsx
@@ -26,6 +26,7 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
   const [selectedTab, setSelectedTab] = useState(tabs[0]);
   const [hint, setHint] = useState<string | null>(null);
   const [purchaseComplete, setPurchaseComplete] = useState<PurchaseHints>({});
+  const [disabled, setDisabled] = useState(true);
 
   const { purchaseHints, setPurchaseHints } = useHintStore();
 
@@ -44,6 +45,14 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
     navigate(`/game/play/${year}`);
   };
 
+  useEffect(() => {
+    if (!selectedStock) {
+      setDisabled(true);
+    } else {
+      setDisabled(false);
+    }
+  }, [selectedStock]);
+
   useEffect(() => {
     // 선택한 종목과 선택한 레벨에 맞는 힌트 데이터 불러오기
     if (
@@ -72,13 +81,8 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
   //구매 요청 처리
   const onSubmitHandler = async (data: Ingredient) => {
     if (!selectedStock) {
-      swal({
-        icon: "error",
-        title: "종목을 선택해주세요!",
-      });
       return;
     }
-
     if (budget < parseInt(selectedTab.price.replace(/[^\d]/g, ""), 10)) {
       swal({
         icon: "error",
@@ -225,6 +229,7 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
                           $size="small"
                           $colorType="main"
                           onClick={() => onSubmitHandler(selectedTab)}
+                          disabled={disabled}
                         >
                           구매
                         </Button>
@@ -315,32 +320,6 @@ const Shop: React.FC<ShopProps> = ({ selectedStock, budget, setBudget }) => {
               )}
             </motion.div>
           </AnimatePresence>
-          {/* <ModalOpen
-            title="정보거래소"
-            isOpen={isOpen}
-            showCancelButton={true}
-            showOneConfirmBtn={false}
-            onConfirm={handleConfirm}
-            onRequestClose={handleCancel}
-            confirmLabel="돌아가기"
-            cancelLabel="취소"
-          >
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                marginTop: "50px",
-                flexDirection: "column",
-                alignItems: "center",
-              }}
-            >
-              <p style={{ marginBottom: "0.5rem", textAlign: "center" }}>
-                정보거래소를 나가면 구매한 해당 뉴스를
-                <br /> 다시 볼 수 없습니다.
-              </p>
-              <p> 괜찮으십니까? </p>
-            </div>
-          </ModalOpen> */}
         </S.Main>
       </S.Window>
     </>