i wanna make a Coing app and i will use websocket(STOMP) to get some data. the url is ws://localhost:8080/websocket and destination is /sub/coin/ticker now, you just get only ticker data through websocket. use mock data for others. the file name is like OrderBookList.tsx, CandleChart.tsx, TradeList.tsx, NewsList.tsx and header(and banner) should be located in layout.tsx and you should seperate the logic of server component and client component for two files (ClientPage.tsx, page.tsx) which are located in app directory. the data format is like public record TickerDto( String type, // 데이터 타입 (예: "ticker") String code, // 마켓 코드 (예: "KRW-BTC") double openingPrice, // 시가 double highPrice, // 고가 double lowPrice, // 저가 double tradePrice, // 현재가 double prevClosingPrice, // 전일 종가 Change change, // 전일 대비 double changePrice, // 전일 대비 값 double signedChangePrice, // 전일 대비 값 (부호 포함) double changeRate, // 전일 대비 변동률 double signedChangeRate, // 전일 대비 변동률 (부호 포함) double tradeVolume, // 가장 최근 거래량 double accTradeVolume, // 누적 거래량 double accTradeVolume24h, // 24시간 누적 거래량 double accTradePrice, // 누적 거래대금 double accTradePrice24h, // 24시간 누적 거래대금 LocalDate tradeDate, // 최근 거래 일자 LocalTime tradeTime, // 최근 거래 시각 Long tradeTimestamp, // 체결 타임스탬프 AskBid askBid, // 매수/매도 구분 double accAskVolume, // 누적 매도량 double accBidVolume, // 누적 매수량 double highest52WeekPrice, // 52주 최고가 LocalDate highest52WeekDate, // 52주 최고가 달성일 double lowest52WeekPrice, // 52주 최저가 LocalDate lowest52WeekDate, // 52주 최저가 달성일 MarketState marketState, // 거래 상태 MarketWarning marketWarning, // 유의 종목 여부 Long timestamp // 타임스탬프 ) this is response data.
enums are following
public enum Change { RISE, // 상승 EVEN, // 보합 FALL // 하락 }
public enum MarketState { PREVIEW, // 입금지원 ACTIVE, // 거래지원 가능 DELISTED, // 거래지원 종료 }
public enum MarketWarning { NONE, // 유의 종목 아님 CAUTION, // 유의 종목 }
public enum AskBid { ASK, // 매도 BID, // 매수 }
and you should not use null object if possible.
Loading...
should i need tailwind.config.js? i have some files. consider these
Loading...
your ui is a little bit different. at first, the most left candle is very close to side numbers. there should be some spaces between them. and app name is not CoinTrader. app name is Coing. and I don't need app name in the banner. i just need an app icon there. and the orderbookList should be placed below the candlechart, so the tradleList below the chart is left and the orderbook is right position. and news should be placed below those two components. like this image