feat(login): 스플릿 레이아웃 + 로고 리디자인 (좌 브랜드 히어로 / 우 폼)
This commit is contained in:
chpark
@@ -2,12 +2,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||||
<defs>
|
||||
<linearGradient id="fg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2E8B57"/>
|
||||
<stop offset="0%" stop-color="#1b5e3a"/>
|
||||
<stop offset="100%" stop-color="#3CB371"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="14" fill="url(#fg)"/>
|
||||
<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"/>
|
||||
<rect width="64" height="64" rx="16" fill="url(#fg)"/>
|
||||
<!-- Stylized M with sparkle -->
|
||||
<text x="32" y="43" font-family="'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-size="32" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="-2">M</text>
|
||||
<circle cx="51" cy="14" r="2" fill="#ffffff" opacity="0.95"/>
|
||||
<circle cx="56" cy="20" r="1.2" fill="#ffffff" opacity="0.7"/>
|
||||
<circle cx="47" cy="9" r="1.1" fill="#ffffff" opacity="0.6"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 685 B After Width: | Height: | Size: 799 B |
+41
-32
@@ -1,43 +1,52 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<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>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 160" width="480" height="160">
|
||||
<defs>
|
||||
<linearGradient id="momoG" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0%" stop-color="#1b5e3a"/>
|
||||
<stop offset="55%" stop-color="#2E8B57"/>
|
||||
<stop offset="100%" stop-color="#3CB371"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="sparkleG" x1="0" y1="0" x2="1" y2="0">
|
||||
<stop offset="0%" stop-color="#7ED9A7" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#7ED9A7" stop-opacity="0.9"/>
|
||||
<stop offset="100%" stop-color="#7ED9A7" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- MOMO 텍스트 -->
|
||||
<text x="0" y="108" class="momo-text">MOMO</text>
|
||||
<!-- Magical trail sweeping across the letters -->
|
||||
<path d="M 10 118 Q 120 98 240 118 T 470 108"
|
||||
fill="none" stroke="url(#sparkleG)" stroke-width="3" stroke-linecap="round"/>
|
||||
|
||||
<!-- 요정 (stylized figure) above last O -->
|
||||
<g fill="#2E8B57" transform="translate(352 12)">
|
||||
<!-- MOMO wordmark -->
|
||||
<g fill="url(#momoG)" font-family="'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-weight="900">
|
||||
<text x="0" y="120" font-size="128" letter-spacing="-6">MOMO</text>
|
||||
</g>
|
||||
|
||||
<!-- Fairy silhouette above the second O -->
|
||||
<g fill="url(#momoG)" transform="translate(395 6)">
|
||||
<!-- hair -->
|
||||
<path d="M 12 2 Q 6 -2 3 5 Q 8 3 14 5 Z"/>
|
||||
<!-- 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"/>
|
||||
<circle cx="13" cy="9" r="4.2"/>
|
||||
<!-- body / dress flowing -->
|
||||
<path d="M 13 13 Q 7 22 6 34 L 20 34 Q 19 22 13 13 Z"/>
|
||||
<!-- arm with wand -->
|
||||
<path d="M 14 15 L 29 7 L 31 10 L 16 18 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 transform="translate(30 3) scale(0.7)">
|
||||
<path d="M 3 0 L 4 2.5 L 7 2.8 L 4.7 4.7 L 5.5 7.5 L 3 6 L 0.5 7.5 L 1.3 4.7 L -1 2.8 L 2 2.5 Z"/>
|
||||
</g>
|
||||
<!-- 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"/>
|
||||
<path d="M 7 18 Q -2 14 -1 28 Q 4 25 9 23 Z" opacity="0.5"/>
|
||||
<path d="M 19 18 Q 28 14 27 28 Q 22 25 17 23 Z" opacity="0.5"/>
|
||||
</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"/>
|
||||
<!-- Sparkles scattered -->
|
||||
<g fill="#3CB371">
|
||||
<circle cx="450" cy="18" r="2.4"/>
|
||||
<circle cx="438" cy="32" r="1.4"/>
|
||||
<circle cx="460" cy="42" r="1.8"/>
|
||||
<circle cx="430" cy="10" r="1.2" opacity="0.7"/>
|
||||
<path d="M 455 62 L 456.5 65.5 L 460 66 L 457.5 68.5 L 458.5 72 L 455 70 L 451.5 72 L 452.5 68.5 L 450 66 L 453.5 65.5 Z" opacity="0.85"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 2.1 KiB |
+145
-80
@@ -2,14 +2,14 @@
|
||||
|
||||
import { useState, FormEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { User, Lock, Eye, EyeOff, ArrowRight, Phone, Mail, MapPin } from "lucide-react";
|
||||
import Swal from "sweetalert2";
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter();
|
||||
const [userId, setUserId] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [showPw, setShowPw] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: FormEvent) => {
|
||||
@@ -47,94 +47,159 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-gradient-to-br from-[#0d3b24] via-[#1b5e3a] to-[#0f4a2a] relative overflow-hidden">
|
||||
<div className="flex-1 flex items-center justify-center px-4">
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="text-center mb-8">
|
||||
<img
|
||||
src="/momo-logo.svg"
|
||||
alt="MOMO"
|
||||
width={180}
|
||||
height={68}
|
||||
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">
|
||||
모모유통
|
||||
</h1>
|
||||
<p className="text-emerald-100/70 text-sm mt-1 tracking-wide">
|
||||
유통관리 ERP
|
||||
</p>
|
||||
<div className="min-h-screen flex flex-col lg:flex-row bg-white">
|
||||
{/* 좌측: 브랜드 히어로 패널 */}
|
||||
<div className="relative lg:flex-1 lg:min-h-screen overflow-hidden bg-gradient-to-br from-[#0d3b24] via-[#1b5e3a] to-[#0f4a2a] px-10 py-16 lg:py-0 flex flex-col justify-between">
|
||||
{/* 배경 패턴 */}
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none opacity-30"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"radial-gradient(circle at 20% 30%, rgba(126,217,167,0.25) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(46,139,87,0.3) 0, transparent 45%), radial-gradient(circle at 50% 50%, rgba(60,179,113,0.18) 0, transparent 55%)",
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className="absolute inset-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage:
|
||||
"linear-gradient(rgba(255,255,255,0.04) 1px, transparent 0), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 0)",
|
||||
backgroundSize: "48px 48px",
|
||||
}}
|
||||
/>
|
||||
{/* 반짝이 파티클 */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-[12%] left-[18%] w-1 h-1 rounded-full bg-emerald-200/80 animate-pulse" />
|
||||
<div className="absolute top-[25%] right-[22%] w-2 h-2 rounded-full bg-emerald-300/60 animate-pulse" style={{ animationDelay: "1s" }} />
|
||||
<div className="absolute bottom-[28%] left-[35%] w-1.5 h-1.5 rounded-full bg-emerald-200/70 animate-pulse" style={{ animationDelay: "2s" }} />
|
||||
<div className="absolute top-[60%] right-[15%] w-1 h-1 rounded-full bg-emerald-100/80 animate-pulse" style={{ animationDelay: "0.5s" }} />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<img src="/momo-icon.svg" alt="MOMO" className="w-11 h-11" />
|
||||
<span className="text-white/95 text-sm font-semibold tracking-widest">
|
||||
MOMO DISTRIBUTION
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-white rounded-xl shadow-2xl p-8 space-y-5"
|
||||
>
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1.5">
|
||||
아이디
|
||||
</label>
|
||||
<Input
|
||||
type="text"
|
||||
value={userId}
|
||||
onChange={(e) => setUserId(e.target.value)}
|
||||
placeholder="사용자 아이디를 입력하세요"
|
||||
autoFocus
|
||||
autoComplete="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-500 mb-1.5">
|
||||
비밀번호
|
||||
</label>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full h-11 text-sm font-semibold bg-emerald-700 hover:bg-emerald-800"
|
||||
>
|
||||
{loading ? "로그인 중..." : "로그인"}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<p className="text-center text-emerald-100/50 text-xs mt-6">
|
||||
© 2026 MOMO DISTRIBUTION. All rights reserved.
|
||||
<div className="relative z-10 flex-1 flex flex-col justify-center py-12 lg:py-0">
|
||||
<img src="/momo-logo.svg" alt="MOMO" className="w-[280px] lg:w-[360px] mb-6 drop-shadow-[0_8px_24px_rgba(0,0,0,0.35)]" />
|
||||
<h2 className="text-white text-3xl lg:text-4xl font-bold mb-3 tracking-tight">
|
||||
모모유통 <span className="text-emerald-200">유통관리 ERP</span>
|
||||
</h2>
|
||||
<p className="text-emerald-100/80 text-base lg:text-lg leading-relaxed max-w-lg">
|
||||
발주 · 입고 · 명세서 · 정산까지 —<br />
|
||||
유통 업무의 모든 흐름을 한 곳에서.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 text-emerald-100/70 text-[12px] space-y-1.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={13} className="shrink-0" />
|
||||
<span><span className="text-emerald-200 font-semibold mr-2">본사</span>경기도 의왕시 벌모루길 46 B동</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin size={13} className="shrink-0" />
|
||||
<span><span className="text-emerald-200 font-semibold mr-2">지사</span>경기도 김포시 고촌읍 김포대로 451번길 210</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 pt-1 text-emerald-100/60">
|
||||
<span className="flex items-center gap-1.5"><Phone size={12} />010-6624-5315</span>
|
||||
<span className="flex items-center gap-1.5"><Mail size={12} />momo8443@daum.net</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<img src="/momo-logo.svg" alt="MOMO" width={90} height={34} />
|
||||
<span className="text-xs font-bold text-emerald-700 tracking-widest">
|
||||
모모유통
|
||||
</span>
|
||||
{/* 우측: 로그인 폼 */}
|
||||
<div className="lg:flex-1 flex items-center justify-center px-6 py-16 lg:py-0 bg-slate-50">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-10">
|
||||
<div className="inline-flex items-center gap-2 text-emerald-700 text-xs font-bold tracking-widest mb-3">
|
||||
<span className="w-6 h-[2px] bg-emerald-600" />
|
||||
WELCOME BACK
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-slate-900 mb-2">로그인</h1>
|
||||
<p className="text-slate-500 text-sm">
|
||||
계정 정보를 입력하고 유통관리 ERP에 접속하세요.
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-[11px] text-gray-600 leading-relaxed flex-1 min-w-[280px]">
|
||||
<p>
|
||||
<span className="font-bold text-emerald-700 mr-2">본사</span>
|
||||
경기도 의왕시 벌모루길 46 B동
|
||||
</p>
|
||||
<p>
|
||||
<span className="font-bold text-emerald-700 mr-2">지사</span>
|
||||
경기도 김포시 고촌읍 김포대로 451번길 210
|
||||
</p>
|
||||
<p className="mt-0.5 text-gray-500">
|
||||
T 010-6624-5315 · E momo8443@daum.net
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-[12px] font-semibold text-slate-600 mb-2 tracking-wide">
|
||||
아이디
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<User
|
||||
size={16}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-emerald-600 transition-colors"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={userId}
|
||||
onChange={(e) => setUserId(e.target.value)}
|
||||
placeholder="아이디를 입력하세요"
|
||||
autoFocus
|
||||
autoComplete="username"
|
||||
className="w-full h-12 pl-11 pr-4 rounded-xl border border-slate-200 bg-white text-sm text-slate-900 placeholder-slate-400 shadow-sm focus:outline-none focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 transition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-[12px] font-semibold text-slate-600 mb-2 tracking-wide">
|
||||
비밀번호
|
||||
</label>
|
||||
<div className="relative group">
|
||||
<Lock
|
||||
size={16}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-emerald-600 transition-colors"
|
||||
/>
|
||||
<input
|
||||
type={showPw ? "text" : "password"}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="비밀번호를 입력하세요"
|
||||
autoComplete="current-password"
|
||||
className="w-full h-12 pl-11 pr-12 rounded-xl border border-slate-200 bg-white text-sm text-slate-900 placeholder-slate-400 shadow-sm focus:outline-none focus:border-emerald-500 focus:ring-4 focus:ring-emerald-500/10 transition"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPw((v) => !v)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 text-slate-400 hover:text-slate-700 transition-colors"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPw ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="group relative w-full h-12 rounded-xl bg-gradient-to-r from-emerald-700 to-emerald-600 text-white text-sm font-bold tracking-wide shadow-lg shadow-emerald-600/25 hover:shadow-emerald-600/40 hover:-translate-y-0.5 active:translate-y-0 transition-all disabled:opacity-60 disabled:cursor-not-allowed disabled:translate-y-0 flex items-center justify-center gap-2"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<span className="w-4 h-4 border-2 border-white/40 border-t-white rounded-full animate-spin" />
|
||||
로그인 중...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
로그인
|
||||
<ArrowRight size={16} className="group-hover:translate-x-0.5 transition-transform" />
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="mt-12 pt-6 border-t border-slate-200 text-center">
|
||||
<p className="text-[11px] text-slate-400 tracking-wide">
|
||||
© 2026 MOMO DISTRIBUTION. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
+5
-3
@@ -2,10 +2,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
|
||||
<defs>
|
||||
<linearGradient id="fg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#2E8B57"/>
|
||||
<stop offset="0%" stop-color="#1b5e3a"/>
|
||||
<stop offset="100%" stop-color="#3CB371"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="64" height="64" rx="14" fill="url(#fg)"/>
|
||||
<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>
|
||||
<rect width="64" height="64" rx="16" fill="url(#fg)"/>
|
||||
<text x="32" y="43" font-family="'Segoe UI', 'Helvetica Neue', Arial, sans-serif" font-size="32" font-weight="900" fill="#ffffff" text-anchor="middle" letter-spacing="-2">M</text>
|
||||
<circle cx="51" cy="14" r="2" fill="#ffffff" opacity="0.95"/>
|
||||
<circle cx="56" cy="20" r="1.2" fill="#ffffff" opacity="0.7"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 555 B After Width: | Height: | Size: 700 B |
Reference in New Issue
Block a user