Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
minseeeeo merged 2 commits into from
Jan 20, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ace3e4b
design: 로그인페이지 ui 수정사항 반영
minseeeeo Jan 14, 2026
204bb19
fix: 로그인 폼 제출 후, 실시간 유효성 검사 비활성화
minseeeeo Jan 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 src/assets/icons/signup/arrow-down.svg → src/assets/icons/auth/arrow-down.svg
View file
Open in desktop
File renamed without changes
0 src/assets/icons/signup/auth-checkbox.svg → src/assets/icons/auth/auth-checkbox.svg
View file
Open in desktop
File renamed without changes
0 src/assets/icons/signup/back-button.svg → src/assets/icons/auth/back-button.svg
View file
Open in desktop
File renamed without changes
0 src/assets/icons/signup/check-icon.svg → src/assets/icons/auth/check-icon.svg
View file
Open in desktop
File renamed without changes
0 src/assets/icons/signup/eye-close.svg → src/assets/icons/auth/eye-close.svg
View file
Open in desktop
File renamed without changes
0 src/assets/icons/signup/eye-open.svg → src/assets/icons/auth/eye-open.svg
View file
Open in desktop
File renamed without changes
0 src/assets/icons/signup/google.svg → src/assets/icons/auth/google.svg
View file
Open in desktop
File renamed without changes
0 src/assets/icons/signup/kakao.svg → src/assets/icons/auth/kakao.svg
View file
Open in desktop
File renamed without changes
6 changes: 0 additions & 6 deletions src/assets/icons/common/NECT.svg
View file
Open in desktop

This file was deleted.

31 changes: 0 additions & 31 deletions src/assets/icons/common/logo.svg
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions src/assets/icons/common/nect-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
59 changes: 40 additions & 19 deletions src/components/auth/login/AuthForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,49 @@
import Button from '@/components/common/Button'
import Input from '@/components/common/Input'
import SignupIcon from '@/assets/icons/signup/auth-checkbox.svg?react'
import EyeClosed from '@/assets/icons/signup/eye-close.svg?react'
import EyeOpen from '@/assets/icons/signup/eye-open.svg?react'
import CheckIcon from '@/assets/icons/signup/check-icon.svg?react'
import SignupIcon from '@/assets/icons/auth/auth-checkbox.svg?react'
import EyeClosed from '@/assets/icons/auth/eye-close.svg?react'
import EyeOpen from '@/assets/icons/auth/eye-open.svg?react'
import CheckIcon from '@/assets/icons/auth/check-icon.svg?react'

import { useState } from 'react'
import { type LoginFormType } from '@/utils/validate'
import { useLoginForm } from '@/hooks/useForm'
import { useNavigate } from 'react-router'

