23.05.13 웹개발_솔로프로젝트(Header 만들기)

Yeondong Choe·2023년 5월 13일

회고 Tip
1. 지금 현재, 기분과 느낌을 표현(구체적)
2. 오늘 학습한 내용의 단어를 모두 나열
3. 나열한 단어를 하나씩 설명
4. 설명하기 어려운 단어가 있다면 그 이유를 생각
5. 스스로 설명하기 위해 질문한다면 어떻게 질문할것인가 생각

웹개발_솔로프로젝트 데일리 후기

오늘은 토요일! Header 부분을 완성해보자는 목표로 앉아서 코딩을 시작했다.
많은것을 복습할 수 있는 시간이였고 무엇보다 완성해서 너무 뿌듯하다.
나중에 똑같은 부분을 구현해야한다면 오늘 걸렸던 시간을 절반은 단축할 수 있을거같다는 자신감이 생긴다!

기억해둘 코드

src="파일명" 이미지 파일은 public에 저장
npm install styled-components@latest
Headerbar 좌우로 나누는 css 코드(에러3 참고)
Dropdown 기능 구현 코드(하단 참고)

Herder 요구사항 (7h)

상단 바 구현

어느 페이지를 가더라도 header는 항상 존재
페이지 내에서 스크롤이 발생하더라도 항상 상단에 붙어있어야 함
(position - sticky)
하단에 그림자 주기

Header의 왼쪽 섹션

로고 이미지: 클릭했을때 메인 홈(시작) 페이지로 이동
마우스를 올렸을때 커서 포인트 주기 (hover: curer pointer)

header의 오른쪽 섹션

햄버거 버튼 구현: 이미지 사용
햄버거 버튼 마우스 올렸을때 dropdown 구현
dropdown으로 나온 항목에는 상품리스트, 북마크페이지 존재 클릭시 이동
ex)
000님, 안녕하세요
상품리스트 페이지
북마크 페이지

드롭다운 완성 전

드롭다운 완성

마주했던 에러(1)

styled components를 install 하기 위해서 npm install styled-components 명령어를 입력하였으나 아래와 같은 에러를 마주함

npm ERR! Cannot read properties of null (reading 'edgesOut')
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dongdong/.npm/_logs/2023-05-13T08_20_08_567Z-debug-0.log

에러의 원인은 버전이 맞지 않아서 최신버전으로 install해주기 위해서 npm install styled-components@latest를 입력하여 설치완료함

마주했던 에러(2)

헤더를 만들고 위쪽에 고정을 시키기 위해서 position: fix를 하니 단순히 고정만 되고 이후에 작성되는 텍스트들이 겹쳐지는문제가 있었다.
고정하기 위해서 sticky를 사용하니 고정도 되고 텍스트도 그 아래로 보여주는거 같다.
완벽한 해결인지는 모르겠지만 우선 지금 상태로는 괜찮아진거같다 나중에 다시 마주할 수 있을거같다는 생각이 든다.

마주했던 에러(3)

Header를 오른쪽과 왼쪽으로 나누어서 디자인을 해야하는데 어떤 속성을 줘도 맞춰지지 않았다. 찾은 방법으로 Header bar 안에 오른쪽과 왼쪽으로 div를 나누어서 만들고 전체적으로 justify-content를 space-between으로 줘서 좌우 대칭을 맞춘 후 좌 우 div에 flex-grow를 1씩 주고 시작점을 왼쪽에는 start 오른쪽에는 end로 줬다.

const HeaderBar = styled.header `
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 25px;
`
const HeaderBarLeft = styled.div`
flex-grow: 1;
display: flex;
justify-content: flex-start;
`
const HeaderBarRight = styled.div`
flex-grow: 1;
display: flex;
justify-content: flex-end;
`

마주했던 에러(4) (5.15_추가)

Mainpage layout을 구현하다보니 Dropdown의 항목이 보이지 않을때 마우스 커서가 위치에 생기는것을 발견했다.

pointer-events: ${({isOpen}) => (isOpen ? 'auto': 'none')};

따라서 Dropdown의 상태가 isOpen 초기값인 false일때 숨길 수 있게 코드를 추가해주었다.

기록하고싶은 기능구현 - Dropdown

Dropdown기능 구현은 쉽지 않았다.
내가 느꼇을때 핵심은 opacity(불투명)이며 상태관리를 통하여 true일때 1(불투명도)를 줘서 보이고 false일때 0(투명)으로 줘서 열고 닫고를 설정하는거같다.
조금더 부드럽게 열고 닫히는 효과를 적용하기 위해 transition 설정을 했으며 all 0.3s으로 값을 줘서 모든 속성의 변화가 일어날때 0.3초 동안 부드럽게 적용되며 ease-in-out으로 느리게 시작된다.
여기서 조금더 움직이는 효과를 주기 위해 transform 설정을 했으며 상태관리를 통하여 true일때 위치는 그대로지만 false 일때 y축으로 -10만큼 내려줌으로 Dropdown을 껏을때 아래로 내려가면서 없어지는거처럼 보이게 했다.

구현 요구사항 중 디테일적인 부분으로 Dropdown의 첫번째 부분은 '000님 안녕하세요!'는 cursor가 되지 않아야 했기에 styled component의 cursor 부분에 props로 disabled를 전달해주어서 disabled가 있는 항목은 cursor가 생기지 않게 했다.

동일한 방법으로 메뉴의 맨 하단 항목에는 border-bottom이 보이지 않게 설정했다.