URL : https://developedbyssony.github.io/enterpriseBlockchain/ 컨텐츠 영역에 섹션이 16개 들어갔으며, 중간에 div로 묶어준 section에 data-theme="dark"를 적용하였다. 또, .sc_service 섹션 같은 경우 인터랙션에 용이하기 위해 내부에 수직 컨텐츠와 수평 컨텐츠를 따로 묶어주었다. 클론을 하면서 GSAP을 활용한 스크롤 인터랙션을 구사하는 것에 중점을 두었다. 본 포스팅에서 스크롤 인터랙션 시나리오를 간단하게 정리하고자 한다. 일단 GSAP 활용하기 위해 CDN을 넣어야한다. 스크롤 인터랙션을 구현하기 위하여 스크롤 트리거용 CDN도 넣어준다. a. 인트로 구간 const motionIntro = gsap.timeli..

URL : https://developedbyssony.github.io/cellSafe/ 셀세이프PCR 제품 Customization 기성제품의 한계를 넘어 고객이 원하는 용도에 적합한 커스터마이징 제품을 공급합니다.developedbyssony.github.io header, main, footer로 구분되는 간단한 HTML 구조에 미디어쿼리는 1200px를 기점으로 PC와 Mobile에 대응하는 웹사이트이다. 클론을 하면서 간단한 코드로 효과적인 인터랙션을 만드는 것에 중점을 두었다. jQuery를 사용하였으며 1)인터랙티브 헤더, 2)메인 슬라이드(swiper 슬라이드 라이브러리 사용), 3)간단한 모션을 중점으로 문서를 정리하였다. 1) 헤더 - 상위 메뉴 호버// .depth01 요소에 ..

2022년에 만들었던 제주완니라는 웹서비스를 반응형으로 리뉴얼하면서 장바구니 기능을 정상화하고 리팩토링하였다. 우선 2022버전은 https://animated-mandazi-93e439.netlify.app/ 이고, 2025년 버전은 https://jeju2025-5e32e.web.app/ 에서 볼 수 있다. 2022년에 만들어진 장바구니 기능 코드를 보니 정리가 많이 안되어 있었다. 특히, 백엔드 통신을 할지 로컬 스토리지로 저장할지 리덕스를 사용할지 고민한 흔적이 고스란히 나타나있었고, 결국 로컬 스토리지에 저장하는 코드를 짰으나 작동이 되지 않았다. (아래는 고민한 흔적..) /* 백엔드 통신 함수 (한 유저의 장바구니 가져오기) const getCartItems = async() =..