🌱우리의 녹색 행성, 더 싱그러워지도록, PLANT.IT🌱

☘ 목차

본격적으로 식물 키우기 전, 재미로 보는 자가진단 테스트와
카테고리별 식물을 소개하며 가드닝의 장점을 널리 퍼트리고
환경을 살리는 목적을 지닌 웹사이트 입니다

🗓️ 프로젝트 기간 : 23.02.26 ~ 23.03.06

팀원 소개


송수빈	윤제	송민선	박성희
Front-end Design	Front-end	Front-end	Front-end
localStorage 활용 필터링 keyframe animation 테스트 결과 조회 식물 목록 조회 swiper media query 반응형	localStorage 활용 테스트 구현 스토리 페이지 slider 구현	식물 조회 필터	스토리 영상 추가

Main	classlist.add(), remove() 함수를 통해 마우스 오버시 부정적인 단어가 사라지면서 브랜드 소개글이 보여집니다. window,scrollTo()함수와 offsettop을 사 용해 버튼 클릭시 스크롤 이동합니다. media query를 이용한 반응형 페이지로 헤더의 컬러는 scss의 mixin, include 기능을 활용하여 전역적으로 색상값을 전달합니다. localStorage에 식물의 카테고리값을 저장하여 식물카테고리 페이지 이동시 getItem 함수를 통해 필터링하여 식물이 조회됩니다. keyframe animation으로 캐릭터의 움직임이 동적으로 표현됩니다
Category	string으로만 구성된 식물 데이터를 객체로 변경하여 화면에 그려줍니다. 로컬 스토리지 값 받아와 검색 결과 초기화합니다. 버튼 click 에 따라 클래스명(clicked)을 부여하여 hover, click 시 디자인 변경됩니다. 또한 각 버튼마다 해당되는 식물의 속성값 저장합니다. window에 addEventListener를 부여하여 필터링 버튼 클릭시마다 검색결과가 리렌더링되어 보여집니다.
Test
TestResult	결과 페이지를 컴포넌트화 하여 localStroage 값에 따라 내부 값이 변경됩니다. swiper의 autoplay.start()를 통하여 추천 식물을 동적으로 그려줍니다.
Stroy

IDE

테스트 환경

Front-end

Cooperation