Skip to content

Commit

Permalink
Merge pull request #265 from 100-hours-a-week/dev
Browse files Browse the repository at this point in the history 
Dev
  • Loading branch information
@yzooop
yzooop authored Oct 10, 2024
2 parents 1eafcec + e3b75fd commit 5a2b702
Show file tree
Hide file tree
Showing 6 changed files with 533 additions and 313 deletions.
7 changes: 3 additions & 4 deletions src/Component/Dropdown/gameDropdown.tsx
View file
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
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
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
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

0 comments on commit 5a2b702

Please sign in to comment.