CHEF LEE

냉장고를 관리해주는 어플로 재료를 쉽고 편리하게 관리 할 수 있고, 냉장고 속 재료로 만들 수 있는 음식의 조리법,영양 성분에 관한 자료를 제공해주는 모바일 전용 사이트입니다.

제작계기

react를 기반으로 한 프로젝트를 만들기로 했습니다. 외부의 api를 받아와 프로젝트를 만들고 싶다는 생각이 들어 무료 api자료들을 찾아보던 중 식품의약품안전처에서 제공하는 조리식품의 레시피DB라는 api를 찾게 되어 요리 레시피 관련 프로젝트를 구상했습니다.

제작환경

화면구성과 기능구현

react, scss, firebase, api
먼저 react.js 기반 베이스로 제작하였고, 로그인 구현과 CRUD는 firebase를 통해 제작하였습니다.

UI/UX 디자인

photoshop, illustrator, figma
디자인은 피그마를 기본으로 일러스트, 포토샵으로 작업하였습니다. 반응형 작업은 사용자의 접근성을 생각해 보았을 때, 데스크탑으로 접속하는 사용자보다 모바일로 접속하는 사람의 비중이 높을 것 같다는 생각이들어 모바일 기준으로 디자인을 설계하고, 데스크탑과 태블릿 전용 반응형 작업을 했습니다.

디자인과 설계도면

먼저 요리 레시피의 사이트이다 보니, 신선함과 밝고 맑은 느낌을 먼저 주고 싶었습니다. 그래서 메인 컬러를 하얀색으로 가져가고, 포인트 컬러를 신선함의 느낌을 주는 초록색과 주황색 중에서 팀과 의논한 결과 초록색으로 정하였고, 맑은 느낌을 주기 위해 컨텐츠 박스를 불투명하게 한뒤 필터에 블러를 주어 뒤에 있는 신선한 재료가 비치도록 디자인 하였습니다.

피그마 보러가기

기능

1.로그인

firebase서버를 통한 로그인을 구현하였습니다.
react 모듈에 firebase와 연동이 가능한 여러 모듈들을 사용하였고,그 중firebase/auth를 사용하여 구글 아이디를 통해 로그인이 가능하도록 구현하였습니다.

2.API | 정규식

json으로 받아온 데이터들의 양이 워낙 방대했으며, (총 1,000 개의 음식 레시피)
각 레시피 마다 작성 방법이나 문자 배열이 달랐고, 특수기호가 들어간것들도 있었으며, 프로젝트에서 사용하지 않는 정보들이 있었습니다.

받아온 데이터의 일부

재료만 써져있는 것과 아닌 것(-주재료, 사용 재료 :) 등등 데이터들이 균일하지 않다.

서버에 부하가 일어나지 않기 위해, 사용하는 데이터만 최소화 하여 가져오고 또한 정규식을 사용하여 문자들의 균일화를 해서 다듬은 데이터들을 변수로 담아 프로젝트 전역에서 사용하였습니다.

사용된 정규식 코드

const reg = /([가-힣]{1,10}[ ][가-힣]{1,10}|[가-힣]{1,10})/g
        let rcp = recipe.COOKRCP01.row.map((obj,key)=>{
          return {
            id:key,
            hashtag:obj.RCP_PARTS_DTLS.replace(/인분|컵|송송 썬|불린 것|줄기부분|삶은것|주재료|주 재료|육수|마른것|양념|다진|부순|뿌리|으깬|데친|두 가지 색|재료|갈은것|다진것|개|적당량|소스|소스소개/g, "").replace(/로즈마리/g, "셰프리").replace(/마리/g, "").replace(/셰프리/g, "로즈마리").replace(/낙지 다리/g, "낙지").replace(/두부강된장 참기름/g, "강된장").replace(/파인애플 통조림/g, "파인애플").match(reg),
            name:obj.RCP_NM, cook:obj.RCP_WAY2, mainImg:obj.ATT_FILE_NO_MAIN, tan:obj.INFO_CAR+"g", dan:obj.INFO_PRO+"g", ji:obj.INFO_FAT+"g", na:obj.INFO_NA+"mg",yul:obj.INFO_ENG, item:obj.RCP_PARTS_DTLS, v:obj.RCP_PAT2, 
            make:[obj.MANUAL01.replace(/1./g, ""),obj.MANUAL02.replace(/2./g, ""),obj.MANUAL03.replace(/3./g, ""),obj.MANUAL04.replace(/4./g, ""),obj.MANUAL05.replace(/5./g, ""),obj.MANUAL06.replace(/6./g, ""),obj.MANUAL07.replace(/7./g, ""),obj.MANUAL08.replace(/1./g, "")],
            makeImg:[obj.MANUAL_IMG01,obj.MANUAL_IMG02,obj.MANUAL_IMG03,obj.MANUAL_IMG04,obj.MANUAL_IMG05,obj.MANUAL_IMG06,obj.MANUAL_IMG07,obj.MANUAL_IMG08]
          };
        })

3. 레시피 출력

정규식을 이용해 데이터를 다듬은 뒤 담겨진 변수를 통해, 사용자의 요청의 맞는 데이터들을 출력하였습니다.

재료 검색 후 해당 문자가 포함된 레시피를 출력

상세 레시피 페이지

파라미터를 통한 링크 이동

각 버튼을 클릭하여 해당 음식의 조리법, 해당 음식의 재료를 살 수 있는 페이지로 이동한다.

4. 레시피 keep

마음에 드는 레시피를 저장할 수 있습니다.

5. 재료 관리

냉장고의 남은 재료들과 유통기한을 입력하여 관리할 수 있고, 해당 재료가 포함된 레시피를 보러 갈 수 있습니다.

6. 스크롤 이벤트

해당 스크롤의 위치에 따라 대화가 진행되는듯한 애니메이션을 적용하여
사용자로 하여금 이 사이트의 목적성을 보여줍니다.

7. 네비게이션 버튼

버튼 들을 통해, 섹션 이동 및 위치조정을 할 수 있습니다.

8. 스크롤 저장

페이지 이동 전 위치값을 저장하여 뒤로가기 버튼 클릭 시
위치값을 기억하여 불러드립니다.

트러블슈팅

1. 페이지 전환 시 애니메이션 및 스크롤 오류

메인 페이지에 있는 스크롤에 의한 애니메이션이 페이지 전환이 있고, 다시 복귀하였을 때 다시 애니메이션이 일어나지 않았다.

이유는 페이지 이동을 하면서 나의 초기 스크롤 위치를 설정해주는 함수가 작동하지
않아서 였다.

해결 코드

import { useLocation } from "react-router-dom";

//Main.js
const { pathname } = useLocation();


useEffect(() => {
	//애니메이션 코드
  }, [pathname]);

useLocation을 이용하여 페이지가 재할당 되었을 시 함수를 다시 실행하게 하여,
문제 없이 사용 할 수 있었다.

2. 배포 환경

리엑트는 오로지 js형식으로 만들어지기 때문에, 그냥 작성한 코드만을 올리면 배포가 되지 않았던 걸 몰랐다.

찾아본 결과 컴파일이라는 작업이 필요하다는 것을 알게 되었다.

빌드하는 과정에 대해 공부하여 컴파일 하였고, 변환한 html로 깃허브 레파지토리에 업로드 하였다.

프로젝트 후기

처음으로 파이어베이스를 사용해 봤는데 확실히 db를 사용하니 추가할 수 있는 기능들이 다양해져서 재미있게 작업할 수 있었다. 프론트에 어느정도 익숙해진다면 백단도 공부해보고싶다.