color and logo

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;

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="mb-[7px]">
-					<div
+            <MainLogo/>
-						className="text-[28px] font-semibold leading-none"
+          </div>
-						style={{ color: "var(--color-logo-text)" }}
+					<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="아이디"
+								placeholder="아이디 (이메일)"
-								className="h-14 w-full rounded-lg border px-4 text-[15px] outline-none transition-shadow"
+								className="w-[480px] h-[56px] px-[12px] py-[7px] rounded-[8px] border border-neutral-40
-								style={{
+                
-									borderColor: "var(--color-input-border)",
+                focus:outline-none focus:ring-0 focus:ring-offset-0 focus:shadow-none
-									color: "var(--color-basic-text)",
+                focus:appearance-none focus:border-neutral-700
-									// placeholder 색상
+
-									// Tailwind v4 arbitrary 적용이 번거로워 인라인 사용
+                text-[18px] text-neutral-700 font-[400] leading-[150%] placeholder:text-input-placeholder-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>
 						{/* 비밀번호 */}
@@ -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)" }}
 					>
 						로그인