feat: profile route 추가

Author: BHyeonKim

src/app/routes/profile.tsx

@@ -1,5 +1,15 @@
+import { api } from '~/entities/user';
 import { ProfileModal } from '~/widgets/user';
+import type { Route } from './+types/profile';
 
-export default function ProfileRouteComponent() {
-	return <ProfileModal />;
+export async function loader() {
+	const response = await api.getUserInfo();
+	const { data } = await response.json();
+	return data;
+}
+
+export default function ProfileRouteComponent({
+	loaderData,
+}: Route.ComponentProps) {
+	return <ProfileModal userInfo={loaderData} />;
 }

src/shared/ui/Modal/index.tsx

@@ -10,7 +10,7 @@ export default function Modal({ children, ref }: Readonly<ModalProps>) {
 		<dialog
 			open
 			ref={ref}
-			className="absolute top-1/2 left-1/2 h-[min(100%,20rem)] min-w-xs translate-x-[-50%] translate-y-[-50%] rounded-md"
+			className="absolute top-1/2 left-1/2 min-h-xs min-w-xs translate-x-[-50%] translate-y-[-50%] rounded-md"
 		>
 			{children}
 		</dialog>

src/widgets/user/ui/ProfileModal/index.tsx

@@ -1,17 +1,29 @@
 import { useRef } from 'react';
 import { useNavigate } from 'react-router';
+
+import type { UserInfoResponseData } from '~/entities/user';
+import AssetInfoGraphic from '~/features/profile/ui/AssetInfoGraphic';
+import TradingHistory from '~/features/profile/ui/TradingHistoryList';
 import useClickOutside from '~/shared/hooks/useClickOutside';
 import Backdrop from '~/shared/ui/Backdrop';
 import Modal from '~/shared/ui/Modal';
 
-export default function ProfileModal() {
+type ProfileModalProps = {
+	userInfo: UserInfoResponseData;
+};
+
+export default function ProfileModal({ userInfo }: ProfileModalProps) {
 	const navigate = useNavigate();
 	const modalRef = useRef<HTMLDialogElement>(null);
 	useClickOutside(modalRef, () => navigate(-1));
+
 	return (
 		<Backdrop>
 			<Modal ref={modalRef}>
-				<div>ProfileModal</div>
+				<div className="scrollbar-custom flex max-h-screen flex-col items-center gap-3 overflow-y-auto p-20 pt-10">
+					<AssetInfoGraphic userInfo={userInfo} />
+					<TradingHistory />
+				</div>
 			</Modal>
 		</Backdrop>
 	);