chanjin1998/Client

신한투자증권 프로디지털아카데미 FE 프로젝트

Flow

함께, 쉽게, 재밌게

함께하는 모임 투자, Flow입니다!

Service Introduction

🗣️ “혼자 투자를 시작하기 막막해요“
🗣️ “친구들과 모은 돈을 그냥 놔두기 아까워요“

⬇️⬇️⬇️

💡 모임 투자를 지인들과 함께 하며 쉽게 투자를 배워보는 것은 어떨까?
💡 모여있는 돈을 투자에 활용해 부가적인 수익을 창출해보는 것은 어떨까?

➡️ 모임투자 웹서비스, Flow!

🔨 플로우를 통해

• 유저는 지인들에게 투자를 배우며 투자 접근성을 향상할 수 있어요!
• 투자 시 모든 멤버의 동의가 필요하기 때문에 안정적인 투자가 가능해요!
• 정적 자산 투자를 통해 부가적인 수익을 창출할 수 있어요!
• 수익 창출이라는 공동의 목표를 향해 협력하기 때문에 모임원 간 유대감을 강화할 수 있어요!

Project Architecture

DB Modeling

Main Features

기능명	기능설명
모임 통장 만들기	모임명 설정 및 모임 통장 계좌번호를 입력하여 모임통장을 생성할 수 있음. 모임 통장을 생성한 유저는 모임 통장의 모임장으로 등록됨.
모임원 초대하기	모든 모임멤버는 카카오톡으로 모임원을 초대할 수 있음.
모임별 수익률 조회하기	모든 모임멤버는 모임 통장의 수익률을 조회할 수 있음.
모임 목표 설정하기	모임멤버는 목임 목적, 목표 금액, 목표 기간을 설정할 수 있음.
모임 멤버 내보내기	모임장은 모임 멤버를 모임에서 내보낼 수 있음.

기능명	기능설명
관심 종목 등록하기	모임멤버는 주식 종목을 승인 중인 관심 종목으로 등록할 수 있음.
관심 종목 투표하기	모임멤버는 승인중인 관심 주식 종목을 투표(승인/거절) 할 수 있음. 모든 모임원이 해당 종목을 승인할 시 승인 완료됨.
관심 종목 조회하기	승인중인 관심종목과, 승인된 관심종목을 조회할 수 있음.
관심 종목 삭제하기	모임멤버는 승인된 관심 주식은 삭제할 수 있음. 단, 보유중인 주식은 관심 종목에서 삭제할 수 없음

기능명	기능설명
주식 투자하기	모임 멤버는 관심 종목으로 승인된 주식 종목을 매수, 매도 할 수 있음.
주식 종목 상세정보 조회하기	1. 각 주식 종목의 기간별 차트를 조회할 수 있음. 2. 각 주식 종목의 실시간 호가를 조회할 수 있음. 3. 각 주식 종목의 관련 최신 뉴스를 조회할 수 있음.
주요 지수 조회하기	실시간 코스피, 코스닥, 나스닥 지수를 조회할 수 있음.
실시간 주식 조회하기	실시간 거래량, 주가 상승률, 외국인 순매수, 기관 순매수 별 주식 종목을 조회할 수 있음.
거래 내역 조회하기	모임 멤버는 모임 통장 내 모든 매수, 매도 내역을 조회할 수 있음.
보유 종목 상세 정보 조회하기	모임 멤버는 보유하고 있는 각 종목의 평단가, 보유 수량, 평가 금액을 조회 할 수 있음.

기능명	기능설명
예수금 이체하기	모임장은 모임통장 내 보유 중인 예수금을 이체할 수 있음.
이체 내역 조회하기	모임 멤버는 모임통장에서 이체된 모든 내역을 조회할 수 있음.

Team Member

김민우	이선영	정찬진	한다현
@bkkmw	@godltjsdud	@chanjin1998	@ekgus9701
Full-stack	Full-stack	Full-stack	Full-stack
✔️ 웹 소켓 통신 ✔️ 차트 (FE) ✔️ 유저 (FE, BE) ✔️ 배포 및 CI/CD	✔️ 관심주식 (FE) ✔️ 주식 거래 (FE, BE) ✔️ 이체 (BE) ✔️ 알림 (BE)	✔️ 알림 (FE) ✔️ 모임 (FE, BE) ✔️ 주식 정보 (FE, BE) ✔️ 뉴스 (FE, BE)	✔️ 이체 (FE) ✔️ 호가 (FE) ✔️ 주식 거래 (FE, BE) ✔️ 관심 주식(BE)

