ㅇㅇ

README.md

@@ -1,2 +1,2 @@
-# UpAndDown-Client
-About [오르락내리락] 과거의 차트로 공부하고! 나만의 종목으로 예측까지 해보는 주식 차트 학습 서비스
+# Candly-Client
+About [Candly] 과거의 차트로 공부하고! 나만의 종목으로 예측까지 해보는 주식 차트 학습 서비스

src/components/Navbar/navbar.client.tsx

@@ -6,11 +6,12 @@ import Link from "next/link";
 import { checkUserStatus, getStock } from "@/services/userStock-service";
 import { useAuthStore } from "@/stores/authStore";
 import Image from "next/image";
+import { TutorialOverlay } from "../blocks/Tutorial/TutorialPopup.client";
 
 const menuItems = [
   { label: "홈", href: "/" },
   { label: "연습문제", href: "/practice" },
-  { label: "실전투자", href: "/investment", dynamic: true },
+  { label: "실전예측", href: "/investment", dynamic: true },
   { label: "랭킹", href: "/ranking" },
   { label: "마이페이지", href: "/mypage" },
 ];
@@ -21,48 +22,37 @@ export default function Navbar() {
   const auth = useAuthStore((s) => s.auth);
   const clearAuth = useAuthStore((s) => s.clearAuth);
   const loginRequiredPaths = ["/", "/practice", "/ranking", "/mypage"];
+  const [showTutorial, setShowTutorial] = useState(false);
+  const handleCloseTutorial = () => {
+    localStorage.setItem("hideTutorial", "true");
+    setShowTutorial(false);
+  };
 
-  // hydration mismatch 방지용
   const [mounted, setMounted] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+
   useEffect(() => {
     setMounted(true);
   }, []);
   if (!mounted) return null;
 
   const handleInvestClick = async () => {
     try {
-      if (!auth?.token) {
-        console.warn("로그인 필요");
-        return router.push("/auth/login");
-      }
+      if (!auth?.token) return router.push("/auth/login");
 
       const status = await checkUserStatus(auth.token);
-      //("이미 연동 완료된 user: ", status.hasHoldings);
-
-      if (status.hasHoldings) {
-        const stockData = await getStock(auth.token);
-        const firstCode = stockData.stocks[0]?.stock_code._id;
-        //console.log("주식 조회", firstCode);
-        if (firstCode) {
-          router.push(`/investment/${firstCode}`);
-        } else {
-          router.push("/investment");
-        }
-      } else {
-        router.push("/investment");
-      }
+      const stockData = await getStock(auth.token);
+      const firstCode = stockData.stocks[0]?.stock_code._id;
+      router.push(firstCode ? `/investment/${firstCode}` : "/investment");
     } catch (err) {
-      console.error("실전투자 이동 중 오류:", err);
       router.push("/investment");
     }
   };
 
   const handleLogout = async () => {
     try {
       await fetch("/api/auth/logout", { method: "POST" });
-    } catch (e) {
-      console.warn("서버 로그아웃 실패");
-    }
+    } catch {}
     sessionStorage.removeItem("token");
     clearAuth();
     router.replace("/auth/login");
@@ -72,16 +62,18 @@ export default function Navbar() {
     router.push("/auth/login");
   };
 
+  const navButtonClass = (isActive: boolean) =>
+    "text-base transition-colors cursor-pointer " +
+    (isActive
+      ? "text-[#396FFB] hover:text-blue-500 font-semibold"
+      : "text-[#E2E2E2] hover:text-white");
+
   return (
-    <nav className="h-[98px] flex items-center px-8 pl-10 whitespace-nowrap fixed bg-inherit w-screen z-20">
+
+    <nav className="h-[98px] flex items-center px-8 pl-10 fixed bg-inherit w-full z-20 text-nowrap">
+      {/* 로고 & 홈 이동 */}
       <button
-        onClick={() => {
-          if (!auth?.token) {
-            router.push("/auth/login");
-          } else {
-            router.push("/");
-          }
-        }}
+        onClick={() => router.push(auth?.token ? "/" : "/auth/login")}
         className="flex items-center pr-2.5 bg-transparent border-none cursor-pointer"
       >
         <Image
@@ -93,98 +85,123 @@ export default function Navbar() {
         />
         <div className="text-2xl pr-20">Candly</div>
       </button>
-      <ul className="flex gap-15">
+
+      {/* 데스크탑 메뉴 */}
+      <ul className="hidden md:flex gap-15">
         {menuItems.map((item) => {
           const isActive =
             pathname === item.href || pathname.startsWith(`${item.href}/`);
           const isLoginRequired = loginRequiredPaths.includes(item.href);
 
-          if (item.dynamic) {
-            return (
-              <li key={item.href}>
-                <button
-                  onClick={handleInvestClick}
-                  className={
-                    "text-base transition-colors cursor-pointer " +
-                    (isActive
-                      ? "text-[#396FFB] hover:text-blue-500 font-semibold"
-                      : "text-[#E2E2E2] hover:text-white")
-                  }
-                >
-                  {item.label}
-                </button>
-              </li>
-            );
-          }
-          // 로그인 필요한 메뉴 (홈, 연습문제, 랭킹, 마이페이지)
-          if (isLoginRequired) {
-            return (
-              <li key={item.href}>
-                <button
-                  onClick={() => {
-                    if (!auth?.token) {
-                      router.push("/auth/login");
-                    } else {
-                      router.push(item.href);
-                    }
-                  }}
-                  className={
-                    "text-base transition-colors cursor-pointer " +
-                    (isActive
-                      ? "text-[#396FFB] hover:text-blue-500 font-semibold"
-                      : "text-[#E2E2E2] hover:text-white")
-                  }
-                  type="button"
-                >
-                  {item.label}
-                </button>
-              </li>
-            );
-          }
+          const onClick = item.dynamic
+            ? handleInvestClick
+            : () => {
+                if (!auth?.token && isLoginRequired) {
+                  router.push("/auth/login");
+                } else {
+                  router.push(item.href);
+                }
+              };
 
-          // 나머지(로그인 필요없는 메뉴) (실제로 위에서 다 처리됨)
           return (
             <li key={item.href}>
-              <Link href={item.href}>
-                <span
-                  className={
-                    "text-base cursor-pointer transition-colors " +
-                    (isActive
-                      ? "text-[#396FFB] font-semibold"
-                      : "text-[#E2E2E2] hover:text-white")
-                  }
-                >
-                  {item.label}
-                </span>
-              </Link>
+              <button onClick={onClick} className={navButtonClass(isActive)}>
+                {item.label}
+              </button>
             </li>
           );
         })}
       </ul>
 
-      {/* 로그인/로그아웃 버튼 */}
-      <div className="ml-auto pr-5">
-        {mounted ? (
-          auth?.token ? (
+      {/* 오른쪽 버튼 (데스크탑 전용) */}
+      <div className="ml-auto hidden md:flex gap-4 items-center pr-5">
+        <button
+          onClick={() => {
+            setShowTutorial(true);
+          }}
+          className="text-sm px-4 text-[#E2E2E2] hover:text-white"
+        >
+          튜토리얼
+        </button>
+        {auth?.token ? (
+          <button
+            onClick={handleLogout}
+            className="text-sm text-[#E2E2E2] hover:text-white transition"
+          >
+            로그아웃
+          </button>
+        ) : (
+          <button
+            onClick={handleLoginClick}
+            className="text-sm text-[#E2E2E2] hover:text-white transition"
+          >
+            로그인
+          </button>
+        )}
+      </div>
+
+      {/* 모바일 햄버거 버튼 */}
+      <button
+        onClick={() => setMenuOpen(!menuOpen)}
+        className="ml-auto md:hidden text-white text-xl"
+      >
+        ☰
+      </button>
+
+      {/* 모바일 메뉴 */}
+      {menuOpen && (
+        <div className="absolute top-[98px] left-0 w-full bg-black border-t border-neutral-700 px-5 py-4 flex flex-col gap-4 md:hidden z-40">
+          {menuItems.map((item) => {
+            const isLoginRequired = loginRequiredPaths.includes(item.href);
+            const onClick = item.dynamic
+              ? handleInvestClick
+              : () => {
+                  if (!auth?.token && isLoginRequired) {
+                    router.push("/auth/login");
+                  } else {
+                    router.push(item.href);
+                  }
+                  setMenuOpen(false);
+                };
+            return (
+              <button
+                key={item.href}
+                onClick={onClick}
+                className="text-left text-base text-[#E2E2E2] hover:text-white"
+              >
+                {item.label}
+              </button>
+            );
+          })}
+          {/* <button
+            onClick={() => {
+              setShowTutorial(true);
+            }}
+            className="text-left text-base text-[#E2E2E2] hover:text-white"
+          >
+            튜토리얼
+          </button> */}
+          {auth?.token ? (
             <button
               onClick={handleLogout}
-              className="text-sm text-[#E2E2E2] hover:text-white transition"
+              className="text-left text-base text-[#E2E2E2] hover:text-white"
             >
               로그아웃
             </button>
           ) : (
             <button
-              onClick={handleLoginClick}
-              className="text-sm text-[#E2E2E2] hover:text-white transition"
+              onClick={() => {
+                router.push("/auth/login");
+                setMenuOpen(false);
+              }}
+              className="text-left text-base text-[#E2E2E2] hover:text-white"
             >
               로그인
             </button>
-          )
-        ) : (
-          // 서버에서 렌더링되는 placeholder (같은 구조 유지)
-          <div className="w-[64px] h-[20px]" />
-        )}
-      </div>
+          )}
+        </div>
+      )}
+      {showTutorial && <TutorialOverlay onClose={handleCloseTutorial} />}
     </nav>
   );
 }

src/components/blocks/Investment/InvestmentStock/InvestmentStock.client.tsx

@@ -393,7 +393,7 @@ export default function InvestmentStockClient() {
                       </>
                     )}
                     <span
