[TIL] Day 68 랜딩페이지 및 로그인페이지 예외처리

2024.01.10 수

 

 

 

 

Input Type

input calue에 바로 register 지정시 null값 해당 안됨.

→ 타입을 string | undefined으로 변경 / 초기 상태를 undefined 일때 경고 뜸

→ 그냥 name state 만들고 넣기로

→ 다시 타입을 타입을 string | null / state는 string으로 받고 input type만 type="number”로 줘서 스트링 입력을 막으면 된다. 데이터 값을 setRegister에 넣을 때 Number로 변환

 

 

 

로딩중 화면이 뜸

NextUI Button과 Link의 충돌

// 로딩이 걸려버림 (주소창에 직접 치고 접속하듯)
<Link href={'/main'}>
	<Button className="w-full bg-customGreen rounded-3xl cursor-pointer mb-10" type="button">
		시작하기
	</Button>
</Link>

// 정상작동 그러나 시작하기 글자만 Link 적용
<Button className="w-full bg-customGreen rounded-3xl cursor-pointer mb-10" type="button">
	<Link href={'/main'}>시작하기</Link>
</Button>

// 일반 button은 정상작동 그러나 NextUI CSS를 활용 못함
<button className="w-full bg-customGreen rounded-3xl cursor-pointer mb-10" type="button">
	<Link href={'/main'}>시작하기</Link>
</button>

 

해결!

아까는 안됐는데 지금은 왜 Link에 ClassName이 적용이 잘 되지?… Link의 크기를 정할 수 있다면 클릭되는 곳을 설정할 수 있기 때문이 해결가능

<Button className="w-full bg-customGreen rounded-3xl cursor-pointer mb-10">
	<Link href={'/main'} className="w-full p-2">
		시작하기
	</Link>
</Button>

 

 

 

Image 태그

외각 div에서 크기를 정해주고 내부엔 fill만 해주면 됨

<div className="relative flex justify-center items-center w-[37.5rem] h-[16.875rem]">
	<Image src={tutorial_avatar_all} alt="tutorial_avatar1" fill />
</div>

 

 

 

랜딩페이지 크기 조정

페이지에서 외곽 크기 설정

overflow-hidden

<div className="flex justify-center items-center h-screen overflow-hidden">
	<Landing />
</div>