포트폴리오03 - styled components는 버린다.

일 년 만에 작업하는 포트폴리오

이번엔 정말 이직을 해야 하기 때문!!!! 다시 이어서 해보자고

오 작년의 나 제법 잘 해뒀네? 칭찬해....작년에도 진심이긴 했구나

 

하지만 페이지 전반에 메뉴가 없어서 이동이 약간은 불편하다고 느꼈다.

포트폴리오 사이트에서 얼마나 이동하겠어~?라고 할 수 있지만 없는 것보다 낫지 않겠는가

 

기존의 작업하던 코드를 보니 styled components를 사용했었다.

작년에는 학습용으로 사용하기는 했었다만 굳이 포트폴리오에 적용할 이유는 없어 보인다.

유지보수가 엄청나게 많은 사이트도 아닐뿐더러 6페이지 정도밖에 안 되기 때문에 클래스 이름 겹치기도 힘듦

이번달 안으로 빠르게 완성해야 하기 때문에 scss로 작업을 전환했다.

 

오 여기에 마침 적절한 메뉴가 있네

너 헤더로 승급

position:fixed로 항상 최상단에 놓일 수 있게 함

기존 hamburger 메뉴는 아무 기능이 없었지만 페이지 이동이 자유롭도록 메뉴를 구성할 예정이다.

드롭다운은 별개의 컴포넌트로 구성했다.

오~? 나쁘지 않아

주소창은 섹션별로 다르게 구성했다.

라우터 자체가 없는 싱글페이지라 App.tsx파일에서 스크롤 이벤트를 계속 리스닝할 수 있게 처리하였다.

단순페이지라 가능한 구성이다.

물론 unmount 되는 경우도 없기 때문에 removeEventListener는 따로 없다

 

메인페이지를 포함한 3개의 영역으로 구성되어 있고

각 영역의 통과여부를 저장하기 위한 변수 선언

 

타겟 영역마다 동일한 스크롤 검사를 진행하므로 해당 함수는 분리하였다.

utils에 넣을 정도로 자주 사용되는 것은 아니라고 판단 동일 파일 내에서 함수 분리만 진행

 

const MAIN_ADDR='https://안녕하세요_프론트엔드_개발자_이현정입니다.com'
const INFO_ADDR='https://자기소개.com'
const PROJECTS_ADDR='https://프로젝트.com'

const infoRef = useRef<HTMLDivElement>(null);
const projectsRef = useRef<HTMLDivElement>(null);

const [addrMsg, setAddrMsg] = useState(MAIN_ADDR)
const [isInfoRefPassed, setIsInfoRefPassed] = useState(false);
const [isProjectsRefPassed, setIsProjectsRefPassed] = useState(false);

...

const isPassedTargetArea = (targetRef:React.RefObject<HTMLElement>) => {
    if(!targetRef.current) return false

      const targetRect = targetRef.current.getBoundingClientRect();
      const scrollY = window.scrollY || window.pageYOffset;

      return targetRect.top < scrollY
    }

const handleScroll = () => {
    if(!isProjectsRefPassed) setIsInfoRefPassed( isPassedTargetArea(infoRef))
    if(!isInfoRefPassed) setIsProjectsRefPassed( isPassedTargetArea(projectsRef))

    if(isInfoRefPassed){
      setAddrMsg(INFO_ADDR) 
    }
    if(isProjectsRefPassed){
      setAddrMsg(PROJECTS_ADDR)
    }
    if(!isInfoRefPassed && !isProjectsRefPassed){
      setAddrMsg(MAIN_ADDR)
    }
}

window.addEventListener('scroll', handleScroll);

 

 

 

오랜만에 포트폴리오 사이트를 들어가다 보니 첫 화면에서 전환이 되는 건지 스크롤을 내려야 되는 건지 헷갈리는 부분이 있었다.

편의를 위해 하단 섹션으로 내려주는 버튼 추가!
useRef값으로 참조할 수 있는 값 구성해 주고 scrollIntoView smooth 처리해주었다.

해당 이벤트는 dropdown 메뉴에서도 사용할 예정이므로 utils 함수에 작성했다.

 

 

import { scrollToRef } from './scripts/utils'

...

const infoRef = useRef<HTMLDivElement>(null);

const handleClickScroll = () => {
    scrollToRef(infoRef);
} 

...

<button className="more-btn" onClick={handleClickScroll}>
	<ArrowDownwardIcon/>More
</button>

...

<div ref={infoRef}>
  <Info  />
</div>

 

 

프로젝트 구성 변경만 하면 포트폴리오는 끝날 것 같다 주말밖에 작업할 시간이 없어 여유롭게 한 달을 잡았는데

다음 주 하루만 더 할애하면 끝날 듯싶다!

그 뒤에는 지속적으로 피드백받으면서 수정해 나가면 될 것 같다.