TIL 220901 화면구현 하면서 배운 이것저것

Top Button 구현하기

내가 짠 코드

...
const TopButton = (props) => {
  const [button, setButton] = useState(false);

  useEffect(() => {
    const handleShowButton = () => {
      window.scrollY > 750 && window.scrollY < 3590 // 메인페이지에서 footer까지 오면 사라짐
        ? setButton(true)
        : setButton(false);
    };
    window.addEventListener('scroll', handleShowButton);
    return () => {
      window.removeEventListener('scroll', handleShowButton);
    };
  });

  const handleScrollTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
    setButton(false); // 스크롤 올라가면 버튼 숨기기
  };

  return (
    <>
      {/* button state에 따라 opacity변경 */}
      <Button
        className='hide'
        onClick={handleScrollTop}
        style={{ opacity: button ? '100%' : '0%' }}
      >
...

 

팀원분이 짠 코드

const Button = styled.button`
  display: block;
  position: fixed;
  width: 50px;
  height: 50px;
  right: 10%;
  bottom: 8%;
  background-color: white;
  border: 3px solid ${({ theme }) => theme.colors.footerBg};
  transition: 0.3s;
  cursor: pointer;
  z-index: 10;
  opacity: ${({ button }) => (button ? '1' : '0')};
  visibility: ${({ button }) => (button ? 'visible' : 'hidden')};
`;

const TopButton = () => {
  const [button, setButton] = useState(false);

  useEffect(() => {
    const handleShowButton = () => {
      window.scrollY > window.innerHeight ? setButton(true) : setButton(false);
    };

    window.addEventListener('scroll', handleShowButton);

    return () => window.removeEventListener('scroll', handleShowButton);
  }, []);

  const handleScrollTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

  return (
    <Button className='hide' onClick={handleScrollTop} button={button}>
      <FontAwesomeIcon icon={faChevronUp} size='xl' />
    </Button>
  );
};

 

하면서도 잘 모르면서 구글링해서 어찌저찌 스크롤이벤트를 이용해서 구현하고 opacity를 줘서 사라지게 구현했는데 팀원분이 수정하신 코드를 보고 많이 배웠다.

 

배운점

1. 스크롤 위치를 하드 코딩하지 않고 window 객체를 이용해서 정해줌 => 불필요한 setState 함수를 사용하지 않아도 됨
2. opacity는 0과 1로도 할 수 있음
3. style을 컴포넌트에 직접적으로 넣지 않고 스타일드 컴포넌트 내에서 스타일을 설정해줌 (안돼서 그렇게 했는데 컴포넌트에 props를 전달해줘야 사용가능)
4. 스타일드 컴포넌트 내에서 props를 가져다가 쓰는 예시

• opacity와 visibility를 두개 다 사용하는 이유를 다시 찾아봐야겠다.

---

Wide 컴포넌트 구현하기

html 구조

...
<section className='last'>
        <div className='bgContainer'>
          <div className='textContainer'>
            <h4 className='title'>
              내 발에 맞는 사이즈가 없으시다고요?
              <br />
              맞춤신발을 제작해 드립니다!
            </h4>
...

 

내가 짠 코드

...
section.last {
    width: 1920px;
    margin: 170px 0 0 0;
    color: #fff;
    div.bgContainer {
      height: 480px;
      padding-left: 300px;
      background-image: url('https://image.prospecs.com/front/images/renewal/smartfit/bg_smartfit_footer_top.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100%;
      transform: translateX(-300px);
      
      div.textContainer {
        padding: 100px 0 0 20px;
        h4.title {
          margin-bottom: 30px;
          font-size: 40px;
          font-family: 'Spoqa Han Sans Neo', 'sans-serif';
          font-weight: 400;
          line-height: 50px;
        }
...

 

팀원분이 짠 코드

...
  section.last {
    width: 100%;
    margin: 170px 0 0 0;
    color: #fff;

    div.bgContainer {
      height: 480px;
      background-image: url('https://image.prospecs.com/front/images/renewal/smartfit/bg_smartfit_footer_top.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    div.textContainer {
      max-width: 1640px;
      width: 100%;
      padding: 100px 20px 0 20px;
      margin: 0 auto;
...

 

 

 

전체 컨테이너 넓이를 1280px로 하자고 해서 코드를 저렇게 짜긴했는데 그래도 화면에 꽉차는 컴포넌트를 구현하려고 굳이 transform을 써가면서 하드코딩을 하는 것보다 부모컴포넌트를 100%로 주고 자식 컴포넌트에 max-width를 주는 게 더 좋겠다는 생각이 들었다.

---

운 좋게 프로젝트 때 만나면 좋겠다고 생각하던 분이 팀원이 되셔서 여러가지 보고 배우고 있다. 프로젝트 시작하면서 배운적 없던 라이브러리 사용을 제안해주셔서 새롭게 공부하고 많이 배웠는데, 피드백과 코드 수정하신 것에서도 많이 배울 수 있었다. 그동안은 리뷰를 들으면서 같은 과제를 수행해서 남의 코드를 보고 크게 배우는 점이 없었는데 프로젝트는 리뷰없이 스스로 진행하다보니 코드를 보고 배우는 점이 많은 것 같다. 다른 사람이 작성한 코드를 보면서 배우는게 많다고 하던데 이를 체감할 수 있는 기회였다. 프로젝트가 끝나면 모든 코드를 보는 시간을 가져야겠다.