1. Icon
아이콘을 어도버 일러스트레이터를 이용해 직접 만들어서 적용했습니다.
기본적으로 네비게이션바와 프로필 메뉴창에 사용할 아이콘을 작업했고, 필요시 계속 추가할 예정입니다.
2. Menu
메뉴 컴포넌트를 만들고 애니메이션과 기본 css를 적용했습니다.
내부 컨텐츠는 호출하는 컴포넌트에서 받아서 그대로 사용하고 메뉴에 position: absolute;를 부여해서 현재 클릭하는 위치에서 아래로 어느정도 떨어진 위치에 표시되도록 만들었습니다.
position: absolute를 사용했으니 부모에서 position:relative같은 방식을 이용해서 컨테이닝 블록을 지정해줘야 합니다.
import React from "react";
// styled-component
import { Wrapper } from "./style";
const Menu = props => {
return <Wrapper>{props.children}</Wrapper>;
};
export default Menu;import styled from "styled-components";
export const Wrapper = styled.section`
width: 200px;
height: auto;
position: absolute;
top: 60px;
transform: translateX(-50%);
border-radius: 5px;
box-shadow: 2px 2px 10px gray;
& > li {
display: flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.8rem;
&:hover {
background-color: rgba(128, 128, 128, 0.05);
}
& > span {
margin-left: 1rem;
}
}
& > li:last-child {
border-top: 1px solid rgba(128, 128, 128, 0.2);
& > span {
margin-left: 0;
}
}
animation-name: menu-appear;
animation-direction: normal;
animation-iteration-count: 1;
animation-timing-function: ease;
animation-delay: 0s;
animation-duration: 0.5s;
animation-fill-mode: forwards;
`;3. animation
여기를 참고해서 메뉴에 애니메이션 넣었습니다.
@keyframes menu-appear {
from {
transform: translateX(-50%) scale(0, 0);
}
80% {
transform: translateX(-50%) scale(1.2, 1.2);
}
to {
transform: translateX(-50%) scale(1, 1);
}
}메뉴가 제거될 때 애니메이션을 어떻게 적용하는건지 모르겠음
마무리
1. 문제나 어려웠던 점
1.1 Icon 제작 및 위치잡기
아이콘이라는 걸 처음 제작해 봐서 이렇게 하는 건지 정확하게 모르기도 하고 툴 사용이 미숙해서 작업시간이 매우 오래 걸렸습니다.
그리고 아이콘을 작업해서 적용할 때 위치를 잡는 방법을 정석적인 방법을 사용하는 건지도 의문이 들었습니다.
background-position, background-size를 이용해서 출력하고자 하는 아이콘의 위치와 크기를 지정했는데 하나하나 수동으로 위치를 확인하고 기록해서 맞춰줬는데 이런 방식으로 하면 너무 노가다 작업인 것 같아서 제대로 된 방법은 아닌 것 같다고 생각했지만 다른 방법에 대해 몰라서 수동으로 작업했습니다. ( 물론 어느정도의 규칙은 있어서 규칙에 맞게 포지션을 정해줬습니다. )
import styled, { css } from "styled-components";
const bigIconTable = {
home: "-0px -0px",
fillHome: "-40px -0px",
dm: "-80px -0px",
fillDm: "-120px -0px",
add: "-0px -40px",
fillAdd: "-40px -40px",
compass: "-80px -40px",
fillCompass: "-120px -40px",
heart: "-0px -80px",
fillHeart: "-40px -80px",
avater: "-80px -80px",
fillAvatar: "-120px -80px",
bookmark: "-0px -120px",
fillBookmark: "-40px -120px",
};
const mediumIconTable = {
home: "-0px -40px",
fillHome: "-25px -40px",
dm: "-50px -40px",
fillDm: "-75px -40px",
add: "-0px -65px",
fillAdd: "-25px -65px",
compass: "-50px -65px",
fillCompass: "-75px -65px",
heart: "-0px -90px",
fillHeart: "-25px -90px",
avater: "-50px -90px",
fillAvatar: "-75px -90px",
bookmark: "-0px -110px",
fillBookmark: "-25px -110px",
};
const smallIconTable = {
home: "-0px -60px",
fillHome: "-16px -60px",
dm: "-32px -60px",
fillDm: "-48px -60px",
add: "-0px -76px",
fillAdd: "-16px -76px",
compass: "-32px -76px",
fillCompass: "-48px -76px",
heart: "-0px -92px",
fillHeart: "-16px -92px",
avatar: "-32px -92px",
fillAvatar: "-48px -92px",
bookmark: "-0px -108px",
fillBookmark: "-16px -108px",
};
export const Wrapper = styled.i`
display: inline-block;
background-image: url("./icon/icon.svg");
background-repeat: no-repeat;
${({ shape, big, medium, small }) => {
if (big) {
return css`
width: 40px;
height: 40px;
background-position: ${() => bigIconTable[shape]};
background-size: 160px 200px;
`;
} else if (medium) {
return css`
width: 24px;
height: 24px;
background-position: ${() => mediumIconTable[shape]};
background-size: 100px 205px;
`;
} else if (small) {
return css`
width: 16px;
height: 16px;
background-position: ${() => smallIconTable[shape]};
background-size: 64px 200px;
`;
}
}}
`;1.2 애니메이션
현재 메뉴에 애니메이션을 적용했고 프로필 이미지를 클릭 시 메뉴가 나타날 때 애니메이션이 적용되도록 만드는 데는 큰 문제가 없었습니다.
하지만 메뉴가 사라질 때 애니메이션을 적용시키고 싶은데 방법을 몰라서 적용시키지 못했습니다.
2. 해결
2.1 styled-components 경고
Button 컴포넌트 같은 경우에는 kakao, local같은 props를 받아서 그에 맞는 css를 부여해줍니다.
하지만 styled-components에서 비표준 속성을 사용하면 자동으로 DOM에서 제외시키고 경고를 띄어주는 기능이 있어서 콘솔창에 경고가 나타났습니다.
이것을 해결해기 위해서 경고가 뜨는 props에는 prefix로 $를 붙여줘서 해결했습니다.
