[DESIGN] 로그인페이지 ui 수정사항 반영 #27

minseeeeo · 2026-01-14T05:16:12Z

[DESIGN] 로그인페이지 ui 수정사항 반영

🎯 Issue

#24

📝 변경 내용

로그인 페이지에서의 디자인 변경사항을 반영하였습니다.

y값 고정
로그인헤더와 입력필드 사이 간격 조정 (43px->42px)
자동로그인 높이 조정 (21px->20px)
소셜로그인 ui 변경 (테두리만 있는 버튼->색상입힌 버튼)
이메일 유효성검사 메시지 변경
유효성검사 메시지 출력방식 조정 (기존: 폼이 위로 밀림 -> 변경: 폼은 그대로 있고, 자동로그인을 기점으로 아래로 밀리듯이 출력)

✅ 변경 사항

📷 스크린샷

issue.24.mov

📋 체크리스트

브라우저에서 정상 동작 확인
기존 기능에 영향 없음 확인

netlify · 2026-01-14T05:16:17Z

✅ Deploy Preview for umc-nect ready!

Name	Link
🔨 Latest commit	`204bb19`
🔍 Latest deploy log	https://app.netlify.com/projects/umc-nect/deploys/696b5df4afc623000847f890
😎 Deploy Preview	https://deploy-preview-27--umc-nect.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot

Pull request overview

Copilot reviewed 12 out of 23 changed files in this pull request and generated 15 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-17T10:07:19Z

src/components/auth/login/AuthForm.tsx

+				{(errors.email || loginError) && (
 					<div className='flex items-center mb-3'>
 						<CheckIcon className='w-3 h-3 text-danger-700 mr-1' />
-						<p className='body-2 text-danger-700'>{errors.email.message}</p>
+						<p className='body-2 text-danger-700'>{errors.email?.message || loginError}</p>
 					</div>
 				)}


The error display logic only shows email validation errors and ignores password validation errors. If a password error exists (e.g., empty password since min(1) is now required), it won't be displayed to the user. The condition should check for both errors.email and errors.password to provide complete validation feedback.

Copilot · 2026-01-17T10:07:19Z

src/components/common/Button.tsx

+		auth: 'title-2 bg-primary-500-normal text-neutral-000 font-medium disabled:font-normal disabled:bg-primary-200-light',
 		socialLogin:
-			'w-full h-14 title-2 text-neutral-900 py-3.5 border border-neutral-700 flex justify-center items-center gap-2.5 hover:bg-neutral-200 duration-200 ease-in-out',
+			'w-full h-14 title-2 text-neutral-900 py-3.5 border border-neutral-300 rounded-12 flex justify-center items-center gap-3',


The hover state for social login buttons has been removed. The previous implementation had hover:bg-neutral-200 duration-200 ease-in-out which provided visual feedback. Removing hover effects makes the buttons feel less interactive. Consider adding a hover state that's appropriate for the new design (e.g., opacity change, slight color shift, or shadow effect).

Suggested change

'w-full h-14 title-2 text-neutral-900 py-3.5 border border-neutral-300 rounded-12 flex justify-center items-center gap-3',

'w-full h-14 title-2 text-neutral-900 py-3.5 border border-neutral-300 rounded-12 flex justify-center items-center gap-3 hover:bg-neutral-50',

Copilot · 2026-01-17T10:07:19Z

src/components/auth/login/SocialLogin.tsx

 				</Button>

-				<Button color='socialLogin' fullWidth>
+				<Button color='socialLogin' fullWidth className='bg-social-kakao border-none'>


The Kakao login button applies 'bg-social-kakao border-none' as className props, but the socialLogin button style already includes 'border border-neutral-300'. When applying 'border-none' through className, it should override the border, but there might be specificity issues. Consider refactoring the Button component to accept a variant prop for different social login providers rather than overriding styles through className, which is more maintainable and follows component design best practices.

Suggested change

<Button color='socialLogin' fullWidth className='bg-social-kakao border-none'>

<Button color='socialLogin' fullWidth className='bg-social-kakao'>

Copilot · 2026-01-17T10:07:19Z

