hhhyyo / hanspoon

spoonacular 페이지 개선을 목표로 하는 프로젝트입니다.

🥄 HanSpoon

🪄 개요

리액트를 이용한 spoonacular 클론 프로젝트입니다.
기존 사이트 문제점을 분석하고 개선을 목표로 하는 프로젝트입니다.

📆 기간

2021.01.06 ~ 2022.01.28

⬅️ before

1. 고전적인 UI/UX
2. 반응형시 깨지는 레이아웃
3. 작동하지 않는 기능
4. 모달에서 키보드 트랩이 되지 않음
5. 시멘틱하지 않은 HTML 태그 사용

➡️ After

1. 모던한 UI/UX 및 사용자의 니즈를 파악한 설계
2. 모바일부터 태블릿, 데스크탑까지 호환되는 반응형
3. 모든 기능이 작동할 뿐 아니라 사용자에게 흥미를 유발할 기능을 추가
4. 모달에서도 키보드 트랩이 가능하도록 구현
5. 시멘틱한 태그를 사용하여 SEO 점수 향상 및 유지보수시 이해하기 쉬운 설계

이외에도 노력한 점

• 이미지 최적화(사이즈 변경, img -> background, preload)
• api요청 최소화
• 폰트 최적화

📚 사용한 메인 기술 및 라이브러리

📝 프로젝트 Wiki

https://github.com/TeamCooks/hanspoon/wiki

🎓 팀 구성

박태준	서혜연	이한결	이효원

🛠 설치 방법

요구사항

• Node.js가 설치되어 있어야 합니다.

설치

$ git clone https://github.com/TeamCooks/hanspoon.git
$ cd PROJECT
$ npm install

시작

$ npm start

빌드

$ npm build

업데이트

일부 변경사항이 있을 수 있습니다. npm pull과 npm install를 종종해서 업데이트를 받을 수 있습니다.

npm pull
npm install

🌟 데모 사이트

https://hanspoon-31cd9.web.app/