fix(login): SVG render via img tag + logo redesign
This commit is contained in:
chpark
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 661 B After Width: | Height: | Size: 685 B |
+39
-26
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
@@ -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>
|
||||
|
||||
+1
-3
@@ -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>
|
||||
|
||||
|
Before Width: | Height: | Size: 554 B After Width: | Height: | Size: 555 B |
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user