src/components/auth/login/AuthForm.tsx


 	return (
-		<div className=' w-[50%] mb-6.5'>
+		<div className=' w-105 mb-6.5'>


The class 'w-105' uses a non-standard Tailwind width value. Tailwind's default spacing scale goes up to 96 (384px), and '105' is not a standard value. This will likely not work unless a custom width has been defined in the Tailwind config. Consider using standard Tailwind width values like 'w-96' (24rem / 384px) or a custom arbitrary value like 'w-[420px]' if a specific pixel width is required, or define this custom value in your Tailwind configuration.

Suggested change

<div className=' w-105 mb-6.5'>

<div className=' w-[420px] mb-6.5'>

Copilot · 2026-01-17T10:07:20Z

src/components/auth/login/AuthForm.tsx

+			if (email === 'test@naver.com' && password === 'qwerty1!') {
+				console.log('로그인 성공!', email, password)
+				navigate('/')


Hardcoded test credentials should not be committed to the repository, even with a comment indicating they are temporary. This is a security risk as it exposes valid test credentials that could be used maliciously. Consider using environment variables or a separate configuration file that is not committed to version control for test credentials.

Copilot · 2026-01-17T10:07:21Z

src/hooks/useForm.ts

+		getValues,
 	}
 }



The getValues function is exported from the hook but is never used anywhere in the consuming component (AuthForm). This adds unnecessary API surface. Remove the getValues from the return object if it's not needed, or remove this comment if it will be used in future implementations.

Suggested change

getValues,

}

}

}

}

Copilot · 2026-01-17T10:07:21Z