const AuthForm = () => {
const [showPassword, setShowPassword] = useState<boolean>(false)
const { register, handleSubmit, errors, watch, isValid, isDirty } = useLoginForm()
const [loginError, setLoginError] = useState<string>('')
const navigate = useNavigate()

// 유효성 검사용
const { register, handleSubmit, errors, watch } = useLoginForm()

// 폼 데이터 감시
const email = watch('email')
const password = watch('password')
const isAuthLogin = watch('autoLogin')

const onSubmit = (data: LoginFormType) => {
console.log('🍀 로그인 폼 제출 성공~!', data)
// 이메일과 비밀번호가 모두 입력되었는지 확인 (버튼 활성/비활성화용)
const isFormFilled = email && password

// 폼 제출 (로그인 버튼 클릭)
const onSubmit = () => {
setLoginError('')

// 나중에 api연결로 대체
try {
if (email === 'test@naver.com' && password === 'qwerty1!') {
console.log('로그인 성공!', email, password)
navigate('/')
Comment on lines +34 to +36
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
} else {
setLoginError('가입되지 않은 계정이거나, 아이디/비밀번호가 일치하지 않습니다.')
}
} catch {
Comment on lines +33 to +40
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The try-catch block here is unnecessary and misleading. The code inside the try block only contains synchronous operations and conditional logic that don't throw exceptions. The catch block will never be executed under normal circumstances. Remove the try-catch or only use it if you're actually making an API call that could throw an error.

Suggested change
try {
if (email === 'test@naver.com' && password === 'qwerty1!') {
console.log('로그인 성공!', email, password)
navigate('/')
} else {
setLoginError('가입되지 않은 계정이거나, 아이디/비밀번호가 일치하지 않습니다.')
}
} catch {
if (email === 'test@naver.com' && password === 'qwerty1!') {
console.log('로그인 성공!', email, password)
navigate('/')
} else {

Copilot uses AI. Check for mistakes.
setLoginError('가입되지 않은 계정이거나, 아이디/비밀번호가 일치하지 않습니다.')
}
}
Comment on lines +29 to 43
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The onSubmit function doesn't accept the validated form data parameter that react-hook-form's handleSubmit passes. While using watch() to access values works, this bypasses the standard pattern where validated data is passed as a parameter. This makes the code less clear about where the data comes from and whether it's validated. Consider accepting a parameter of type LoginFormType to follow react-hook-form best practices and make the data flow more explicit.

Copilot uses AI. Check for mistakes.

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

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
<form className='flex flex-col' onSubmit={handleSubmit(onSubmit)} noValidate>
<div className='flex flex-col gap-3'>
{/* 이메일 */}
Expand Down Expand Up @@ -57,7 +80,7 @@ const AuthForm = () => {
</div>

{/* 자동 로그인 */}
<label className=' w-fit flex justify-center items-center mt-3 mb-3.5 ml-1.25 gap-[2.5px] cursor-pointer '>
<label className=' w-fit h-5 flex justify-center items-center mt-3 mb-3.5 ml-1.25 gap-[2.5px] cursor-pointer '>
<input type='checkbox' className='peer hidden' {...register('autoLogin')} />
<SignupIcon
className={`duration-200 ease-in-out ${isAuthLogin ? 'text-primary-500-normal' : 'text-neutral-300 '}`}
Expand All @@ -67,27 +90,25 @@ const AuthForm = () => {
</span>
</label>

{errors.email && (
{/* 에러 메시지 영역 */}
{(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>
)}
Comment on lines +94 to 99
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.

{/* 로그인 버튼 */}
<Button color='auth' size='lg' fullWidth disabled={!isValid || !isDirty}>
<Button color='auth' size='lg' fullWidth disabled={!isFormFilled}>
로그인
</Button>
</form>

{/* 아이디/비번찾기 */}
<div className='mt-4.5 flex justify-center items-center gap-4.5 '>
<span className='body-1 text-neutral-500 cursor-pointer hover:text-neutral-700 duration-300 ease-in-out'>
아이디/비밀번호 찾기
</span>
<span className='body-1 text-neutral-500 cursor-pointer hover:underline'>아이디/비밀번호 찾기</span>
<span className='text-neutral-300'>|</span>
<span className='body-1 text-primary-400-normal cursor-pointer hover:text-primary-600-normal duration-300 ease-in-out'>
회원가입
</span>
<span className='body-1 text-primary-400-normal cursor-pointer hover:underline'>회원가입</span>
Comment on lines +109 to +111
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These interactive elements use span tags with cursor-pointer and hover styles, but they lack proper accessibility attributes and keyboard navigation support. Consider using button elements or adding role="button", tabIndex="0", and keyboard event handlers (onKeyDown) to make them accessible to keyboard users and screen readers.

Copilot uses AI. Check for mistakes.
</div>
</div>
)
Expand Down
10 changes: 3 additions & 7 deletions src/components/auth/login/AuthHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
import NectIcon from '@/assets/icons/common/logo.svg?react'
import NECT from '@/assets/icons/common/NECT.svg?react'
import NectLogoIcon from '@/assets/icons/common/nect-logo.svg?react'

const AuthHeader = () => {
return (
<>
<div className=' flex flex-col items-center justify-center mb-10.75 gap-4.75'>
<div className='flex justify-center items-center gap-4.5'>
<NectIcon />
<NECT />
</div>
<div className=' flex flex-col items-center justify-center mb-10.5 gap-4.75'>
<NectLogoIcon className='w-56.5 h-10' />
Comment on lines +6 to +7
Copy link

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The classes 'w-56.5', 'mb-10.5', and 'gap-4.75' use non-standard Tailwind spacing values with decimal points. Tailwind's spacing scale uses increments of 0.25 (e.g., 10, 10.5 would be 40px and 42px if they existed), but these specific values may not be in the default configuration. Verify these classes work with your Tailwind setup, or use standard values like 'w-56' (14rem / 224px), 'mb-10' (2.5rem / 40px), 'gap-5' (1.25rem / 20px) or arbitrary values like 'w-[226px]', 'mb-[42px]', 'gap-[19px]' if exact pixel values are required.

Suggested change
<div className=' flex flex-col items-center justify-center mb-10.5 gap-4.75'>
<NectLogoIcon className='w-56.5 h-10' />
<div className=' flex flex-col items-center justify-center mb-[42px] gap-[19px]'>
<NectLogoIcon className='w-[226px] h-10' />

Copilot uses AI. Check for mistakes.
<div className='title-1 text-neutral-900'>모든 창작자를 잇는 연결</div>
</div>
</>
Expand Down
8 changes: 4 additions & 4 deletions src/components/auth/login/SocialLogin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import GoogleIcon from '@/assets/icons/signup/google.svg?react'
import KakaoIcon from '@/assets/icons/signup/kakao.svg?react'
import GoogleIcon from '@/assets/icons/auth/google.svg?react'
import KakaoIcon from '@/assets/icons/auth/kakao.svg?react'
import Button from '@/components/common/Button'

const SocialLogin = () => {
Expand All @@ -13,13 +13,13 @@ const SocialLogin = () => {
</div>

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

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
<Button color='socialLogin' fullWidth>
<GoogleIcon className='w-5.25 h-5.25' />
Google 로그인
</Button>

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

Copilot AI Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
<KakaoIcon className='w-5.25 h-5.25' />
카카오 로그인
</Button>
Expand Down
2 changes: 1 addition & 1 deletion src/components/auth/onboarding/steps/Step3.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import TagButton from '@/components/common/TagButton'
import type { OnboardingFormType } from '@/utils/validate'
import { useState } from 'react'
import { useFormContext } from 'react-hook-form'
import CheckIcon from '@/assets/icons/signup/check-icon.svg?react'
import CheckIcon from '@/assets/icons/auth/check-icon.svg?react'

const skillsTitle = ['디자인', '개발', '기획', '마케팅', '기타']
const skillsDetail: Record<string, string[]> = {
Expand Down
2 changes: 1 addition & 1 deletion src/components/common/Accordion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useRef, useState } from 'react'
import { cn } from '@/utils/cn'
import ArrowDownIcon from '@/assets/icons/signup/arrow-down.svg?react'
import ArrowDownIcon from '@/assets/icons/auth/arrow-down.svg?react'
import { useOutsideClick } from '@/hooks/useOutsideClick'

interface IAccordion {
Expand Down
Loading
Loading