diff --git a/client/package-lock.json b/client/package-lock.json index 3e42972c..0ba4f0e5 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -9,6 +9,8 @@ "version": "0.0.0", "dependencies": { "axios": "^1.5.0", + "echarts": "^5.4.3", + "echarts-for-react": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "styled-components": "^6.0.7" @@ -3200,6 +3202,33 @@ "node": ">=6.0.0" } }, + "node_modules/echarts": { + "version": "5.4.3", + "resolved": "https://registry.npmjs.org/echarts/-/echarts-5.4.3.tgz", + "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==", + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.4.4" + } + }, + "node_modules/echarts-for-react": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/echarts-for-react/-/echarts-for-react-3.0.2.tgz", + "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "size-sensor": "^1.0.1" + }, + "peerDependencies": { + "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0", + "react": "^15.0.0 || >=16.0.0" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" + }, "node_modules/electron-to-chromium": { "version": "1.4.504", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.504.tgz", @@ -3531,8 +3560,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "dev": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-glob": { "version": "3.3.1", @@ -4600,6 +4628,11 @@ "node": ">=8" } }, + "node_modules/size-sensor": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/size-sensor/-/size-sensor-1.0.2.tgz", + "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -4987,6 +5020,19 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zrender": { + "version": "5.4.4", + "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.4.tgz", + "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==", + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==" } } } diff --git a/client/package.json b/client/package.json index 4c717370..204529df 100644 --- a/client/package.json +++ b/client/package.json @@ -11,6 +11,8 @@ }, "dependencies": { "axios": "^1.5.0", + "echarts": "^5.4.3", + "echarts-for-react": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "styled-components": "^6.0.7" diff --git a/client/src/asset/CentralSectionMenu-BookmarkOff.png b/client/src/asset/CentralSectionMenu-BookmarkOff.png new file mode 100644 index 00000000..1f3bec98 Binary files /dev/null and b/client/src/asset/CentralSectionMenu-BookmarkOff.png differ diff --git a/client/src/asset/CentralSectionMenu-BookmarkOn.png.png b/client/src/asset/CentralSectionMenu-BookmarkOn.png.png new file mode 100644 index 00000000..af97fcf3 Binary files /dev/null and b/client/src/asset/CentralSectionMenu-BookmarkOn.png.png differ diff --git a/client/src/asset/CentralSectionMenu-compareChart.png b/client/src/asset/CentralSectionMenu-compareChart.png new file mode 100644 index 00000000..9e3a34e1 Binary files /dev/null and b/client/src/asset/CentralSectionMenu-compareChart.png differ diff --git a/client/src/asset/CentralSectionMenu-dummyImg.png b/client/src/asset/CentralSectionMenu-dummyImg.png new file mode 100644 index 00000000..808ee025 Binary files /dev/null and b/client/src/asset/CentralSectionMenu-dummyImg.png differ diff --git a/client/src/asset/README.md b/client/src/asset/README.md deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/components/CentralChartSection/Index.tsx b/client/src/components/CentralChartSection/Index.tsx new file mode 100644 index 00000000..ebc00abe --- /dev/null +++ b/client/src/components/CentralChartSection/Index.tsx @@ -0,0 +1,24 @@ +import { styled } from "styled-components"; + +import UpperMenuBar from "../CentralSectionMenu/Index"; +import StockChart from "./StockChart"; + +const CentralChartSection = () => { + return ( + + + + + ); +}; + +export default CentralChartSection; + +const Container = styled.div` + flex: 6.7 0 0; + min-width: 630px; + height: 100%; + + display: flex; + flex-direction: column; +`; diff --git a/client/src/components/CentralChartSection/StockChart.tsx b/client/src/components/CentralChartSection/StockChart.tsx new file mode 100644 index 00000000..11cfaf19 --- /dev/null +++ b/client/src/components/CentralChartSection/StockChart.tsx @@ -0,0 +1,122 @@ +import { styled } from "styled-components"; +import EChartsReact from "echarts-for-react"; + +const StockChart = () => { + return ( + + + + ); +}; + +export default StockChart; + +const options = { + // title: { + // text: "Stock Chart with Separate Y Axes on the Right Side", + // }, + xAxis: { + type: "category", + data: [ + new Date("2023-08-31 14:00").toLocaleDateString(), + "2023-08-31 14:00", + "Day 1", + "Day 2", + "Day 3", + "Day 4", + "Day 5", + "Day 6", + "Day 7", + "Day 8", + "Day 9", + "Day 10", + "Day 11", + "Day 12", + "Day 13", + "Day 14", + "Day 15", + "Day 16", + "Day 17", + "Day 18", + "Day 19", + "Day 20", + "Day 21", + "Day 22", + "Day 23", + "Day 24", + "Day 25", + "Day 26", + "Day 27", + "Day 28", + ], // X 축 라벨 + }, + yAxis: [ + { + type: "value", + // name: "Price", // 주가 Y 축 라벨 + position: "right", // 오른쪽에 위치 + }, + ], + dataZoom: [ + { + type: "inside", // 마우스 스크롤을 통한 줌 인/아웃 지원 + }, + ], + tooltip: { + trigger: "axis", + axisPointer: { + type: "cross", // 마우스 위치에 눈금 표시 + }, + }, + series: [ + { + name: "주가", + type: "candlestick", // 캔들스틱 시리즈 + data: [ + [100, 120, 80, 90], // 시가, 종가, 저가, 주가 + [110, 130, 100, 120], + [90, 110, 70, 100], + [95, 105, 85, 110], + [105, 125, 95, 120], + [110, 120, 100, 130], + [120, 140, 110, 150], + [130, 150, 120, 160], + [140, 160, 130, 170], + [150, 170, 140, 180], + [150, 170, 140, 180], + [160, 180, 150, 190], + [170, 190, 160, 200], + [170, 200, 170, 210], + [170, 140, 130, 130], + [150, 160, 120, 160], + [140, 160, 130, 170], + [150, 170, 140, 180], + [140, 125, 95, 120], + [110, 120, 100, 130], + [120, 140, 110, 150], + [130, 150, 120, 160], + [140, 160, 130, 170], + [150, 170, 140, 180], + [160, 180, 150, 190], + [170, 190, 160, 200], + [180, 200, 170, 210], + [190, 210, 180, 220], + ], + yAxisIndex: 0, // 첫 번째 Y 축 사용 + }, + ], +}; + +// 사이즈 조절을 위한 스타일 설정 +const chartStyle = { + width: "100%", + height: "100%", +}; + +const Container = styled.div` + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; diff --git a/client/src/components/CentralChartSection/TransactionVolumeChart.tsx b/client/src/components/CentralChartSection/TransactionVolumeChart.tsx new file mode 100644 index 00000000..8855348a --- /dev/null +++ b/client/src/components/CentralChartSection/TransactionVolumeChart.tsx @@ -0,0 +1,15 @@ +import { styled } from "styled-components"; + +const TransactionVolumeChart = () => { + return TransactionVolumeChart; +}; + +export default TransactionVolumeChart; + +const Container = styled.div` + flex: 1 0 0; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid darkgray; +`; diff --git a/client/src/components/CentralSectionMenu/FLineBookmarkBtn.tsx b/client/src/components/CentralSectionMenu/FLineBookmarkBtn.tsx new file mode 100644 index 00000000..8eaebd92 --- /dev/null +++ b/client/src/components/CentralSectionMenu/FLineBookmarkBtn.tsx @@ -0,0 +1,39 @@ +import { styled } from "styled-components"; + +import bookmarkOffImg from "../../asset/CentralSectionMenu-BookmarkOff.png"; +// import bookmarkOnImg from "../../asset/CentralSectionMenu-BookmarkOn.png.png"; + +const buttonText: string = "관심"; + +const BookmarkBtn = () => { + return ( + + ; + } + + if (direction === "right") { + return ; + } +}; + +export default ExpandScreenBtn; + +// type 정의 +interface OwnProps { + direction: string; +} + +// component 생성 +const Button = styled.div` + width: 43px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + font-size: 22px; + border-right: ${(props) => + props.direction === "left" && "1px solid darkgray"}; + border-left: ${(props) => + props.direction === "right" && "1px solid darkgray"}; +`; diff --git a/client/src/components/CentralSectionMenu/FLineStockOverview.tsx b/client/src/components/CentralSectionMenu/FLineStockOverview.tsx new file mode 100644 index 00000000..e998aba5 --- /dev/null +++ b/client/src/components/CentralSectionMenu/FLineStockOverview.tsx @@ -0,0 +1,102 @@ +import { styled } from "styled-components"; + +// dummyData -> 일부 재활용 예정 (변수명 다시 생각) +import dummyImg from "../../asset/CentralSectionMenu-dummyImg.png"; +const corpName: string = "카카오"; +const stockCode: string = "035720"; +const stockCodeAdditionalInfo: string = "코스피"; +const stockPrice: string = "48,600"; +const changeRate: string = "+1.25%"; +const chageAmount: string = "▲600"; +const transactionVolume: string = "864,728"; +const volumeAdditionalInfo: string = "거래량"; +const transactionValue: string = "419억 1,468만"; +const valueAdditionalInfo: string = "거래대금"; + +const StockOverview = () => { + return ( + + + {corpName} + + {stockCode} {stockCodeAdditionalInfo} + + {stockPrice} + {changeRate} + {chageAmount} + + {volumeAdditionalInfo} + {transactionVolume} + + + {valueAdditionalInfo} + {transactionValue} + + + ); +}; + +export default StockOverview; + +const Container = styled.div` + flex: 7 0 0; + + display: flex; + flex-direction: row; + align-items: center; + padding-left: 12px; + padding-right: 12px; + gap: 8px; +`; + +const CorpLogo = styled.img` + width: 24px; + height: 24px; + border-radius: 50%; +`; + +const CorpName = styled.div` + font-size: 18px; + font-weight: 530; +`; + +const StockCode = styled.div` + font-size: 14px; + color: #999999; +`; + +const StockPrice = styled.div` + font-size: 18px; + color: #ed2926; + font-weight: 530; +`; + +const PriceChangeRate = styled.div` + font-size: 14px; + color: #ed2926; +`; + +const PriceChangeAmount = styled.div` + font-size: 14px; + color: #ed2926; +`; + +const TransactionVolume = styled.div` + font-size: 14px; + color: #525252; + + & span { + color: #999999; + padding-right: 5px; + } +`; + +const TransactionValue = styled.div` + font-size: 14px; + color: #525252; + + & span { + color: #999999; + padding-right: 5px; + } +`; diff --git a/client/src/components/CentralSectionMenu/FLineTradeBtn.tsx b/client/src/components/CentralSectionMenu/FLineTradeBtn.tsx new file mode 100644 index 00000000..b0936391 --- /dev/null +++ b/client/src/components/CentralSectionMenu/FLineTradeBtn.tsx @@ -0,0 +1,44 @@ +import { styled } from "styled-components"; + +const TradeBtn = (props: OwnProps) => { + const { type } = props; + const buttonText: string = type === "buying" ? "매수" : "매도"; + + return ( + + + + ); +}; + +export default TradeBtn; + +// type 정의 +interface OwnProps { + type: string; +} + +// component 생성 +const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding-right: 12px; +`; + +const Button = styled.div` + width: 44px; + height: 24px; + + display: flex; + justify-content: center; + align-items: center; + + font-size: 12px; + color: ${(props) => (props.type === "buying" ? "#cc3c3a" : "#4479c2")}; + background-color: ${(props) => + props.type === "buying" ? "#fcdddb" : "#dce9fc"}; + + padding-top: 2px; + border-radius: 0.2rem; +`; diff --git a/client/src/components/CentralSectionMenu/FirstLineMenu.tsx b/client/src/components/CentralSectionMenu/FirstLineMenu.tsx new file mode 100644 index 00000000..bec35fdc --- /dev/null +++ b/client/src/components/CentralSectionMenu/FirstLineMenu.tsx @@ -0,0 +1,29 @@ +import { styled } from "styled-components"; + +import ExpandScreenBtn from "./FLineExpandScreenBtn"; +import StockOverview from "./FLineStockOverview"; +import BookmarkBtn from "./FLineBookmarkBtn"; +import TradeBtn from "./FLineTradeBtn"; + +const FirstLineMenu = () => { + return ( + + + + + + + + + ); +}; + +export default FirstLineMenu; + +const Container = styled.div` + width: 100%; + height: 44px; + display: flex; + flex-direction: row; + border-bottom: 1px solid darkgray; +`; diff --git a/client/src/components/CentralSectionMenu/Index.tsx b/client/src/components/CentralSectionMenu/Index.tsx new file mode 100644 index 00000000..a14acaa0 --- /dev/null +++ b/client/src/components/CentralSectionMenu/Index.tsx @@ -0,0 +1,20 @@ +import { styled } from "styled-components"; + +import FirstLineMenu from "./FirstLineMenu"; +import SecondLineMenu from "./SecondLineMenu"; + +const UpperMenuBar = () => { + return ( + + + + + ); +}; + +export default UpperMenuBar; + +const Container = styled.div` + width: 100%; + text-align: center; +`; diff --git a/client/src/components/CentralSectionMenu/SLineChangeChartCycleBox.tsx b/client/src/components/CentralSectionMenu/SLineChangeChartCycleBox.tsx new file mode 100644 index 00000000..77e8eb48 --- /dev/null +++ b/client/src/components/CentralSectionMenu/SLineChangeChartCycleBox.tsx @@ -0,0 +1,22 @@ +import { styled } from "styled-components"; +import ChangeChartCycleBtn from "./SLineChangeChartCycleBtn"; + +const ChangeChartCycleBox = () => { + return ( + + + + + + + + ); +}; + +export default ChangeChartCycleBox; + +const Container = styled.div` + display: flex; + flex-direction: row; + gap: 4px; +`; diff --git a/client/src/components/CentralSectionMenu/SLineChangeChartCycleBtn.tsx b/client/src/components/CentralSectionMenu/SLineChangeChartCycleBtn.tsx new file mode 100644 index 00000000..fff89b54 --- /dev/null +++ b/client/src/components/CentralSectionMenu/SLineChangeChartCycleBtn.tsx @@ -0,0 +1,22 @@ +import { styled } from "styled-components"; + +const ChangeChartCycleBtn = (props: OwnProps) => { + const { cycle } = props; + return {cycle}; +}; + +export default ChangeChartCycleBtn; + +// type 정의 +interface OwnProps { + cycle: string; +} + +// component 생성 +const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding-right: 14px; + color: #999999; +`; diff --git a/client/src/components/CentralSectionMenu/SLineCompareChartBtn.tsx b/client/src/components/CentralSectionMenu/SLineCompareChartBtn.tsx new file mode 100644 index 00000000..1fe3be1e --- /dev/null +++ b/client/src/components/CentralSectionMenu/SLineCompareChartBtn.tsx @@ -0,0 +1,37 @@ +import { styled } from "styled-components"; + +import IconImg from "../../asset/CentralSectionMenu-compareChart.png"; + +const buttonText: string = "비교차트"; + +const CompareChartBtn = () => { + return ( + + +
{buttonText}
+ + ); +}; + +export default CompareChartBtn; + +const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding-left: 12px; + + .BtntextContainer { + display: flex; + justify-content: center; + align-items: center; + padding-top: 3px; + } +`; + +const Icon = styled.img` + width: auto; + height: 28px; + border-radius: 50%; + padding-right: 4px; +`; diff --git a/client/src/components/CentralSectionMenu/SecondLineMenu.tsx b/client/src/components/CentralSectionMenu/SecondLineMenu.tsx new file mode 100644 index 00000000..37640766 --- /dev/null +++ b/client/src/components/CentralSectionMenu/SecondLineMenu.tsx @@ -0,0 +1,25 @@ +import { styled } from "styled-components"; + +import CompareChartBtn from "./SLineCompareChartBtn"; +import ChangeChartCycleBox from "./SLineChangeChartCycleBox"; + +const SecondLineMenu = () => { + return ( + + + + + ); +}; + +export default SecondLineMenu; + +const Container = styled.div` + width: 100%; + height: 40px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid darkgray; +`; diff --git a/client/src/components/Headers/LogoutHeader.tsx b/client/src/components/Headers/LogoutHeader.tsx index fe554e23..484475fe 100644 --- a/client/src/components/Headers/LogoutHeader.tsx +++ b/client/src/components/Headers/LogoutHeader.tsx @@ -1,10 +1,9 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import StockHolmLogo from "../../asset/images/StockHolmLogo.png"; -import React, { useState } from 'react'; -import styled from 'styled-components'; -import StockHolmLogo from "../../asset/images/StockHolmLogo.png" - -const LogoutHeader: React.FC = ({ onLoginClick })=> { - const [searchValue, setSearchValue] = useState(''); +const LogoutHeader: React.FC = ({ onLoginClick }) => { + const [searchValue, setSearchValue] = useState(""); const handleSearchChange = (event: React.ChangeEvent) => { setSearchValue(event.target.value); @@ -16,8 +15,6 @@ const LogoutHeader: React.FC = ({ onLoginClick })=> { console.log("Logo clicked"); }; - - return ( @@ -35,10 +32,9 @@ const HeaderContainer = styled.div` align-items: center; padding: 1rem 2rem; background-color: #fff; - border-bottom: 1px solid #2F4F4F; // 다크 슬레이트 그레이 줄 + border-bottom: 1px solid #2f4f4f; // 다크 슬레이트 그레이 줄 width: 100%; height: 51px; - `; const LogoButton = styled.button` @@ -46,7 +42,7 @@ const LogoButton = styled.button` border: none; cursor: pointer; padding: 0; - + &:focus { outline: none; } @@ -58,8 +54,8 @@ const LogoImage = styled.img` `; const SearchBar = styled.input.attrs({ - type: 'text', - placeholder: '검색...' + type: "text", + placeholder: "검색...", })` width: 50%; padding: 0.5rem; @@ -69,8 +65,8 @@ const SearchBar = styled.input.attrs({ const LoginButton = styled.button` background-color: #fff; // 흰색 배경 - color: #2F4F4F; // 글자색 - border: 1px solid #2F4F4F; // 회색 테두리 + color: #2f4f4f; // 글자색 + border: 1px solid #2f4f4f; // 회색 테두리 padding: 0.5rem 1rem; border-radius: 5px; // 5px 둥글게 cursor: pointer; diff --git a/client/src/components/Logins/EmailLogin.tsx b/client/src/components/Logins/EmailLogin.tsx index 02cae2ea..f70866e3 100644 --- a/client/src/components/Logins/EmailLogin.tsx +++ b/client/src/components/Logins/EmailLogin.tsx @@ -1,8 +1,14 @@ -import axios from 'axios'; -import styled from 'styled-components'; -import React, { useState } from 'react'; - -const EmailLoginModal = ({ onClose, onLogin }: { onClose: () => void, onLogin: () => void }) => { +import axios from "axios"; +import styled from "styled-components"; +import React, { useState } from "react"; + +const EmailLoginModal = ({ + onClose, + onLogin, +}: { + onClose: () => void; + onLogin: () => void; +}) => { // 문자열 변수 정의 const titleText = "이메일로 로그인"; const emailLabelText = "이메일"; @@ -12,8 +18,8 @@ const EmailLoginModal = ({ onClose, onLogin }: { onClose: () => void, onLogin: ( const noAccountText = "계정이 없습니까?"; const registerButtonText = "회원가입하기"; - const [email, setEmail] = useState(''); // 입력된 이메일 상태 - const [password, setPassword] = useState(''); // 입력된 비밀번호 상태 + const [email, setEmail] = useState(""); // 입력된 이메일 상태 + const [password, setPassword] = useState(""); // 입력된 비밀번호 상태 const handleEmailChange = (event: React.ChangeEvent) => { setEmail(event.target.value); @@ -25,15 +31,18 @@ const EmailLoginModal = ({ onClose, onLogin }: { onClose: () => void, onLogin: ( const handleLoginClick = async () => { try { - const response = await axios.post('http://localhost:8080/login', { email, password }); + const response = await axios.post("http://localhost:8080/login", { + email, + password, + }); if (response.status === 200) { onLogin(); onClose(); } else { - console.error('Error during login'); + console.error("Error during login"); } } catch (error) { - console.error('Error during login:', error); + console.error("Error during login:", error); } }; @@ -43,9 +52,19 @@ const EmailLoginModal = ({ onClose, onLogin }: { onClose: () => void, onLogin: ( × {titleText} - + - + {findPasswordText} {loginButtonText} @@ -71,7 +90,7 @@ const ModalBackground = styled.div` `; const ModalContainer = styled.div` - position: relative; + position: relative; background-color: white; padding: 20px; width: 400px; @@ -85,7 +104,7 @@ const CloseButton = styled.button` position: absolute; top: 10px; right: 10px; - background: #FFFFFF; + background: #ffffff; border: 1px solid lightgray; font-size: 1.5rem; cursor: pointer; @@ -94,7 +113,7 @@ const CloseButton = styled.button` const Title = styled.h2` margin-bottom: 20px; font-size: 1.6rem; // 크기를 줄입니다. - font-weight: 400; // 굵기를 줄입니다. + font-weight: 400; // 굵기를 줄입니다. `; const Label = styled.label` @@ -138,6 +157,6 @@ const BottomText = styled.div` const RegisterButton = styled.button` background: none; border: none; - color: slategray; // 글자색을 변경합니다. + color: slategray; // 글자색을 변경합니다. cursor: pointer; -`; \ No newline at end of file +`; diff --git a/client/src/components/README.md b/client/src/components/README.md deleted file mode 100644 index e69de29b..00000000 diff --git a/client/src/page/MainPage.tsx b/client/src/page/MainPage.tsx index 65d20768..d7876c4e 100644 --- a/client/src/page/MainPage.tsx +++ b/client/src/page/MainPage.tsx @@ -1,12 +1,14 @@ -import { useState, useCallback } from 'react'; +import { useState, useCallback } from "react"; import styled from "styled-components"; import LogoutHeader from "../components/Headers/LogoutHeader"; import LoginHeader from "../components/Headers/LoginHeader"; import OAuthLoginModal from "../components/Logins/OAuthLogin"; import EmailLoginModal from "../components/Logins/EmailLogin"; import EmailSignupModal from "../components/Signups/EmailSignup"; -import EmailVerificationModal from '../components/Signups/EmailCertify'; -import PasswordSettingModal from '../components/Signups/Password'; +import EmailVerificationModal from "../components/Signups/EmailCertify"; +import PasswordSettingModal from "../components/Signups/Password"; + +import CentralChartSection from "../components/CentralChartSection/Index"; const MainPage = () => { const [isOAuthModalOpen, setOAuthModalOpen] = useState(false); @@ -22,8 +24,8 @@ const MainPage = () => { }, []); const openEmailLoginModal = useCallback(() => { - setOAuthModalOpen(false); - setEmailLoginModalOpen(true); + setOAuthModalOpen(false); + setEmailLoginModalOpen(true); }, []); const closeEmailLoginModal = useCallback(() => { @@ -31,15 +33,16 @@ const MainPage = () => { }, []); const openEmailSignupModal = useCallback(() => { - setOAuthModalOpen(false); - setEmailSignupModalOpen(true); + setOAuthModalOpen(false); + setEmailSignupModalOpen(true); }, []); const closeEmailSignupModal = useCallback(() => { setEmailSignupModalOpen(false); }, []); - const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = useState(false); + const [isEmailVerificationModalOpen, setEmailVerificationModalOpen] = + useState(false); const openEmailVerificationModal = useCallback(() => { setEmailSignupModalOpen(false); // 이메일 회원가입 모달 닫기 @@ -50,21 +53,22 @@ const MainPage = () => { setEmailVerificationModalOpen(false); }, []); - const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] = useState(false); + const [isPasswordSettingModalOpen, setPasswordSettingModalOpen] = + useState(false); const openPasswordSettingModal = useCallback(() => { - setEmailVerificationModalOpen(false); // 이메일 인증 모달 닫기 - setPasswordSettingModalOpen(true); // 비밀번호 설정 모달 열기 + setEmailVerificationModalOpen(false); // 이메일 인증 모달 닫기 + setPasswordSettingModalOpen(true); // 비밀번호 설정 모달 열기 }, []); const closePasswordSettingModal = useCallback(() => { setPasswordSettingModalOpen(false); }, []); - const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태 관리 + const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태 관리 const handleLogin = () => { - setIsLoggedIn(true); + setIsLoggedIn(true); }; const handleLogout = () => { @@ -73,45 +77,52 @@ const MainPage = () => { return ( - {isLoggedIn ? - : // 로그아웃 버튼 클릭 핸들러 추가 + {isLoggedIn ? ( + // 로그아웃 버튼 클릭 핸들러 추가 + ) : ( - } + )}
- +
- {isOAuthModalOpen && } - {isEmailLoginModalOpen && - + )} + {isEmailLoginModalOpen && ( + - } - - {isEmailSignupModalOpen && - - } - - {isEmailVerificationModalOpen && - - } - - {isPasswordSettingModalOpen && - { handleLogin(); closePasswordSettingModal(); }} /> - } - + )} + + {isPasswordSettingModalOpen && ( + { + handleLogin(); + closePasswordSettingModal(); + }} + /> + )} ); }; @@ -144,9 +155,3 @@ const RightSection = styled.section` height: 100%; border: 1px solid black; `; - -const CentralSection = styled.section` - flex: 6.7 0 0; - min-width: 630px; - height: 100%; -`;