Trouble Shooting

문제 1,

상황

실시간 체결가 및 호가 정보를 위한 한국투자증권 websocket API를 사용

문제

체결가/호가 모두 포함하여 하나의 API key 당 40건의 데이터만 구독 가능하여, 많은 종목의 정보를 제공할 수 없음.

해결

해결 방법 1

다수의 API key를 활용하고, 다수의 client의 중복된 요청을 처리하여 보다 많은 종목의 정보를 제공하고자 client로 부터의 요청 목록과 한국투자증권 websocket API로의 구독 정보 및 다수의 websocket connection을 관리하기 위한 module을 개발. Client와의 통신을 담당하는 publisher, 한국투자증권 websocket 통신을 담당하는 subscriber, client로 부터의 요청 목록과 subscriber를 관리하는 subscriberManager 세 모듈을 구성하여 다수의 API를 활용하여 가능한 많은 종목의 정보를 제공하고자 함.

문제 2,

상황

실시간 데이터 제공을 위한 websocket server 개발 중, client와 통신을 담당하는 모듈(publisher), client로 부터의 요청 목록과 한국투자증권 websocket 구독 정보를 관리하는 모듈(subscriberManager), 한국투자증권 websocket connection 모듈(subscriber) 개발

문제

세 모듈간 통신 중 순환참조 발생

해결

해결 방법 1

Websocket 통신 중 발생하는 event를 Javascript의 EventEmitter를 활용하여 요청/구독 정보를 관리하는 module로 전달하여 모듈 간 순환참조를 해결

Folder Structure

폴더 구조

