[Clone Coding] 키움증권 MTS 클론코딩(React)

 

프로젝트 개요

 

리액트 '쇼핑몰 만들기' 유료강의를 들은 후, 의류가 아닌 '구매한다'는 성격을 그대로 가져와 주식을 구매할 수 있는 MTS(Mobile Trading System) 앱을 클론코딩 해 봤습니다. 실제로 주문이 되는 건 아니고, 홈화면과 주문화면, 그리고 '매수 주문' 버튼 클릭 시 체결이 완료 됐다는 모달창만 구현했습니다.

 

제가 클론코딩을 한 증권사는 키움증권이며, 절대 상업 목적으로 사용되지 않았으며 이미지 저작권은 전부 키움증권에 있습니다.

 

프로젝트 URL

 

깃허브 주소

https://github.com/BaikSeungJeon/project-react-mts/

GitHub - BaikSeungJeon/clonecoding-react-mts: 리액트로 키움 증권 MTS 화면 클론 코딩을 했습니다.

 

깃허브 페이지 주소

https://baikseungjeon.github.io/project-react-mts/

키움증권 영웅문 글로벌

 

홈 화면

 

키움증권 MTS(좌)                                                                              리액트 클론코딩(우)

 

 

 

주가 소스코드

 

 

데이터 파일인 price.js를 만들어 import 해온 뒤에 state에 저장해줍니다.

그리고 코드가 길어져, 따로 홈 화면의 주가들을 따로 작성한 컴포넌트 파일과 같이 작성해 줍니다.

 

                                    Stocks.js(좌)                                                                                     price.js(우)

 

주문 화면

 

키움증권 MTS(좌)                                                                              리액트 클론코딩(우)

 

왼쪽 호가창(매수 ~ 매도 총 10틱)도 따로 컴포넌트 파일을 만들어 import 해 왔습니다. 실제로 실시간 데이터를 끌고 오는 방법을 공부해 적용시켜 보도록 하겠습니다.

 

호가창

 

매수주문 버튼 클릭 시

 

매수 주문을 클릭하면 상단에 체결이 완료 되었다는 모달창이 출력됩니다. 실제 키움증권 MTS의 매수 체결 알림도 정중앙이 아닌, 위와 같이 상단에 알림이 뜨는 형태입니다.