-                      className="px-1 cursor-pointer text-gray-400 hover:bg-gray-800 rounded-sm"
+                      className="cursor-pointer text-gray-400 hover:bg-gray-800 rounded-sm"
                       onClick={() => setShowIndicators((prev) => !prev)}
                     >
                       {showIndicators ? "– 보조지표 접기" : "+ 보조지표 설정"}

src/components/blocks/Loading/Loading.client.tsx

@@ -28,32 +28,25 @@ export default function LoadingPage() {
       const wait = elapsed < minDelay ? minDelay - elapsed : 0;
 
       setTimeout(() => {
-        //("✅ getStock result:", result);
-
         if ("message" in result) {
           setStatus("error");
           setErrorMessage(result.message);
           return;
         }
 
-        const rawStocks = Array.isArray(result)
-          ? result
-          : Array.isArray(result.output1)
-          ? result.output1
-          : null;
-
-        if (!rawStocks) {
+        if (!result) {
           setStatus("error");
           setErrorMessage("응답 형식 오류");
           return;
         }
 
-        const mapped = rawStocks.map(
+        const mapped = result.map(
           (item: { pdno: string; prdt_name: string }) => ({
             stock_code: item.pdno,
             company: item.prdt_name,
           })
         );
+        // console.log("map", mapped);
 
         setStocks(mapped);
         setStatus("done");
@@ -66,6 +59,7 @@ export default function LoadingPage() {
   const handleChart = () => {
     if (stocks.length > 0) {
       const firstCode = stocks[0].stock_code;
+      // console.log("stocks", stocks[0].stock_code);
       router.replace(`/investment/${firstCode}`);
     }
   };

src/components/blocks/MainHome/MainHome.client.tsx

@@ -36,7 +36,7 @@ export default function MainHomeClient() {
         router.push("/investment");
       }
     } catch (err) {
-      console.error("실전투자 이동 중 오류:", err);
+      console.error("실전예측 이동 중 오류:", err);
       router.push("/investment");
     }
   };

src/components/blocks/MyPageInvestment/MyPageInvestment.client.tsx

@@ -101,8 +101,20 @@ export default function MyPageInvestmentClient() {
         });
 
         const validScores = stockResult.stocks
-          .map((item: any) => item.cumulative_score)
-          .filter((score: any) => typeof score === "number");
+          .map((item: any) => {
+            const predictCount =
+              investResult.find(
+                (s: any) =>
+                  s.stock_code === item.stock_code?._id ||
+                  s.stock_id === item._id
+              )?.scores?.length ?? 0;
+
+            return predictCount > 0 && typeof item.cumulative_score === "number"
+              ? item.cumulative_score
+              : null;
+          })
+          .filter((score: any) => score !== null);
+
         const avg =
           validScores.length > 0
             ? Math.round(
@@ -124,7 +136,7 @@ export default function MyPageInvestmentClient() {
 
   return (
     <div>
-      <p className="text-2xl font-semibold mb-6">실전투자 히스토리</p>
+      <p className="text-2xl font-semibold mb-6">실전예측 히스토리</p>
 
       <div className="flex items-center gap-4 mb-8">
         <div className="h-20 w-55 bg-[#16161A] rounded-lg text-center flex items-baseline gap-1.5 justify-center pt-4">