feat: Implement WalletContext for real-time portfolio updates and refactor AuthUserProvider for improved state management.

Author: sinwoojin

frontend/package-lock.json

@@ -56,6 +56,7 @@
     "react-hook-form": "^7.60.0",
     "react-resizable-panels": "^2.1.7",
     "recharts": "2.15.4",
+    "socket.io-client": "^4.8.1",
     "sonner": "^1.7.4",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",

frontend/package.json

@@ -45,14 +45,12 @@ function LoginPage() {
 
       if (response.ok) {
         const data = await response.json();
-        // Context 업데이트 (로컬 스토리지는 Provider가 처리)
-        if (data.access_token) {
-          setAccessToken(data.access_token);
+        if (data.accessToken) {
+          setAccessToken(data.accessToken);
         }
         if (data.user) {
           setUser(data.user);
         }
-        // 메인 페이지로 이동
         router.push("/");
       } else {
         const data = await response.json();

frontend/src/app/(auth)/login/page.tsx

@@ -4,62 +4,27 @@ import SettingCard from "@/components/SettingCard";
 import ThemeToggle from "@/components/ThemeToggle";
 import { Button } from "@/components/ui/button";
 import { useAuth, useUser } from "@/context/AuthUserProvider";
-import { fetchClient } from "@/lib/api/fetchClient";
+import { useWallet } from "@/context/WalletContext";
 import { useTheme } from "@/lib/utils/theme-context";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-
-interface Portfolio {
-  balance: number;
-  holdings: {
-    coinId: string;
-    amount: number;
-    averagePrice: number;
-  }[];
-}
 
 function Account() {
-  const { user, clearUser } = useUser();
-  const { accessToken, clearAccessToken } = useAuth();
+  const { user } = useUser();
+  const { clearAccessToken } = useAuth();
+  const { clearUser } = useUser();
   const { theme, toggleTheme } = useTheme();
   const router = useRouter();
   const isDark = theme === "dark";
 
-  const [portfolio, setPortfolio] = useState<Portfolio | null>(null);
-
-  const fetchPortfolio = async () => {
-    try {
-      const response = await fetchClient("/wallet/portfolio", {
-        headers: {
-          Authorization: `Bearer ${accessToken}`,
-          "Content-Type": "application/json",
-        },
-        credentials: "include",
-        method: "GET",
-      });
-      if (response.ok) {
-        const data = await response.json();
-        setPortfolio(data);
-      }
-    } catch (err) {
-      console.error("Failed to fetch portfolio:", err);
-    }
-  };
+  const { portfolio } = useWallet();
 
-  
   const handleLogout = () => {
     clearAccessToken();
     clearUser();
     router.push("/login");
   };
 
-  useEffect(() => {
-    if (accessToken) {
-      fetchPortfolio();
-    }
-  }, [accessToken, fetchPortfolio]);
-  
   return (
     <div
       className={`min-h-screen flex flex-col justify-center items-center ${

frontend/src/app/account/page.tsx

@@ -2,6 +2,7 @@
 
 import { Header } from "@/components/main/Header";
 import { AuthUserProvider } from "@/context/AuthUserProvider";
+import { WalletProvider } from "@/context/WalletContext";
 import ThemeProvider from "@/lib/utils/theme-context";
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
@@ -45,8 +46,10 @@ export default function RootLayout({
       >
         <ThemeProvider>
           <AuthUserProvider>
-            <Header />
-            {children}
+            <WalletProvider>
+              <Header />
+              {children}
+            </WalletProvider>
           </AuthUserProvider>
         </ThemeProvider>
       </body>

frontend/src/app/layout.tsx

@@ -1,34 +1,21 @@
 "use client";
 
-import { useAuth } from "@/context/AuthUserProvider";
+import { useWallet } from "@/context/WalletContext";
 import { fetchClient } from "@/lib/api/fetchClient";
 import { useTheme } from "@/lib/utils/theme-context";
 import { useEffect, useState } from "react";
 import { Button } from "../ui/button";
 
-interface Portfolio {
-  balance: number;
-  holdings: {
-    coinId: string;
-    amount: number;
-    averagePrice: number;
-  }[];
-}
-
 export default function TradePanel({ symbol }: { symbol: string }) {
   const [price, setPrice] = useState<number | null>(null);
   const [inputQty, setInputQty] = useState("");
-  const [portfolio, setPortfolio] = useState<Portfolio | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const { theme } = useTheme();
-  const { accessToken } = useAuth();
+  const { portfolio, refreshPortfolio } = useWallet();
   const isDark = theme === "dark";
 
   useEffect(() => {
-    if (accessToken) {
-        fetchPortfolio();
-    }
     const wsUrl = `wss://stream.binance.com:9443/ws/${symbol.toLowerCase()}@trade`;
     const ws = new WebSocket(wsUrl);
 
@@ -42,25 +29,6 @@ export default function TradePanel({ symbol }: { symbol: string }) {
     };
   }, [symbol]);
 
-  const fetchPortfolio = async () => {
-    if (!accessToken) return;
-    try {
-      const response = await fetchClient("/wallet/portfolio", {
-        headers: {
-            Authorization: `Bearer ${accessToken}`,
-            "Content-Type": "application/json",
-        },
-        credentials: "include", // 쿠키 포함 (필요 시)
-      });
-      if (response.ok) {
-        const data = await response.json();
-        setPortfolio(data);
-      }
-    } catch (err) {
-      console.error("Failed to fetch portfolio:", err);
-    }
-  };
-
   const handleTrade = async (type: 'BUY' | 'SELL') => {
     if (!inputQty || !price) return;
 
@@ -90,9 +58,7 @@ export default function TradePanel({ symbol }: { symbol: string }) {
         method: "POST",
         headers: { 
             "Content-Type": "application/json",
-            Authorization: `Bearer ${accessToken}`,
         },
-        credentials: "include",
         body: JSON.stringify({
           coinId: symbol,
           amount: amount,
@@ -103,7 +69,7 @@ export default function TradePanel({ symbol }: { symbol: string }) {
       if (response.ok) {
         alert(`${type === 'BUY' ? "매수" : "매도"} 성공!`);
         setInputQty("");
-        fetchPortfolio(); // 잔액 갱신
+        refreshPortfolio(); // 잔액 갱신
       } else {
         const data = await response.json();
         setError(data.message || `${type === 'BUY' ? "매수" : "매도"} 실패`);