- 모놀리식으로 주식 조회 사이트 개발
- Gradle 멀티모듈 백엔드 + React/Vite 프론트엔드 구조
web-ui는 토스 스타일에 가까운 밝고 정돈된 정보형 UI/UX로 개선 진행
- 나중에 API GATEWAY + MSA로 떼어낼수 있게 코드 작성한다.
- ADMIN 관리 사이트는 어떻게 해볼까?
-
- 결국 내가 하고 싶은거는 백오피스 관리인데
-
- 원장 / 전표(Ledger / Journal) 생성 관리인데
- [x]AWS 배포
-
- web-ui 배포
-
- API-SERVER 배포
-
USER 생성
-
JWT 인증
-
주가 조회
-
ACCOUNT 설계는 DBS 참고해서 작성해보자.
-
- ACCOUNT 도메인 추가
-
- ACCOUNT 입/출금 내역 도메인 추가
-
- ACCOUNT 생성 Service / RestAPI
-
- ACCOUNT 조회 Service / RestAPI
-
- ACCOUNT 입금 Service / RestAPI
-
- ACCOUNT 출금 Service / RestAPI
-
- ACCOUNT 이체 Service / RestAPI
-
주식 구매(Trade)
-
- Order 도메인 추가
-
- OrderFill(주문 체결) 도메인 추가
-
- Position 도메인 추가
-
- Trade 도메인 추가
-
- Order 생성 Service / RestAPI
-
- OrderFill(체결)을 어떤식으로 처리할지 고민중
-
-
- 현업이면 증권가 서버로 넣었다가 queue로 체결 결과 받는거 같은데....
-
-
-
- client가 REST API로 체결 / 체결실패 하는거는 아닌거 같고..
-
-
-
- TEST 용으로는 REST API를 만들어 놓을까? 고민중
-
-
-
- 체결이 되어야 POSITION / TRADE가 생성되니깐..
-
-
-
- ORDER 넣으면 eventPulisher로 체결 요청 날리고 비동기로 랜덤 처리를 할까?
-
-
- Position 조회 Service / RestAPI
-
- Trade 조회 Service / RestAPI
-
환율 / 환전 개발해보자
-
- 환율 구간 Entity / Repository / Service
-
- 환율 조회 API 조사
-
chmod +x ./script/all-start.sh ./script/all-stop.sh ./script/all-restart.sh
./script/all-start.sh
./script/all-stop.sh
./script/all-restart.sh
- UI: http://localhost:5173/
- API: http://localhost:8080/
- Swagger: http://localhost:8080/swagger-ui.html
- Demo 계정:
[email protected] - Demo 비밀번호:
Password!
# infra docker 실행
./run_infra.sh
./gradlew api-server:bootRun
- 서버 메인 : http://localhost:8080/
- swagger : http://localhost:8080/swagger-ui.html
- api docs : http://localhost:8080/v3/api-docs
- prot: 43306
- url: localhost:43306/trade
- root password: rootpassword
-
- user: appuser
-
- password: appuser
- port: 6379
- url: localhost:6379
- requirepass: redis1234
- redis UI
- url: http://localhost:18000/
- swagger: http://localhost:18000/swagger-ui.html
- api docs: http://localhost:18000/v3/api-docs
- redoc: http://localhost:18000/redoc
cd web-ui && npm install && npm run dev
- UI 주소: http://localhost:5173/
- 상단 헤더를 앱 셸 형태로 재구성
- 홈 화면을 데모 소개, 핵심 흐름, 테스트 계정 안내 중심으로 재배치
- 로그인/회원가입 화면을 안내형 2단 레이아웃으로 개선
- 모바일 화면에서 주요 영역이 한 열로 정리되도록 반응형 보완
- 전체 카드, 버튼, 입력창을 토스 스타일에 가까운 여백과 밝은 톤으로 재정리
- 공통 헤더, 홈, 전역 카드 표현을 더 평평하고 단순한 톤으로 다시 정리
- 주문 조회 화면을 모바일 카드형으로 보완해 작은 화면에서도 깨지지 않게 정리
- 데스크톱, 태블릿, 모바일 구간별로 레이아웃이 다르게 동작하도록 반응형을 재정리
- 전역 셀렉트박스 스타일과 폭을 정리해 주문/계좌/환전 화면에서 더 깔끔하게 보이도록 보완
- 거래, 계좌, 주문 화면을 요약-목록-액션 순서로 재정리해 한눈에 읽히도록 개선
- 홈, 시장, 환전, 인증 화면의 카드 반경, 패딩, 제목 크기, 보조 정보 톤을 통일해 전체 UI 균일성 보완
- 전역 셀렉트박스와 환전 통화 셀렉트의 폭과 화살표 여백을 조정해 잘림 현상 보완
- Markdown 문서:
output/doc/web-ui-portfolio.md - DOCX 문서:
output/doc/web-ui-portfolio.docx - PDF 문서:
output/doc/web-ui-portfolio.pdf - 화면 스크린샷:
output/playwright/portfolio-*.png - 환전 화면의 송금형 문구를 환전 계산 흐름 중심으로 재정리
- 거래 화면에서 주문 통화 계좌가 없을 때 안내 문구와 비활성 상태를 명확히 표시
- 주문/거래 화면의 JSON 에러 노출을 사람이 읽기 쉬운 메시지로 정리
- 거래 화면의 주문 금액 계산 순서 오류를 수정해 초기 렌더링 불안정 문제를 해결
- 공통 헤더에 현재 화면과 바로가기 영역을 추가해 고객 포털 탐색 흐름을 단순화
- 홈 화면을 소개형 랜딩 대신 빠른 시작과 권장 사용 흐름 중심으로 재구성
- 시장 화면을 검색, 차트, 주문 이동이 한 번에 보이는 구조로 재정리
- 계좌 화면을 계좌 현황 확인 후 작업으로 이어지는 구조로 재정리
- 거래 화면에서 구매 주문 카드를 요약형 2열 폼으로 재구성하고 최근 주문 패널을 아래 전체폭으로 옮겨 카드 높이 불균형을 줄임
- 계좌 화면은 여러 폼을 나열하던 구조에서
계좌 선택 + 빠른 작업2단 워크스페이스로 전면 개편해 더 단순하게 보이면서 입금, 출금, 이체, 개설을 한 곳에서 처리할 수 있게 정리함
# yfinanace-server Proxy 서버 실행(주가 조회 프록시 서버)
docker compose -f ./docker/yfinance-server/docker-compose.yml up -d
# ELK STACK(Logging)
docker compose -f ./docker/elk/docker-compose.yml up -d
# mariadb / redis 실행
docker compose -f ./docker-compose.yml up -d
개인적으로는 실수하기 수위서 사용하고 싶지 않은데 record를 사용하면 결국은 생성자 기반이라서... Projection 추가될때 순서때문에 분명히 실수 할 소지가 많을건데... 그렇다고 field사용하면 너무 너무 느리고, class / setter 사용하면 경기를 일으키고 트랜드가 참....