Merge pull request #39 from CleanEngine/develop

feat: 프로필 기능, 테스트 인프라, UI/UX 개선 등 대규모 업데이트

Author: BHyeonKim

README.md

@@ -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": {

biome.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": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
 	"msw": {
-		"workerDirectory": ["public"]
+		"workerDirectory": [
+			"public"
+		]
 	}
 }

package.json

@@ -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;

react-router.config.ts

@@ -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(() => {

src/app/entry.client.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: <explanation>
+		console.log('MSW intercepted:', request.method, request.url);
+	});
+}
+
 function handleRequest(
 	request: Request,
 	responseStatusCode: number,
@@ -51,7 +57,9 @@ function handleRequest(
 						}),
 					);
 
-					pipe(getMetaTagTransformer(body));
+					/* Sentry 설정 제외 */
+					// pipe(getMetaTagTransformer(body));
+					pipe(body);
 				},
 				onShellError(error: unknown) {
 					reject(error);
@@ -75,5 +83,7 @@ function handleRequest(
 	});
 }
 
-export default wrapSentryHandleRequest(handleRequest);
+/* Sentry 설정 제외 */
+// export default wrapSentryHandleRequest(handleRequest);
+export default handleRequest;
 /* v8 ignore end */

src/app/entry.server.tsx

@@ -1,36 +1,106 @@
-import { renderHook } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import StompProvider, { useStompClient } from './StompProvider';
 
-vi.mock('@stomp/stompjs', () => {
+const brokerURL = 'ws://localhost:8080';
+
+const { MockClient } = vi.hoisted(() => {
 	return {
-		Client: vi.fn().mockImplementation(() => {
-			return {
-				activate: vi.fn(),
-				deactivate: vi.fn(),
-				onConnect: null,
-				onDisconnect: null,
-				onWebSocketError: null,
-				onStompError: null,
-			};
+		MockClient: vi.fn(function (this: any, config: any) {
+			this.brokerURL = config.brokerURL;
+			this.activate = vi.fn();
+			this.deactivate = vi.fn();
+			this.onConnect = null;
+			this.onDisconnect = null;
+			this.onWebSocketError = null;
+			this.onStompError = null;
 		}),
 	};
 });
 
+vi.mock('@stomp/stompjs', () => {
+	return {
+		Client: MockClient,
+	};
+});
+
 describe('useStompClient 테스트', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
 	it('useStompClient hook은 StompProvider 외부에서 사용하면 에러를 던진다.', () => {
 		expect(() => renderHook(() => useStompClient())).toThrowError();
 	});
 
-	it('useStompClient hook은 StompProvider 내부에서 사용하면 정상 작동한다.', () => {
+	it('초기 상태에서는 connected가 false이다.', () => {
 		const { result } = renderHook(() => useStompClient(), {
 			wrapper: ({ children }) => (
-				<StompProvider brokerURL="">{children}</StompProvider>
+				<StompProvider brokerURL={brokerURL}>{children}</StompProvider>
 			),
 		});
 
 		expect(result.current).toHaveProperty('client');
+		expect(result.current.client).toBeTruthy();
 		expect(result.current).toHaveProperty('connected');
+		expect(result.current.connected).toBe(false);
+	});
+
+	it('onConnect 콜백이 호출되면 connected가 true가 된다.', () => {
+		const { result } = renderHook(() => useStompClient(), {
+			wrapper: ({ children }) => (
+				<StompProvider brokerURL={brokerURL}>{children}</StompProvider>
+			),
+		});
+
+		expect(result.current.connected).toBe(false);
+
+		act(() => {
+			const clientInstance = MockClient.mock.instances[0] as any;
+			clientInstance?.onConnect?.();
+		});
+
+		expect(result.current.connected).toBe(true);
+	});
+
+	it('onDisconnect 콜백이 호출되면 connected가 false가 된다.', () => {
+		const { result } = renderHook(() => useStompClient(), {
+			wrapper: ({ children }) => (
+				<StompProvider brokerURL={brokerURL}>{children}</StompProvider>
+			),
+		});
+
+		const clientInstance = MockClient.mock.instances[0] as any;
+		act(() => {
+			clientInstance?.onConnect?.();
+		});
+		expect(result.current.connected).toBe(true);
+
+		act(() => {
+			clientInstance?.onDisconnect?.();
+		});
+
+		expect(result.current.connected).toBe(false);
+	});
+
+	it('onWebSocketError 콜백이 호출되면 connected가 false가 된다.', () => {
+		const { result } = renderHook(() => useStompClient(), {
+			wrapper: ({ children }) => (
+				<StompProvider brokerURL={brokerURL}>{children}</StompProvider>
+			),
+		});
+
+		const clientInstance = MockClient.mock.instances[0] as any;
+		act(() => {
+			clientInstance?.onConnect?.();
+		});
+		expect(result.current.connected).toBe(true);
+
+		act(() => {
+			const mockError = new Error('WebSocket connection failed');
+			clientInstance?.onWebSocketError?.(mockError);
+		});
+
+		expect(result.current.connected).toBe(false);
 	});
 });

src/app/provider/StompProvider.test.tsx

@@ -0,0 +1,61 @@
+import { act, renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import UserIdProvider, { useUserId } from './UserInfoProvider';
+
+vi.mock('window', () => {
+	const mockStore = new Map();
+
+	return {
+		localStorage: {
+			getItem: vi.fn((key) => mockStore.get(key)),
+			setItem: vi.fn((key, value) => mockStore.set(key, value)),
+			removeItem: vi.fn((key) => mockStore.delete(key)),
+			clear: vi.fn(() => mockStore.clear()),
+		},
+	};
+});
+
+const MOCK_USERID = 4;
+
+describe('UserInfoProvider 테스트', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		window.localStorage.clear();
+	});
+
+	it('useUserId hook은 UserInfoProvider 외부에서 사용하면 에러를 던진다.', () => {
+		expect(() => renderHook(() => useUserId())).toThrowError();
+	});
+
+	it('초기 상태에서는 userId가 null이다.', () => {
+		const { result } = renderHook(useUserId, {
+			wrapper: ({ children }) => <UserIdProvider>{children}</UserIdProvider>,
+		});
+
+		expect(result.current.userId).toBe(null);
+	});
+
+	it('초기 마운트 시 로컬스토리지에서 userId를 불러온다.', () => {
+		window.localStorage.setItem('userId', MOCK_USERID.toString());
+
+		const { result } = renderHook(useUserId, {
+			wrapper: ({ children }) => <UserIdProvider>{children}</UserIdProvider>,
+		});
+
+		expect(result.current.userId).toBe(MOCK_USERID);
+	});
+
+	it('setUserId를 호출하면 userId 상태가 업데이트된다.', () => {
+		const { result } = renderHook(useUserId, {
+			wrapper: ({ children }) => <UserIdProvider>{children}</UserIdProvider>,
+		});
+
+		expect(result.current.userId).toBe(null);
+
+		act(() => {
+			result.current.setUserId(MOCK_USERID);
+		});
+
+		expect(result.current.userId).toBe(MOCK_USERID);
+	});
+});