<클론코딩>2일차

Day2 진행사항

2일차가 된 현재 navbar, footer , 매인페이지의 캐러샐제작, 메인페이지의 카테고리 프리뷰(?) 까지 틀을 잡아놓은 상태다.

오늘의 주된 작업은 바로 캐러샐 제작과 navbar의 드롭다운 제작이였다.

1. 캐러샐
   : 현재 화살표를 클릭했을시 이전 혹은 다음 사진으로 슬라이드가 가능하게 구현을 해두었으나 아직 자동슬라이드는 구현하지 못하였다 ㅠ.
   메인에 너무많은 시간을 쓰는듯 하여 나중에 추가할 예정 !!

2. navbar
   : 구현했어야 하는 기능

• 호버시 색변경 및 카테고리명 밑 밑줄표시

• 호버시 드롭다운표시

• 드롭다운시 메뉴별 위치

• 마우스 out시 드롭다운 접기

  고작 navbar 제작인데 정말 너무 오래걸렸다 ....ㅠ 현재 원하는 기능은 모두 구현한 상태이나 코드가 너무 길어져 이게 맞나 싶다 .

li로 navbar의 카테고리들을 하나씩 나열했고, mouseEnter 이벤트를 사용해 mouseEnter시 enter가 된 카테고리명과, 각 카테고리별 메뉴의 위치를 맞추기 위한 margin값을 onNavHover라는 함수에 넘겨주도록 구현하였다.
onNavHover함수에선
useState를 사용해 hoverd의 값과 margin값을 설정해 주고, set된 hoverd값에 따라 li별로 className을 설정한뒤 css에서 색변경과 밑줄을 표시해주었다

그후

삼항연산자를 사용해 hoverd값에 따라 styledcomponent로 구성한 dropdown 을 표시해주었고, dropdown컴포넌트에 props로
margin값을 넘겨주었다.

이렇게 구현하니 원하는대로 구현은 되었따.. 근데 코드가 굉장히 길다
뭔가 더 줄일 수 있을것 같은데 흠..

일단 오늘의 클론코딩은 여기까지