📂 frontend
📦src
 ┣ 📂assets
 ┣ 📂components //공통 컴포넌트
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂button
 ┃ ┃ ┃ ┣ 📜InterestButton.jsx
 ┃ ┃ ┃ ┣ 📜PrimaryButton.jsx
 ┃ ┃ ┃ ┗ 📜TradeButton.jsx
 ┃ ┃ ┣ 📂datepicker
 ┃ ┃ ┃ ┣ 📜Calendar.jsx
 ┃ ┃ ┃ ┗ 📜CalendarCustom.scss
 ┃ ┃ ┣ 📂modal
 ┃ ┃ ┃ ┣ 📜ApproveInterestModal.jsx
 ┃ ┃ ┃ ┣ 📜PrimaryModal.jsx
 ┃ ┃ ┃ ┗ 📜StockAskingModal.jsx
 ┃ ┃ ┣ 📂nav
 ┃ ┃ ┃ ┣ 📜TopNavigationBar.css
 ┃ ┃ ┃ ┗ 📜TopNavigationBar.jsx
 ┃ ┃ ┣ 📂search
 ┃ ┃ ┃ ┗ 📜Search.jsx
 ┃ ┃ ┗ 📂swiper
 ┃ ┃ ┃ ┣ 📜Swiper.css
 ┃ ┃ ┃ ┗ 📜Swiper.jsx
 ┃ ┗ 📂line
 ┃ ┃ ┗ 📜HorizontalLine.jsx
 ┣ 📂lib
 ┃ ┣ 📂apis
 ┃ ┃ ┣ 📜base.jsx
 ┃ ┃ ┣ 📜hankookApi.jsx
 ┃ ┃ ┣ 📜interest.jsx
 ┃ ┃ ┣ 📜notification.jsx
 ┃ ┃ ┣ 📜party.jsx
 ┃ ┃ ┣ 📜shinhanApi.jsx
 ┃ ┃ ┣ 📜stock.jsx
 ┃ ┃ ┣ 📜transfer.jsx
 ┃ ┃ ┗ 📜userApi.js
 ┃ ┗ 📂contexts
 ┃ ┃ ┗ 📜AuthContext.jsx
 ┣ 📂routers
 ┃ ┗ 📜mainRouter.jsx
 ┣ 📂routes
 ┃ ┣ 📂interest // 관심주식
 ┃ ┃ ┣ 📂intereststock
 ┃ ┃ ┃ ┣ 📂askingPrice // 호가
 ┃ ┃ ┃ ┃ ┣ 📜InterestStockDetailAskingPrice.css
 ┃ ┃ ┃ ┃ ┣ 📜InterestStockDetailAskingPricePage.jsx
 ┃ ┃ ┃ ┃ ┣ 📜SampleAskingPriceChart.css
 ┃ ┃ ┃ ┃ ┗ 📜SampleAskingPriceChart.jsx
 ┃ ┃ ┃ ┣ 📂chart // 차트
 ┃ ┃ ┃ ┃ ┣ 📜CandleChart.jsx
 ┃ ┃ ┃ ┃ ┣ 📜InterestStockDetailChartPage.css
 ┃ ┃ ┃ ┃ ┣ 📜InterestStockDetailChartPage.jsx
 ┃ ┃ ┃ ┃ ┗ 📜LineChart.jsx
 ┃ ┃ ┃ ┣ 📂news // 뉴스
 ┃ ┃ ┃ ┃ ┣ 📜InterestStockDetailNewsPage.css
 ┃ ┃ ┃ ┃ ┣ 📜InterestStockDetailNewsPage.jsx
 ┃ ┃ ┃ ┃ ┣ 📜News.css
 ┃ ┃ ┃ ┃ ┗ 📜News.jsx
 ┃ ┃ ┃ ┣ 📜TradeStockPage.css
 ┃ ┃ ┃ ┗ 📜TradeStockPage.jsx // 주식 거래
 ┃ ┃ ┗ 📜InterestPending.jsx
 ┃ ┣ 📂invest // 투자 정보
 ┃ ┃ ┣ 📜LiveStockPage.css
 ┃ ┃ ┣ 📜LiveStockPage.jsx
 ┃ ┃ ┣ 📜MarketStockpage.css
 ┃ ┃ ┣ 📜MarketStockpage.jsx
 ┃ ┃ ┣ 📜RisingStockPage.css
 ┃ ┃ ┣ 📜RisingStockPage.jsx
 ┃ ┃ ┣ 📜SearchStockPage.css
 ┃ ┃ ┣ 📜SearchStockPage.jsx
 ┃ ┃ ┣ 📜StrategyStockPage.css
 ┃ ┃ ┗ 📜StrategyStockPage.jsx
 ┃ ┣ 📂login // 로그인
 ┃ ┃ ┣ 📜LoginPage.css
 ┃ ┃ ┗ 📜LoginPage.jsx
 ┃ ┣ 📂notification // 알림
 ┃ ┃ ┣ 📜Notification.css
 ┃ ┃ ┗ 📜Notification.jsx
 ┃ ┣ 📂party //모임
 ┃ ┃ ┣ 📜MyPartyPage.css
 ┃ ┃ ┣ 📜MyPartyPage.jsx
 ┃ ┃ ┣ 📜MyPartyTransactionDetail.css
 ┃ ┃ ┣ 📜MyPartyTransactionDetail.jsx
 ┃ ┃ ┣ 📜PartyCreatePage.css
 ┃ ┃ ┣ 📜PartyCreatePage.jsx
 ┃ ┃ ┣ 📜PartyInfoPage.css
 ┃ ┃ ┣ 📜PartyInfoPage.jsx
 ┃ ┃ ┣ 📜PartyInvitePage.css
 ┃ ┃ ┣ 📜PartyInvitePage.jsx
 ┃ ┃ ┣ 📜PartyPage.css
 ┃ ┃ ┣ 📜PartyPage.jsx
 ┃ ┃ ┣ 📜SetDataPage.css
 ┃ ┃ ┣ 📜SetDatePage.jsx
 ┃ ┃ ┣ 📜SetGoalPage.css
 ┃ ┃ ┣ 📜SetGoalPage.jsx
 ┃ ┃ ┣ 📜SetPricePage.css
 ┃ ┃ ┗ 📜SetPricePage.jsx
 ┃ ┣ 📂signup // 가입
 ┃ ┃ ┣ 📜SignupPage.css
 ┃ ┃ ┗ 📜SignupPage.jsx
 ┃ ┣ 📂transfer // 이체
 ┃ ┃ ┣ 📜TransferDetailAccountNumPage.css
 ┃ ┃ ┣ 📜TransferDetailAccountNumPage.jsx
 ┃ ┃ ┣ 📜TransferDetailConfirmPage.css
 ┃ ┃ ┣ 📜TransferDetailConfirmPage.jsx
 ┃ ┃ ┣ 📜TransferDetailPricePage.css
 ┃ ┃ ┣ 📜TransferDetailPricePage.jsx
 ┃ ┃ ┣ 📜TransferPage.css
 ┃ ┃ ┗ 📜TransferPage.jsx
 ┃ ┣ 📜Layout.jsx
 ┃ ┣ 📜MainPage.css
 ┃ ┣ 📜MainPage.jsx 
 ┃ ┗ 📜ProtectedLayout.jsx
 ┣ 📂store
 ┃ ┣ 📂reducers
 ┃ ┃ ┣ 📜partyReducer.js
 ┃ ┃ ┗ 📜userReducer.js
 ┃ ┣ 📜index.js
 ┃ ┗ 📜store.js
 ┣ 📜App.css
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┗ 📜main.jsx

