diff --git a/package-lock.json b/package-lock.json index 6a8edbb..1d38b91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,7 @@ "embla-carousel-react": "^8.1.8", "framer-motion": "^11.3.28", "hypertext": "^1.0.9", + "lodash": "^4.17.21", "react": "^18.3.1", "react-apexcharts": "^1.4.1", "react-device-detect": "^2.2.3", @@ -47,6 +48,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/lodash": "^4.17.9", "@types/react-gtm-module": "^2.0.3", "@types/react-modal": "^3.16.3" } @@ -6511,6 +6513,12 @@ "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==" }, + "node_modules/@types/lodash": { + "version": "4.17.9", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.9.tgz", + "integrity": "sha512-w9iWudx1XWOHW5lQRS9iKpK/XuRhnN+0T7HvdCCd802FYkT1AMTnxndJHGrNJwRoRHkslGr4S29tjm1cT7x/7w==", + "dev": true + }, "node_modules/@types/mime": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", diff --git a/package.json b/package.json index d126e00..c812dde 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "embla-carousel-react": "^8.1.8", "framer-motion": "^11.3.28", "hypertext": "^1.0.9", + "lodash": "^4.17.21", "react": "^18.3.1", "react-apexcharts": "^1.4.1", "react-device-detect": "^2.2.3", @@ -68,6 +69,7 @@ }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", + "@types/lodash": "^4.17.9", "@types/react-gtm-module": "^2.0.3", "@types/react-modal": "^3.16.3" } diff --git a/src/Component/Game/GameMoney.tsx b/src/Component/Game/GameMoney.tsx index 32fe91e..144cc32 100644 --- a/src/Component/Game/GameMoney.tsx +++ b/src/Component/Game/GameMoney.tsx @@ -10,163 +10,163 @@ import GameViewTab from "./gameViewTab"; import { useSwipeStore } from "../../store/useSwipeStore"; const GameMoney = ({ - setBudget, - budget, + setBudget, + budget, }: { - setBudget: (budget: number) => void; - budget: number; + setBudget: (budget: number) => void; + budget: number; }) => { - const nav = useNavigate(); - - const [nickname, setNickname] = useState(""); // 닉네임 - const [total, setTotal] = useState(0); // 총 평가금액 - const [changeFromLast, setChangeFromLast] = useState(0); // 작년 대비 금액 - const [changeFromStart, setChangeFromStart] = useState(0); // 전체 대비 금액 - const [changeRateFromLast, setChangeRateFromLast] = useState(0); // 작년 대비 변동률 - const [changeRateFromStart, setChangeRateFromStart] = useState(0); // 전체 대비 변동률 - // const [holdingList, setHoldingList] = useState([]); // 20xx년 주식가격 - const [showTable, setShowTable] = useState(false); - const { holdingList, setHoldingList } = useSwipeStore(); // 내가 산거 - - const check = usePortfolioStore((state) => state.check); - - // 페이지 유효성 검사 - const setCheckYear = useGameStore((state) => state.setCheckYear); - - useEffect(() => { - axios - .get(`${process.env.REACT_APP_API_URL}/v1/game/user`, { - withCredentials: true, - headers: { - "Content-Type": "application/json", - }, - }) - .then((res) => { - if (res.status === 200) { - setCheckYear(res.data.year); - setNickname(res.data.nickname); - setBudget(res.data.budget); - setTotal(res.data.total); - setChangeFromLast(res.data.changeFromLast); - setChangeFromStart(res.data.changeFromStart); - setChangeRateFromLast(res.data.changeRateFromLast); - setChangeRateFromStart(res.data.changeRateFromStart); - setHoldingList(res.data.holdingList); - } else if (res.status === 401) { - alert("401"); - } - }) - .catch((e) => { - nav("/error"); - }); - }, [check]); - - const handleShowTable = () => { - setShowTable((prev) => !prev); - }; - - return ( - - - {nickname} 님의 계좌잔고 💰 - - - 거래가능금액 -
{formatPrice(budget)} 원
- -
- - 총 평가금액 -
{formatPrice(total)} 원
- - - 작년 대비 -
0 - ? "red" - : changeRateFromLast < 0 - ? "blue" - : "black", - }} - > - {formatPrice(changeFromLast)} 원 ({changeRateFromLast}%) -
- - - 전체 대비 -
0 - ? "red" - : changeRateFromStart < 0 - ? "blue" - : "black", - }} - > - {formatPrice(changeFromStart)} 원 ({changeRateFromStart}%) -
- - - - - - {showTable && } - - ); + const nav = useNavigate(); + + const [nickname, setNickname] = useState(""); // 닉네임 + const [total, setTotal] = useState(0); // 총 평가금액 + const [changeFromLast, setChangeFromLast] = useState(0); // 작년 대비 금액 + const [changeFromStart, setChangeFromStart] = useState(0); // 전체 대비 금액 + const [changeRateFromLast, setChangeRateFromLast] = useState(0); // 작년 대비 변동률 + const [changeRateFromStart, setChangeRateFromStart] = useState(0); // 전체 대비 변동률 + // const [holdingList, setHoldingList] = useState([]); // 20xx년 주식가격 + const [showTable, setShowTable] = useState(true); + const { holdingList, setHoldingList } = useSwipeStore(); // 내가 산거 + + const check = usePortfolioStore((state) => state.check); + + // 페이지 유효성 검사 + const setCheckYear = useGameStore((state) => state.setCheckYear); + + useEffect(() => { + axios + .get(`${process.env.REACT_APP_API_URL}/v1/game/user`, { + withCredentials: true, + headers: { + "Content-Type": "application/json", + }, + }) + .then((res) => { + if (res.status === 200) { + setCheckYear(res.data.year); + setNickname(res.data.nickname); + setBudget(res.data.budget); + setTotal(res.data.total); + setChangeFromLast(res.data.changeFromLast); + setChangeFromStart(res.data.changeFromStart); + setChangeRateFromLast(res.data.changeRateFromLast); + setChangeRateFromStart(res.data.changeRateFromStart); + setHoldingList(res.data.holdingList); + } else if (res.status === 401) { + alert("401"); + } + }) + .catch((e) => { + nav("/error"); + }); + }, [check]); + + const handleShowTable = () => { + setShowTable((prev) => !prev); + }; + + return ( + + + {nickname} 님의 계좌잔고 💰 + + + 거래가능금액 +
{formatPrice(budget)} 원
+ +
+ + 총 평가금액 +
{formatPrice(total)} 원
+ + + 작년 대비 +
0 + ? "red" + : changeRateFromLast < 0 + ? "blue" + : "black", + }} + > + {formatPrice(changeFromLast)} 원 ({changeRateFromLast}%) +
+ + + 전체 대비 +
0 + ? "red" + : changeRateFromStart < 0 + ? "blue" + : "black", + }} + > + {formatPrice(changeFromStart)} 원 ({changeRateFromStart}%) +
+ + + + + + {showTable && } + + ); }; const GameMoneyContainer = styled.div` - width: 85%; - height: auto; - border-radius: 20px; - box-shadow: 3px 3px 3px rgb(213, 213, 213); - padding: 20px 10px; - position: relative; - margin-top: 20px; - margin-bottom: 20px; + width: 85%; + height: auto; + border-radius: 20px; + box-shadow: 0px 0px 17px rgb(213, 213, 213); + padding: 20px 10px; + position: relative; + margin-top: 20px; + margin-bottom: 20px; `; const GameMoneyTitle = styled.div` - margin-bottom: 30px; + margin-bottom: 30px; `; const GameMoneyBalance = styled.div` - display: flex; - margin: 15px 0; - flex-direction: row; + display: flex; + margin: 15px 0; + flex-direction: row; `; const BalanceDetailButton = styled.div` - position: absolute; - top: 118px; - right: 20px; + position: absolute; + top: 118px; + right: 20px; `; const BalanceTitle = styled.div` - color: #6c6c6c; - width: 110px; + color: #6c6c6c; + width: 110px; `; const Button = styled.button` - width: 78px; - height: 40px; - border-radius: 50px; - border: none; - background-color: #f1f1f1; - cursor: pointer; - - &:hover { - background-color: #615efc; - color: white; - font-weight: 600; - } + width: 78px; + height: 40px; + border-radius: 50px; + border: none; + background-color: #f1f1f1; + cursor: pointer; + + &:hover { + background-color: #615efc; + color: white; + font-weight: 600; + } `; export default GameMoney; diff --git a/src/Component/Game/GameTradeSwipe.tsx b/src/Component/Game/GameTradeSwipe.tsx index 16269cc..ae2b69f 100644 --- a/src/Component/Game/GameTradeSwipe.tsx +++ b/src/Component/Game/GameTradeSwipe.tsx @@ -10,166 +10,166 @@ import styled from "styled-components"; import { useSwipeStore } from "../../store/useSwipeStore"; interface GameTradeSwipeProps { - onClose: () => void; - isVisible: boolean; - year: string; - budget: number; + onClose: () => void; + isVisible: boolean; + year: string; + budget: number; } const GameTradeSwipe = ({ - onClose, - isVisible, - year, - budget, + onClose, + isVisible, + year, + budget, }: GameTradeSwipeProps) => { - const { stockData } = useStock(); - const [selectedStock, setSelectedStock] = useState<{ - stockId: number; - name: string; - } | null>(null); - const [quantity, setQuantity] = useState(0); - const [acting, setActing] = useState<"BUY" | "SELL">(); - const [isModalOpen, setIsModalOpen] = useState(false); - const [stockOptions, setStockOptions] = useState< - { stockId: number; name: string }[] - >([]); - const [currentPrice, setCurrentPrice] = useState(null); + const { stockData } = useStock(); + const [selectedStock, setSelectedStock] = useState<{ + stockId: number; + name: string; + } | null>(null); + const [quantity, setQuantity] = useState(0); + const [acting, setActing] = useState<"BUY" | "SELL">(); + const [isModalOpen, setIsModalOpen] = useState(false); + const [stockOptions, setStockOptions] = useState< + { stockId: number; name: string }[] + >([]); + const [currentPrice, setCurrentPrice] = useState(null); - const check = usePortfolioStore((state) => state.check); - const setCheck = usePortfolioStore((state) => state.setCheck); - const { holdingList } = useSwipeStore(); + const check = usePortfolioStore((state) => state.check); + const setCheck = usePortfolioStore((state) => state.setCheck); + const { holdingList } = useSwipeStore(); - // 모달 외부 클릭 감지하기 위해 ref 생성 - const modalRef = useRef(null); + // 모달 외부 클릭 감지하기 위해 ref 생성 + const modalRef = useRef(null); - // 모달 외부 클릭 시 닫기 처리 - useEffect(() => { - const handleClickOutside = (event: MouseEvent) => { - if ( - modalRef.current && - !modalRef.current.contains(event.target as Node) - ) { - onClose(); - } - }; - - document.addEventListener("mousedown", handleClickOutside); - return () => { - document.removeEventListener("mousedown", handleClickOutside); - }; - }, [onClose]); - - const handleStockChange = (direction: "left" | "right") => { - if (!selectedStock || stockOptions.length === 0) return; - const currentIndex = stockOptions.findIndex( - (stock) => stock.name === selectedStock.name - ); - const newIndex = - direction === "left" - ? (currentIndex - 1 + stockOptions.length) % stockOptions.length - : (currentIndex + 1) % stockOptions.length; - setSelectedStock(stockOptions[newIndex]); - - // 내가 가지고 있는 주식이면, 수량 업데이트 - const holdingStock = holdingList.find( - (holding) => holding.stockId === stockOptions[newIndex].stockId - ); - if (holdingStock) { - setQuantity(holdingStock.quantity); - } else { - setQuantity(0); - } + // 모달 외부 클릭 시 닫기 처리 + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + modalRef.current && + !modalRef.current.contains(event.target as Node) + ) { + onClose(); + } }; - const handleQuantityChange = (direction: "left" | "right") => { - setQuantity((prev) => { - if (direction === "left" && prev > 1) { - return prev - 1; - } else if (direction === "right") { - return prev + 1; - } - return prev; - }); + document.addEventListener("mousedown", handleClickOutside); + return () => { + document.removeEventListener("mousedown", handleClickOutside); }; + }, [onClose]); - const handleTradeConfirm = async () => { - const data = { - stockId: selectedStock?.stockId || 0, - quantity, - acting, - }; + const handleStockChange = (direction: "left" | "right") => { + if (!selectedStock || stockOptions.length === 0) return; + const currentIndex = stockOptions.findIndex( + (stock) => stock.name === selectedStock.name + ); + const newIndex = + direction === "left" + ? (currentIndex - 1 + stockOptions.length) % stockOptions.length + : (currentIndex + 1) % stockOptions.length; + setSelectedStock(stockOptions[newIndex]); - try { - const res = await axios.post( - `${process.env.REACT_APP_API_URL}/v1/game/stock`, - data, - { withCredentials: true } - ); - if (res.status === 200) { - setCheck(!check); - swal({ title: "거래 성공", icon: "success" }); - setIsModalOpen(false); - setSelectedStock(stockOptions[0]); - setQuantity(0); - onClose(); - } - } catch (error: any) { - const errorMessage = - error.response?.data.message || "서버 오류가 발생했습니다."; - swal({ - title: "거래 실패", - text: errorMessage, - icon: "error", - }).then(() => { - setIsModalOpen(false); - // 모달을 닫지 않음, 에러 후 닫지 않는 로직 유지 - }); - } - }; + // 내가 가지고 있는 주식이면, 수량 업데이트 + const holdingStock = holdingList.find( + (holding) => holding.stockId === stockOptions[newIndex].stockId + ); + if (holdingStock) { + setQuantity(holdingStock.quantity); + } else { + setQuantity(0); + } + }; - const openTradeConfirmModal = (action: "BUY" | "SELL") => { - setActing(action); - setIsModalOpen(true); - }; + const handleQuantityChange = (direction: "left" | "right") => { + setQuantity((prev) => { + if (direction === "left" && prev > 1) { + return prev - 1; + } else if (direction === "right") { + return prev + 1; + } + return prev; + }); + }; - const handleQuantityInputChange = (value: number) => { - setQuantity(value); + const handleTradeConfirm = async () => { + const data = { + stockId: selectedStock?.stockId || 0, + quantity, + acting, }; - // 최대구매수량 계산 함수 - const handleMaxPurchaseQuantity = () => { - if (currentPrice && budget) { - const maxQuantity = Math.floor(budget / currentPrice); - setQuantity(maxQuantity > 0 ? maxQuantity : 0); - } - }; + try { + const res = await axios.post( + `${process.env.REACT_APP_API_URL}/v1/game/stock`, + data, + { withCredentials: true } + ); + if (res.status === 200) { + setCheck(!check); + swal({ title: "거래 성공", icon: "success" }); + setIsModalOpen(false); + setSelectedStock(stockOptions[0]); + setQuantity(0); + onClose(); + } + } catch (error: any) { + const errorMessage = + error.response?.data.message || "서버 오류가 발생했습니다."; + swal({ + title: "거래 실패", + text: errorMessage, + icon: "error", + }).then(() => { + setIsModalOpen(false); + // 모달을 닫지 않음, 에러 후 닫지 않는 로직 유지 + }); + } + }; + + const openTradeConfirmModal = (action: "BUY" | "SELL") => { + setActing(action); + setIsModalOpen(true); + }; - // useEffect(() => { - // if (stockData) { - // const options = stockData.map((stock) => ({ - // stockId: stock.stockId, - // name: stock.name, - // })); - // setStockOptions(options); - // if (!selectedStock && options.length > 0) { - // setSelectedStock(options[0]); - // setCurrentPrice(stockData[0].current); - // } - // } - // if (selectedStock && stockData) { - // const selectedStockData = stockData.find( - // (stock) => stock.stockId === selectedStock.stockId - // ); - // setCurrentPrice(selectedStockData?.current || null); - // } - // }, [stockData, selectedStock]); - useEffect(() => { - if (stockData && stockData.length > 0) { - const options = stockData.map((stock) => ({ - stockId: stock.stockId, - name: stock.name, - })); - setStockOptions(options); + const handleQuantityInputChange = (value: number) => { + setQuantity(value); + }; + + // 최대구매수량 계산 함수 + const handleMaxPurchaseQuantity = () => { + if (currentPrice && budget) { + const maxQuantity = Math.floor(budget / currentPrice); + setQuantity(maxQuantity > 0 ? maxQuantity : 0); + } + }; + + // useEffect(() => { + // if (stockData) { + // const options = stockData.map((stock) => ({ + // stockId: stock.stockId, + // name: stock.name, + // })); + // setStockOptions(options); + // if (!selectedStock && options.length > 0) { + // setSelectedStock(options[0]); + // setCurrentPrice(stockData[0].current); + // } + // } + // if (selectedStock && stockData) { + // const selectedStockData = stockData.find( + // (stock) => stock.stockId === selectedStock.stockId + // ); + // setCurrentPrice(selectedStockData?.current || null); + // } + // }, [stockData, selectedStock]); + useEffect(() => { + if (stockData && stockData.length > 0) { + const options = stockData.map((stock) => ({ + stockId: stock.stockId, + name: stock.name, + })); + setStockOptions(options); // selectedStock이 없으면 첫 번째 종목을 선택 if (!selectedStock && options.length > 0) { @@ -204,92 +204,88 @@ const GameTradeSwipe = ({ } }, [stockData, selectedStock]); - return ( -
- - -
- {/* 주식 거래하기 */} - handleStockChange("left")} - onRightClick={() => handleStockChange("right")} - currentPrice={currentPrice || 0} // undefined 방지 - handleMaxPurchaseQuantity={ - handleMaxPurchaseQuantity - } - /> - handleQuantityChange("left")} - onRightClick={() => handleQuantityChange("right")} - onQuantityChange={handleQuantityInputChange} // 수량 직접 입력 핸들러 전달 - currentPrice={currentPrice || 0} // undefined 방지 - handleMaxPurchaseQuantity={ - handleMaxPurchaseQuantity - } - /> -
-
거래가능금액: {formatPrice(budget)}
-
- 총 합계:{" "} - {currentPrice && quantity - ? formatPrice(currentPrice * quantity) - : 0} -
- - - openTradeConfirmModal("SELL")} - disabled={quantity === 0} // 수량이 0이거나 빈 값일 때 비활성화 - > - 팔기 - - openTradeConfirmModal("BUY")} - disabled={quantity === 0} // 수량이 0이거나 빈 값일 때 비활성화 - > - 사기 - - - - - setIsModalOpen(false)} - stock={selectedStock?.name || ""} - quantity={quantity} - acting={acting!} + return ( +
+ + +
+ {/* 주식 거래하기 */} + handleStockChange("left")} + onRightClick={() => handleStockChange("right")} + currentPrice={currentPrice || 0} // undefined 방지 + handleMaxPurchaseQuantity={handleMaxPurchaseQuantity} /> -
- ); + handleQuantityChange("left")} + onRightClick={() => handleQuantityChange("right")} + onQuantityChange={handleQuantityInputChange} // 수량 직접 입력 핸들러 전달 + currentPrice={currentPrice || 0} // undefined 방지 + handleMaxPurchaseQuantity={handleMaxPurchaseQuantity} + /> +
+
거래가능금액: {formatPrice(budget)}
+
+ 총 합계:{" "} + {currentPrice && quantity + ? formatPrice(currentPrice * quantity) + : 0} +
+ + + openTradeConfirmModal("SELL")} + disabled={quantity === 0} // 수량이 0이거나 빈 값일 때 비활성화 + > + 팔기 + + openTradeConfirmModal("BUY")} + disabled={quantity === 0} // 수량이 0이거나 빈 값일 때 비활성화 + > + 사기 + + + + + setIsModalOpen(false)} + stock={selectedStock?.name || ""} + quantity={quantity} + acting={acting!} + /> +
+ ); }; const SwipeModal = styled.div<{ isOpen: boolean }>` - width: 100%; - position: fixed; - left: 50%; - bottom: ${(props) => (props.isOpen ? "0" : "-100%")}; - max-height: ${(props) => (props.isOpen ? "60vh" : "0")}; - height: 60vh; - max-width: 426px; - box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1); - transition: bottom 0.7s ease, max-height 0.7s ease; - z-index: 1; - overflow: hidden; - border-top-left-radius: 20px; - border-top-right-radius: 20px; - transform: translateX(-50%); - background-color: #f7f7f7; - display: flex; - justify-content: center; + width: 90%; + position: fixed; + left: 50%; + bottom: ${(props) => (props.isOpen ? "0" : "-100%")}; + max-height: ${(props) => (props.isOpen ? "64vh" : "0")}; + height: 64vh; + max-width: 426px; + box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.1); + transition: bottom 0.7s ease, max-height 0.7s ease; + z-index: 1; + overflow: hidden; + border-top-left-radius: 20px; + border-top-right-radius: 20px; + transform: translateX(-50%); + background-color: #f7f7f7; + display: flex; + justify-content: center; `; const SwipeContainer = styled.div` @@ -310,26 +306,26 @@ const SwipeContainer = styled.div` // `; const TradeButtonGroup = styled.div` - display: flex; - justify-content: center; - align-items: center; - gap: 30px; - margin: 20px 0; - width: 250px; + display: flex; + justify-content: center; + align-items: center; + gap: 30px; + margin: 20px 0; + width: 250px; `; const TradeButton = styled.button` - width: 100px; - height: 40px; - border-radius: 15px; - background: ${({ disabled }) => - disabled - ? "radial-gradient(circle, #cccccc 0%, #e0e0e0 100%)" - : "radial-gradient(circle, #4834d4 0%, #686de0 100%)"}; - color: #fff; - border: none; - font-size: 14px; - cursor: pointer; + width: 100px; + height: 40px; + border-radius: 15px; + background: ${({ disabled }) => + disabled + ? "radial-gradient(circle, #cccccc 0%, #e0e0e0 100%)" + : "radial-gradient(circle, #4834d4 0%, #686de0 100%)"}; + color: #fff; + border: none; + font-size: 14px; + cursor: pointer; `; export default GameTradeSwipe; diff --git a/src/Component/GameCarousel/gameCarousel.tsx b/src/Component/GameCarousel/gameCarousel.tsx index c6f0986..e91eaf9 100644 --- a/src/Component/GameCarousel/gameCarousel.tsx +++ b/src/Component/GameCarousel/gameCarousel.tsx @@ -2,7 +2,8 @@ import { useSpringCarousel } from "react-spring-carousel"; import CarouselItem from "./carouselItem"; import styled from "styled-components"; import { Colors } from "../../Styles/Colors"; -import { useNavigate } from "react-router-dom"; +import { useEffect, useState } from "react"; +import { useNavigate, useLocation } from "react-router-dom"; const BtnContainer = styled.div` display: flex; @@ -49,6 +50,8 @@ const BackButton = styled.button` const GameCarousel = ({ stocks }: any) => { const nav = useNavigate(); + // const location = useLocation(); + // const [btnState, setBtnState] = useState(); const { carouselFragment, slideToPrevItem, slideToNextItem } = useSpringCarousel({ @@ -58,13 +61,24 @@ const GameCarousel = ({ stocks }: any) => { })), }); + // // 랭킹 저장 여부 확인 + // useEffect(() => { + // if (location.state?.btnDisabled) { + // console.log("게임 스톡에 잘 넘어와?", location.state.btnDisabled); + // setBtnState(location.state.btnDisabled); + // } + // }, [location.state]); + return ( <> 이전 { - nav("/game/result/total"); + nav( + "/game/result/total" + // , { state: { btnDisabled: btnState } } + ); }} > 게임 결과 페이지로 돌아가기 diff --git a/src/Pages/game/gameStocks.tsx b/src/Pages/game/gameStocks.tsx index 7964091..7f51f4e 100644 --- a/src/Pages/game/gameStocks.tsx +++ b/src/Pages/game/gameStocks.tsx @@ -6,12 +6,13 @@ import { GameStockProps } from "../../constants/interface"; import { GoAlert } from "react-icons/go"; import { Colors } from "../../Styles/Colors"; import Button from "../../Component/Button/button"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useLocation } from "react-router-dom"; const GameStocks = () => { const [stocks, setStocks] = useState([]); const nav = useNavigate(); + useEffect(() => { axios .get(`${process.env.REACT_APP_API_URL}/v1/game/result/stock`, { @@ -31,11 +32,15 @@ const GameStocks = () => { }); }, []); + + return ( -
- + <> {stocks.length > 0 ? ( - +
+ + +
) : (
{ />
)} -
+ ); }; diff --git a/src/Pages/game/playPage.tsx b/src/Pages/game/playPage.tsx index 11ffff1..ca208b2 100644 --- a/src/Pages/game/playPage.tsx +++ b/src/Pages/game/playPage.tsx @@ -174,17 +174,6 @@ const PlayPage = () => { flexDirection: "column", }} > - {/*
*/} - {/*

- 게임 진행도 -

*/} - {/*
*/} diff --git a/src/Pages/game/totalResult.tsx b/src/Pages/game/totalResult.tsx index aad251e..3061a11 100644 --- a/src/Pages/game/totalResult.tsx +++ b/src/Pages/game/totalResult.tsx @@ -7,9 +7,10 @@ import axios from "axios"; import { useEffect, useState } from "react"; import { RankDataProps } from "../../constants/interface"; import RankList from "../../Component/Game/Rank/rankList"; -import { useNavigate } from "react-router-dom"; +import { useNavigate, useLocation } from "react-router-dom"; import swal from "sweetalert"; import { useGameStore } from "../../store/useGameStore"; +import { debounce } from "lodash"; const Container = styled.div` display: flex; @@ -57,6 +58,7 @@ const NickBox = styled.div` const TotalResult = () => { const nav = useNavigate(); + const location = useLocation(); const [user, setUser] = useState(""); const [rankList, setRankList] = useState([]); const [userRank, setUserRank] = useState(0); @@ -67,6 +69,8 @@ const TotalResult = () => { setCheckGameDone: state.setCheckGameDone, })); + const [btnDisabled, setBtnDisabled] = useState(false); + // 랭킹 리스트 요청 api useEffect(() => { axios @@ -98,7 +102,7 @@ const TotalResult = () => { }, []); // 게임 결과 저장 - const handleRankBtn = () => { + const handleRankClick = debounce(() => { axios .post( `${process.env.REACT_APP_API_URL}/v1/game/result/save`, @@ -113,11 +117,13 @@ const TotalResult = () => { .then((res) => { if (res.status === 200) { { + console.log("랭킹등록!!"); swal({ title: "랭킹 등록 완료!", text: "랭킹이 등록되었습니다.", icon: "success", }); + setBtnDisabled(true); } } else { { @@ -129,7 +135,49 @@ const TotalResult = () => { } } }); - }; + }, 1000); + + // const handleRankBtn = () => { + // axios + // .post( + // `${process.env.REACT_APP_API_URL}/v1/game/result/save`, + // {}, + // { + // withCredentials: true, + // headers: { + // "Content-Type": "application/json", + // }, + // } + // ) + // .then((res) => { + // if (res.status === 200) { + // { + // console.log("랭킹등록!!"); + // swal({ + // title: "랭킹 등록 완료!", + // text: "랭킹이 등록되었습니다.", + // icon: "success", + // }); + // } + // } else { + // { + // swal({ + // title: "등록에 실패하셨습니다.", + // text: "다시 시도해주세요!", + // icon: "error", + // }); + // } + // } + // }); + // }; + + // 랭킹 저장 여부 확인 + useEffect(() => { + if (location.state?.btnDisabled) { + console.log("다시 잘 넘어와?", location.state.btnDisabled); + setBtnDisabled(location.state.btnDisabled); + } + }, [location.state]); return ( <> @@ -147,8 +195,10 @@ const TotalResult = () => { $state="normal" $colorType="gradient" $size="small" + disabled={btnDisabled} onClick={() => { - handleRankBtn(); + // handleRankBtn(); + handleRankClick(); }} /> @@ -162,7 +212,7 @@ const TotalResult = () => { $colorType="gradient" $size="gradientBtn" onClick={() => { - nav("/game/gameStocks"); + nav("/game/gameStocks", { state: { btnDisabled: btnDisabled } }); }} />