style: UI 스타일 개선

app/dashboard/page.tsx

@@ -16,7 +16,6 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import ProfileModal from "@/components/common/ProfileModal";
 import { Heart } from "lucide-react";
-import mockPortfolio from "@/lib/mock/mockportfolio";
 
 import ProfileHandler from "@/components/common/ProfileHandler";
 import useSWR from "swr";
@@ -316,12 +315,12 @@ export default function Dashboard() {
     isLoading: isPortfolioLoading,
     isError: isPortfolioError,
   } = useGetOverallPortfolioQuery();
-  const cyberDollars = walletData?.data?.cyberDollar ?? 0;
+  const cyberDollar = walletData?.data?.cyberDollar ?? 0;
   const portfolioData = {
     totalAssets: overallData?.data?.totalAsset ?? 0,
     investmentAmount: overallData?.data?.investedAmount ?? 0,
     profitLoss: overallData?.data?.evalGain ?? 0,
-    returnRate: (overallData?.data?.returnRate ?? 0) * 100,
+    returnRate: (overallData?.data?.returnRate ?? 0) * 10,
   };
 
   // 컴포넌트 마운트 시 실시간 데이터 가져오기
@@ -396,7 +395,7 @@ export default function Dashboard() {
             내계좌
           </Link>
           <LogoutButton redirectTo="/">
-            <span className="bg-[#006ffd] text-white px-4 py-2 rounded-md w-full block text-center">
+            <span className="px-4 py-2 text-white hidden md:flex bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200">
               로그아웃
             </span>
           </LogoutButton>
@@ -414,7 +413,7 @@ export default function Dashboard() {
             <div className="text-sm text-gray-600">
               oo님 mars 모투에 오신걸 환영합니다
             </div>
-            <button className="bg-[#006ffd] text-white px-4 py-2 rounded-md w-full">
+            <button className="px-4 py-2 text-white hidden md:flex bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200">
               로그아웃
             </button>
             <button
@@ -471,7 +470,8 @@ export default function Dashboard() {
         {/* Left Column - Hidden on mobile, visible on lg screens */}
         <div className="hidden lg:flex lg:w-64 flex-col">
           {/* Interest Stocks Section */}
-          <div className="bg-[#f0f0f0] rounded-xl p-3 mb-4 text-center shadow-md">
+          {/* <div className="bg-[#f0f0f0] rounded-xl p-3 mb-4 text-center shadow-md"> */}
+          <div className="p-3 mb-4 text-center rounded-xl shadow-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white">
             <span className="text-sm">관심 종목</span>
           </div>
 
@@ -544,7 +544,8 @@ export default function Dashboard() {
           </div>
 
           {/* Purchased Stocks Section */}
-          <div className="bg-[#f0f0f0] rounded-xl p-3 my-4 text-center shadow-md">
+          {/* <div className="bg-[#f0f0f0] rounded-xl p-3 my-4 text-center shadow-md"> */}
+          <div className="p-3 my-4 text-center rounded-xl shadow-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white">
             <span className="text-sm">내가 구매한 종목</span>
           </div>
 
@@ -767,7 +768,7 @@ export default function Dashboard() {
                   name={selectedInfo.name}
                   price={selectedInfo.price}
                   totalAssets={portfolioData.totalAssets}
-                  cyberDollar={cyberDollars}
+                  cyberDollar={cyberDollar}
                   investmentAmount={portfolioData.investmentAmount}
                   profitLoss={portfolioData.profitLoss}
                   returnRate={portfolioData.returnRate}
@@ -786,7 +787,7 @@ export default function Dashboard() {
                   name={selectedInfo.name}
                   price={selectedInfo.price}
                   totalAssets={portfolioData.totalAssets}
-                  cyberDollar={cyberDollars}
+                  cyberDollar={cyberDollar}
                   investmentAmount={portfolioData.investmentAmount}
                   profitLoss={portfolioData.profitLoss}
                   returnRate={portfolioData.returnRate}

app/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { Search, X, Menu, ChevronLeft, Minus, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button"
 import Image from "next/image";
 import StockChart from "@/components/StockChart";
 import LoginModal from "@/components/common/LoginModal";
@@ -346,26 +347,30 @@ export default function FinanceDashboard() {
 
                 <div className="hidden md:flex items-center gap-3">
                     {/* <button onClick={() => setRegisterOpen(true)} */}
-                    <button
-                        type="button"
+                    <Button
+                        // type="button"
                         onClick={() => {
                             const url = new URL(window.location.href)
                             url.searchParams.set("modal", "register")
                             router.push(url.toString())
                         }}
-                        className="border border-[#006ffd] text-[#006ffd] px-4 py-2 rounded-md hover:bg-[#f0f7ff] transition-colors">
+                        // className="border border-[#006ffd] text-[#006ffd] px-4 py-2 rounded-xl hover:bg-[#f0f7ff] transition-colors">
+
+                        variant="outline"
+                        className="px-4 py-2 hidden md:flex rounded-xl border-slate-200 dark:border-slate-700 hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-200"
+                        >
                         회원가입
-                    </button>
-                    <button
+                    </Button>
+                    <Button
                         onClick={() => {
                             const url = new URL(window.location.href)
                             url.searchParams.set("modal", "login")
                             router.push(url.toString())
                         }}
-                        className="bg-[#006ffd] text-white px-4 py-2 rounded-md hover:bg-[#0057cc] transition-colors"
-                    >
+
+                     className="px-4 py-2 text-white hidden md:flex bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-xl shadow-lg hover:shadow-xl transition-all duration-200">
                         로그인
-                    </button>
+                    </Button>
                     <LoginModal
                         open={loginOpen}
                         onOpenChange={(open) => {
@@ -464,7 +469,8 @@ export default function FinanceDashboard() {
                 {/* Left Column - Hidden on mobile, visible on lg screens */}
                 <div className="hidden lg:flex lg:w-64 flex-col">
                     {/* 오늘의 핫 종목 목록 */}
-                    <div className="bg-[#f0f0f0] rounded-xl p-3 mb-4 text-center shadow-md">
+                    {/* <div className="bg-[#f0f0f0] rounded-xl p-3 mb-4 text-center shadow-md"> */}
+                    <div className="p-3 mb-4 text-center rounded-xl shadow-lg bg-gradient-to-r from-blue-600 to-purple-600 text-white">
                         <span className="text-sm">오늘의 핫 종목</span>
                     </div>
 

components/BuyPanel.tsx

@@ -105,33 +105,33 @@ export default function BuyPanel({ open, onClose, symbol, name, totalAssets, pri
             <div className="font-bold text-base">수익률</div>
             <div>
               <span className="text-xs mr-1">$</span>
-              <span className="text-xl font-bold">{returnRate.toFixed(2)}%</span>
+              <span className="text-xl font-bold">{(returnRate * 100).toFixed(2)}%</span>
             </div>
           </div>
           <div className="flex justify-between items-center">
             <div className="font-bold text-base">시드머니</div>
             <div>
-              <span className="text-[#006ffd] text-xs mr-1">$</span>
-              <span className="text-[#006ffd] text-xl font-bold">{cyberDollar.toFixed(2)}</span>
+              <span className="text-[#0a0a0a] text-xs mr-1">$</span>
+              <span className="text-[#0a0a0a] text-xl font-bold">{cyberDollar.toFixed(2)}</span>
             </div>
           </div>
           <div className="flex justify-between items-center">
             <div className="font-bold text-base">투자금액</div>
             <div>
-              <span className="text-[#439a86] text-xs mr-1">$</span>
-              <span className="text-[#439a86] text-xl font-bold">{investmentAmount.toFixed(2)}</span>
+              <span className="text-[#006ffd] text-xs mr-1">$</span>
+              <span className="text-[#006ffd] text-xl font-bold">{investmentAmount.toFixed(2)}</span>
             </div>
           </div>
           <div className="flex justify-between items-center">
             <div className="font-bold text-base">평가손익</div>
             <div className="flex items-center">
               <span
-                className={`text-xs mr-1 ${profitLoss >= 0 ? "text-[#e74c3c]" : "text-[#3498db]"}`}
+                className={`text-xs mr-1 ${profitLoss >= 0 ? "text-[#439a86]" : "text-[#e74c3c]"}`}
               >
                 $
               </span>
               <span
-                className={`text-xl font-bold ${profitLoss >= 0 ? "text-[#e74c3c]" : "text-[#3498db]"}`}
+                className={`text-xl font-bold ${profitLoss >= 0 ? "text-[#439a86]" : "text-[#e74c3c]"}`}
               >
                 {profitLoss >= 0 ? "+" : "-"}
                 {Math.abs(profitLoss).toFixed(2)}

components/SearchBar.tsx

@@ -70,8 +70,9 @@ export default function SearchBar({ onSelectStock }: SearchBarProps) {
 
   return (
     <div className="relative w-full max-w-2xl" ref={wrapperRef}>
-      <div className="flex items-center bg-[#f0f0f0] rounded-full px-4 py-3 shadow-md">
-        <Search className="text-gray-500 w-5 h-5 mr-3" />
+      {/* <div className="flex items-center bg-[#f0f0f0] rounded-full px-4 py-3 shadow-md"> */}
+       <div className=" hidden md:flex items-center bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 rounded-full shadow-lg hover:shadow-xl transition-all duration-200 px-4 py-3">
+        <Search className="text-white w-5 h-5 mr-3" />
         <input
           type="text"
           placeholder="종목 검색"
@@ -81,7 +82,7 @@ export default function SearchBar({ onSelectStock }: SearchBarProps) {
             setShowResults(true)
           }}
           onFocus={() => setShowResults(true)}
-          className="flex-1 bg-transparent border-0 focus:outline-none text-base text-gray-700 placeholder-gray-500"
+          className="flex-1 bg-transparent border-0 focus:outline-none text-base text-white placeholder-white"
         />
       </div>
 

components/SellPanel.tsx

@@ -103,33 +103,33 @@ export default function SellPanel({ open, onClose, symbol, name, price, totalAss
             <div className="font-bold text-base">수익률</div>
             <div>
               <span className="text-xs mr-1">$</span>
-              <span className="text-xl font-bold">{returnRate.toFixed(2)}%</span>
+              <span className="text-xl font-bold">{(returnRate * 100).toFixed(2)}%</span>
             </div>
           </div>
           <div className="flex justify-between items-center">
             <div className="font-bold text-base">시드머니</div>
             <div>
-              <span className="text-[#006ffd] text-xs mr-1">$</span>
-              <span className="text-[#006ffd] text-xl font-bold">{cyberDollar.toFixed(2)}</span>
+              <span className="text-[#0a0a0a] text-xs mr-1">$</span>
+              <span className="text-[#0a0a0a] text-xl font-bold">{cyberDollar.toFixed(2)}</span>
             </div>
           </div>
           <div className="flex justify-between items-center">
             <div className="font-bold text-base">투자금액</div>
             <div>
-              <span className="text-[#439a86] text-xs mr-1">$</span>
-              <span className="text-[#439a86] text-xl font-bold">{investmentAmount.toFixed(2)}</span>
+              <span className="text-[#006ffd] text-xs mr-1">$</span>
+              <span className="text-[#006ffd] text-xl font-bold">{investmentAmount.toFixed(2)}</span>
             </div>
           </div>
           <div className="flex justify-between items-center">
             <div className="font-bold text-base">평가손익</div>
             <div className="flex items-center">
               <span
-                className={`text-xs mr-1 ${profitLoss >= 0 ? "text-[#e74c3c]" : "text-[#3498db]"}`}
+                className={`text-xs mr-1 ${profitLoss >= 0 ? "text-[#439a86]" : "text-[#e74c3c]"}`}
               >
                 $
               </span>
               <span
-                className={`text-xl font-bold ${profitLoss >= 0 ? "text-[#e74c3c]" : "text-[#3498db]"}`}
+                className={`text-xl font-bold ${profitLoss >= 0 ? "text-[#439a86]" : "text-[#e74c3c]"}`}
               >
                 {profitLoss >= 0 ? "+" : "-"}
                 {Math.abs(profitLoss).toFixed(2)}