Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dev #265

Merged
merged 2 commits into from
Oct 10, 2024
Merged

Dev #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6f681e8
Fix : 종목 안불러와지는 이슈 수정
lucy726j Oct 10, 2024
e3b75fd
Merge pull request #264 from 100-hours-a-week/feature/lucy
lucy726j Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions src/Component/Dropdown/gameDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { Variants, motion } from "framer-motion";
import { useState } from "react";
import { Colors } from "../../Styles/Colors";
import { StocksStore, useStock } from "../../store/stockContext";
import styled from "styled-components";
import { useStock } from "../../store/stockContext";
import {
itemVariants,
dropdownVariants,
Expand All @@ -29,7 +27,8 @@ interface Stock {
const StockItem: React.FC<StockItemProps> = ({ onSelectStock }) => {
const [isOpen, setIsOpen] = useState(false);
const [selectedStock, setSelectedStock] = useState<string | null>(null);
const { stockData, setStockData } = StocksStore();
// const { stockData, setStockData } = StocksStore();
const { stockData, setStockData } = useStock();
const { purchaseHints, setPurchaseHints } = useHintStore();

const toggleDropdown = () => {
Expand Down
122 changes: 61 additions & 61 deletions src/Component/Game/StocksTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,65 +5,65 @@ import "./StocksTableStyle.css";
import styled, { keyframes } from "styled-components";

const StocksTable: React.FC<StocksTableProps> = ({ stocks, year }) => {
const header = ["번호", "종목", "전년", "올해", "등락"];
const header = ["번호", "종목", "전년", "올해", "등락"];
console.log(stocks, year);

return (
<div className="StocksTable">
<table>
<thead>
<tr>
{header.map((item, index) => (
<th key={index}>{item}</th>
))}
</tr>
</thead>
<tbody>
{stocks &&
stocks.map((stock, index) => (
<TableRow
key={stock.stockId}
index={index} // index를 전달
style={{
background:
index % 2 === 1 ? "#ededed" : "white",
}}
>
<td>{index + 1}</td>
<td>{stock.name}</td>
<td style={{ textAlign: "right" }}>
{formatPriceWithYear(stock.prev, year)}
</td>
<td
style={{
color:
stock.changeRate > 0
? "red"
: stock.changeRate < 0
? "blue"
: "black",
textAlign: "right",
}}
>
{formatPriceWithYear(stock.current, year)}
</td>
<td
style={{
color:
stock.changeRate > 0
? "red"
: stock.changeRate < 0
? "blue"
: "black",
}}
>
{formatChangeRate(stock.changeRate)}
</td>
</TableRow>
))}
</tbody>
</table>
</div>
);
return (
<div className="StocksTable">
<table>
<thead>
<tr>
{header.map((item, index) => (
<th key={index}>{item}</th>
))}
</tr>
</thead>
<tbody>
{stocks &&
stocks.map((stock, index) => (
<TableRow
key={stock.stockId}
index={index} // index를 전달
style={{
background: index % 2 === 1 ? "#ededed" : "white",
}}
>
<td>{index + 1}</td>
<td>{stock.name}</td>
<td style={{ textAlign: "right" }}>
{formatPriceWithYear(stock.prev, year)}
</td>
<td
style={{
color:
stock.changeRate > 0
? "red"
: stock.changeRate < 0
? "blue"
: "black",
textAlign: "right",
}}
>
{formatPriceWithYear(stock.current, year)}
</td>
<td
style={{
color:
stock.changeRate > 0
? "red"
: stock.changeRate < 0
? "blue"
: "black",
}}
>
{formatChangeRate(stock.changeRate)}
</td>
</TableRow>
))}
</tbody>
</table>
</div>
);
};

// 부드럽게 나타나는 애니메이션 정의
Expand All @@ -79,9 +79,9 @@ const fadeIn = keyframes`
`;

const TableRow = styled.tr<{ index: number }>`
animation: ${fadeIn} 0.5s ease-out forwards;
animation-delay: ${({ index }) => index * 0.1}s;
opacity: 0;
animation: ${fadeIn} 0.5s ease-out forwards;
animation-delay: ${({ index }) => index * 0.1}s;
opacity: 0;
`;

export default StocksTable;
143 changes: 77 additions & 66 deletions src/Component/SearchBar/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,75 +19,86 @@ const SearchBar: React.FC<SearchBarProps> = () => {
};

// debounce 함수 : 1000ms 디바운스를 걸고, 마지막 keyword로만 api 요청
const handelDebounce = useCallback(
debounce((input: string) => {
if (input.trim() === "") {
setList([]);
return;
}
axios
.get(
`${process.env.REACT_APP_API_URL}/v1/stocks/search?query=${input}`,
{
withCredentials: true,
headers: {
"Content-Type": "application/json",
},
}
)
.then((res) => {
if (res.status === 200) {
const result = res.data;
setList(result);
} else if (res.status === 401) {
nav("/login");
}
})
.catch((error) => {});
}, 300),
[]
);
// const handelDebounce = useCallback(
// debounce((input: string) => {
// if (input.trim() === "") {
// setList([]);
// return;
// }
// axios
// .get(
// `${process.env.REACT_APP_API_URL}/v1/stocks/search?query=${input}`,
// {
// withCredentials: true,
// headers: {
// "Content-Type": "application/json",
// },
// }
// )
// .then((res) => {
// if (res.status === 200) {
// const result = res.data;
// setList(result);
// } else if (res.status === 401) {
// nav("/login");
// }
// })
// .catch((error) => {});
// }, 300),
// []
// );

// // input 태그에 입력되는 값으로 keyword 업데이트, debounce 함수에 keyword 전달
// const handleSearch = useCallback(
// (e: React.ChangeEvent<HTMLInputElement>) => {
// let input = e.target.value;
// const regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi;
// if (regExp.test(input)) {
// input = input.replace(regExp, "");
// }
// setKeyword(input);
// handelDebounce(input);
// },
// [handelDebounce]
// );

// // # Debounce 적용 전 ver

// input 태그에 입력되는 값으로 keyword 업데이트, debounce 함수에 keyword 전달
const handleSearch = useCallback(
(e: React.ChangeEvent<HTMLInputElement>) => {
let input = e.target.value;
const regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi;
if (regExp.test(input)) {
input = input.replace(regExp, "");
}
setKeyword(input);
handelDebounce(input);
},
[handelDebounce]
);
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
let input = e.target.value;
const regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼<>@\#$%&\'\"\\\(\=]/gi;
if (regExp.test(input)) {
input = input.replace(regExp, "");
}
setKeyword(input);
};

// # Debounce 적용 전 ver
// useEffect(() => {
// if (keyword.trim() === "") {
// setList([]);
// return;
// }
// axios
// .get(
// `${process.env.REACT_APP_API_URL}/v1/stocks/search?query=${keyword}`,
// {
// withCredentials: true,
// headers: {
// "Content-Type": "application/json",
// },
// }
// )
// .then((res) => {
// if (res.status === 200) {
// const result = res.data;
// setList(result);
// } else if (res.status === 401) {
// nav("/login");
// }
// })
// .catch((error) => {});
// }, [keyword]);
useEffect(() => {
if (keyword.trim() === "") {
setList([]);
return;
}
axios
.get(
`${process.env.REACT_APP_API_URL}/v1/stocks/search?query=${keyword}`,
{
withCredentials: true,
headers: {
"Content-Type": "application/json",
},
}
)
.then((res) => {
if (res.status === 200) {
const result = res.data;
setList(result);
} else if (res.status === 401) {
nav("/login");
}
})
.catch((error) => {});
}, [keyword]);

const handleSelectStock = (event: StockDataProps) => {
nav(`/stocks/${event.code}`);
Expand Down
6 changes: 4 additions & 2 deletions src/Game/Main/gameStart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ import axios from "axios";
import swal from "sweetalert";
import { ButtonDiv, GameTitle } from "./styleMain";
import Loading from "../Loading/loading";
import { StocksStore } from "../../store/stockContext";
// import { StocksStore } from "../../store/stockContext";
import { useStock } from "../../store/stockContext";
import audioFile from "../../audio/Lucy_skrrr.m4a";

const GameMain: React.FC = () => {
const { setStockData } = StocksStore();
// const { setStockData } = StocksStore();
const { setStockData } = useStock();
const [isLoadingFinished, setIsLoadingFinished] = useState(false); // skip 로딩
const [loading, setLoading] = useState(false); // axios 요청 로딩
const [isFlying, setIsFlying] = useState(false);
Expand Down
Loading
Loading