From 070d7f149f59c5274a485d576fd40a9e97dc8ef9 Mon Sep 17 00:00:00 2001
From: chpark <chpark@wace.me>
Date: Sat, 25 Apr 2026 02:56:58 +0900
Subject: [PATCH] fix(login): SVG render via img tag + logo redesign

---
 public/momo-icon.svg              |  8 ++--
 public/momo-logo.svg              | 65 ++++++++++++++++++-------------
 src/app/(auth)/login/page.tsx     |  6 +--
 src/app/icon.svg                  |  4 +-
 src/components/layout/sidebar.tsx |  5 +--
 5 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/public/momo-icon.svg b/public/momo-icon.svg
index 12111dd..eb10e71 100644
--- a/public/momo-icon.svg
+++ b/public/momo-icon.svg
@@ -7,9 +7,7 @@
     </linearGradient>
   </defs>
   <rect width="64" height="64" rx="14" fill="url(#fg)"/>
-  <g fill="#ffffff">
-    <text x="32" y="40" font-family="'Segoe UI','Apple SD Gothic Neo',sans-serif" font-size="18" font-weight="900" text-anchor="middle" letter-spacing="-0.5">MOMO</text>
-    <circle cx="52" cy="14" r="2"/>
-    <circle cx="46" cy="10" r="1.4"/>
-  </g>
+  <text x="32" y="42" font-family="Helvetica, Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="-1">MOMO</text>
+  <circle cx="52" cy="12" r="1.8" fill="#ffffff" opacity="0.9"/>
+  <circle cx="56" cy="18" r="1.2" fill="#ffffff" opacity="0.7"/>
 </svg>
