{message}
-{details}
- {stack && ( -
- {stack}
-
- )}
- -highcharts나 recharts등 많은 차트라이브러리를 고려했는데 canvas api + 차트 툴팁 + 잘 정리된 공식문서에 부합하는 라이브러리가 amcharts여서 채택하였습니다. +#### 5. **차트 기술 진화** +``` +AmCharts 5 → Lightweight Charts +(무한스크롤 구현 실패) → (무한스크롤 구현 성공) +``` -api 서버와의 실시간 통신은 서버의 구현에 따라 Stomp.js를 사용했습니다. +**기술 변경 배경:** +- **AmCharts 5 한계**: 뛰어난 성능과 다양한 기능을 제공했으나, **과거 데이터 무한 스크롤 구현에서 기술적 제약** 발생 +- **핵심 요구사항**: 사용자가 차트를 좌측으로 스크롤할 때 과거 데이터를 동적으로 로딩하는 기능이 필수 +- **해결책 모색**: AmCharts 5의 기본동작 override 실패로 인해 무한 스크롤 구현 실패 +**최종 선택: Lightweight Charts** +- ✅ **무한 스크롤 구현 성공**: 과거 데이터 동적 로딩 완벽 지원 +- ✅ **Canvas 기반 고성능**: 대용량 실시간 데이터 처리 +- ✅ **유연한 API**: React와의 원활한 통합 및 커스터마이징 +--- -## 1차 구현 [5.2 ~ 5.15] +## 📈 개발 타임라인 -코인 한 개(트럼프 코인)을 매수 할 수 있습니다. -사용자의 주문에 따라 그래프차트와 호가창, 실시간 체결창에 반영됩니다. +### 🏗️ 1차 MVP 개발 (2025.05.02 - 2025.05.15) +**핵심 거래 시스템 구현** +- **프로젝트 기반**: React 19 + TypeScript + Vite, FSD 아키텍처 +- **실시간 시스템**: STOMP WebSocket 연결 및 AmCharts 5 차트 구현 +- **거래 엔진**: XState 기반 주문 폼 상태 관리 및 실시간 체결 시스템 +- **인증 시스템**: 카카오 OAuth 로그인 및 JWT 세션 관리 +- **거래 기능**: 시장가/지정가 주문, 실시간 호가창, 체결 목록 https://github.com/user-attachments/assets/779b77f1-e778-4a53-b37f-d79a2dc187e8 +### 🧪 2차 테스트 강화 (2025.05.16 - 2025.06.06) +**품질 보증 및 테스트 커버리지 확대** +- **단위 테스트**: 60% 커버리지 달성, React Testing Library + Vitest +- **CI/CD 파이프라인**: SonarQube 코드 품질 관리, GitHub Actions 워크플로우 +- **AI 채팅봇**: XState 기반 채팅 상태 머신 및 메시지 컴포넌트 +- **다중 코인**: BTC, ETH 등 주요 암호화폐 거래 지원 +- **실시간 알림**: 체결 완료 시 토스트 알림 시스템 + +### ⚡ 3차 성능 개선 (2025.06.07 - 2025.06.25) +**차트 기술 전환 및 성능 최적화** +- **차트 마이그레이션**: AmCharts 5 → Lightweight Charts (무한 스크롤 구현) +- **번들 최적화**: 청크 분리, 지연 로딩, 렌더링 블록 CSS 최적화 +- **무한 스크롤**: 과거 데이터 동적 로딩 및 중복 패칭 방지 +- **기술 지표**: 볼린저 밴드, 이동평균선, 차트 툴팁 +- **모니터링**: Sentry 오류 추적 시스템 도입 + +### 🔧 유지보수 (2025.06.26 이후) +**안정성 향상 및 사용자 경험 개선** +- **포트폴리오**: 파이차트 자산 시각화, 체결 내역 페이지네이션 +- **사용자 경험**: 에러 바운더리, 로딩 상태, 반응형 레이아웃 +- **데이터 품질**: 실시간 가격 포맷팅, 호가 정렬 개선 +- **인증 개선**: 로그인 상태 검증, 자동 리다이렉트 +- **테스트 확장**: 추가 컴포넌트 및 훅 단위 테스트 + +--- + +## 🎯 핵심 성과 & 혁신 + +### 📊 개발 지표 +- **총 커밋 수**: 331개 (체계적인 버전 관리) +- **테스트 커버리지(3차 기준)**: 60% (높은 코드 품질) + +### 🚀 기술적 혁신 +1. **실시간 시장 영향 시뮬레이션**: 봇 보간 시스템 +2. **XState 기반 상태 관리**: 예측 가능한 복잡한 UI 플로우 +3. **React Router v7 선도적 도입**: 하이브리드 렌더링 전략 +4. **60% 테스트 커버리지(3차 기준)**: 프로덕션 수준의 품질 보증 + +### 💡 비즈니스 가치 +- **차별화된 사용자 경험**: 실제 시장 영향을 체험하는 유일한 모의투자 플랫폼 +- **한국 시장 특화**: 카카오 로그인, 원화 표시, 한국 시간대 지원 +- **확장 가능한 아키텍처**: FSD 패턴으로 신규 기능 추가 용이 +- **모바일 퍼스트**: 반응형 디자인으로 모든 디바이스 지원 + +--- + +## 🚀 시작하기 + +### 📋 사전 요구사항 +- Node.js 18+ +- Yarn 1.22+ +- Docker (선택사항) + +### ⚡ 빠른 실행 +```bash +# 의존성 설치 +yarn install + +# 개발 서버 실행 +yarn dev + +# 테스트 실행 +yarn test + +# 빌드 +yarn build +``` + +### 🐳 Docker 실행 +```bash +# Docker 이미지 빌드 +docker build -t invest-future . + +# 컨테이너 실행 +docker run -p 3000:3000 invest-future +``` + +### 🔧 환경 변수 설정 +```env +VITE_API_URL=https://api.investfuture.my +VITE_STOMP_URL=wss://api.investfuture.my +VITE_OAUTH_URL=https://kauth.kakao.com/oauth/authorize +VITE_APP_SECRET=your-secret-key +``` + +--- + +
+
+**⭐ 이 프로젝트가 도움이 되었다면 별표를 눌러주세요! ⭐**
+
+*혁신적인 암호화폐 모의투자로 안전하게 투자 경험을 쌓아보세요.*
+
+
\ No newline at end of file
diff --git a/biome.json b/biome.json
index 2c24fc4..6a81ba3 100644
--- a/biome.json
+++ b/biome.json
@@ -71,6 +71,25 @@
}
}
}
+ },
+ {
+ "include": [
+ "**/*.test.ts",
+ "**/*.test.tsx",
+ "**/*.test.js",
+ "**/*.test.jsx",
+ "**/*.spec.ts",
+ "**/*.spec.tsx",
+ "**/*.spec.js",
+ "**/*.spec.jsx"
+ ],
+ "linter": {
+ "rules": {
+ "suspicious": {
+ "noExplicitAny": "off"
+ }
+ }
+ }
}
],
"javascript": {
diff --git a/package.json b/package.json
index 5e110fa..8ee5473 100644
--- a/package.json
+++ b/package.json
@@ -4,9 +4,9 @@
"version": "0.0.0",
"type": "module",
"scripts": {
- "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' react-router dev",
+ "dev": "react-router dev",
"build": "react-router build",
- "start": "NODE_ENV=production NODE_OPTIONS='--import ./instrument.server.mjs' react-router-serve ./build/server/index.js",
+ "start": "react-router-serve ./build/server/index.js",
"typecheck": "react-router typegen && tsc",
"test": "vitest",
"coverage": "vitest run --coverage",
@@ -32,11 +32,13 @@
"isbot": "^5",
"ky": "^1.8.1",
"lightweight-charts": "^5.0.7",
+ "lottie-react": "^2.4.1",
"motion": "^12.12.1",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router": "^7.5.3",
"react-toastify": "^11.0.5",
+ "recharts": "^3.0.2",
"ws": "^8.18.2",
"xstate": "^5.19.3"
},
@@ -68,6 +70,8 @@
},
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
"msw": {
- "workerDirectory": ["public"]
+ "workerDirectory": [
+ "public"
+ ]
}
}
diff --git a/react-router.config.ts b/react-router.config.ts
index 55fd0f7..e9c5e89 100644
--- a/react-router.config.ts
+++ b/react-router.config.ts
@@ -1,10 +1,10 @@
import type { Config } from '@react-router/dev/config';
-import { sentryOnBuildEnd } from '@sentry/react-router';
export default {
appDirectory: './src/app',
ssr: true,
- buildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => {
- await sentryOnBuildEnd({viteConfig, reactRouterConfig, buildManifest});
- },
+ /* Sentry 설정 제외 */
+ // buildEnd: async ({ viteConfig, reactRouterConfig, buildManifest }) => {
+ // await sentryOnBuildEnd({viteConfig, reactRouterConfig, buildManifest});
+ // },
} satisfies Config;
diff --git a/src/app/entry.client.tsx b/src/app/entry.client.tsx
index 2ed6ee5..a8c0af0 100644
--- a/src/app/entry.client.tsx
+++ b/src/app/entry.client.tsx
@@ -1,36 +1,42 @@
-import * as Sentry from '@sentry/react-router';
/* v8 ignore start */
import { startTransition } from 'react';
import { hydrateRoot } from 'react-dom/client';
import { HydratedRouter } from 'react-router/dom';
-Sentry.init({
- dsn: 'https://8343c6ee467e6f35f22c570a68cd2e6e@o4509544992407552.ingest.us.sentry.io/4509548888391680',
+/* Sentry 설정 제외 */
+// Sentry.init({
+// dsn: 'https://8343c6ee467e6f35f22c570a68cd2e6e@o4509544992407552.ingest.us.sentry.io/4509548888391680',
- sendDefaultPii: true,
+// sendDefaultPii: true,
- integrations: [
- Sentry.reactRouterTracingIntegration(),
- Sentry.replayIntegration(),
- Sentry.feedbackIntegration({
- colorScheme: 'system',
- }),
- ],
+// integrations: [
+// Sentry.reactRouterTracingIntegration(),
+// Sentry.replayIntegration(),
+// Sentry.feedbackIntegration({
+// colorScheme: 'system',
+// }),
+// ],
- _experiments: { enableLogs: true },
+// _experiments: { enableLogs: true },
- tracesSampleRate: 1.0,
+// tracesSampleRate: 1.0,
- // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled
- tracePropagationTargets: [/^\//, /^https:\/\/investfuture\.my\/api/],
- // Capture Replay for 10% of all sessions,
- // plus 100% of sessions with an error
- replaysSessionSampleRate: 0.1,
- replaysOnErrorSampleRate: 1.0,
-});
+// // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled
+// tracePropagationTargets: [/^\//, /^https:\/\/investfuture\.my\/api/],
+// // Capture Replay for 10% of all sessions,
+// // plus 100% of sessions with an error
+// replaysSessionSampleRate: 0.1,
+// replaysOnErrorSampleRate: 1.0,
+// });
async function prepareApp() {
- return Promise.resolve();
+ if (process.env.NODE_ENV !== 'development') {
+ return;
+ }
+
+ const { worker } = await import('../mocks/browser');
+
+ return worker.start();
}
prepareApp().then(() => {
diff --git a/src/app/entry.server.tsx b/src/app/entry.server.tsx
index 1a6c146..f4c8e79 100644
--- a/src/app/entry.server.tsx
+++ b/src/app/entry.server.tsx
@@ -1,11 +1,8 @@
/* v8 ignore start */
import { PassThrough } from 'node:stream';
+import { server } from '~/mocks/server';
import { createReadableStreamFromReadable } from '@react-router/node';
-import {
- getMetaTagTransformer,
- wrapSentryHandleRequest,
-} from '@sentry/react-router';
import { isbot } from 'isbot';
import type { RenderToPipeableStreamOptions } from 'react-dom/server';
import { renderToPipeableStream } from 'react-dom/server';
@@ -14,6 +11,15 @@ import { ServerRouter } from 'react-router';
export const streamTimeout = 5_000;
+if (process.env.NODE_ENV === 'development') {
+ server.listen();
+
+ server.events.on('request:start', ({ request }) => {
+ // biome-ignore lint/suspicious/noConsole:
{coinInfo && (
-
실시간 차트
-
+
-
+
주문 하기
{isLoggedIn && coinInfo ? (
@@ -105,7 +135,12 @@ export default function TradeRouteComponent({
실시간 호가
- {coinInfo &&
diff --git a/src/app/sessions.server.ts b/src/app/sessions.server.ts
new file mode 100644
index 0000000..a6efb1f
--- /dev/null
+++ b/src/app/sessions.server.ts
@@ -0,0 +1,29 @@
+import { createCookieSessionStorage } from 'react-router';
+
+type SessionData = {
+ userId: string;
+ referer: string;
+};
+
+type SessionFlashData = {
+ error: string;
+};
+
+const MINUTE = 60;
+
+const { getSession, commitSession, destroySession } =
+ createCookieSessionStorage({
+ cookie: {
+ name: '__session',
+
+ httpOnly: true,
+ maxAge: MINUTE * 60 * 24,
+
+ path: '/',
+ sameSite: 'lax',
+ secrets: [String(import.meta.env.VITE_APP_SECRET)],
+ secure: true,
+ },
+ });
+
+export { getSession, commitSession, destroySession };
diff --git a/src/assets/lotties/error.json b/src/assets/lotties/error.json
new file mode 100644
index 0000000..0ff4e02
--- /dev/null
+++ b/src/assets/lotties/error.json
@@ -0,0 +1,544 @@
+{
+ "v": "5.5.7",
+ "meta": { "g": "LottieFiles AE 0.1.20", "a": "", "k": "", "d": "", "tc": "" },
+ "fr": 30,
+ "ip": 0,
+ "op": 80,
+ "w": 500,
+ "h": 500,
+ "nm": "exclamação animation",
+ "ddd": 0,
+ "assets": [],
+ "layers": [
+ {
+ "ddd": 0,
+ "ind": 1,
+ "ty": 4,
+ "nm": "exclamation",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": 0.667, "y": 1 },
+ "o": { "x": 0.333, "y": 0 },
+ "t": 7,
+ "s": [258.4, 231.36, 0],
+ "to": [0, -1.06, 0],
+ "ti": [0, 0, 0]
+ },
+ {
+ "i": { "x": 0.667, "y": 1 },
+ "o": { "x": 0.333, "y": 0 },
+ "t": 10,
+ "s": [258.4, 225, 0],
+ "to": [0, 0, 0],
+ "ti": [0, -1.06, 0]
+ },
+ {
+ "i": { "x": 0.833, "y": 1 },
+ "o": { "x": 0.167, "y": 0 },
+ "t": 13,
+ "s": [258.4, 231.36, 0],
+ "to": [0, 1.06, 0],
+ "ti": [0, 1.06, 0]
+ },
+ {
+ "i": { "x": 0.667, "y": 1 },
+ "o": { "x": 0.333, "y": 0 },
+ "t": 41,
+ "s": [258.4, 231.36, 0],
+ "to": [0, -1.06, 0],
+ "ti": [0, 0, 0]
+ },
+ {
+ "i": { "x": 0.667, "y": 1 },
+ "o": { "x": 0.333, "y": 0 },
+ "t": 44,
+ "s": [258.4, 225, 0],
+ "to": [0, 0, 0],
+ "ti": [0, -1.06, 0]
+ },
+ { "t": 47, "s": [258.4, 231.36, 0] }
+ ],
+ "ix": 2
+ },
+ "a": { "a": 0, "k": [16.613, 83.692, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 7,
+ "s": [90, 90, 100]
+ },
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 10,
+ "s": [93, 93, 100]
+ },
+ {
+ "i": { "x": [0.833, 0.833, 0.833], "y": [1, 1, 1] },
+ "o": { "x": [0.167, 0.167, 0.167], "y": [0, 0, 0] },
+ "t": 13,
+ "s": [90, 90, 100]
+ },
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 41,
+ "s": [90, 90, 100]
+ },
+ {
+ "i": { "x": [0.667, 0.667, 0.667], "y": [1, 1, 1] },
+ "o": { "x": [0.333, 0.333, 0.333], "y": [0, 0, 0] },
+ "t": 44,
+ "s": [93, 93, 100]
+ },
+ { "t": 47, "s": [90, 90, 100] }
+ ],
+ "ix": 6
+ }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [9.037, 0],
+ [0, 0],
+ [0, 9.038],
+ [-9.037, 0],
+ [0, -9.037]
+ ],
+ "o": [
+ [0, 0],
+ [-9.037, 0],
+ [0, -9.037],
+ [9.037, 0],
+ [0, 9.038]
+ ],
+ "v": [
+ [0, 16.363],
+ [0, 16.363],
+ [-16.363, 0],
+ [0, -16.363],
+ [16.363, 0]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [16.613, 150.771], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ },
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [
+ [8.134, 0],
+ [0, 0],
+ [0, 8.134],
+ [0, 0],
+ [-8.133, 0],
+ [0, -8.134],
+ [0, 0]
+ ],
+ "o": [
+ [0, 0],
+ [-8.133, 0],
+ [0, 0],
+ [0, -8.134],
+ [8.134, 0],
+ [0, 0],
+ [0, 8.134]
+ ],
+ "v": [
+ [0, 59.999],
+ [0, 59.999],
+ [-14.727, 45.271],
+ [-14.727, -45.271],
+ [0, -59.999],
+ [14.727, -45.271],
+ [14.727, 45.271]
+ ],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 4 },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [16.613, 60.249], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 2",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 2,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 80,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 2,
+ "ty": 4,
+ "nm": "stroke circle",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [258.4, 231.36, 0], "ix": 2 },
+ "a": { "a": 0, "k": [146, 146, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [[-77.872, 0], [0, -77.872], [77.872, 0], [0, 77.872]],
+ "o": [[77.872, 0], [0, 77.872], [-77.872, 0], [0, -77.872]],
+ "v": [[0, -141], [141, 0], [0, 141], [-141, 0]],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "st",
+ "c": {
+ "a": 0,
+ "k": [0.952999997606, 0.340999977261, 0.301999978458, 1],
+ "ix": 3
+ },
+ "o": { "a": 0, "k": 100, "ix": 4 },
+ "w": { "a": 0, "k": 3, "ix": 5 },
+ "lc": 1,
+ "lj": 1,
+ "ml": 10,
+ "bm": 0,
+ "nm": "Stroke 1",
+ "mn": "ADBE Vector Graphic - Stroke",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [146, 146], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667, 0.667], "y": [1, 1] },
+ "o": { "x": [0.333, 0.333], "y": [0, 0] },
+ "t": 30,
+ "s": [90, 90]
+ },
+ { "t": 78, "s": [120, 120] }
+ ],
+ "ix": 3
+ },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 30,
+ "s": [90]
+ },
+ { "t": 79, "s": [0] }
+ ],
+ "ix": 7
+ },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 90,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 3,
+ "ty": 4,
+ "nm": "stroke circle 2",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [258.4, 231.36, 0], "ix": 2 },
+ "a": { "a": 0, "k": [146, 146, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [[-77.872, 0], [0, -77.872], [77.872, 0], [0, 77.872]],
+ "o": [[77.872, 0], [0, 77.872], [-77.872, 0], [0, -77.872]],
+ "v": [[0, -141], [141, 0], [0, 141], [-141, 0]],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "st",
+ "c": {
+ "a": 0,
+ "k": [0.952999997606, 0.340999977261, 0.301999978458, 1],
+ "ix": 3
+ },
+ "o": { "a": 0, "k": 100, "ix": 4 },
+ "w": { "a": 0, "k": 3, "ix": 5 },
+ "lc": 1,
+ "lj": 1,
+ "ml": 10,
+ "bm": 0,
+ "nm": "Stroke 1",
+ "mn": "ADBE Vector Graphic - Stroke",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [146, 146], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667, 0.667], "y": [1, 1] },
+ "o": { "x": [0.333, 0.333], "y": [0, 0] },
+ "t": 0,
+ "s": [90, 90]
+ },
+ { "t": 48, "s": [120, 120] }
+ ],
+ "ix": 3
+ },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": {
+ "a": 1,
+ "k": [
+ {
+ "i": { "x": [0.667], "y": [1] },
+ "o": { "x": [0.333], "y": [0] },
+ "t": 0,
+ "s": [90]
+ },
+ { "t": 49, "s": [0] }
+ ],
+ "ix": 7
+ },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 90,
+ "st": 0,
+ "bm": 0
+ },
+ {
+ "ddd": 0,
+ "ind": 4,
+ "ty": 4,
+ "nm": "circle",
+ "sr": 1,
+ "ks": {
+ "o": { "a": 0, "k": 100, "ix": 11 },
+ "r": { "a": 0, "k": 0, "ix": 10 },
+ "p": { "a": 0, "k": [258.4, 231.36, 0], "ix": 2 },
+ "a": { "a": 0, "k": [130.82, 130.82, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+ },
+ "ao": 0,
+ "shapes": [
+ {
+ "ty": "gr",
+ "it": [
+ {
+ "ind": 0,
+ "ty": "sh",
+ "ix": 1,
+ "ks": {
+ "a": 0,
+ "k": {
+ "i": [[-72.112, 0], [0, -72.112], [72.111, 0], [0, 72.111]],
+ "o": [[72.111, 0], [0, 72.111], [-72.112, 0], [0, -72.112]],
+ "v": [[0, -130.57], [130.57, 0], [0, 130.57], [-130.57, 0]],
+ "c": true
+ },
+ "ix": 2
+ },
+ "nm": "Path 1",
+ "mn": "ADBE Vector Shape - Group",
+ "hd": false
+ },
+ {
+ "ty": "fl",
+ "c": {
+ "a": 0,
+ "k": [0.952999997606, 0.340999977261, 0.301999978458, 1],
+ "ix": 4
+ },
+ "o": { "a": 0, "k": 100, "ix": 5 },
+ "r": 1,
+ "bm": 0,
+ "nm": "Fill 1",
+ "mn": "ADBE Vector Graphic - Fill",
+ "hd": false
+ },
+ {
+ "ty": "tr",
+ "p": { "a": 0, "k": [130.82, 130.82], "ix": 2 },
+ "a": { "a": 0, "k": [0, 0], "ix": 1 },
+ "s": { "a": 0, "k": [100, 100], "ix": 3 },
+ "r": { "a": 0, "k": 0, "ix": 6 },
+ "o": { "a": 0, "k": 100, "ix": 7 },
+ "sk": { "a": 0, "k": 0, "ix": 4 },
+ "sa": { "a": 0, "k": 0, "ix": 5 },
+ "nm": "Transform"
+ }
+ ],
+ "nm": "Group 1",
+ "np": 2,
+ "cix": 2,
+ "bm": 0,
+ "ix": 1,
+ "mn": "ADBE Vector Group",
+ "hd": false
+ }
+ ],
+ "ip": 0,
+ "op": 90,
+ "st": 0,
+ "bm": 0
+ }
+ ],
+ "markers": []
+}
diff --git a/src/assets/lotties/no-content.json b/src/assets/lotties/no-content.json
new file mode 100644
index 0000000..e0fa9dc
--- /dev/null
+++ b/src/assets/lotties/no-content.json
@@ -0,0 +1 @@
+{"v":"5.6.8","fr":30,"ip":0,"op":120,"w":3840,"h":2160,"nm":"10","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"eyes","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[2996.232,1161.836,0],"ix":2},"a":{"a":0,"k":[3011.69,1478.552,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":58,"s":[93,93,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":63,"s":[93,18.6,100]},{"t":72,"s":[93,93,100]}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-84.939],[84.94,0],[0,84.94],[-84.939,0]],"o":[[0,84.94],[-84.939,0],[0,-84.939],[84.94,0]],"v":[[153.797,0],[0,153.797],[-153.796,0],[0,-153.796]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[2710.332,1478.552],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-84.939],[84.939,0],[0,84.94],[-84.94,0]],"o":[[0,84.94],[-84.94,0],[0,-84.939],[84.939,0]],"v":[[153.797,0],[0,153.797],[-153.796,0],[0,-153.796]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[3313.048,1478.552],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"ghost","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":30,"s":[7]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":60,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":90,"s":[-7]},{"t":119,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.505,"y":1},"o":{"x":0.495,"y":0},"t":0,"s":[1097,1280,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.531,"y":1},"o":{"x":0.503,"y":0},"t":60,"s":[2768,1280,0],"to":[0,0,0],"ti":[0,0,0]},{"t":119,"s":[1097,1280,0]}],"ix":2},"a":{"a":0,"k":[3000,1750,0],"ix":1},"s":{"a":0,"k":[50,50,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[16.788,-27.874],[-16.788,27.874]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[2716.447,1392.434],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[16.788,-27.874],[-16.788,27.874]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[2658.799,1392.434],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[16.788,-27.874],[-16.788,27.874]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[2601.151,1392.434],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[16.788,-27.874],[-16.788,27.874]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[3397.203,1392.434],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[16.788,-27.874],[-16.788,27.874]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[3339.555,1392.434],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5","np":2,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[16.788,-27.874],[-16.788,27.874]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[3281.906,1392.434],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6","np":2,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[19.974,-30.439]],"o":[[-19.974,-30.439],[0,0],[0,0]],"v":[[93.512,25.278],[0,-25.278],[-93.512,25.278]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[3000,1417.712],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7","np":2,"cix":2,"bm":0,"ix":7,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[-8.142,-14.102],[0,0],[-22.676,39.277],[0,0],[-8.142,-14.102],[0,0],[-23.423,37.931],[0,0],[-8.003,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.004,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.003,-13.862],[0,0],[1.264,22.249],[0,0],[314.296,0],[17.83,-313.79],[0,0],[-11.142,19.299],[0,0]],"o":[[0,0],[22.677,39.277],[0,0],[8.142,-14.102],[0,0],[22.291,38.608],[0,0],[8.41,-13.619],[0,0],[22.29,38.608],[0,0],[8.411,-13.619],[0,0],[22.29,38.608],[0,0],[8.41,-13.619],[0,0],[11.143,19.299],[0,0],[-17.829,-313.79],[-314.296,0],[0,0],[-1.264,22.249],[0,0],[8.142,-14.102]],"v":[[-521.679,825.992],[-467.204,920.347],[-365.16,920.347],[-310.684,825.992],[-274.046,825.992],[-207.626,941.033],[-106.478,942.531],[-33.525,824.396],[2.792,824.934],[69.824,941.033],[170.972,942.531],[243.925,824.396],[280.242,824.934],[347.272,941.033],[448.421,942.531],[521.375,824.396],[557.691,824.934],[629.555,949.406],[668.994,937.629],[591.78,-421.352],[0,-980.462],[-591.781,-421.352],[-668.995,937.604],[-629.557,949.38],[-558.318,825.992]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":30,"s":[{"i":[[-8.142,-14.102],[0,0],[-22.676,39.277],[0,0],[-8.142,-14.102],[0,0],[-23.423,37.931],[0,0],[-8.003,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.004,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.003,-13.862],[0,0],[1.264,22.249],[146.434,1003.659],[314.296,0],[23.956,-395.099],[0,0],[-11.142,19.299],[0,0]],"o":[[0,0],[22.677,39.277],[0,0],[8.142,-14.102],[0,0],[22.291,38.608],[0,0],[8.41,-13.619],[0,0],[22.29,38.608],[0,0],[8.411,-13.619],[0,0],[22.291,38.608],[0,0],[8.41,-13.619],[0,0],[11.143,19.299],[0,0],[-44.416,-435.812],[-314.296,0],[-2.554,586.948],[-1.264,22.249],[0,0],[8.142,-14.102]],"v":[[-649.192,837.148],[-594.716,931.503],[-492.673,931.503],[-438.196,837.148],[-401.559,837.148],[-335.139,952.189],[-233.99,953.687],[-161.037,835.552],[-124.72,836.09],[-57.689,952.189],[43.46,953.687],[116.412,835.552],[152.73,836.09],[219.759,952.189],[320.909,953.687],[393.862,835.552],[430.179,836.09],[502.043,960.562],[541.482,948.785],[591.78,-421.352],[-0.001,-980.462],[-591.781,-421.352],[-796.507,948.76],[-757.069,960.536],[-685.83,837.148]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":60,"s":[{"i":[[-8.142,-14.102],[0,0],[-22.676,39.277],[0,0],[-8.142,-14.102],[0,0],[-23.423,37.931],[0,0],[-8.003,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.004,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.003,-13.862],[0,0],[1.264,22.249],[0,0],[314.296,0],[17.83,-313.79],[0,0],[-11.142,19.299],[0,0]],"o":[[0,0],[22.677,39.277],[0,0],[8.142,-14.102],[0,0],[22.291,38.608],[0,0],[8.41,-13.619],[0,0],[22.29,38.608],[0,0],[8.411,-13.619],[0,0],[22.29,38.608],[0,0],[8.41,-13.619],[0,0],[11.143,19.299],[0,0],[-17.829,-313.79],[-314.296,0],[0,0],[-1.264,22.249],[0,0],[8.142,-14.102]],"v":[[-521.679,825.992],[-467.204,920.347],[-365.16,920.347],[-310.684,825.992],[-274.046,825.992],[-207.626,941.033],[-106.478,942.531],[-33.525,824.396],[2.792,824.934],[69.824,941.033],[170.972,942.531],[243.925,824.396],[280.242,824.934],[347.272,941.033],[448.421,942.531],[521.375,824.396],[557.691,824.934],[629.555,949.406],[668.994,937.629],[591.78,-421.352],[0,-980.462],[-591.781,-421.352],[-668.995,937.604],[-629.557,949.38],[-558.318,825.992]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":90,"s":[{"i":[[-8.142,-14.102],[0,0],[-22.675,39.277],[0,0],[-8.142,-14.102],[0,0],[-23.423,37.931],[0,0],[-8.004,-13.862],[0,0],[-23.423,37.931],[0,0],[-8.004,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.003,-13.862],[0,0],[1.264,22.249],[-25.568,753.13],[314.296,0],[50.211,-380.695],[0,0],[-11.142,19.299],[0,0]],"o":[[0,0],[22.677,39.277],[0,0],[8.142,-14.102],[0,0],[22.291,38.608],[0,0],[8.41,-13.619],[0,0],[22.29,38.608],[0,0],[8.411,-13.619],[0,0],[22.29,38.608],[0,0],[8.41,-13.619],[0,0],[11.143,19.299],[0,0],[-9.741,-345.672],[-314.296,0],[-148.999,979.163],[-1.264,22.249],[0,0],[8.142,-14.102]],"v":[[-426.045,834.359],[-371.569,928.714],[-269.525,928.714],[-215.049,834.359],[-178.411,834.359],[-111.992,949.4],[-10.843,950.898],[62.11,832.763],[98.428,833.301],[165.458,949.4],[266.607,950.898],[339.559,832.763],[375.877,833.301],[442.907,949.4],[544.056,950.898],[617.009,832.763],[653.326,833.301],[725.19,957.773],[764.629,945.996],[591.78,-421.352],[-0.001,-980.462],[-591.781,-421.352],[-573.36,945.971],[-533.922,957.747],[-462.683,834.359]],"c":true}]},{"t":119,"s":[{"i":[[-8.142,-14.102],[0,0],[-22.676,39.277],[0,0],[-8.142,-14.102],[0,0],[-23.423,37.931],[0,0],[-8.003,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.004,-13.862],[0,0],[-23.424,37.931],[0,0],[-8.003,-13.862],[0,0],[1.264,22.249],[0,0],[314.296,0],[17.83,-313.79],[0,0],[-11.142,19.299],[0,0]],"o":[[0,0],[22.677,39.277],[0,0],[8.142,-14.102],[0,0],[22.291,38.608],[0,0],[8.41,-13.619],[0,0],[22.29,38.608],[0,0],[8.411,-13.619],[0,0],[22.29,38.608],[0,0],[8.41,-13.619],[0,0],[11.143,19.299],[0,0],[-17.829,-313.79],[-314.296,0],[0,0],[-1.264,22.249],[0,0],[8.142,-14.102]],"v":[[-521.679,825.992],[-467.204,920.347],[-365.16,920.347],[-310.684,825.992],[-274.046,825.992],[-207.626,941.033],[-106.478,942.531],[-33.525,824.396],[2.792,824.934],[69.824,941.033],[170.972,942.531],[243.925,824.396],[280.242,824.934],[347.272,941.033],[448.421,942.531],[521.375,824.396],[557.691,824.934],[629.555,949.406],[668.994,937.629],[591.78,-421.352],[0,-980.462],[-591.781,-421.352],[-668.995,937.604],[-629.557,949.38],[-558.318,825.992]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.227450995352,0.192156877705,0.250980392157,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.780392216701,0.901960844152,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[3000,1411.545],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 10","np":3,"cix":2,"bm":0,"ix":8,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":120,"st":0,"bm":0}],"markers":[]}
\ No newline at end of file
diff --git a/src/assets/svgs/chevron-left.svg b/src/assets/svgs/chevron-left.svg
new file mode 100644
index 0000000..d0e5ca0
--- /dev/null
+++ b/src/assets/svgs/chevron-left.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/svgs/chevron-right.svg b/src/assets/svgs/chevron-right.svg
new file mode 100644
index 0000000..6a1b85d
--- /dev/null
+++ b/src/assets/svgs/chevron-right.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/assets/svgs/index.ts b/src/assets/svgs/index.ts
index 1cb6b38..24a97fa 100644
--- a/src/assets/svgs/index.ts
+++ b/src/assets/svgs/index.ts
@@ -6,3 +6,5 @@ export { ReactComponent as IconMinus } from './minus-solid.svg';
export { ReactComponent as IconHeadset } from './headset-solid.svg';
export { ReactComponent as IconBars } from './bars-solid.svg';
export { ReactComponent as IconXmark } from './xmark-solid.svg';
+export { ReactComponent as IconArrowLeft } from './chevron-left.svg';
+export { ReactComponent as IconArrowRight } from './chevron-right.svg';
diff --git a/src/entities/coin/hooks/hooks.test.tsx b/src/entities/coin/hooks/hooks.test.tsx
new file mode 100644
index 0000000..aa72041
--- /dev/null
+++ b/src/entities/coin/hooks/hooks.test.tsx
@@ -0,0 +1,131 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { beforeEach, describe, expect } from 'vitest';
+import { it, vi } from 'vitest';
+import { StompContext } from '~/app/provider/StompProvider';
+import useCurrentPrice, { type CurrentPriceData } from './useCurrentPrice';
+
+const TICKER_FIRST = 'BTC';
+const TICKER_SECOND = 'ETH';
+
+function generateDestinationEndPoint(ticker: string) {
+ return `/app/subscribe/prevRate/${ticker}`;
+}
+
+function generateTopicEndPoint(ticker: string) {
+ return `/topic/prevRate/${ticker}`;
+}
+
+const mockClient = {
+ publish: vi.fn(),
+ subscribe: vi.fn(() => ({
+ unsubscribe: vi.fn(),
+ id: 'testId',
+ })),
+} as any;
+
+const mockStompContextValue = {
+ client: mockClient,
+ connected: true,
+};
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+
+ {children}
+
+);
+
+describe('useCurrentPrice 훅 테스트', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it('클라이언트가 연결되지 않았을 때는 아무것도 하지 않는다', () => {
+ const disconnectedWrapper = ({ children }: { children: ReactNode }) => (
+
+ {children}
+
+ );
+
+ renderHook(() => useCurrentPrice(TICKER_FIRST), {
+ wrapper: disconnectedWrapper,
+ });
+
+ expect(mockClient.publish).not.toHaveBeenCalled();
+ expect(mockClient.subscribe).not.toHaveBeenCalled();
+ });
+
+ it('클라이언트가 연결되면 올바른 destination으로 publish한다', () => {
+ renderHook(() => useCurrentPrice(TICKER_FIRST), { wrapper });
+
+ expect(mockClient.publish).toHaveBeenCalledWith({
+ destination: generateDestinationEndPoint(TICKER_FIRST),
+ body: JSON.stringify({ ticker: TICKER_FIRST }),
+ });
+ });
+
+ it('올바른 topic으로 subscribe한다', () => {
+ renderHook(() => useCurrentPrice(TICKER_FIRST), { wrapper });
+
+ expect(mockClient.subscribe).toHaveBeenCalledWith(
+ generateTopicEndPoint(TICKER_FIRST),
+ expect.any(Function),
+ );
+ });
+
+ it('메시지를 받으면 데이터를 파싱하여 상태를 업데이트한다', async () => {
+ const mockData: CurrentPriceData = {
+ changeRate: 0.05,
+ currentPrice: 50000,
+ prevClose: 47500,
+ ticker: 'BTC',
+ timestamp: '2024-01-01T00:00:00Z',
+ };
+
+ const mockMessage = {
+ body: JSON.stringify(mockData),
+ };
+
+ mockClient.subscribe.mockImplementation(
+ (destination: string, callback: (message: any) => void) => {
+ setTimeout(() => callback(mockMessage), 0);
+ return { unsubscribe: vi.fn() };
+ },
+ );
+
+ const { result } = renderHook(() => useCurrentPrice(TICKER_FIRST), {
+ wrapper,
+ });
+
+ await waitFor(() => {
+ expect(result.current).toEqual(mockData);
+ });
+ });
+
+ it('ticker가 변경되면 새로운 구독을 생성한다', () => {
+ const { rerender } = renderHook(({ ticker }) => useCurrentPrice(ticker), {
+ wrapper,
+ initialProps: { ticker: TICKER_FIRST },
+ });
+
+ rerender({ ticker: TICKER_SECOND });
+
+ expect(mockClient.publish).toHaveBeenCalledWith({
+ destination: generateDestinationEndPoint(TICKER_SECOND),
+ body: JSON.stringify({ ticker: TICKER_SECOND }),
+ });
+ });
+
+ it('컴포넌트가 언마운트되면 구독을 해제한다', () => {
+ const mockUnsubscribe = vi.fn();
+ mockClient.subscribe.mockReturnValue({ unsubscribe: mockUnsubscribe });
+
+ const { unmount } = renderHook(() => useCurrentPrice(TICKER_FIRST), {
+ wrapper,
+ });
+
+ unmount();
+
+ expect(mockUnsubscribe).toHaveBeenCalled();
+ });
+});
diff --git a/src/entities/coin/types/coin.type.ts b/src/entities/coin/types/coin.type.ts
index 35b9b44..77e2fcc 100644
--- a/src/entities/coin/types/coin.type.ts
+++ b/src/entities/coin/types/coin.type.ts
@@ -6,6 +6,9 @@ export type CoinName = string;
export type CoinInfo = {
ticker: CoinTicker;
name: CoinName;
+ svgIconBase64?: string;
+ currentPrice: number | null;
+ changeRate: number | null;
};
export type CoinListResponseData = { assets: CoinInfo[] };
diff --git a/src/entities/coin/ui/CoinPriceWithName/CoinPriceWithName.test.tsx b/src/entities/coin/ui/CoinPriceWithName/CoinPriceWithName.test.tsx
index ed88c23..df389e1 100644
--- a/src/entities/coin/ui/CoinPriceWithName/CoinPriceWithName.test.tsx
+++ b/src/entities/coin/ui/CoinPriceWithName/CoinPriceWithName.test.tsx
@@ -1,9 +1,18 @@
import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-import CloudImage from '~/assets/images/cloud.webp';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
import '../../hooks/useCurrentPrice';
+import { convertBase64ToSvg, formatCurrencyKR } from '~/shared/utils';
import CoinPriceWithName from '.';
+import useCurrentPrice from '../../hooks/useCurrentPrice';
+
+const props = {
+ name: '비트코인',
+ ticker: 'BTC',
+ currentPrice: 9_000_000,
+};
+
+const FALLBACK_ICON = '🪙';
const mockPriceData = {
changeRate: 4,
@@ -14,50 +23,97 @@ const mockPriceData = {
};
vi.mock('../../hooks/useCurrentPrice', () => ({
- default: vi.fn().mockImplementation((ticker) => {
- return mockPriceData;
- }),
+ default: vi.fn(),
+}));
+
+vi.mock('~/shared/utils', () => ({
+ formatCurrencyKR: vi.fn((value) => value.toLocaleString()),
+ convertBase64ToSvg: vi.fn((base64) => `data:image/svg+xml;base64,${base64}`),
}));
+const mockUseCurrentPrice = vi.mocked(useCurrentPrice);
+
describe('CoinPriceWithName 컴포넌트 테스트', () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
it('name과 ticker과 img가 prop으로 전달되면 화면에 보인다', () => {
- const props = {
- name: '비트코인',
- ticker: 'BTC',
- img: CloudImage,
- };
+ mockUseCurrentPrice.mockReturnValue(null);
+
render(;
export default function CoinPriceWithName({
name,
ticker,
- img,
+ currentPrice: lastPrice,
+ svgIconBase64,
}: CoinPriceWithNameProps) {
- const price = useCurrentPrice(ticker);
+ const realtimePriceData = useCurrentPrice(ticker);
+ const displayPrice = realtimePriceData
+ ? realtimePriceData.currentPrice
+ : lastPrice || 0;
+
return (
- {img ? 
: 🪙}
+ {svgIconBase64 ? (
+ })
+ ) : (
+ 🪙
+ )}
diff --git a/src/entities/coin/ui/CoinWithIconAndName/CoinWithIconAndName.test.tsx b/src/entities/coin/ui/CoinWithIconAndName/CoinWithIconAndName.test.tsx
index 9cf771c..913572b 100644
--- a/src/entities/coin/ui/CoinWithIconAndName/CoinWithIconAndName.test.tsx
+++ b/src/entities/coin/ui/CoinWithIconAndName/CoinWithIconAndName.test.tsx
@@ -1,26 +1,58 @@
import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
+import { convertBase64ToSvg } from '~/shared/utils';
import CoinWithIconAndName from '.';
+const props = {
+ name: '비트코인',
+ ticker: 'BTC',
+ svgIconBase64: 'testBase64String',
+};
+const FALLBACK_ICON = '🪙';
+
+vi.mock('~/shared/utils', () => ({
+ formatCurrencyKR: vi.fn((value) => value.toLocaleString()),
+ convertBase64ToSvg: vi.fn((base64) => `data:image/svg+xml;base64,${base64}`),
+}));
+
describe('CoinWithIconAndName 컴포넌트 테스트', () => {
it('props로 전달된 name, ticker, coinIcon이 렌더링 된다 .', () => {
- const props = {
- name: '비트코인',
- ticker: 'BTC',
- coinIcon: 🪙,
- };
render(('api/userinfo');
+ getUserInfo: (init?: RequestInit) => {
+ return ApiClient.get('api/userinfo', init);
},
};
/* v8 ignore end */
diff --git a/src/entities/user/index.ts b/src/entities/user/index.ts
index 41fc40d..3829c50 100644
--- a/src/entities/user/index.ts
+++ b/src/entities/user/index.ts
@@ -1,3 +1,4 @@
/* v8 ignore start */
export { default as api } from './api/user.endpoint';
+export type { Wallet, UserInfoResponseData } from './types/user.type';
/* v8 ignore end */
diff --git a/src/entities/user/types/user.type.ts b/src/entities/user/types/user.type.ts
index e722c01..fa96598 100644
--- a/src/entities/user/types/user.type.ts
+++ b/src/entities/user/types/user.type.ts
@@ -1,20 +1,22 @@
import type { Response } from '~/shared/types/api';
-type Wallet = {
- accountId: number;
- buyPrice: string;
- id: number;
- roi: string;
- size: string;
+export type Wallet = {
+ name: string;
ticker: string;
+ accountId: number;
+ buyPrice: number;
+ currentPrice: number;
+ roi: number;
+ size: number;
};
-type UserInfoResponseData = {
+export type UserInfoResponseData = {
userId: number;
email: string;
nickname: string;
provider: string;
cash: number;
+ totalAssetAmount: number;
wallets: Wallet[];
};
diff --git a/src/features/chat/ui/AIChatBot/AIChatBot.test.tsx b/src/features/chat/ui/AIChatBot/AIChatBot.test.tsx
index 7426543..9ead39f 100644
--- a/src/features/chat/ui/AIChatBot/AIChatBot.test.tsx
+++ b/src/features/chat/ui/AIChatBot/AIChatBot.test.tsx
@@ -1,17 +1,82 @@
-import {
- render,
- screen,
- waitForElementToBeRemoved,
-} from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
import { describe, expect, it, vi } from 'vitest';
import userEvent from '@testing-library/user-event';
import AIChatBot from '.';
+import type { MessageObj } from '../../types/chat.type';
-vi.mock('~/shared/hooks/useScrollToBottom', () => ({
+const USER_TEXT = 'test';
+const AI_ANSWER = 'ai answer';
+
+vi.mock('~/shared/hooks/useScrollIntoView', () => ({
default: () => ({ current: { scrollIntoView: vi.fn() } }),
}));
+vi.mock('@xstate/react', () => {
+ return {
+ useMachine: vi.fn().mockImplementation(() => {
+ const [state, setState] = React.useState({
+ context: {
+ state: 'idle' as 'idle' | 'processing',
+ question: '',
+ messageList: [] as MessageObj[],
+ },
+ });
+
+ const send = vi.fn().mockImplementation((event) => {
+ if (event.type === 'TYPING_QUESTION') {
+ setState((prev) => ({
+ ...prev,
+ context: {
+ ...prev.context,
+ question: event.question,
+ },
+ }));
+ } else if (event.type === 'SUBMIT_EVENT') {
+ setState((prev) => {
+ const newMessageList = [
+ ...prev.context.messageList,
+ {
+ isMine: true,
+ message: prev.context.question,
+ },
+ ];
+ return {
+ ...prev,
+ context: {
+ ...prev.context,
+ state: 'processing',
+ question: '',
+ messageList: newMessageList,
+ },
+ };
+ });
+
+ setTimeout(() => {
+ setState((prev) => ({
+ ...prev,
+ context: {
+ ...prev.context,
+ state: 'idle',
+ messageList: [
+ ...prev.context.messageList,
+ {
+ isMine: false,
+ message: AI_ANSWER,
+ },
+ ],
+ },
+ }));
+ }, 1000);
+ }
+ });
+
+ return [state, send];
+ }),
+ };
+});
+
describe('AIChatBot 컴포넌트 테스트', () => {
it('초기 상태에서 ChatButton이 보여진다.', () => {
render() {
const navigate = useNavigate();
const currentPriceData = useCurrentPrice(ticker);
- const isBull = currentPriceData && currentPriceData.changeRate > 0;
- const formatedPrice = `${formatCurrencyKR(
- +(currentPriceData?.currentPrice ?? 0).toFixed(2),
- )}원`;
+ const displayPrice = currentPriceData
+ ? currentPriceData.currentPrice
+ : lastPrice || 0;
+ const displayChangeRate = currentPriceData
+ ? currentPriceData.changeRate
+ : changeRate || 0;
+ const isBull = displayChangeRate > 0;
const handleClickCoinItem = async () => {
onClick?.();
@@ -38,16 +43,20 @@ export default function CoinListItem({
onClick={handleClickCoinItem}
>
(null);
+ useScrollMiddle(scrollContainerRef, data);
return (
-
{name}
@@ -22,7 +34,7 @@ export default function CoinPriceWithName({
- {price ? formatCurrencyKR(price.currentPrice) : '-'}원
+ {formatCurrencyKR(displayPrice)}원
- {coinIcon}
+ {svgIconBase64 ? (
+
+ ) : (
+ '🪙'
+ )}
{ticker}
diff --git a/src/entities/user/api/user.endpoint.ts b/src/entities/user/api/user.endpoint.ts
index 4dbc374..37ef925 100644
--- a/src/entities/user/api/user.endpoint.ts
+++ b/src/entities/user/api/user.endpoint.ts
@@ -3,8 +3,8 @@ import ApiClient from '~/shared/api/httpClient';
import type { UserInfoResponse } from '../types/user.type';
export default {
- getUserInfo: () => {
- return ApiClient.get
-
- {formatedPrice}
+ {formatCurrencyKR(Number(displayPrice.toFixed(2)))}원
- {(currentPriceData?.changeRate ?? 0).toFixed(2)}%
+ {displayChangeRate.toFixed(2)}%
diff --git a/src/features/profile/api/history.endpoint.ts b/src/features/profile/api/history.endpoint.ts
new file mode 100644
index 0000000..6992c9f
--- /dev/null
+++ b/src/features/profile/api/history.endpoint.ts
@@ -0,0 +1,27 @@
+import ApiClient from '~/shared/api/httpClient';
+import type { HistoryResponse } from '../types/tradingHistory.type';
+
+export default {
+ getHistory: (
+ page?: number,
+ size?: number,
+ settled?: boolean,
+ init?: RequestInit,
+ ) => {
+ const params = new URLSearchParams();
+
+ if (page) params.set('page', page.toString());
+ if (size) params.set('size', size.toString());
+
+ if (settled) params.set('settled', 'true');
+ else params.set('settled', 'false');
+
+ return ApiClient.get(
+ `api/userinfo/trades?${params.toString()}`,
+ init,
+ );
+ },
+ deleteHistory: (orderId: string, init?: RequestInit) => {
+ return ApiClient.delete(`api/userinfo/trades?orderId=${orderId}`, init);
+ },
+};
diff --git a/src/features/profile/api/history.test.ts b/src/features/profile/api/history.test.ts
new file mode 100644
index 0000000..1a2a656
--- /dev/null
+++ b/src/features/profile/api/history.test.ts
@@ -0,0 +1,51 @@
+import { describe } from 'node:test';
+import { expect, it, vi } from 'vitest';
+import ApiClient from '~/shared/api/httpClient';
+import historyApi from './history.endpoint';
+
+vi.mock('~/shared/api/httpClient', () => ({
+ default: {
+ get: vi.fn(),
+ delete: vi.fn(),
+ },
+}));
+
+const getHistoryParams = {
+ page: 1,
+ size: 10,
+ settled: true,
+};
+
+const deleteHistoryParams = {
+ orderId: 'testOrderId',
+};
+
+describe('history api 테스트', () => {
+ it('getHistory가 호출되면 api 클라이언트가 호출된다', () => {
+ historyApi.getHistory(
+ getHistoryParams.page,
+ getHistoryParams.size,
+ getHistoryParams.settled,
+ );
+
+ const urlParams = new URLSearchParams();
+ urlParams.set('page', getHistoryParams.page.toString());
+ urlParams.set('size', getHistoryParams.size.toString());
+
+ if (getHistoryParams.settled) urlParams.set('settled', 'true');
+ else urlParams.set('settled', 'false');
+
+ expect(ApiClient.get).toHaveBeenCalledWith(
+ `api/userinfo/trades?${urlParams.toString()}`,
+ undefined,
+ );
+ });
+ it('deleteHistory가 호출되면 api 클라이언트가 호출된다.', () => {
+ historyApi.deleteHistory(deleteHistoryParams.orderId);
+
+ expect(ApiClient.delete).toHaveBeenCalledWith(
+ `api/userinfo/trades?orderId=${deleteHistoryParams.orderId}`,
+ undefined,
+ );
+ });
+});
diff --git a/src/features/profile/const/chart.const.ts b/src/features/profile/const/chart.const.ts
new file mode 100644
index 0000000..627b410
--- /dev/null
+++ b/src/features/profile/const/chart.const.ts
@@ -0,0 +1,28 @@
+export const TABLE_HEAD_HEIGHT = 32;
+export const TABLE_ROW_HEIGHT = 36;
+
+export const COLORS = [
+ { backgroundColor: '#FF3B30', textColor: '#FFFFFF' }, // 밝은 빨강 - 가장 눈에 띄는 색상
+ { backgroundColor: '#007AFF', textColor: '#FFFFFF' }, // 밝은 파랑
+ { backgroundColor: '#5856D6', textColor: '#FFFFFF' }, // 밝은 보라
+ { backgroundColor: '#FF9500', textColor: '#FFFFFF' }, // 밝은 주황
+ { backgroundColor: '#4CD964', textColor: '#000000' }, // 밝은 녹색
+ { backgroundColor: '#FFCC00', textColor: '#000000' }, // 밝은 노랑
+ { backgroundColor: '#34AADC', textColor: '#FFFFFF' }, // 밝은 하늘
+ { backgroundColor: '#FF2D55', textColor: '#FFFFFF' }, // 밝은 핑크
+ { backgroundColor: '#5AC8FA', textColor: '#FFFFFF' }, // 중간 하늘
+ { backgroundColor: '#AF52DE', textColor: '#FFFFFF' }, // 중간 보라
+ { backgroundColor: '#C86D00', textColor: '#FFFFFF' }, // 중간 갈색
+ { backgroundColor: '#8E8E93', textColor: '#000000' }, // 중간 회색
+ { backgroundColor: '#1C1C1E', textColor: '#FFFFFF' }, // 어두운 검정
+ { backgroundColor: '#636366', textColor: '#FFFFFF' }, // 어두운 회색
+ { backgroundColor: '#48484A', textColor: '#FFFFFF' }, // 더 어두운 회색
+ { backgroundColor: '#3A3A3C', textColor: '#FFFFFF' }, // 매우 어두운 회색
+ { backgroundColor: '#2C2C2E', textColor: '#FFFFFF' }, // 거의 검은 회색
+ { backgroundColor: '#007356', textColor: '#FFFFFF' }, // 어두운 녹색
+ { backgroundColor: '#004080', textColor: '#FFFFFF' }, // 어두운 파랑
+ { backgroundColor: '#660033', textColor: '#FFFFFF' }, // 어두운 자주 - 가장 덜 눈에 띄는 색상
+] as const;
+
+export const RADIAN = Math.PI / 180;
+export const LABEL_POSTION_WEIGHT = 0.6;
diff --git a/src/features/profile/index.ts b/src/features/profile/index.ts
new file mode 100644
index 0000000..e47ba4f
--- /dev/null
+++ b/src/features/profile/index.ts
@@ -0,0 +1,9 @@
+export { default as CoinPieChart } from './ui/CoinPieChart';
+export type {
+ HistoryResponse,
+ OrderType,
+ Side,
+ OrderStatus,
+} from './types/tradingHistory.type';
+export { default as api } from './api/history.endpoint';
+export { default as TradingHistory } from './ui/TradingHistoryList';
diff --git a/src/features/profile/types/chart.type.ts b/src/features/profile/types/chart.type.ts
new file mode 100644
index 0000000..b1e72a2
--- /dev/null
+++ b/src/features/profile/types/chart.type.ts
@@ -0,0 +1,10 @@
+export type CoinPieChartData = {
+ ticker: string;
+ totalPrice: number;
+ averagePrice: number;
+ quantity: number;
+ roi: number;
+ accountId: number;
+ name: string;
+ currentPrice: number;
+};
diff --git a/src/features/profile/types/tradingHistory.type.ts b/src/features/profile/types/tradingHistory.type.ts
new file mode 100644
index 0000000..ad708c3
--- /dev/null
+++ b/src/features/profile/types/tradingHistory.type.ts
@@ -0,0 +1,61 @@
+import type { Response } from '~/shared/types/api';
+
+// 지정가/시장가
+export enum OrderType {
+ LIMIT = 'LIMIT',
+ MARKET = 'MARKET',
+}
+
+// 매수/매도
+export enum Side {
+ ASK = 'ASK',
+ BID = 'BID',
+}
+
+// 주문 상태
+export enum OrderStatus {
+ UNSETTLED = 'UNSETTLED',
+ SETTLED = 'SETTLED',
+ IN_PROGRESS = 'IN_PROGRESS',
+}
+
+type BaseOrder = {
+ orderId: string;
+ ticker: string;
+ name: string;
+ remainingSize: number;
+ displaySize: number;
+ tradeTime: string;
+ orderStatus:
+ | OrderStatus.UNSETTLED
+ | OrderStatus.SETTLED
+ | OrderStatus.IN_PROGRESS;
+};
+
+export type TradingHistory = BaseOrder &
+ (
+ | {
+ side: Side.ASK;
+ orderType: OrderType.LIMIT;
+ price: number;
+ orderSize: number;
+ }
+ | { side: Side.ASK; orderType: OrderType.MARKET; orderSize: number }
+ | {
+ side: Side.BID;
+ orderType: OrderType.LIMIT;
+ price: number;
+ orderSize: number;
+ }
+ | { side: Side.BID; orderType: OrderType.MARKET; price: number }
+ );
+
+export type HistoryResponseData = {
+ orderList: TradingHistory[];
+ totalPages: number;
+ currentPage: number;
+ pageSize: number;
+ totalElements: number;
+};
+
+export type HistoryResponse = Response;
diff --git a/src/features/profile/ui/AssetInfoGraphic/index.tsx b/src/features/profile/ui/AssetInfoGraphic/index.tsx
new file mode 100644
index 0000000..0164f22
--- /dev/null
+++ b/src/features/profile/ui/AssetInfoGraphic/index.tsx
@@ -0,0 +1,70 @@
+import { useRef } from 'react';
+import type { UserInfoResponseData } from '~/entities/user';
+import { CoinPieChart } from '~/features/profile';
+import { TABLE_HEAD_HEIGHT } from '../../const/chart.const';
+import type { CoinPieChartData } from '../../types/chart.type';
+import { generateCoinPieChartData } from '../../utils';
+import AssetInfoGraphicText from '../AssetInfoGraphicText';
+import CoinAssetTable from '../CoinAssetTable';
+
+type AssetInfoGraphicProps = {
+ userInfo: UserInfoResponseData;
+};
+
+export default function AssetInfoGraphic({ userInfo }: AssetInfoGraphicProps) {
+ const assetTableRef = useRef(null);
+ const { wallets, totalAssetAmount } = userInfo;
+ const assetData = generateCoinPieChartData(userInfo);
+ const coinData = assetData.filter((item) => item.ticker !== 'KRW');
+ const roiAverage =
+ wallets.length > 0
+ ? wallets.reduce((acc, item) => acc + item.roi, 0) / wallets.length
+ : 0;
+
+ const handleClickChart = (data: CoinPieChartData) => {
+ if (!assetTableRef.current) return;
+
+ const targetRow = assetTableRef.current.querySelector(
+ `[data-ticker="${data.ticker}"]`,
+ ) as HTMLElement;
+
+ if (!targetRow) return;
+
+ assetTableRef.current.scrollTo({
+ top: targetRow.offsetTop - TABLE_HEAD_HEIGHT,
+ behavior: 'smooth',
+ });
+ };
+
+ return (
+ <>
+ ;
+};
+
+export default function CoinAssetTable({ coinData, ref }: CoinAssetTableProps) {
+ return (
+
+
+
+ {coinData.map((item, index) => (
+ |
+ ))}
+
+
+
+ );
+}
diff --git a/src/features/profile/ui/CoinPieChartActiveShape/index.tsx b/src/features/profile/ui/CoinPieChartActiveShape/index.tsx
new file mode 100644
index 0000000..1f839fd
--- /dev/null
+++ b/src/features/profile/ui/CoinPieChartActiveShape/index.tsx
@@ -0,0 +1,88 @@
+import type { SVGProps } from 'react';
+import { Sector, type SectorProps } from 'recharts';
+import type { CoinPieChartData } from '../../types/chart.type';
+
+type Coordinate = {
+ x: number;
+ y: number;
+};
+
+type PieSectorData = {
+ percent?: number;
+ name?: string | number;
+ midAngle?: number;
+ middleRadius?: number;
+ tooltipPosition?: Coordinate;
+ value?: number;
+ paddingAngle?: number;
+ dataKey?: string;
+ payload?: CoinPieChartData;
+};
+
+type CoinPieChartActiveShapeProps = SVGProps &
+ Partial &
+ PieSectorData;
+
+export default function CoinPieChartActiveShape({
+ cx,
+ cy,
+ midAngle,
+ innerRadius,
+ outerRadius,
+ startAngle,
+ endAngle,
+ fill,
+ payload,
+ percent,
+ value,
+}: CoinPieChartActiveShapeProps) {
+ const RADIAN = Math.PI / 180;
+ const sin = Math.sin(-RADIAN * (midAngle ?? 1));
+ const cos = Math.cos(-RADIAN * (midAngle ?? 1));
+ const sx = (cx ?? 0) + ((outerRadius ?? 0) + 10) * cos;
+ const sy = (cy ?? 0) + ((outerRadius ?? 0) + 10) * sin;
+ const mx = (cx ?? 0) + ((outerRadius ?? 0) + 30) * cos;
+ const my = (cy ?? 0) + ((outerRadius ?? 0) + 30) * sin;
+ const ex = mx + (cos >= 0 ? 1 : -1) * 11;
+ const ey = my;
+ const textAnchor = cos >= 0 ? 'start' : 'end';
+
+ return (
+
+
+ {payload?.ticker}
+
+ = 0 ? 1 : -1) * 12}
+ y={ey}
+ textAnchor={textAnchor}
+ fill="#333"
+ fontSize={14}
+ >{`${((percent ?? 1) * 100).toFixed(0)}%`}
+
+ );
+}
diff --git a/src/features/profile/ui/CoinPieChartLabel/index.tsx b/src/features/profile/ui/CoinPieChartLabel/index.tsx
new file mode 100644
index 0000000..a47cced
--- /dev/null
+++ b/src/features/profile/ui/CoinPieChartLabel/index.tsx
@@ -0,0 +1,31 @@
+import type { PieLabelProps } from 'recharts/types/polar/Pie';
+import { COLORS, LABEL_POSTION_WEIGHT, RADIAN } from '../../const/chart.const';
+
+export default function CoinPieChartLabel({
+ cx,
+ cy,
+ midAngle,
+ innerRadius,
+ outerRadius,
+ percent,
+ index,
+ name,
+}: PieLabelProps) {
+ const radius =
+ innerRadius + (outerRadius - innerRadius) * LABEL_POSTION_WEIGHT;
+ const x = midAngle ? cx + radius * Math.cos(-midAngle * RADIAN) : cx;
+ const y = midAngle ? cy + radius * Math.sin(-midAngle * RADIAN) : cy;
+ const color = index ? COLORS[index % COLORS.length].textColor : '#fff';
+
+ return (
+
+ {percent ? `${name} ${(percent * 100).toFixed(0)}%` : ''}
+
+ );
+}
diff --git a/src/features/profile/ui/CoinPieChartTooltip/index.tsx b/src/features/profile/ui/CoinPieChartTooltip/index.tsx
new file mode 100644
index 0000000..962869d
--- /dev/null
+++ b/src/features/profile/ui/CoinPieChartTooltip/index.tsx
@@ -0,0 +1,37 @@
+import type { TooltipContentProps } from 'recharts/types/component/Tooltip';
+import { formatCurrencyKR } from '~/shared/utils';
+import type { CoinPieChartData } from '../../types/chart.type';
+
+export default function CoinPieChartTooltip({
+ active,
+ payload,
+}: TooltipContentProps) {
+ if (!active) return null;
+
+ const payloadData = payload[0].payload as CoinPieChartData;
+ return (
+ ;
+
+export default function TradingHistoryCancelButton({
+ status,
+ orderId,
+ ...props
+}: TradingHistoryCancelButtonProps) {
+ const location = useLocation();
+ const fetcher = useFetcher();
+ const isDeleting = fetcher.state !== 'idle';
+
+ let text = '';
+
+ switch (status) {
+ case OrderStatus.UNSETTLED:
+ case OrderStatus.IN_PROGRESS:
+ text = '취소';
+ break;
+ case OrderStatus.SETTLED:
+ text = '체결완료';
+ break;
+ }
+
+ const isDisabled = status === OrderStatus.SETTLED || isDeleting;
+
+ return (
+ <>
+ {isDeleting ? (
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/features/profile/ui/TradingHistoryList/index.tsx b/src/features/profile/ui/TradingHistoryList/index.tsx
new file mode 100644
index 0000000..64c365a
--- /dev/null
+++ b/src/features/profile/ui/TradingHistoryList/index.tsx
@@ -0,0 +1,98 @@
+import { useSearchParams } from 'react-router';
+
+import useScrollTo from '~/shared/hooks/useScrollTo';
+import NoContent from '~/shared/ui/NoContent';
+import Pagination from '~/shared/ui/Pagination';
+import Tab from '~/shared/ui/Tab';
+import type { HistoryResponseData } from '../../types/tradingHistory.type';
+import TradingHistoryListItem from '../TradingHistoryListItem';
+
+type TradingHistoryListProps = {
+ historyData: HistoryResponseData;
+};
+
+export default function TradingHistoryList({
+ historyData,
+}: TradingHistoryListProps) {
+ const scrollContainerRef = useScrollTo([], {
+ top: 0,
+ behavior: 'instant',
+ });
+
+ const [searchParams, setSearchParams] = useSearchParams({
+ p: '1',
+ t: 'unsettled',
+ });
+ const currentPage = Number(searchParams.get('p'));
+ const tab = searchParams.get('t') || 'unsettled';
+ const noContentTitle =
+ tab === 'unsettled' ? '미체결 내역이 없습니다.' : '체결 내역이 없습니다.';
+
+ const handleTabClick = (value: string) => {
+ setSearchParams({ p: '1', t: value });
+ };
+
+ const handleClickPageNumber = (page: number) => {
+ setSearchParams({ p: page.toString(), t: tab });
+ };
+
+ const handlePrevClick = () => {
+ setSearchParams({
+ p: (currentPage - 1).toString(),
+ t: tab,
+ });
+ };
+
+ const handleNextClick = () => {
+ setSearchParams({
+ p: (currentPage + 1).toString(),
+ t: tab,
+ });
+ };
+
+ return (
+ ) {
+ const { side, ticker, orderStatus, orderType } = props;
+ const typeText = side === Side.ASK ? '매도' : '매수';
+ const priceText =
+ side === Side.ASK && orderType === OrderType.MARKET
+ ? '시장가 매도'
+ : `${formatCurrencyKR(props.price)}원`;
+ const sizeText =
+ side === Side.BID && orderType === OrderType.MARKET
+ ? '시장가 매수'
+ : `${formatCurrencyKR(props.orderSize)}개`;
+
+ return (
+
+ {typeText}
+ {ticker}
+ {priceText}
+ {sizeText}
+ {formatDateKr(new Date(tradeTime))}
+
+ );
+}
diff --git a/src/features/profile/utils/index.ts b/src/features/profile/utils/index.ts
new file mode 100644
index 0000000..0520172
--- /dev/null
+++ b/src/features/profile/utils/index.ts
@@ -0,0 +1,32 @@
+import type { UserInfoResponseData } from '~/entities/user';
+import type { CoinPieChartData } from '../types/chart.type';
+
+export function generateCoinPieChartData(
+ data: UserInfoResponseData,
+): CoinPieChartData[] {
+ const pieChartData = data.wallets
+ .map((item) => ({
+ name: item.name,
+ ticker: item.ticker,
+ accountId: item.accountId,
+ totalPrice: item.size * item.buyPrice,
+ averagePrice: item.buyPrice,
+ quantity: item.size,
+ roi: item.roi,
+ currentPrice: item.currentPrice,
+ }))
+ .sort((a, b) => b.totalPrice - a.totalPrice);
+
+ pieChartData.push({
+ name: '원화',
+ ticker: 'KRW',
+ accountId: 0,
+ totalPrice: data.cash,
+ averagePrice: data.cash,
+ quantity: 0,
+ roi: 0,
+ currentPrice: data.cash,
+ });
+
+ return pieChartData;
+}
diff --git a/src/features/tradeview/hooks/useOrderBookData.tsx b/src/features/tradeview/hooks/useOrderBookData.tsx
index 8dd231c..a1c611e 100644
--- a/src/features/tradeview/hooks/useOrderBookData.tsx
+++ b/src/features/tradeview/hooks/useOrderBookData.tsx
@@ -20,12 +20,14 @@ export default function useOrderBookData(ticker: CoinTicker) {
const parsedData = JSON.parse(message.body) as RawOrderBookData;
setData({
ticker: parsedData.ticker,
- buyOrderBookUnits: parsedData.buyOrderBookUnits.map((unit) => ({
- price: String(unit.price),
+ buyOrderBookChartData: parsedData.buyOrderBookUnits.map((unit) => ({
+ name: String(unit.price),
+ price: Number(unit.price),
size: Number(unit.size),
})),
- sellOrderBookUnits: parsedData.sellOrderBookUnits.map((unit) => ({
- price: String(unit.price),
+ sellOrderBookChartData: parsedData.sellOrderBookUnits.map((unit) => ({
+ name: String(unit.price),
+ price: Number(unit.price),
size: Number(unit.size),
})),
});
diff --git a/src/features/tradeview/hooks/useScrollMiddle.tsx b/src/features/tradeview/hooks/useScrollMiddle.tsx
new file mode 100644
index 0000000..1efcf89
--- /dev/null
+++ b/src/features/tradeview/hooks/useScrollMiddle.tsx
@@ -0,0 +1,18 @@
+import { type RefObject, useEffect, useRef } from 'react';
+
+export default function useScrollMiddle(
+ scrollContainerRef: RefObject,
+ dependency: unknown,
+) {
+ const isFirstRendered = useRef(true);
+
+ useEffect(() => {
+ const scrollContainer = scrollContainerRef.current;
+ if (!scrollContainer || !isFirstRendered.current || !dependency) return;
+
+ const middle = scrollContainer.clientHeight / 2;
+ scrollContainer.scrollTo({ top: middle });
+
+ isFirstRendered.current = false;
+ }, [dependency, scrollContainerRef]);
+}
diff --git a/src/features/tradeview/types/orderbook.type.ts b/src/features/tradeview/types/orderbook.type.ts
index 4b3476b..4ef4728 100644
--- a/src/features/tradeview/types/orderbook.type.ts
+++ b/src/features/tradeview/types/orderbook.type.ts
@@ -1,9 +1,7 @@
-type Price = string;
-type Size = number;
-
-export type OrderBookUnit = {
- price: Price;
- size: Size;
+export type OrderBookChartData = {
+ name: string;
+ price: number;
+ size: number;
};
export type OrderBookUnitRaw = {
@@ -13,8 +11,8 @@ export type OrderBookUnitRaw = {
export type OrderBookData = {
ticker: string;
- buyOrderBookUnits: OrderBookUnit[];
- sellOrderBookUnits: OrderBookUnit[];
+ buyOrderBookChartData: OrderBookChartData[];
+ sellOrderBookChartData: OrderBookChartData[];
};
export type RawOrderBookData = {
diff --git a/src/features/tradeview/ui/Orderbook/chart.tsx b/src/features/tradeview/ui/Orderbook/chart.tsx
index cb380ea..ae43521 100644
--- a/src/features/tradeview/ui/Orderbook/chart.tsx
+++ b/src/features/tradeview/ui/Orderbook/chart.tsx
@@ -1,167 +1,65 @@
-import * as am5 from '@amcharts/amcharts5';
-import * as am5xy from '@amcharts/amcharts5/xy';
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import clsx from 'clsx';
+import {
+ Bar,
+ BarChart,
+ LabelList,
+ ResponsiveContainer,
+ XAxis,
+ YAxis,
+} from 'recharts';
import { formatCurrencyKR } from '~/shared/utils';
-import type { OrderBookUnit } from '../../types/orderbook.type';
-
-const THEME = {
- bull: {
- barColor: am5.color('#e12343'),
- textColor: am5.color('#fff'),
- },
- bear: {
- barColor: am5.color('#1772f8'),
- textColor: am5.color('#fff'),
- },
-};
+import type { OrderBookChartData } from '../../types/orderbook.type';
export type OrderbookChartProps = {
- data: OrderBookUnit[];
+ data: OrderBookChartData[];
type?: 'bull' | 'bear';
+ layout?: 'vertical' | 'horizontal';
};
export default function OrderbookChart({
data,
type = 'bull',
+ layout = 'vertical',
}: Readonly) {
- const xAxisRef = useRef>(null);
- const yAxisRef = useRef>(null);
- const seriesRef = useRef(null);
- const chartRef = useRef(null);
- const rootRef = useRef(null);
-
- useEffect(() => {
- if (!chartRef.current || !yAxisRef.current || !seriesRef.current) return;
-
- const formattedData = data.map((item) => ({
- price: formatCurrencyKR(+item.price),
- size: item.size,
- priceY: item.price,
- sizeX: item.size,
- }));
-
- yAxisRef.current.data.setAll(formattedData);
- seriesRef.current.data.setAll(formattedData);
- }, [data]);
-
- useLayoutEffect(() => {
- rootRef.current = am5.Root.new(`orderbook-${type}`);
-
- chartRef.current = rootRef.current.container.children.push(
- am5xy.XYChart.new(rootRef.current, {
- panX: false,
- panY: false,
- wheelX: 'none',
- wheelY: 'none',
- layout: rootRef.current.verticalLayout,
- paddingBottom: 0,
- paddingLeft: 0,
- paddingRight: 0,
- paddingTop: 0,
- }),
- );
-
- chartRef.current.set(
- 'background',
- am5.Rectangle.new(rootRef.current, {
- stroke: am5.color('#fff'),
- strokeOpacity: 0,
- fillOpacity: 0.05,
- }),
- );
- const yRenderer = am5xy.AxisRendererY.new(rootRef.current, {
- inversed: type === 'bull',
- cellStartLocation: 0,
- cellEndLocation: 1,
- });
-
- yRenderer.labels.template.setAll({
- textAlign: 'center',
- centerY: am5.p50,
- });
-
- yAxisRef.current = chartRef.current.yAxes.push(
- am5xy.CategoryAxis.new(rootRef.current, {
- categoryField: 'price',
- renderer: yRenderer,
- }),
- );
-
- xAxisRef.current = chartRef.current.xAxes.push(
- am5xy.ValueAxis.new(rootRef.current, {
- renderer: am5xy.AxisRendererX.new(rootRef.current, {
- strokeOpacity: 1,
- stroke: am5.color('#cccccc'),
- strokeWidth: 1,
- }),
- min: 0,
- visible: false,
- strictMinMax: true,
- max: undefined,
- autoZoom: true,
- }),
- );
-
- seriesRef.current = chartRef.current.series.push(
- am5xy.ColumnSeries.new(rootRef.current, {
- name: '실시간 호가',
- xAxis: xAxisRef.current,
- yAxis: yAxisRef.current,
- valueXField: 'size',
- categoryYField: 'price',
- sequencedInterpolation: true,
- tooltip: am5.Tooltip.new(rootRef.current, {
- pointerOrientation: 'horizontal',
- labelText: "[bold]{priceY.formatNumber('#,###.##')}원 {sizeX}개",
- }),
- paddingBottom: 0,
- paddingTop: 0,
- visible: true,
- }),
- );
-
- seriesRef.current.columns.template.setAll({
- height: am5.p100,
- strokeOpacity: 1,
- stroke: THEME[type].barColor,
- strokeWidth: 0.5,
- fillOpacity: 0.8,
- fill: THEME[type].barColor,
- width: am5.p100,
- });
-
- seriesRef.current?.bullets.push(() => {
- if (!rootRef.current) return;
- return am5.Bullet.new(rootRef.current, {
- locationX: 0,
- locationY: 0.5,
- sprite: am5.Label.new(rootRef.current, {
- centerY: am5.p50,
- text: '{sizeX}',
- populateText: true,
- fill: THEME[type].textColor,
- }),
- });
- });
-
- const cursor = chartRef.current?.set(
- 'cursor',
- am5xy.XYCursor.new(rootRef.current, {}),
- );
- cursor?.lineY.set('forceHidden', true);
- cursor?.lineX.set('forceHidden', true);
-
- return () => {
- chartRef.current?.dispose();
- rootRef.current?.dispose();
- };
- }, [type]);
+ const color = type === 'bull' ? '#FDD2D7' : '#CDE0FE';
+ // 매도는 price 기준 내림차순 정렬
+ const displayData =
+ type === 'bear' ? [...data].sort((a, b) => b.price - a.price) : data;
return (
+ className={clsx(
+ 'flex h-full min-h-full w-full px-1',
+ type === 'bull' ? 'bg-red-50' : 'bg-blue-50',
+ )}
+ >
+
);
}
diff --git a/src/features/tradeview/ui/Orderbook/index.tsx b/src/features/tradeview/ui/Orderbook/index.tsx
index cd9d9ab..b41cab4 100644
--- a/src/features/tradeview/ui/Orderbook/index.tsx
+++ b/src/features/tradeview/ui/Orderbook/index.tsx
@@ -1,5 +1,8 @@
+import { useRef } from 'react';
+
import type { CoinTicker } from '~/entities/coin';
import useOrderBookData from '../../hooks/useOrderBookData';
+import useScrollMiddle from '../../hooks/useScrollMiddle';
import OrderbookChart from './chart';
type OrderbookProps = {
@@ -8,11 +11,18 @@ type OrderbookProps = {
export default function Orderbook({ ticker }: OrderbookProps) {
const data = useOrderBookData(ticker);
+ const scrollContainerRef = useRef
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/features/profile/ui/CoinAssetTable/index.tsx b/src/features/profile/ui/CoinAssetTable/index.tsx
new file mode 100644
index 0000000..45277f5
--- /dev/null
+++ b/src/features/profile/ui/CoinAssetTable/index.tsx
@@ -0,0 +1,86 @@
+import type { RefObject } from 'react';
+import NoContent from '~/shared/ui/NoContent';
+import { formatCurrencyKR } from '~/shared/utils';
+import {
+ COLORS,
+ TABLE_HEAD_HEIGHT,
+ TABLE_ROW_HEIGHT,
+} from '../../const/chart.const';
+import type { CoinPieChartData } from '../../types/chart.type';
+
+type CoinAssetTableProps = {
+ coinData: CoinPieChartData[];
+ ref?: RefObject{label}
+
+
+
+
+
+
+ );
+}
diff --git a/src/features/profile/ui/CoinPieChart/index.tsx b/src/features/profile/ui/CoinPieChart/index.tsx
new file mode 100644
index 0000000..161b0f5
--- /dev/null
+++ b/src/features/profile/ui/CoinPieChart/index.tsx
@@ -0,0 +1,40 @@
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { COLORS } from '../../const/chart.const';
+import type { CoinPieChartData } from '../../types/chart.type';
+import CoinPieChartActiveShape from '../CoinPieChartActiveShape';
+
+export type CoinPieChartProps = {
+ coinData: CoinPieChartData[];
+ onClick?: (data: CoinPieChartData) => void;
+};
+
+export default function CoinPieChart({ coinData, onClick }: CoinPieChartProps) {
+ const handleClick = ({ payload }: { payload: CoinPieChartData }) => {
+ onClick?.(payload);
+ };
+
+ return (
+ | + | 티커 | +평균단가 | +평가금액 | +수익률 | +
|---|---|---|---|---|
| + + | ++ {coin.ticker} + | ++ {formatCurrencyKR(coin.averagePrice)}원 + | ++ {formatCurrencyKR(coin.totalPrice)}원 + | ++ {coin.roi}% + | +
+
+ {payloadData.ticker}
+
+
+ );
+}
diff --git a/src/features/profile/ui/TradingHistoryCancelButton/index.tsx b/src/features/profile/ui/TradingHistoryCancelButton/index.tsx
new file mode 100644
index 0000000..f0a1684
--- /dev/null
+++ b/src/features/profile/ui/TradingHistoryCancelButton/index.tsx
@@ -0,0 +1,56 @@
+import type { ButtonHTMLAttributes } from 'react';
+import { useFetcher, useLocation } from 'react-router';
+import Spinner from '~/shared/ui/Spinner';
+import {
+ OrderStatus,
+ type TradingHistory,
+} from '../../types/tradingHistory.type';
+
+type TradingHistoryCancelButtonProps = {
+ status: TradingHistory['orderStatus'];
+ orderId: string;
+} & ButtonHTMLAttributes+ 평균매수가격:{' '} + + {formatCurrencyKR(payloadData.averagePrice)}원 + +
++ 매수수량:{' '} + + {payloadData.quantity}개 + +
++ 총매수금액:{' '} + + {formatCurrencyKR(payloadData.totalPrice)}원 + +
+
+
+ );
+}
diff --git a/src/features/profile/ui/TradingHistoryListItem/index.tsx b/src/features/profile/ui/TradingHistoryListItem/index.tsx
new file mode 100644
index 0000000..aac3ab6
--- /dev/null
+++ b/src/features/profile/ui/TradingHistoryListItem/index.tsx
@@ -0,0 +1,40 @@
+import { formatDateKr } from '~/features/tradeview/utils';
+import { formatCurrencyKR } from '~/shared/utils';
+import {
+ OrderType,
+ Side,
+ type TradingHistory,
+} from '../../types/tradingHistory.type';
+import TradingHistoryCancelButton from '../TradingHistoryCancelButton';
+
+type TradingHistoryListItemProps = TradingHistory;
+
+export default function TradingHistoryListItem({
+ tradeTime,
+ orderId,
+ ...props
+}: Readonly
+ 매매종류
+ 종목
+ 가격
+ 수량
+ 거래시간
+
+ {tab === 'unsettled' ? '주문 취소' : '상태'}
+
+
+ -
+ {historyData.orderList.length ? (
+ historyData.orderList.map((item) => (
+
+
+
+ {displayData.map((item) => (
+
+
+ {formatCurrencyKR(item.price)}
+
+ ))}
+
+
+
+
+
+
+
+
+
- {data && (data: T) {
+ const response: Response = {
+ data: data,
+ isSuccess: true,
+ error: null,
+ };
+
+ return response;
+}
export const handlers = [
- http.get('/api/tokencheck', async ({ cookies }) => {
+ http.get(api('tokencheck'), async ({ cookies }) => {
if (!cookies.access_token) {
return new HttpResponse(null, { status: 401 });
}
return new HttpResponse(null, { status: 200 });
}),
+ http.get(api('userinfo'), async () => {
+ return HttpResponse.json(successResponse(DUMMY_USERINFO_DATA), {
+ status: 200,
+ });
+ }),
+ http.get(api('userinfo/trades'), async ({ request }) => {
+ const { searchParams } = new URL(request.url);
+ const page = Number(searchParams.get('page') || 1);
+ const size = Number(searchParams.get('size') || 10);
+ const settled = searchParams.get('settled') === 'true';
+
+ const filteredOrderlist = historyList.filter((item) =>
+ settled
+ ? item.orderStatus === OrderStatus.SETTLED
+ : item.orderStatus !== OrderStatus.SETTLED,
+ );
+
+ const firstItemIndex = (page - 1) * size;
+ const lastItemIndex = page * size - 1;
+
+ const historyData: HistoryResponseData = {
+ orderList: filteredOrderlist.slice(firstItemIndex, lastItemIndex + 1),
+ totalPages: Math.ceil(filteredOrderlist.length / size),
+ currentPage: page,
+ pageSize: size,
+ totalElements: filteredOrderlist.length,
+ };
+
+ if (page < 1 || size < 1 || firstItemIndex < 0) {
+ return HttpResponse.json('잘못된 요청입니다.', {
+ status: 400,
+ });
+ }
+
+ return HttpResponse.json(successResponse(historyData), {
+ status: 200,
+ });
+ }),
+ http.delete(api('userinfo/trades'), async ({ request }) => {
+ const { searchParams } = new URL(request.url);
+ const orderId = searchParams.get('orderId');
+
+ if (!orderId) {
+ return HttpResponse.json('잘못된 요청입니다.', {
+ status: 400,
+ });
+ }
+
+ historyList = historyList.filter((item) => item.orderId !== orderId);
+
+ return HttpResponse.json(successResponse(null), {
+ status: 205,
+ });
+ }),
];
/* v8 ignore end */
diff --git a/src/shared/hooks/hooks.test.tsx b/src/shared/hooks/hooks.test.tsx
index 9ee6cce..acfc96c 100644
--- a/src/shared/hooks/hooks.test.tsx
+++ b/src/shared/hooks/hooks.test.tsx
@@ -3,7 +3,7 @@ import { describe, expect, it, vi } from 'vitest';
import useClickOutside from './useClickOutside';
import useDimensions from './useDimensions';
-import useScrollToBottom from './useScrollToBottom';
+import useScrollIntoView from './useScrollIntoView';
describe('useClickOutside 훅 테스트', () => {
it('ref가 부착된 컴포넌트가 아닌 바깥 컴포넌트를 클릭하면 callback함수가 실행된다.', () => {
@@ -50,8 +50,10 @@ describe('useScrollToBottom 훅 테스트', () => {
const mockScrollIntoView = vi.fn();
const { result, rerender } = renderHook(
- ({ deps }) => useScrollToBottom(deps),
- { initialProps: { deps: [1] } },
+ ({ deps }) => useScrollIntoView(deps),
+ {
+ initialProps: { deps: [1] },
+ },
);
act(() => {
diff --git a/src/shared/hooks/useCustomReferer.tsx b/src/shared/hooks/useCustomReferer.tsx
new file mode 100644
index 0000000..69e2f81
--- /dev/null
+++ b/src/shared/hooks/useCustomReferer.tsx
@@ -0,0 +1,7 @@
+import { useSearchParams } from 'react-router';
+
+export default function useCustomReferer() {
+ const [searchParams] = useSearchParams();
+
+ return searchParams.get('referer');
+}
diff --git a/src/shared/hooks/useScrollToBottom.tsx b/src/shared/hooks/useScrollIntoView.tsx
similarity index 56%
rename from src/shared/hooks/useScrollToBottom.tsx
rename to src/shared/hooks/useScrollIntoView.tsx
index 4c40eba..4ded5c6 100644
--- a/src/shared/hooks/useScrollToBottom.tsx
+++ b/src/shared/hooks/useScrollIntoView.tsx
@@ -1,19 +1,16 @@
import { useEffect, useRef } from 'react';
import type { DependencyList } from 'react';
-export default function useScrollToBottom<
+export default function useScrollIntoView<
T extends HTMLElement = HTMLDivElement,
->(dependencies: DependencyList = []) {
+>(dependencies: DependencyList = [], options?: ScrollIntoViewOptions) {
const bottomElementRef = useRef(null);
useEffect(() => {
if (!bottomElementRef.current) return;
- bottomElementRef.current.scrollIntoView({
- behavior: 'smooth',
- block: 'end',
- });
- }, dependencies);
+ bottomElementRef.current.scrollIntoView(options);
+ }, [...dependencies, options]);
return bottomElementRef;
}
diff --git a/src/shared/hooks/useScrollTo.tsx b/src/shared/hooks/useScrollTo.tsx
new file mode 100644
index 0000000..d040a40
--- /dev/null
+++ b/src/shared/hooks/useScrollTo.tsx
@@ -0,0 +1,18 @@
+import { type DependencyList, useEffect, useRef } from 'react';
+
+export default function useScrollTo(
+ dependencies: DependencyList = [],
+ options?: ScrollToOptions,
+) {
+ const scrollContainerRef = useRef(null);
+
+ useEffect(() => {
+ const scrollContainer = scrollContainerRef.current;
+
+ if (!scrollContainer) return;
+
+ scrollContainer.scrollTo(options);
+ }, [...dependencies, options]);
+
+ return scrollContainerRef;
+}
diff --git a/src/shared/ui/Button/index.tsx b/src/shared/ui/Button/index.tsx
index f7874d7..549edeb 100644
--- a/src/shared/ui/Button/index.tsx
+++ b/src/shared/ui/Button/index.tsx
@@ -1,13 +1,24 @@
+import clsx from 'clsx';
import type { ButtonHTMLAttributes, ReactNode } from 'react';
export type ButtonProps = {
children: ReactNode;
+ buttonStyle?: 'primary' | 'secondary' | 'warn';
} & ButtonHTMLAttributes;
-export default function Button({ children, ...props }: ButtonProps) {
+export default function Button({
+ children,
+ buttonStyle = 'primary',
+ ...props
+}: ButtonProps) {
return (
+ {data && (
+
);
}
diff --git a/src/features/tradeview/ui/StockChart/index.tsx b/src/features/tradeview/ui/StockChart/index.tsx
index 697fa2f..13e5e93 100644
--- a/src/features/tradeview/ui/StockChart/index.tsx
+++ b/src/features/tradeview/ui/StockChart/index.tsx
@@ -15,10 +15,11 @@ import {
useState,
} from 'react';
-import ChartContainer from './ChartContainer';
-import ChartRoot from './ChartRoot';
-import Series from './Series';
-import ToolTip from './ToolTip';
+import ChartContainer from '../../../../shared/ui/Chart/ChartContainer';
+import ChartRoot from '../../../../shared/ui/Chart/ChartRoot';
+import Series from '../../../../shared/ui/Chart/Series';
+import ToolTip from '../../../../shared/ui/Chart/ToolTip';
+import IntervalSelector from '../IntervalSelector';
import api from '../../api/tradeview.endpoints';
import { INTERVALS, MINUTE } from '../../const/chart.const';
@@ -29,7 +30,6 @@ import {
priceFormatter,
timestampToISOString,
} from '../../utils';
-import IntervalSelector from '../IntervalSelector';
type ChartProps = {
ticker?: string;
diff --git a/src/mocks/dummy.ts b/src/mocks/dummy.ts
new file mode 100644
index 0000000..c4726d3
--- /dev/null
+++ b/src/mocks/dummy.ts
@@ -0,0 +1,442 @@
+import type { UserInfoResponseData } from '~/entities/user';
+import {
+ OrderStatus,
+ OrderType,
+ Side,
+ type TradingHistory,
+} from '~/features/profile/types/tradingHistory.type';
+
+export const DUMMY_USERINFO_DATA: UserInfoResponseData = {
+ userId: 1,
+ email: 'test@gmail.com',
+ nickname: 'test',
+ provider: 'test',
+ cash: 100000,
+ totalAssetAmount: 100000,
+ wallets: [
+ {
+ name: 'BTC',
+ ticker: 'BTC',
+ accountId: 1,
+ buyPrice: 100000,
+ currentPrice: 100000,
+ roi: 0.001,
+ size: 1,
+ },
+ {
+ name: 'ETH',
+ ticker: 'ETH',
+ accountId: 2,
+ buyPrice: 200000,
+ currentPrice: 200000,
+ roi: 0.002,
+ size: 1,
+ },
+ {
+ name: 'SOL',
+ ticker: 'SOL',
+ accountId: 3,
+ buyPrice: 40000,
+ currentPrice: 40000,
+ roi: 0.003,
+ size: 1,
+ },
+ {
+ name: 'ADA',
+ ticker: 'ADA',
+ accountId: 4,
+ buyPrice: 100000,
+ currentPrice: 100000,
+ roi: 0.004,
+ size: 1,
+ },
+ {
+ name: 'ATOM',
+ ticker: 'ATOM',
+ accountId: 5,
+ buyPrice: 50000,
+ currentPrice: 50000,
+ roi: -0.005,
+ size: 1,
+ },
+ {
+ name: 'XRP',
+ ticker: 'XRP',
+ accountId: 6,
+ buyPrice: 25000,
+ currentPrice: 25000,
+ roi: 0.006,
+ size: 1,
+ },
+ ],
+};
+
+export const DUMMY_HISTORY_LIST: TradingHistory[] = [
+ {
+ orderId: '1',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'BTC',
+ name: 'BTC',
+ orderSize: 1,
+ price: 100000,
+ orderStatus: OrderStatus.UNSETTLED,
+ remainingSize: 1,
+ displaySize: 1,
+ tradeTime: '2025-07-23T21:02:59.000Z',
+ },
+ {
+ orderId: '2',
+ side: Side.BID,
+ orderType: OrderType.MARKET,
+ ticker: 'ETH',
+ name: 'ETH',
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T21:02:59.000Z',
+ price: 200000,
+ },
+ {
+ orderId: '3',
+ side: Side.ASK,
+ orderType: OrderType.MARKET,
+ ticker: 'XRP',
+ name: 'XRP',
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T21:02:59.000Z',
+ orderSize: 1,
+ remainingSize: 1,
+ displaySize: 1,
+ },
+ {
+ orderId: '4',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'ADA',
+ name: 'Cardano',
+ price: 600,
+ orderSize: 300,
+ remainingSize: 150,
+ displaySize: 300,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:58:30.000Z',
+ },
+ {
+ orderId: '5',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'SOL',
+ name: 'Solana',
+ price: 65000,
+ orderSize: 5,
+ remainingSize: 2,
+ displaySize: 5,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:55:15.000Z',
+ },
+ {
+ orderId: '6',
+ side: Side.BID,
+ orderType: OrderType.MARKET,
+ ticker: 'DOGE',
+ name: 'Dogecoin',
+ price: 100000,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:52:45.000Z',
+ },
+ {
+ orderId: '7',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'MATIC',
+ name: 'Polygon',
+ price: 800,
+ orderSize: 200,
+ remainingSize: 80,
+ displaySize: 200,
+ orderStatus: OrderStatus.IN_PROGRESS,
+ tradeTime: '2025-07-23T20:50:20.000Z',
+ },
+ {
+ orderId: '8',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'DOT',
+ name: 'Polkadot',
+ price: 8500,
+ orderSize: 15,
+ remainingSize: 5,
+ displaySize: 15,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:48:10.000Z',
+ },
+ {
+ orderId: '9',
+ side: Side.ASK,
+ orderType: OrderType.MARKET,
+ ticker: 'LINK',
+ name: 'Chainlink',
+ orderSize: 1,
+ remainingSize: 1,
+ displaySize: 1,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:45:35.000Z',
+ },
+ {
+ orderId: '10',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'AVAX',
+ name: 'Avalanche',
+ price: 18000,
+ orderSize: 25,
+ remainingSize: 10,
+ displaySize: 25,
+ orderStatus: OrderStatus.IN_PROGRESS,
+ tradeTime: '2025-07-23T20:42:50.000Z',
+ },
+ {
+ orderId: '11',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'LTC',
+ name: 'Litecoin',
+ price: 70000,
+ orderSize: 8,
+ remainingSize: 3,
+ displaySize: 8,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:40:25.000Z',
+ },
+ {
+ orderId: '12',
+ side: Side.BID,
+ orderType: OrderType.MARKET,
+ ticker: 'BNB',
+ name: 'Binance Coin',
+ price: 100000,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:38:15.000Z',
+ },
+ {
+ orderId: '13',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'ATOM',
+ name: 'Cosmos',
+ price: 8400,
+ orderSize: 30,
+ remainingSize: 12,
+ displaySize: 30,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:35:40.000Z',
+ },
+ {
+ orderId: '14',
+ side: Side.BID,
+ orderType: OrderType.MARKET,
+ ticker: 'SHIB',
+ name: 'Shiba Inu',
+ price: 100000,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:33:20.000Z',
+ },
+ {
+ orderId: '15',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'XLM',
+ name: 'Stellar',
+ price: 200,
+ orderSize: 500,
+ remainingSize: 200,
+ displaySize: 500,
+ orderStatus: OrderStatus.IN_PROGRESS,
+ tradeTime: '2025-07-23T20:30:55.000Z',
+ },
+ {
+ orderId: '16',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'UNI',
+ name: 'Uniswap',
+ price: 6500,
+ orderSize: 40,
+ remainingSize: 15,
+ displaySize: 40,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:28:30.000Z',
+ },
+ {
+ orderId: '17',
+ side: Side.ASK,
+ orderType: OrderType.MARKET,
+ ticker: 'SAND',
+ name: 'The Sandbox',
+ orderSize: 1,
+ remainingSize: 1,
+ displaySize: 1,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:26:15.000Z',
+ },
+ {
+ orderId: '18',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'MANA',
+ name: 'Decentraland',
+ price: 380,
+ orderSize: 100,
+ remainingSize: 45,
+ displaySize: 100,
+ orderStatus: OrderStatus.IN_PROGRESS,
+ tradeTime: '2025-07-23T20:24:00.000Z',
+ },
+ {
+ orderId: '19',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'ALGO',
+ name: 'Algorand',
+ price: 150,
+ orderSize: 800,
+ remainingSize: 300,
+ displaySize: 800,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:21:45.000Z',
+ },
+ {
+ orderId: '20',
+ side: Side.BID,
+ orderType: OrderType.MARKET,
+ ticker: 'FTM',
+ name: 'Fantom',
+ price: 250,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:19:30.000Z',
+ },
+ {
+ orderId: '21',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'NEAR',
+ name: 'NEAR Protocol',
+ price: 2800,
+ orderSize: 60,
+ remainingSize: 25,
+ displaySize: 60,
+ orderStatus: OrderStatus.IN_PROGRESS,
+ tradeTime: '2025-07-23T20:17:10.000Z',
+ },
+ {
+ orderId: '22',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'HBAR',
+ name: 'Hedera',
+ price: 50,
+ orderSize: 2000,
+ remainingSize: 800,
+ displaySize: 2000,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:14:55.000Z',
+ },
+ {
+ orderId: '23',
+ side: Side.ASK,
+ orderType: OrderType.MARKET,
+ ticker: 'VET',
+ name: 'VeChain',
+ orderSize: 1,
+ remainingSize: 1,
+ displaySize: 1,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:12:35.000Z',
+ },
+ {
+ orderId: '24',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'ICP',
+ name: 'Internet Computer',
+ price: 4200,
+ orderSize: 12,
+ remainingSize: 4,
+ displaySize: 12,
+ orderStatus: OrderStatus.IN_PROGRESS,
+ tradeTime: '2025-07-23T20:10:20.000Z',
+ },
+ {
+ orderId: '25',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'FLOW',
+ name: 'Flow',
+ price: 650,
+ orderSize: 150,
+ remainingSize: 60,
+ displaySize: 150,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:08:05.000Z',
+ },
+ {
+ orderId: '26',
+ side: Side.BID,
+ orderType: OrderType.MARKET,
+ ticker: 'THETA',
+ name: 'Theta Network',
+ price: 100000,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T20:05:50.000Z',
+ },
+ {
+ orderId: '27',
+ side: Side.ASK,
+ orderType: OrderType.LIMIT,
+ ticker: 'EGLD',
+ name: 'MultiversX',
+ price: 15000,
+ orderSize: 6,
+ remainingSize: 2,
+ displaySize: 6,
+ orderStatus: OrderStatus.IN_PROGRESS,
+ tradeTime: '2025-07-23T20:03:30.000Z',
+ },
+ {
+ orderId: '28',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'XTZ',
+ name: 'Tezos',
+ price: 900,
+ orderSize: 90,
+ remainingSize: 35,
+ displaySize: 90,
+ orderStatus: OrderStatus.UNSETTLED,
+ tradeTime: '2025-07-23T20:01:15.000Z',
+ },
+ {
+ orderId: '29',
+ side: Side.ASK,
+ orderType: OrderType.MARKET,
+ ticker: 'AAVE',
+ name: 'Aave',
+ orderSize: 1,
+ remainingSize: 1,
+ displaySize: 1,
+ orderStatus: OrderStatus.SETTLED,
+ tradeTime: '2025-07-23T19:59:00.000Z',
+ },
+ {
+ orderId: '30',
+ side: Side.BID,
+ orderType: OrderType.LIMIT,
+ ticker: 'CRV',
+ name: 'Curve DAO Token',
+ price: 320,
+ orderSize: 200,
+ remainingSize: 75,
+ displaySize: 200,
+ orderStatus: OrderStatus.IN_PROGRESS,
+ tradeTime: '2025-07-23T19:56:45.000Z',
+ },
+];
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index a422d26..7d7734e 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -1,12 +1,88 @@
/* v8 ignore start */
import { http, HttpResponse } from 'msw';
+import {
+ type HistoryResponseData,
+ OrderStatus,
+} from '~/features/profile/types/tradingHistory.type';
+import type { Response } from '~/shared/types/api';
+import { DUMMY_HISTORY_LIST, DUMMY_USERINFO_DATA } from './dummy';
+
+let historyList = [...DUMMY_HISTORY_LIST];
+
+function api(endpoint: string) {
+ return `http://localhost:8080/api/${endpoint}`;
+}
+
+function successResponse