에어비앤비 클론코딩 - 6주차

5주차 피드백

 

버튼 클릭시 헤더 css 달라지게 만들기

 

Problem

첫번째 버튼을 누르면 해당 배경 색과 버튼 색이 잘 변경된다.

그러나 문제는 두번쨰 버튼, 두번째 버튼을 누르면 버튼이 변하고 배경생기 첫번쨰 버튼을 눌렀을 떄 와 샅아져야 하는데 그렇기 않고 첫번쨰 버튼과 같이 동작한다.

 

 

First - Solve

styled component사용하기

const Backcolor = styled.div `
 background-color: ${props => props.primary ? "#FFFFFF":"#EBEBEB"};
`;

이렇게 선언해주고 

<Backcolor className="pokmlm" primary={false}>

요렇게 해주니 내가 원하는 값으로 세팅이 되긴 했다.

 

하지만 문제는 클릭 될때 마다 바뀌어야 한다는 것...

 

지금은 따로 표기를 안해주면 

그대로 색이 유지된다.

 

 

Second - Solve 

결국 따로 if문을 작성해주는 방법으로 바꿔보았다.

    const [headerout, setHeaderout] = useState(false);//여행지
    const [checkin, setCheckin] = useState(false);//체크인
    const [checkout, setCheckout] = useState(false);//체크아웃
    const [traveler, setTraveler] = useState(false);//여행자

headerout , checkin, checkout, traveler 중 하나만 true여도 배경색이 회색으로 바뀌기!

 

<div className="pokmlm" style={{backgroundColor: (headerout===true||checkin===true||checkout===true||traveler===true) ? "#FFFFFF":"#EBEBEB"}}>

이렇게 해줬는데 여전히 첫번째 headerout만 반영된다.

 

결국 하나 하나 true, false값을 확인해가며 넣어줬더니 작동된다.

 

그에 맞게 검색버튼도 달리 해주었다.

 

 

아직 허술한 부분이 많지만 얼추 모습을 갖추었다.

 

 

---

 

Problem

이번엔 헤더가 열린 상태에서 스크롤하면 헤더가 원래 css로 돌아가도록 해야한다.

 

 저번에 스크롤하면 헤더가 생겼다 사라졌다 하게 만든 코드를 가져왔다.

 

const [scrollPosition, setScrollPosition] = useState(0);

    const updateScroll = () => {
        setScrollPosition(window.scrollY || document.documentElement.scrollTop);
    }
    useEffect(()=>{
        window.addEventListener('scroll', updateScroll);
    });

 

First - Solve

 className={search===true && scrollPosition <200 ? "qweds" : "puio"}

조건으로 search만 있던 자리에 추가로 스크롤을 넣어주었다.

search는 원래헤더로 되돌아가게 하는 함수이다.

하지만 이렇게 하니까 문제가 추가로 하나 더 생겼다.

 

스크롤을 내리면 원래의 헤더로 잘 돌아가는데 

올리면 다시 원래도 열린 헤더로 돌아가는 것이다.

 

Second - Solve

그래서 나는 실시간으로(?) 적용되는 useEffect를 사용했다.

 

useEffect(()=>{
        if(scrollPosition>200){
            setSearch(false);
            return;
        }
    })

if밖에 true문을 추가로 넣어주면 다시 첫번째 해결법에서 나타난 문제가 발생한다.

그래서 이 true문을 빼 주면 

 

스크롤을 내렸다 올려도 원래 헤더상태로 유지된다.

 

 

 

---

 

Next

헤더 더 수정하기

반응형 웹으로 만들기