개요

#1 포스트에서 예고했던 개인 프로젝트의 관리자 페이지에 GSAP가 적용된 것을 소개합니다.

Manage Page

1. Manage Page는 Product DB Insert, User Manage(적립금, 쿠폰 부여), ETC 세가지로 구성된다.
2. 각 메뉴는 현재 페이지에서 리로드 없이 렌더링 되어야한다.
3. 메뉴 클릭 -> 각 메뉴 컴포넌트 렌더링 순서가 동기적으로 작용되어야 한다.

첫 구상은 위와 같습니다.

하이라이트는 2번이 될텐데, 우선 전체 구성을 확인해봅니다.

HTML Codes

1. content1 : Product Update Menu
2. content2 : User Management Menu ( 적립금, 쿠폰 등 부여 )
3. content3 : ETC ( 기능은 아직 미정입니다. )
4. adminMenu : 선택된 메뉴에 따라 렌더링될 컴포넌트를 리턴합니다.

각 content div는 relative position과 inline-block display를 통해 가로로 나열했습니다.

아마 display:flex나 float:left로도 구현할 수 있을 겁니다.

다음으로, 커서가 올라가면 활성화되어야하므로 opacity는 기본 0으로 설정합니다.

덤으로 transition:0.5s ease 또한 적용해두었습니다.

위의 gif 이미지를 보면 커서가 메뉴탭에 올라가면 글자가 떠오릅니다.

해당 애니메이션을 만들기 위해 span 태그를 buttonArea라는 ID를 가진 div로 감쌌습니다.

buttonArea는 relative position으로 각 메뉴 탭을 기준으로 위치를 조정하도록 했고

여러번 테스트해보니 top:40% 정도가 적당한 위치로 보였습니다.

Functions

커서와 관련된 동작 중엔 여러가지가 있는데, 이 이벤트에 대해 적용해볼만한 것은

1. onMouseEnter
2. onMouseOver
3. onMouseOut
4. onMouseLeave

위의 네 가지가 있었습니다.

여기에서 mouseover, mouseleave를 고른 이유는 아래와 같습니다.

1. onMouseEnter는 마우스가 해당 영역에 들어갔을 때만 효력이 있습니다.
  * 즉, 커서가 올려져있는 동안에 함수가 실행되어야되는 것과 반대됩니다.
2. onMouseOut은 의도된 것처럼 작동했으나, 
   커서가 페이지가 아닌 브라우저의 윗 패널로 이동하는 경우 작동하지 않았습니다.

함수에 보면 클래스에 active를 추가하는 것이 있습니다.

위와 같은 트릭을 통해 반투명한 검은 배경이 나오도록 설정하는데,

아무런 장치 없이 이렇게 해버리면 배경 사진이 아예 가려지게 됩니다.

그러므로 저는 content1,2,3의 부모가 되는 contentWrapper에 opacity:0.5를 부여했습니다.

그에 따라 opacity:1이 되더라도 반투명한 효과를 볼 수 있습니다.

위의 그림과 같은 구조로 겹쳐져있고, z-index나 opacity 값에 관해서 설명이 될 수 있을 듯 합니다.

onClick 이벤트에 적용되는 함수로, 동기적인 움직임이 필요해 async function으로 만들었습니다.

제일 먼저 현재 페이지가 구겨지는(?) 듯한 동작을 위해 width:0%가 되는 gsap animation을 적용합니다.
또한 이후 렌더링될 컴포넌트에 방해되지 않도록 display:'none'을 적용합니다.

이후, event.target의 클래스 이름에 따라 selContent state를 업데이트합니다.

이를 통해 어떤 메뉴 컴포넌트를 렌더링할지 정하게 됩니다.

그 뒤, opacity:0 및 display:none 처리가 되어 있던 태그들을 일으켜세웁니다.

adminMenu는 컴포넌트를 감싸는 최상위 태그이며

adminMenuDiv는 각 렌더링될 DBInsert 또는 UserManage 컴포넌트의 최상위 태그입니다.

이것을 구태여 나눈 것은 메뉴 설명에 나옵니다.

추가로, gsap에서 display를 none에서 block등으로 전환시에는 autoAlpha라는 속성을 써주면 됩니다.

autoAlpha:1 이면 opacity를 0에서 1로 올리고 visibillity를 inherit로 부여합니다.
autoAlpha:0 이면 opacity를 1에서 0으로 내리고 visibillity를 hidden으로 부여합니다.

Menu Components

메뉴 컴포넌트는 DBInsert, UserManage 두가지인데,

서버와 통신하는 부분은 큰 특이점이 없는데다
백엔드 부분과 관련되므로 생략하고, 애니메이션 부분만 정리합니다.

HTML Codes

animation이 적용된 부분은 위와 같습니다.

클릭시 Manage Page로 돌아가는 onClick.
커서를 올리면 텍스트가 떠오르는 onMouseOver
커서가 벗어나면 텍스트가 가라앉는 onMouseLeave가 있습니다.

Functions

'Back to Admin menus' 라고 플로팅되는 부분과, 다시 관리자 메뉴 페이지로 돌아가는 부분입니다.

기본적으로 텍스트는 top:10px의 위치에 숨겨져 위치합니다.

커서를 대면 투명이 점차 풀려 떠오르며, 벗어나면 다시 투명해지며 제자리로 돌아갑니다.

onClick 함수인 backToAdmin은 동기적으로 처리되어야하므로 async await가 사용되었습니다.

먼저 adminMenu에 autoAlpha:0을 통해 opacity를 0으로, visibillity를 hidden으로 돌리고
display:'none'을 통해 다시 보여질 adminArea를 방해하지 않도록 합니다.

이후 adminArea의 autoAlpha를 1로 하여 보여지도록 합니다.

펴지는 효과를 위해 width:100%를 부여했습니다.

참고로 await gsap는 timeline이라는 플러그인을 통해서도 구현할 수 있습니다.
timeline은 여러 gsap.to를 사용자가 지정한 라벨로 묶을 수 있고
예를 들면, 총 5개의 작업이 있을 때 3개의 gsap 애니메이션을 동시에 실행한 뒤 
나머지 2개의 gsap 애니메이션을 순차적으로 진행한다던가 할 수 있습니다.
다만 아직 이해가 부족해 다른 컴포넌트에서 시험삼아 사용 중이며
익숙해지면 정리하려고 합니다.

마무리

실제 웹 쇼핑몰에서만 봤던 것만 같은 것들을 스스로 만들어보면서 재미를 붙이고 있습니다!

두 가지 정도 쓸만한 트릭을 발견하여 오늘 적용하게 되었는데,

곧 관련된 포스트를 올릴 생각입니다.