From eca3e76c7211242610f82beb572a84c39f751740 Mon Sep 17 00:00:00 2001
From: koreacomp5 <comp5@pluxity.com>
Date: Mon, 17 Nov 2025 10:36:53 +0900
Subject: [PATCH] color and logo

---
 src/app/globals.css    |  4 +++
 src/app/login/page.tsx | 56 +++++++++++-------------------------------
 2 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 25d6db3..f41dc85 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -14,10 +14,14 @@
   
   /*login color start*/
   --color-input-placeholder-text: #b1b8c0;
+
+  --color-neutral-40: #dee1e6;
   --color-input-border: #dee1e6;
 
   --color-basic-text: #4c5561;
 
+  /* color natural 700*/
+  --color-neutral-700: #333c47;
   --color-logo-text: #333c47;
   --color-input-border-select: #333c47;
   --color-input-alert-text: #333c47;
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 34facd4..fad0b96 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import MainLogo from "@/app/svgs/mainlogosvg"
 
 export default function LoginPage() {
 	const [userId, setUserId] = useState("");
@@ -19,14 +20,13 @@ export default function LoginPage() {
 	return (
 		<div className="min-h-screen w-full flex flex-col items-center justify-center">
 			{/* 카드 컨테이너 */}
-			<div className="w-[480px] rounded-xl border border-[var(--color-input-border)] bg-white p-8 shadow-sm">
+			<div className="w-[480px] rounded-xl bg-white p-8 ">
 				{/* 로고 영역 */}
 				<div className="mb-10 flex flex-col items-center">
-					<div className="mb-2 flex h-[54px] w-[72px] items-center justify-center rounded-md bg-[var(--color-inactive-button)]/20" />
-					<div
-						className="text-[28px] font-semibold leading-none"
-						style={{ color: "var(--color-logo-text)" }}
-					>
+          <div className="mb-[7px]">
+            <MainLogo/>
+          </div>
+					<div className="text-[28.8px] font-[800] leading-[145%]  text-neutral-700" >
 						XR LMS
 					</div>
 				</div>
@@ -44,25 +44,14 @@ export default function LoginPage() {
 								name="userId"
 								value={userId}
 								onChange={(e) => setUserId(e.target.value)}
-								placeholder="아이디"
-								className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
-								style={{
-									borderColor: "var(--color-input-border)",
-									color: "var(--color-basic-text)",
-									// placeholder 색상
-									// Tailwind v4 arbitrary 적용이 번거로워 인라인 사용
-								}}
-								onFocus={(e) => {
-									e.currentTarget.style.boxShadow =
-										"0 0 0 2px rgba(51,60,71,0.15)";
-									e.currentTarget.style.borderColor =
-										"var(--color-input-border-select)";
-								}}
-								onBlur={(e) => {
-									e.currentTarget.style.boxShadow = "none";
-									e.currentTarget.style.borderColor =
-										"var(--color-input-border)";
-								}}
+								placeholder="아이디 (이메일)"
+								className="w-[480px] h-[56px] px-[12px] py-[7px] rounded-[8px] border border-neutral-40
+                
+                focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
+                focus:appearance-none focus:border-neutral-700
+
+                text-[18px] text-neutral-700 font-[400] leading-[150%] placeholder:text-input-placeholder-text "
+
 							/>
 						</div>
 						{/* 비밀번호 */}
@@ -78,21 +67,6 @@ export default function LoginPage() {
 								onChange={(e) => setPassword(e.target.value)}
 								placeholder="비밀번호"
 								className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
-								style={{
-									borderColor: "var(--color-input-border)",
-									color: "var(--color-basic-text)",
-								}}
-								onFocus={(e) => {
-									e.currentTarget.style.boxShadow =
-										"0 0 0 2px rgba(51,60,71,0.15)";
-									e.currentTarget.style.borderColor =
-										"var(--color-input-border-select)";
-								}}
-								onBlur={(e) => {
-									e.currentTarget.style.boxShadow = "none";
-									e.currentTarget.style.borderColor =
-										"var(--color-input-border)";
-								}}
 							/>
 						</div>
 					</div>
@@ -132,7 +106,7 @@ export default function LoginPage() {
 					{/* 로그인 버튼 */}
 					<button
 						type="submit"
-						className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity"
+						className="h-14 w-full rounded-lg text-[16px] font-semibold text-white transition-opacity cursor-pointer"
 						style={{ backgroundColor: "var(--color-active-button)" }}
 					>
 						로그인