diff --git a/public/momo-logo.svg b/public/momo-logo.svg
index 72b4f2a..4648b4a 100644
--- a/public/momo-logo.svg
+++ b/public/momo-logo.svg
@@ -1,30 +1,43 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 120" width="360" height="120">
-  <g fill="#2E8B57">
-    <!-- M -->
-    <path d="M 15 95 L 15 28 L 32 28 L 52 72 L 72 28 L 89 28 L 89 95 L 75 95 L 75 50 L 60 85 L 44 85 L 29 50 L 29 95 Z"/>
-    <!-- O 1 -->
-    <path d="M 132 61 C 132 43.3 117.7 29 100 29 C 82.3 29 68 43.3 68 61 C 68 78.7 82.3 93 100 93 C 117.7 93 132 78.7 132 61 Z M 115 61 C 115 69.3 108.3 76 100 76 C 91.7 76 85 69.3 85 61 C 85 52.7 91.7 46 100 46 C 108.3 46 115 52.7 115 61 Z" transform="translate(34 0)"/>
-    <!-- M 2 -->
-    <path d="M 180 95 L 180 28 L 197 28 L 217 72 L 237 28 L 254 28 L 254 95 L 240 95 L 240 50 L 225 85 L 209 85 L 194 50 L 194 95 Z"/>
-    <!-- O 2 -->
-    <path d="M 297 61 C 297 43.3 282.7 29 265 29 C 247.3 29 233 43.3 233 61 C 233 78.7 247.3 93 265 93 C 282.7 93 297 78.7 297 61 Z M 280 61 C 280 69.3 273.3 76 265 76 C 256.7 76 250 69.3 250 61 C 250 52.7 256.7 46 265 46 C 273.3 46 280 52.7 280 61 Z" transform="translate(34 0)"/>
-    <!-- Fairy figure (stylized) above right O -->
-    <g transform="translate(300 15)">
-      <!-- Head -->
-      <circle cx="8" cy="6" r="4"/>
-      <!-- Body -->
-      <path d="M 8 10 L 5 22 L 11 22 Z"/>
-      <!-- Wings -->
-      <path d="M 5 14 Q -2 12 -1 20 Q 3 18 6 17 Z" opacity="0.7"/>
-      <path d="M 11 14 Q 18 12 17 20 Q 13 18 10 17 Z" opacity="0.7"/>
-      <!-- Wand swoosh -->
-      <path d="M 12 8 Q 32 -4 48 6 Q 40 2 30 5 Q 22 7 16 10 Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 140" width="420" height="140">
+  <style>
+    .momo-text { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 900; font-size: 110px; fill: #2E8B57; letter-spacing: -4px; }
+  </style>
+
+  <!-- MOMO 텍스트 -->
+  <text x="0" y="108" class="momo-text">MOMO</text>
+
+  <!-- 요정 (stylized figure) above last O -->
+  <g fill="#2E8B57" transform="translate(352 12)">
+    <!-- head -->
+    <circle cx="10" cy="6" r="3.8"/>
+    <!-- hair flair -->
+    <path d="M 7 3 Q 4 0 2 4 Q 6 3 8 4 Z"/>
+    <!-- body / dress -->
+    <path d="M 10 10 L 5 30 L 8 30 L 10 18 L 12 30 L 15 30 Z"/>
+    <!-- left arm (holding wand) -->
+    <path d="M 10 12 L 20 6 L 22 8 L 12 14 Z"/>
+    <!-- wand star -->
+    <g transform="translate(22 3)">
+      <path d="M 2 0 L 2.6 1.8 L 4.4 1.8 L 3 2.9 L 3.6 4.6 L 2 3.5 L 0.4 4.6 L 1 2.9 L -0.4 1.8 L 1.4 1.8 Z"/>
     </g>
-    <!-- Sparkles -->
-    <circle cx="352" cy="20" r="2.5"/>
-    <circle cx="344" cy="30" r="1.6"/>
-    <circle cx="340" cy="10" r="1.4"/>
-    <path d="M 348 40 L 350 44 L 354 44 L 351 47 L 352 52 L 348 49 L 344 52 L 345 47 L 342 44 L 346 44 Z" transform="scale(0.5) translate(355 50)"/>
+    <!-- wings -->
+    <path d="M 5 14 Q -3 10 -2 22 Q 3 20 7 18 Z" opacity="0.55"/>
+    <path d="M 15 14 Q 23 10 22 22 Q 17 20 13 18 Z" opacity="0.55"/>
+    <!-- legs -->
+    <path d="M 7 30 L 6 38 L 8 38 L 9 30 Z"/>
+    <path d="M 13 30 L 14 38 L 12 38 L 11 30 Z"/>
+  </g>
+
+  <!-- Magical swoosh trail from upper right arcing down -->
+  <path d="M 385 18 C 410 8 418 28 408 48 C 414 40 416 28 405 24 C 400 22 392 22 385 26 Z" fill="#2E8B57" opacity="0.9"/>
+  <path d="M 395 58 C 408 56 414 48 412 40 C 410 46 404 50 395 52 Z" fill="#2E8B57" opacity="0.7"/>
+
+  <!-- Sparkles -->
+  <circle cx="392" cy="8"  r="2.2" fill="#2E8B57"/>
+  <circle cx="408" cy="14" r="1.4" fill="#2E8B57"/>
+  <circle cx="378" cy="24" r="1.6" fill="#2E8B57"/>
+  <g fill="#2E8B57">
+    <path d="M 400 72 L 401.2 75 L 404.2 75 L 401.7 77 L 402.8 80 L 400 78.2 L 397.2 80 L 398.3 77 L 395.8 75 L 398.8 75 Z"/>
   </g>
 </svg>
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index cb87f67..10d8ce7 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -2,7 +2,6 @@
 
 import { useState, FormEvent } from "react";
 import { useRouter } from "next/navigation";
-import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import Swal from "sweetalert2";
@@ -52,12 +51,11 @@ export default function LoginPage() {
       <div className="flex-1 flex items-center justify-center px-4">
         <div className="w-full max-w-sm">
           <div className="text-center mb-8">
-            <Image
+            <img
               src="/momo-logo.svg"
               alt="MOMO"
               width={180}
               height={68}
-              priority
               className="mx-auto mb-3 drop-shadow-[0_4px_12px_rgba(0,0,0,0.3)]"
             />
             <h1 className="text-2xl font-bold text-white tracking-tight">
@@ -117,7 +115,7 @@ export default function LoginPage() {
       <footer className="bg-white/95 border-t border-emerald-100 px-6 py-4">
         <div className="max-w-5xl mx-auto flex flex-wrap items-center gap-6">
           <div className="flex items-center gap-3">
-            <Image src="/momo-logo.svg" alt="MOMO" width={90} height={34} />
+            <img src="/momo-logo.svg" alt="MOMO" width={90} height={34} />
             <span className="text-xs font-bold text-emerald-700 tracking-widest">
               모모유통
             </span>
diff --git a/src/app/icon.svg b/src/app/icon.svg
index ee9a42b..1bb104e 100644
--- a/src/app/icon.svg
+++ b/src/app/icon.svg
@@ -7,7 +7,5 @@
     </linearGradient>
   </defs>
   <rect width="64" height="64" rx="14" fill="url(#fg)"/>
-  <g fill="#ffffff">
-    <text x="32" y="40" font-family="sans-serif" font-size="18" font-weight="900" text-anchor="middle" letter-spacing="-0.5">MOMO</text>
-  </g>
+  <text x="32" y="42" font-family="Helvetica, Arial, sans-serif" font-size="20" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="-1">MOMO</text>
 </svg>
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index fe993a1..dbf5577 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -6,7 +6,6 @@ import { cn } from "@/lib/utils";
 import { useMenuStore } from "@/store/menu-store";
 import { MENU_ICON_MAP } from "@/lib/constants";
 import { mapMenuUrl } from "@/lib/menu-url-map";
-import Image from "next/image";
 import {
   LayoutDashboard, TrendingUp, FolderKanban, Package, ListChecks,
   ShoppingCart, FileText, Warehouse, Boxes, Factory, Wrench,
@@ -102,7 +101,7 @@ export function Sidebar() {
       <div className="flex items-center justify-between px-3 py-3 border-b border-white/[0.06] shrink-0">
         {!isCollapsed ? (
           <div className="flex items-center gap-2 min-w-0">
-            <Image
+            <img
               src="/momo-icon.svg"
               alt="MOMO"
               width={28}
@@ -119,7 +118,7 @@ export function Sidebar() {
             </div>
           </div>
         ) : (
-          <Image src="/momo-icon.svg" alt="MOMO" width={24} height={24} className="mx-auto" />
+          <img src="/momo-icon.svg" alt="MOMO" width={24} height={24} className="mx-auto" />
         )}
         <button
           onClick={toggleCollapsed}