CleanEngine · BHyeonKim · Jun 8, 2025 · Jun 8, 2025
diff --git a/src/app/entry.client.tsx b/src/app/entry.client.tsx
@@ -4,11 +4,6 @@ import { hydrateRoot } from 'react-dom/client';
 import { HydratedRouter } from 'react-router/dom';
 
 async function prepareApp() {
-	// if (process.env.NODE_ENV === 'development') {
-	// 	const { worker } = await import('../mocks/browser');
-	// 	return worker.start({ onUnhandledRequest: 'bypass' });
-	// }
-
 	return Promise.resolve();
 }
 

diff --git a/src/app/entry.server.tsx b/src/app/entry.server.tsx
@@ -10,10 +10,6 @@ import { ServerRouter } from 'react-router';
 
 export const streamTimeout = 5_000;
 
-// if (process.env.NODE_ENV === 'development') {
-// 	server.listen({ onUnhandledRequest: 'bypass' });
-// }
-
 export default function handleRequest(
 	request: Request,
 	responseStatusCode: number,

diff --git a/src/app/provider/StompProvider.tsx b/src/app/provider/StompProvider.tsx
@@ -16,7 +16,7 @@ export const StompContext = createContext<StompContextType | null>(null);
 export default function StompProvider({
 	children,
 	brokerURL,
-}: StompProviderProps) {
+}: Readonly<StompProviderProps>) {
 	const [stompClient, setStompClient] = useState<Client | null>(null);
 	const [isConnected, setIsConnected] = useState(false);
 

diff --git a/src/app/provider/UserInfoProvider.tsx b/src/app/provider/UserInfoProvider.tsx
@@ -18,7 +18,9 @@ type UserIdProviderProps = {
 
 export const UserIdContext = createContext<UserInfoContextType | null>(null);
 
-export default function UserIdProvider({ children }: UserIdProviderProps) {
+export default function UserIdProvider({
+	children,
+}: Readonly<UserIdProviderProps>) {
 	const [userId, setUserId] = useState<UserInfoContextType['userId'] | null>(
 		null,
 	);

diff --git a/src/app/root.tsx b/src/app/root.tsx
@@ -57,7 +57,7 @@ export function meta() {
 	];
 }
 
-export function Layout({ children }: { children: React.ReactNode }) {
+export function Layout({ children }: Readonly<{ children: React.ReactNode }>) {
 	return (
 		<html lang="en">
 			<head>

diff --git a/src/app/routes/callback.tsx b/src/app/routes/callback.tsx
@@ -8,8 +8,8 @@ import ApiClient from '~/shared/api/httpClient';
 import { useUserId } from '../provider/UserInfoProvider';
 
 export async function loader({ request }: LoaderFunctionArgs) {
-	const rawCookie = request.headers.get('Cookie');
-	const cookies = cookie.parse(rawCookie || '');
+	const rawCookie = request.headers.get('Cookie') ?? '';
+	const cookies = cookie.parse(rawCookie);
 	const isAccessTokenExists = !!cookies.access_token;
 
 	if (!isAccessTokenExists) {
@@ -18,7 +18,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 
 	const response = await ApiClient.get<UserInfoResponse>('api/userinfo', {
 		headers: {
-			Cookie: rawCookie || '',
+			Cookie: rawCookie,
 		},
 	});
 

diff --git a/src/app/routes/trade.$ticker.tsx b/src/app/routes/trade.$ticker.tsx
@@ -44,7 +44,7 @@ export default function TradeRouteComponent({
 	loaderData,
 }: Route.ComponentProps) {
 	const { userId } = useUserId();
-	useTradeNotification(userId || 0);
+	useTradeNotification(userId ?? 0);
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const { coinInfo, coinList, isLoggedIn } = loaderData;
 	const coinListWithIcon = coinList.map((coinInfo) => ({

diff --git a/src/features/auth/ui/KakaoLoginButton/index.tsx b/src/features/auth/ui/KakaoLoginButton/index.tsx
@@ -1,7 +1,6 @@
 import { IconKakao } from '~/assets/svgs';
 
 export default function KakaoLoginButton() {
-	//TODO: 카카오 로그인 URL 교체할 것
 	return (
 		<a
 			href={import.meta.env.VITE_OAUTH_URL}

diff --git a/src/features/chat/ui/ChatButton/index.tsx b/src/features/chat/ui/ChatButton/index.tsx
@@ -17,7 +17,10 @@ const buttonVariant = {
 	},
 };
 
-export default function ChatButton({ isOpen, handleClick }: ChatButtonProps) {
+export default function ChatButton({
+	isOpen,
+	handleClick,
+}: Readonly<ChatButtonProps>) {
 	return (
 		<motion.button
 			key="chat-button"

diff --git a/src/features/chat/ui/ChatWindow/index.tsx b/src/features/chat/ui/ChatWindow/index.tsx
@@ -82,7 +82,7 @@ export default function ChatWindow({
 	handleInputValueChange: onInputValueChange,
 	handleSubmit,
 	handleClose,
-}: ChatWindowProps) {
+}: Readonly<ChatWindowProps>) {
 	const containerRef = useRef<HTMLDivElement>(null);
 	const { height } = useDimensions(containerRef);
 	const disabled = state === 'processing' || state === 'complete';

diff --git a/src/features/chat/ui/MessageBox/index.tsx b/src/features/chat/ui/MessageBox/index.tsx
@@ -5,7 +5,10 @@ type MessageBoxProps = {
 	message: string;
 };
 
-export default function MessageBox({ direction, message }: MessageBoxProps) {
+export default function MessageBox({
+	direction,
+	message,
+}: Readonly<MessageBoxProps>) {
 	return (
 		<div
 			className={clsx(

diff --git a/src/features/coin-search-list/ui/CoinListItem/index.tsx b/src/features/coin-search-list/ui/CoinListItem/index.tsx
@@ -16,10 +16,12 @@ export default function CoinListItem({
 	ticker,
 	coinIcon: CoinIcon,
 	to,
-}: CoinListItemProps) {
+}: Readonly<CoinListItemProps>) {
 	const currentPriceData = useCurrentPrice(ticker);
 	const isBull = currentPriceData && currentPriceData.changeRate > 0;
-	const formatedPrice = `${formatCurrencyKR(+(currentPriceData?.currentPrice || 0).toFixed(2))}원`;
+	const formatedPrice = `${formatCurrencyKR(
+		+(currentPriceData?.currentPrice ?? 0).toFixed(2),
+	)}원`;
 
 	return (
 		<Link to={to} className="block px-2">
@@ -41,7 +43,7 @@ export default function CoinListItem({
 				</div>
 				<div className="flex-1 text-right text-sm">
 					<span className={isBull ? 'text-red-600' : 'text-blue-700'}>
-						{(currentPriceData?.changeRate || 0).toFixed(2)}%
+						{(currentPriceData?.changeRate ?? 0).toFixed(2)}%
 					</span>
 				</div>
 				<div className="flex-1 text-right text-sm">

diff --git a/src/features/coin-search-list/ui/CoinListWithSearchBar/index.tsx b/src/features/coin-search-list/ui/CoinListWithSearchBar/index.tsx
@@ -10,7 +10,7 @@ export type CoinListWithSearchBarProps = {
 
 export default function CoinListWithSearchBar({
 	coinList,
-}: CoinListWithSearchBarProps) {
+}: Readonly<CoinListWithSearchBarProps>) {
 	const [searchQuery, setSearchQuery] = useState('');
 
 	const filteredCoinList = coinList.filter((coin) =>

diff --git a/src/features/order-execution-list/ui/ExecutionList/index.tsx b/src/features/order-execution-list/ui/ExecutionList/index.tsx
@@ -6,7 +6,9 @@ type ExecutionListProps = {
 	ticker: CoinTicker;
 };
 
-export default function ExecutionList({ ticker }: ExecutionListProps) {
+export default function ExecutionList({
+	ticker,
+}: Readonly<ExecutionListProps>) {
 	const executionList = useExecutionListData(ticker);
 
 	const orderList = executionList.length ? (

diff --git a/src/features/order/models/form.machine.ts b/src/features/order/models/form.machine.ts
@@ -35,7 +35,7 @@ export const formMachine = setup({
 				const { data } = await response.json();
 
 				const holdings = Number(
-					data.wallets.find((wallet) => wallet.ticker === input.ticker)?.size ||
+					data.wallets.find((wallet) => wallet.ticker === input.ticker)?.size ??
 						0,
 				);
 
@@ -100,7 +100,7 @@ export const formMachine = setup({
 			message: ({ event, context }) => {
 				assertEvent(event, 'CHANGE_PRICE');
 
-				const quantity = context.quantity || 0;
+				const quantity = context.quantity ?? 0;
 				const price = event.price;
 
 				if (context.tradeType === '매수') {
@@ -213,7 +213,7 @@ export const formMachine = setup({
 	context: (params) => {
 		const ticker =
 			typeof params.input === 'object' && params.input
-				? (params.input as { ticker?: string }).ticker || ''
+				? ((params.input as { ticker?: string }).ticker ?? '')
 				: '';
 
 		return {

diff --git a/src/features/order/ui/OrderForm/index.tsx b/src/features/order/ui/OrderForm/index.tsx
@@ -12,7 +12,7 @@ type OrderFormProps = {
 	ticker: string;
 };
 
-export default function OrderForm({ ticker }: OrderFormProps) {
+export default function OrderForm({ ticker }: Readonly<OrderFormProps>) {
 	const [state, send, actorRef] = useMachine(formMachine, {
 		input: {
 			ticker,
@@ -25,15 +25,15 @@ export default function OrderForm({ ticker }: OrderFormProps) {
 		state.context.tradeType === '매수' ? '구매가능 금액' : '매도가능 수량';
 	const quantityValueText =
 		state.context.tradeType === '매수'
-			? `${formatCurrencyKR(state.context.deposit || 0)}원`
-			: `${state.context.holdings?.toFixed(2) || 0}개`;
+			? `${formatCurrencyKR(state.context.deposit ?? 0)}원`
+			: `${state.context.holdings?.toFixed(2) ?? 0}개`;
 	const totalOrderPriceText =
 		state.context.tradeType === '매수'
 			? state.context.orderType === '지정가'
-				? `${formatCurrencyKR((state.context.price || 0) * (state.context.quantity || 0))}원`
+				? `${formatCurrencyKR((state.context.price ?? 0) * (state.context.quantity ?? 0))}원`
 				: '시장가격에 매수'
 			: state.context.orderType === '지정가'
-				? `${formatCurrencyKR((state.context.price || 0) * (state.context.quantity || 0))}원`
+				? `${formatCurrencyKR((state.context.price ?? 0) * (state.context.quantity ?? 0))}원`
 				: '시장가격에 매도';
 
 	const handleTradeTypeChange = () => {
@@ -142,7 +142,7 @@ export default function OrderForm({ ticker }: OrderFormProps) {
 						onClickPlus={handlePricePlus}
 						onChange={handlePriceChange}
 						step={PRICE_STEP}
-						value={(state.context.price || '').toString()}
+						value={(state.context.price ?? '').toString()}
 						min={0}
 						onKeyDown={preventNonNumericInput}
 						data-testid="price-input"
@@ -167,7 +167,7 @@ export default function OrderForm({ ticker }: OrderFormProps) {
 						onClickPlus={handleQuantityPlus}
 						step={QUANTITY_STEP}
 						onChange={handleQuantityChange}
-						value={(state.context.quantity || '').toString()}
+						value={(state.context.quantity ?? '').toString()}
 						min={0}
 						onKeyDown={preventNonNumericInput}
 						data-testid="quantity-input"

diff --git a/src/features/order/ui/OrderFormFallback/index.tsx b/src/features/order/ui/OrderFormFallback/index.tsx
@@ -5,7 +5,9 @@ type OrderFormFallbackProps = {
 	ticker: CoinTicker;
 };
 
-export default function OrderFormFallback({ ticker }: OrderFormFallbackProps) {
+export default function OrderFormFallback({
+	ticker,
+}: Readonly<OrderFormFallbackProps>) {
 	return (
 		<div className="flex flex-col gap-2 pt-2 text-base">
 			<div className="flex flex-col items-center justify-center space-y-6 py-8">

diff --git a/src/features/tradeview/ui/Orderbook/chart.tsx b/src/features/tradeview/ui/Orderbook/chart.tsx
@@ -22,7 +22,7 @@ export type OrderbookChartProps = {
 export default function OrderbookChart({
 	data,
 	type = 'bull',
-}: OrderbookChartProps) {
+}: Readonly<OrderbookChartProps>) {
 	const xAxisRef = useRef<am5xy.ValueAxis<am5xy.AxisRenderer>>(null);
 	const yAxisRef = useRef<am5xy.CategoryAxis<am5xy.AxisRenderer>>(null);
 	const seriesRef = useRef<am5xy.ColumnSeries>(null);

diff --git a/src/features/tradeview/ui/StockChart/index.tsx b/src/features/tradeview/ui/StockChart/index.tsx
@@ -99,7 +99,7 @@ function makeEvent(
 	);
 }
 
-export default function StockChart({ ticker }: StockChartProps) {
+export default function StockChart({ ticker }: Readonly<StockChartProps>) {
 	const chartControlRef = useRef<HTMLDivElement>(null);
 	const valueSeriesRef = useRef<am5xy.CandlestickSeries>(null);
 	const sbSeriesRef = useRef<am5xy.LineSeries>(null);

diff --git a/src/shared/ui/Backdrop/index.tsx b/src/shared/ui/Backdrop/index.tsx
@@ -9,7 +9,7 @@ const backdropVariant = {
 	exit: { opacity: 0 },
 };
 
-export default function Backdrop({ children }: BackdropProps) {
+export default function Backdrop({ children }: Readonly<BackdropProps>) {
 	return (
 		<motion.div
 			className="absolute top-0 right-0 bottom-0 left-0 z-50 bg-[rgba(0,0,0,0.4)]"

diff --git a/src/shared/ui/CloseButton/index.tsx b/src/shared/ui/CloseButton/index.tsx
@@ -4,7 +4,7 @@ type CloseButtonProps = {
 	onClick: () => void;
 };
 
-export default function CloseButton({ onClick }: CloseButtonProps) {
+export default function CloseButton({ onClick }: Readonly<CloseButtonProps>) {
 	return (
 		<button
 			type="button"

diff --git a/src/shared/ui/Container/index.tsx b/src/shared/ui/Container/index.tsx
@@ -4,7 +4,7 @@ type ContainerProps = {
 	children: ReactNode;
 };
 
-export default function Container({ children }: ContainerProps) {
+export default function Container({ children }: Readonly<ContainerProps>) {
 	return (
 		<div className="flex h-full min-h-40 w-full min-w-[240px] flex-col rounded-xl bg-white p-4">
 			{children}

diff --git a/src/shared/ui/ContainerTitle/index.tsx b/src/shared/ui/ContainerTitle/index.tsx
@@ -2,7 +2,9 @@ export type ContainerTitleProps = {
 	children: string;
 };
 
-export default function ContainerTitle({ children }: ContainerTitleProps) {
+export default function ContainerTitle({
+	children,
+}: Readonly<ContainerTitleProps>) {
 	return (
 		<span className="font-semibold text-gray-950 text-sm">{children}</span>
 	);

diff --git a/src/shared/ui/Logo/index.tsx b/src/shared/ui/Logo/index.tsx
@@ -5,7 +5,7 @@ export type LogoProps = {
 	isBlack?: boolean;
 };
 
-export default function Logo({ isBlack }: LogoProps) {
+export default function Logo({ isBlack }: Readonly<LogoProps>) {
 	const logo = isBlack ? CloudLogoBlack : CloudLogo;
 
 	return (

diff --git a/src/shared/ui/MenuButton/index.tsx b/src/shared/ui/MenuButton/index.tsx
@@ -4,7 +4,7 @@ export type MenuButtonProps = {
 	onClick: () => void;
 };
 
-export default function MenuButton({ onClick }: MenuButtonProps) {
+export default function MenuButton({ onClick }: Readonly<MenuButtonProps>) {
 	return (
 		<button
 			type="button"

diff --git a/src/shared/ui/Modal/index.tsx b/src/shared/ui/Modal/index.tsx
@@ -5,7 +5,7 @@ type ModalProps = {
 	ref: Ref<HTMLDialogElement>;
 };
 
-export default function Modal({ children, ref }: ModalProps) {
+export default function Modal({ children, ref }: Readonly<ModalProps>) {
 	return (
 		<dialog
 			open

diff --git a/src/shared/ui/NumberInput/index.tsx b/src/shared/ui/NumberInput/index.tsx
@@ -2,7 +2,7 @@ import type { InputHTMLAttributes } from 'react';
 
 export type NumberInputProps = InputHTMLAttributes<HTMLInputElement>;
 
-export default function NumberInput(props: NumberInputProps) {
+export default function NumberInput(props: Readonly<NumberInputProps>) {
 	return (
 		<input
 			type="number"

diff --git a/src/shared/ui/Switch/index.tsx b/src/shared/ui/Switch/index.tsx
@@ -19,7 +19,7 @@ export default function Switch<T extends Value, T1 extends T, T2 extends T>({
 	text2,
 	onChange,
 	selected,
-}: SwitchProps<T, T1, T2>) {
+}: Readonly<SwitchProps<T, T1, T2>>) {
 	const handleSwitch = (e: MouseEvent<HTMLButtonElement>) => {
 		if (e.currentTarget.value === String(value1)) {
 			onChange?.(value1);

diff --git a/src/widgets/navbar/ui/SideBar/index.tsx b/src/widgets/navbar/ui/SideBar/index.tsx
@@ -21,7 +21,10 @@ const sideBarVariant = {
 	exit: { x: '-100%' },
 };
 
-export default function SideBar({ coinListWithIcon, onClose }: SideBarProps) {
+export default function SideBar({
+	coinListWithIcon,
+	onClose,
+}: Readonly<SideBarProps>) {
 	const ref = useRef<HTMLDivElement>(null);
 	useClickOutside(ref, onClose);