From 6ddcc665524695b49189368f4c317febc17558f5 Mon Sep 17 00:00:00 2001 From: novice1993 Date: Sun, 3 Sep 2023 18:40:30 +0900 Subject: [PATCH] =?UTF-8?q?[Design]=20=EC=A3=BC=EA=B0=80=EB=AA=A9=EB=A1=9D?= =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20CSS=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 렌더링 시, 중간가격 주가가 리스트 정중앙에 렌더링 되도록 Reack hook 및 css 관련 속성 부여 Issues #12 --- .../components/StockOrderSection/Index.tsx | 4 +- .../StockOrderSection/StockOrderBtn.tsx | 4 +- .../StockOrderSection/StockPrice.tsx | 91 +++++++++---------- .../components/StockOrderSection/dummyData.ts | 33 +++++++ 4 files changed, 82 insertions(+), 50 deletions(-) create mode 100644 client/src/components/StockOrderSection/dummyData.ts diff --git a/client/src/components/StockOrderSection/Index.tsx b/client/src/components/StockOrderSection/Index.tsx index 687f9bbe..818f83a5 100644 --- a/client/src/components/StockOrderSection/Index.tsx +++ b/client/src/components/StockOrderSection/Index.tsx @@ -22,12 +22,10 @@ const Container = styled.aside` position: fixed; right: 0px; transition: right 0.3s ease-in-out; - display: flex; flex-direction: column; - width: 26%; min-width: 400px; height: 100%; - border-left: 1px solid #2f4f4f; + background-color: #ffffff; `; diff --git a/client/src/components/StockOrderSection/StockOrderBtn.tsx b/client/src/components/StockOrderSection/StockOrderBtn.tsx index a02d72b9..9ee8a4c9 100644 --- a/client/src/components/StockOrderSection/StockOrderBtn.tsx +++ b/client/src/components/StockOrderSection/StockOrderBtn.tsx @@ -7,10 +7,12 @@ const totalAmountText02: string = "원"; const orderBtnText: string = "매수"; // dummyData -const dummyMoney: string = "9,990,086"; +import { availableMoney } from "./dummyData"; const dummyAmount: string = "0"; const StockOrderBtn = () => { + const dummyMoney = availableMoney.toLocaleString(); + return ( diff --git a/client/src/components/StockOrderSection/StockPrice.tsx b/client/src/components/StockOrderSection/StockPrice.tsx index 4c6ad3a8..324c61a9 100644 --- a/client/src/components/StockOrderSection/StockPrice.tsx +++ b/client/src/components/StockOrderSection/StockPrice.tsx @@ -1,41 +1,20 @@ +import { useRef, useEffect } from "react"; import { styled } from "styled-components"; // dummyData -const dummyPrice: dummyProps[] = [ - { price: 190, changeRate: 90, volume: 500 }, - { price: 180, changeRate: 80, volume: 120 }, - { price: 170, changeRate: 70, volume: 78 }, - { price: 160, changeRate: 60, volume: 55 }, - { price: 150, changeRate: 50, volume: 91 }, - { price: 140, changeRate: 40, volume: 300 }, - { price: 130, changeRate: 30, volume: 10 }, - { price: 120, changeRate: 20, volume: 80 }, - { price: 110, changeRate: 10, volume: 40 }, - { price: 100, changeRate: 0, volume: 180 }, - { price: 90, changeRate: -10, volume: 250 }, - { price: 80, changeRate: -20, volume: 1000 }, - { price: 70, changeRate: -30, volume: 900 }, - { price: 60, changeRate: -40, volume: 850 }, - { price: 50, changeRate: -50, volume: 154 }, - { price: 40, changeRate: -60, volume: 820 }, - { price: 30, changeRate: -70, volume: 1100 }, - { price: 20, changeRate: -80, volume: 800 }, - { price: 10, changeRate: -90, volume: 500 }, - { price: 5, changeRate: -95, volume: 800 }, -]; -const upperPriceVolumeSum = 1000; -const lowerPriceVolumeSum = 2000; -// +import { dummyPrice } from "./dummyData"; +import { upperPriceVolumeSum, lowerPriceVolumeSum } from "./dummyData"; const StockPrice = () => { return ( - + +
+
+ {dummyPrice.map((item, idx) => ( { /> ))} - + +
+
+ ); }; @@ -52,18 +34,42 @@ const StockPrice = () => { export default StockPrice; const PriceInfo = (props: PriceInfoProps) => { - const { - upperPriceVolumeSum, - lowerPriceVolumeSum, - index, - price, - changeRate, - volume, - } = props; + const { index, price, changeRate, volume } = props; + const ref = useRef(null); const changeRateText01: string = changeRate > 0 ? "+" : ""; const changeRateText02: string = "%"; + // 11번째 가격 -> 렌더링 시 정중앙에 위치하도록 + useEffect(() => { + ref.current?.focus(); + ref.current?.scrollIntoView({ block: "center" }); + }, []); + + if (index === 10) { + return ( + + +
{price}
+
+ {changeRateText01} + {changeRate} + {changeRateText02} +
+ + +
{volume}
+ + + + ); + } + return ( @@ -87,16 +93,8 @@ const PriceInfo = (props: PriceInfoProps) => { ); }; -// dummy 관련 변수 -interface dummyProps { - price: number; - changeRate: number; - volume: number; -} - +// type 지정 interface PriceInfoProps { - upperPriceVolumeSum: number; - lowerPriceVolumeSum: number; index: number; price: number; changeRate: number; @@ -148,6 +146,7 @@ const InfoContainer = styled.div` height: 36px; margin-bottom: 2px; background-color: ${(props) => (props.index > 9 ? "#FDE8E7" : "#E7F0FD")}; + border: ${(props) => (props.index === 10 ? "1px solid #2F4F4F" : "none")}; display: flex; flex-direction: row; `; diff --git a/client/src/components/StockOrderSection/dummyData.ts b/client/src/components/StockOrderSection/dummyData.ts new file mode 100644 index 00000000..87285c75 --- /dev/null +++ b/client/src/components/StockOrderSection/dummyData.ts @@ -0,0 +1,33 @@ +// dummyData +export const dummyPrice: dummyProps[] = [ + { price: 190, changeRate: 90, volume: 500 }, + { price: 180, changeRate: 80, volume: 120 }, + { price: 170, changeRate: 70, volume: 78 }, + { price: 160, changeRate: 60, volume: 55 }, + { price: 150, changeRate: 50, volume: 91 }, + { price: 140, changeRate: 40, volume: 300 }, + { price: 130, changeRate: 30, volume: 10 }, + { price: 120, changeRate: 20, volume: 80 }, + { price: 110, changeRate: 10, volume: 40 }, + { price: 100, changeRate: 0, volume: 180 }, + { price: 90, changeRate: -10, volume: 250 }, + { price: 80, changeRate: -20, volume: 1000 }, + { price: 70, changeRate: -30, volume: 900 }, + { price: 60, changeRate: -40, volume: 850 }, + { price: 50, changeRate: -50, volume: 154 }, + { price: 40, changeRate: -60, volume: 820 }, + { price: 30, changeRate: -70, volume: 1100 }, + { price: 20, changeRate: -80, volume: 800 }, + { price: 10, changeRate: -90, volume: 500 }, + { price: 5, changeRate: -95, volume: 800 }, +]; +export const upperPriceVolumeSum = 1000; +export const lowerPriceVolumeSum = 2000; +export const availableMoney = 10000000; + +// dummy 관련 변수 +interface dummyProps { + price: number; + changeRate: number; + volume: number; +}