src/components/common/Button.tsx


 	const colors = {
-		auth: 'title-2 bg-primary-500-normal text-neutral-000 disabled:bg-primary-150-light disabled:text-primary-300-light hover:bg-primary-600-normal duration-300 ease-in-out',
+		auth: 'title-2 bg-primary-500-normal text-neutral-000 font-medium disabled:font-normal disabled:bg-primary-200-light',


The hover state has been removed from the auth button styling. Previously it had hover:bg-primary-600-normal which provided visual feedback on hover. Removing hover effects can negatively impact user experience by making it unclear whether the button is interactive. Consider re-adding hover state styling for better UX.

Suggested change

auth: 'title-2 bg-primary-500-normal text-neutral-000 font-medium disabled:font-normal disabled:bg-primary-200-light',

auth: 'title-2 bg-primary-500-normal text-neutral-000 font-medium hover:bg-primary-600-normal disabled:font-normal disabled:bg-primary-200-light',

Copilot · 2026-01-17T10:07:22Z

src/pages/auth/LoginPage.tsx

 const LoginPage = () => {
 	return (
-		<div className=' min-h-screen flex flex-col justify-center items-center'>
+		<div className=' min-h-screen flex flex-col pt-38.75 items-center'>


The class 'pt-38.75' uses a non-standard Tailwind spacing value. Tailwind CSS uses a spacing scale based on 0.25rem (4px) increments, and '38.75' doesn't correspond to a standard spacing value in Tailwind's default configuration. This will likely not work unless a custom spacing value has been defined in the Tailwind config. Consider using standard Tailwind spacing values like 'pt-40' (10rem / 160px) or 'pt-36' (9rem / 144px), or define this custom value in your Tailwind configuration if 155px (38.75 * 4px) is required.

Suggested change

<div className=' min-h-screen flex flex-col pt-38.75 items-center'>

<div className=' min-h-screen flex flex-col pt-40 items-center'>

Copilot · 2026-01-17T10:07:22Z

src/components/auth/login/SocialLogin.tsx


 			{/* 소셜 로그인 */}
-			<div className='w-[50%] flex flex-col gap-3'>
+			<div className='w-105 flex flex-col gap-3'>


The class 'w-105' uses a non-standard Tailwind width value. Tailwind's default spacing scale goes up to 96 (384px), and '105' is not a standard value. This will likely not work unless a custom width has been defined in the Tailwind config. Consider using standard Tailwind width values like 'w-96' (24rem / 384px) or a custom arbitrary value like 'w-[420px]' if a specific pixel width is required, or define this custom value in your Tailwind configuration.

Suggested change

<div className='w-105 flex flex-col gap-3'>

<div className='w-[420px] flex flex-col gap-3'>

Copilot · 2026-01-17T10:07:22Z

src/components/common/Input.tsx


 		const baseStyles = {
-			auth: 'w-full h-14 px-4 py-3.5 rounded-10 border-[1.5px] border-neutral-200 bg-neutral-100 focus:border-primary-500-normal focus:outline-none title-2 placeholder:text-neutral-300',
+			auth: 'w-full h-14 px-4 py-3.5 rounded-[12px] border-[1.5px] border-neutral-200 text-neutral-900 bg-neutral-100 focus:border-primary-500-normal focus:outline-none title-2 placeholder:text-neutral-300',


The border-radius has been changed from 'rounded-10' to 'rounded-[12px]'. The 'rounded-10' was likely using a custom radius value from the CSS theme (--radius-10: 10px), while 'rounded-[12px]' is an arbitrary value. For consistency with the design system defined in index.css which includes radius values (--radius-10, --radius-12, etc.), consider using 'rounded-12' instead of the arbitrary value 'rounded-[12px]' if a 12px radius is desired and defined in the theme.

Suggested change

auth: 'w-full h-14 px-4 py-3.5 rounded-[12px] border-[1.5px] border-neutral-200 text-neutral-900 bg-neutral-100 focus:border-primary-500-normal focus:outline-none title-2 placeholder:text-neutral-300',

auth: 'w-full h-14 px-4 py-3.5 rounded-12 border-[1.5px] border-neutral-200 text-neutral-900 bg-neutral-100 focus:border-primary-500-normal focus:outline-none title-2 placeholder:text-neutral-300',

minseeeeo requested review from Dawon-Y, kyeongb-bin and limtjdghks January 14, 2026 05:16

minseeeeo self-assigned this Jan 14, 2026

Copilot AI review requested due to automatic review settings January 14, 2026 05:16

minseeeeo added 🎨 Design UI/UX 디자인 변경 🐹 미노 미노/김민서 labels Jan 14, 2026

Copilot started reviewing on behalf of minseeeeo January 14, 2026 05:16 View session

Copilot AI reviewed Jan 14, 2026

View reviewed changes

minseeeeo linked an issue Jan 15, 2026 that may be closed by this pull request

[DESIGN] 로그인 ui 수정 #24

Closed

6 tasks

Dawon-Y approved these changes Jan 16, 2026

View reviewed changes

minseeeeo added 2 commits January 17, 2026 18:48

design: 로그인페이지 ui 수정사항 반영

ace3e4b

fix: 로그인 폼 제출 후, 실시간 유효성 검사 비활성화

204bb19

Copilot AI review requested due to automatic review settings January 17, 2026 10:01

minseeeeo force-pushed the feature/24-design-login-page branch from 94d8e53 to 204bb19 Compare January 17, 2026 10:01

Copilot started reviewing on behalf of minseeeeo January 17, 2026 10:01 View session

Copilot AI reviewed Jan 17, 2026

View reviewed changes

kyeongb-bin approved these changes Jan 20, 2026

View reviewed changes

minseeeeo merged commit a8cf507 into dev Jan 20, 2026
10 checks passed

	'w-full h-14 title-2 text-neutral-900 py-3.5 border border-neutral-300 rounded-12 flex justify-center items-center gap-3',
	'w-full h-14 title-2 text-neutral-900 py-3.5 border border-neutral-300 rounded-12 flex justify-center items-center gap-3 hover:bg-neutral-50',

	<Button color='socialLogin' fullWidth className='bg-social-kakao border-none'>
	<Button color='socialLogin' fullWidth className='bg-social-kakao'>

	<div className=' w-105 mb-6.5'>
	<div className=' w-[420px] mb-6.5'>

	auth: 'title-2 bg-primary-500-normal text-neutral-000 font-medium disabled:font-normal disabled:bg-primary-200-light',
	auth: 'title-2 bg-primary-500-normal text-neutral-000 font-medium hover:bg-primary-600-normal disabled:font-normal disabled:bg-primary-200-light',

	<div className=' min-h-screen flex flex-col pt-38.75 items-center'>
	<div className=' min-h-screen flex flex-col pt-40 items-center'>

	<div className='w-105 flex flex-col gap-3'>
	<div className='w-[420px] flex flex-col gap-3'>

	auth: 'w-full h-14 px-4 py-3.5 rounded-[12px] border-[1.5px] border-neutral-200 text-neutral-900 bg-neutral-100 focus:border-primary-500-normal focus:outline-none title-2 placeholder:text-neutral-300',
	auth: 'w-full h-14 px-4 py-3.5 rounded-12 border-[1.5px] border-neutral-200 text-neutral-900 bg-neutral-100 focus:border-primary-500-normal focus:outline-none title-2 placeholder:text-neutral-300',

[DESIGN] 로그인페이지 ui 수정사항 반영 #27

[DESIGN] 로그인페이지 ui 수정사항 반영 #27

Uh oh!

Conversation

minseeeeo commented Jan 14, 2026

[DESIGN] 로그인페이지 ui 수정사항 반영

🎯 Issue

#24

📝 변경 내용

✅ 변경 사항

📷 스크린샷

📋 체크리스트

Uh oh!

netlify bot commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for umc-nect ready!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify bot commented Jan 14, 2026 •

edited

Loading