에어비앤비 클론 코딩 - input css 조정

Problem 

클릭했을 때 전화번호란 글자가 사라지고 

다른 input형식이 불러지게 하기

현재는 border만 달라진다.

왼쪽 사진을 잘못 잘라서 border가 얇아보이는 것이다!

 

First-Solve

어제까지 생긴 이슈는 전화번호 버튼을 누를 때마다 style이 달라야 하는데,

여기서 조건은 예를 들어 버튼을 누르면 z-index가 생기고 버튼 밖을 누르면 사라져야 했다.

 

그러나 나는 같은 버튼을 눌러야 생겼다 사라졌다했고

버튼 밖을 누르면 style이 변경되지 않고 유지 됐다.

 

★ 여기서 나는 if문을 사용했다.

 

className={inputOn === false ? "_tddesd":"_wbq"}

 

이름이 클릭에 따라 제대로 바뀌지 않는다.

 

Second - Solve

className={`${inputOn === false ? "_tddesd":"_wbq"}`}

다른 레퍼런스들을 보고 ``를 추가 했다.

 

제대로 바뀐다!

 

이렇게 다른 className도 적용하면 될 것 같다.

 

여기서 선택은 style에 if문을 넣거나

이름에 if문을 써서 따로 style해주는 것이다.

나는 아래 방법을 썼다.

 

 

그렇게 만든 전화번호 입력란 동작

---

Problem

modal 이 맨 위로 올라와야 하는데 그 뒤 검색시작하기가 위로 올라온다.

modal 창은 z-index :10이고 

그 뒤는 z-index가 3이다.

 

레퍼런스들을 찾아보니 이런 일이 종종 있는 것 같다.

 

Solve

검색하기의 z-index를 조정해보았는데 그래도 그대로고 css에서 아예 지워버리니 해결되었다.

 

 

---

중간점검

 

 

 

---

 

해결할 문제

closemodal을 없으면 버튼 클릭시 사라짐.

infoheader와 header 비교해서 왜 코드가 비슷한데 다르게 작동하는지 알아내기