Eyebrath

💡 기획의도

eyebreath의 기획의도는 오프라인으로 구매하기엔 시간적, 공간적 제약이 너무 크고 온라인 쇼핑몰 사이트엔 제품의 갯수가 한정적이라 이를 보완하고자 '안경'을 중점적으로한 사이트를 제작하게 되었습니다.

✔️ 적응형 구현

웹 페이지를 768px 사이즈까지 제작하였으며 이후엔 모바일 앱으로 사용할 수 있게 하였습니다. 적응형으로 구현 시 사용자의 디바이스에 따라 pc, mobile 접속을 용이하게 할 수 있습니다.

✔️ 반응형 하드코딩

반응형은 하드코딩을 하였으며 탬플릿이나 라이브러리 소스를 사용한 것이 아닌 직접 코딩하였습니다. 자바스크립트 es6버전을 사용하여 바닐라 스크립트로 하였습니다.

✔️ 사용성 구현

✔️ PC 유튜브 링크 및 이미지

visual 부분은 setinterval을 통하여 자동슬라이드가 가능하게 하였으며, 비주얼에 마우스를 enter했을시 clearinterval을 통해 움직이지 않게 했습니다. 또한 이전버튼, 다음버튼을 통해 보고싶은 비주얼 이미지를 볼 수 있게 하였으며 이 또한 매개변수를 통해 순번을 구했습니다.

header 부분을 보시면 .selected라는 가상요소를 css에 삽입하여 자바스크립트로 코드를 작성하였으며, header의 전체 높이를 계산한 후 mouseenter 했을때의 높이와 leave 했을때의 높이를 계산하여 사용자의 선택에 따라 보여지게 했습니다.

✔️ MOBILE 유튜브 링크 및 이미지

좌측 menu icon click 이벤트 발생 시 if조건문의 selectedMenu 값에 조건에 따라 아코디언 형태로 메뉴가 나오게 되며, remove를 통해 서브메뉴 비활성화까지 가능하게 하였습니다.

모바일 서브페이지의 경우 이벤트 클릭 시 이동하게 되며 visual 위주의 이미지로 구성하였으며, css에서 flex를 통해 이미지를 동일한 간격으로 나열하였습니다.

raheekang/eyebreath