Next.js 포트폴리오 페이지 제작기 - 6. Contact & Navigation

# 계획

이랄게 없다.

Contact이랑 Navigation은 딱히 아이디어가 안떠오르므로 그냥 깔끔하게 만들고 마무리하기로 했다.

 

# Contact page

너무 간단한가... 싶긴 한데... 아이디어가 없....

그래도 마지막까지 이걸 읽어보실 분들을 위해 Scroll Down 을 다 내리면 Scroll Down이 Thank you for watching으로 바뀌도록 해놓았다.

export default function ContactComponent() {
  return (
    <>
      <div className={styles.contactWrapper} id="conatactWrapper">
        <p className={styles.title}>Contact</p>
        <div className={styles.contentWrapper}>
          <div className={styles.content}>
            <div className={styles.icon}>{images.email}</div>
            <span className={styles.desc}>E-MAIL</span>
            <span className={styles.desc}>swcho8220@gmail.com</span>
            <Link href="mailto:swcho8220@gmail.com"></Link>
          </div>
          <div className={styles.content}>
            <div className={styles.icon}>{images.github}</div>
            <span className={styles.desc}>GitHub</span>
            <span className={styles.desc}>https://github.com/dev-wann</span>
            <Link href="https://github.com/dev-wann"></Link>
          </div>
          <div className={styles.content}>
            <div className={styles.icon}>{images.blog}</div>
            <span className={styles.desc}>Blog</span>
            <span className={styles.desc}>https://dev-wann.tistory.com</span>
            <Link href="https://dev-wann.tistory.com"></Link>
          </div>
        </div>
      </div>
      <div className={styles.footer} id="footer"></div>
    </>
  );
}

이렇게 Component 코드 중 마지막에 footer를 두고,

export default function ScrollDownComponent() {
  useEffect(() => {
    const scrollDown = document.getElementById('scrollDown');
    const footer = document.getElementById('footer');
    const observer = new IntersectionObserver(
      (entries, _observer) => {
        let thankyou = document.getElementById('thankyou');
        if (!scrollDown || !thankyou) return;

        if (entries.at(0)?.isIntersecting) {
          scrollDown.style.opacity = '0';
          thankyou.style.opacity = '1';
        } else {
          scrollDown.style.opacity = '1';
          thankyou.style.opacity = '0';
        }
      },
      { threshold: 0.2 }
    );
    // ...
  }
  
  return (
      <>
        <div className={styles.scroll} id="scrollDown">
          <div></div>
          <div></div>
          <p>SCROLL DOWN</p>
        </div>
        <div className={styles.thankyou} id="thankyou">
          Thank you for watching!
        </div>
      </>
    );
  }

이전에 구현한 ScrollDownComponent에서 IntersectionObserver를 통해 'SCROLL DOWN' 과 'Thank you for watching!' 문구의 opacity를 변경하도록 구현하였다.

 

# Navigation

Navigation은 상단 바 형태로 만들 것이다.

특징을 하나 주자면 평소에는 약간 푸른색의 반투명하게 보이다가 마우스를 hover하면 불투명하게 바꾸고 싶다.

 

export default function Navigation() {
  return (
    <div className={styles.navWrapper}>
      <div className={styles.navigation}>
        <Link href="/" className={styles.item}>
          Welcome
        </Link>
        <div className={styles.itemWrapper}>
          <Link href="#intro" className={styles.item}>
            Intro
          </Link>
          <Link href="#about" className={styles.item}>
            About
          </Link>
          <Link href="#projects" className={styles.item}>
            Projects
          </Link>
          <Link href="#contact" className={styles.item}>
            Contact
          </Link>
        </div>
      </div>
    </div>
  );
}

tsx는 이렇게 단순하게 짜놓았고,

/* CSS */
.navWrapper {
  position: sticky;
  top: 0px;
  width: 100%;
  height: 5vh;
  backdrop-filter: blur(10px);
  z-index: 999;
}

.navWrapper:after {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #010c30;
  opacity: 0.5;
  transition: all 300ms;
  z-index: -1;
  content: '';
}

.navWrapper:hover:after {
  opacity: 1;
}

.navWrapper에 backdrop-filter: blur(10px)을 주어 불투명함을,

.navWrapper:after에 background-color 및 opacity를 주어 살짝 파란색을 구현하였다.

그리고 hover 시 opacity를 1로 바꾸어 완전히 불투명해지도록 하였다.

 

끝!