📂 backend
📦Server
 ┣ 📂app
 ┃ ┗ 📂config
 ┃ ┃ ┣ 📜jwt.config.js
 ┃ ┃ ┗ 📜mysql.config.js
 ┣ 📂bin
 ┃ ┗ 📜www
 ┣ 📂data
 ┃ ┗ 📜stock_data.csv
 ┣ 📂deploy
 ┃ ┗ 📜README.md
 ┣ 📂init_db
 ┃ ┗ 📜README.md
 ┣ 📂middlewares //유저 관련 middleware
 ┃ ┣ 📜authenticator.js
 ┃ ┗ 📜validator.js
 ┣ 📂models // DB 모델
 ┃ ┣ 📜interestStock.js
 ┃ ┣ 📜notification.js
 ┃ ┣ 📜participant.js
 ┃ ┣ 📜party.js
 ┃ ┣ 📜partyMember.js
 ┃ ┣ 📜stock.js
 ┃ ┣ 📜transactionDetail.js
 ┃ ┣ 📜transferDetail.js
 ┃ ┗ 📜user.js
 ┣ 📂modules
 ┃ ┣ 📜db.js
 ┃ ┣ 📜index.js
 ┃ ┣ 📜jwt.js
 ┃ ┣ 📜kisApi.js
 ┃ ┗ 📜scheduler.js
 ┣ 📂public
 ┃ ┗ 📂stylesheets
 ┃ ┃ ┗ 📜style.css
 ┣ 📂routes //라우터 관리
 ┃ ┣ 📜index.js
 ┃ ┣ 📜interestStock.js
 ┃ ┣ 📜notices.js
 ┃ ┣ 📜parties.js
 ┃ ┣ 📜points.js
 ┃ ┣ 📜stocks.js
 ┃ ┣ 📜transfer.js
 ┃ ┗ 📜users.js
 ┣ 📂scripts
 ┃ ┗ 📜stockData.js
 ┣ 📂services //서비스 관리
 ┃ ┣ 📜interestStockService.js
 ┃ ┣ 📜inviteService.js
 ┃ ┣ 📜noticeService.js
 ┃ ┣ 📜partyService.js
 ┃ ┣ 📜stockService.js
 ┃ ┣ 📜transferService.js
 ┃ ┗ 📜userService.js
 ┣ 📂utils
 ┃ ┣ 📜naverStockApi.js
 ┃ ┗ 📜refreshToken.js
 ┣ 📜.dockerignore
 ┣ 📜.gitignore
 ┣ 📜Dockerfile.express
 ┣ 📜Jenkinsfile
 ┣ 📜README.md
 ┣ 📜app.js
 ┣ 📜docker-compose-express.yml
 ┣ 📜docker-compose.yml
 ┗ 📜package.json

Appendix

시연 영상
발표자료