[네이버 클론2] Footer, 메인 버튼 추가 및 오류 수정

서론

글 쓰기 전

오늘은 어제 계획한 대로 아래쪽 화살표 버튼, 네이버를 시작페이지로 설정하는 링크 수정, 헤더 컴포넌트 아래에 있는 메뉴들 추가, 아래 맨 밑 메뉴 제작 등을 하겠습니다.

글 쓴 후

아 오늘은 더 많이 할 줄 알았는데 딱히 못했습니다. 그 이유는 안되는 걸 잡고 고민하다가 거의 3 ~ 4시간을 날려먹었으니 내일부터는 안되면 딱 30분에서 엄청 많으면 1시간만 투자를 하는 습관을 들여야겠습니다. 

오늘 못한 작업들 | 네이버를 시작페이지로 설정하는 링크 수정 | 헤더 컴포넌트 아래에 있는 메뉴들 추가 | 아래 맨 밑 메뉴 제작을 내일 무조건 하겠습니다.

본론

1. 키보드 색깔 변화

키보드 버튼에 마우스를 올렸을 때 나타나는 색깔 변화

위의 코드를 해석해보면 부모 요소인 div에 마우스를 올렸을 때 자식 요소인 svg의 색깔을 #b2babb로 변경하겠다는 의미입니다.

 

2. 화살표 버튼 애니메이션 적용

import styled from 'styled-components';
import { ReactComponent as DownArrow } from '../svg/arrow-down.svg';

const EmptyInput = styled.input`
  display: none;
  
  // 클릭했을 때 적용되는 애니메이션
  :checked + label > svg {
    transition: 0.3s;
    transform: rotate(180deg);
  }
  // 클릭한 뒤 다시 처음 상태로 돌아가는 애니메이션
  + label > svg {
    transition: 0.3s;
    transform: rotate(0deg);
  }
`;

const ArrowStyle = styled.div`
  margin-right: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  label {
    cursor: pointer;
  }
`;

const ExpandArrow = () => {
  return (
    <ArrowStyle>
      // JS없이 순수 CSS로만 클릭 이벤트 효과를
      // 주기위해서 빈 input 태그를 준비
      // input과 label을 마치 한 묶음처럼 사용할 수 있도록
      // input에는 id와 label에는 input의 id인 menu를 작성
      // label 내부는 클릭했을 때의 효과를 적용하고 싶은 컴포넌트를 삽입
      <EmptyInput type="checkbox" id="menu" />
      <label for="menu">
        <DownArrow width="12px" height="12px" fill="#19ce60" />
      </label>
    </ArrowStyle>
  );
};

export default ExpandArrow;

 

애니메이션 실행 전에는 화살표가 아래 방향으로 향해 있습니다.

여기서 수정할 부분은 처음에 페이지가 로드된 후에 트랜지션이 발생한다는 점인데, 이 부분에 대해서 좀 공부를 해보겠습니다.

버튼을 클릭하기 전의 상태

애니메이션 실행 후에는 화살표가 윗 방향으로 향해 있습니다.

내가 원래 바라던 애니메이션의 효과는 계속 시계방향으로 도는 것을 원했는데, 그게 잘 안됩니다. 이거에 발이 묶여 있을 바에 다른 걸 만들어야겠다고 생각이 들어서 깔끔하게 포기했습니다. 나중에 수정하도록 하겠습니다.

버튼을 클릭한 후의 상태

 

 

3. 화살표 버튼 클릭 시 메뉴 보이기

버튼 클릭 전

화살표 버튼을 클릭하기 전에는 평상시와 같이 검색창 밑에 아무것도 보이지 않는다.

버튼 클릭 후

화살표 버튼을 클릭하면 성공적으로 메뉴가 나온다.

툴바라고 하겠습니다. 툴바를 만드는데 작성한 코드는 여기있습니다.

진짜 코드는 별거 없지만, 만드는데 걸린 시간이 너무 오래 걸렸습니다. 거의 2시간 정도 날려먹은 것 같습니다.

어떻게 만들지 고민을 하다가 찾아낸 방법을 설명하겠습니다.

검색 창 컴포넌트

왼쪽의 코드를 보시면 화살표 버튼을 눌렀을 때 나타날 툴바가 존재하고, 그 하단 쪽에 화살표 버튼이 있습니다. 먼저 툴바를 저 위치에 놓게 되면 검색창 위치와 비슷하게 위치하게 됩니다. 그러면 css에서 left, top 값을 조금만 변경해주면 되기 때문에 작업이 수월하다고 생각을 했습니다.

 

이제 위치를 잡았으니 내부의 구성을 보여드리면서 간단 설명을 하겠습니다.

버튼을 눌렀을 때 나타나는 툴바

ATCSidebar는 그저 위치만 잡아주는 역할을 하는 div 태그입니다.

그리고 Menu는 툴바의 전체적인 스타일을 잡아주는 역할을 하는 div 태그입니다.

UserTool은 링크들을 감쌈으로써 좀 더 정렬이 쉽도록 도와주는 역할을 하는 div 태그입니다.

CustomLink내부는 span 내부에 a 태그가 존재합니다.

ACTOffMenu도 UserTool과 같은 역할을 해줍니다.

 

 

 

여담

메뉴의 열고 닫는 기능을 만드는 데는 10분밖에 걸리지 않았습니다.

하지만 저의 똥고집 때문에 빨리 포기하지 못하고 어영부영 시간만 보내버렸습니다.ㅡㅡ

 

결론

내일은 좀 더 집중해서 빨리하고 더 해야지...

아래는 제가 진행하고 있는 네이버-프론트 저장소입니다.

https://github.com/LeeSangMin1029/naver-front

GitHub - LeeSangMin1029/naver-front: 네이버를 비슷하게 따라해보자