프로젝트 명: 털랭 | teulang

간단 설명 : 냉장고에 남는 식재료 때문에 골치 아프신 분들을 위한 식재료 기반 레시피 공유/추천 서비스

타겟 층: 남는 식재료를 활용한 레시피가 필요한 사람, 자취 하는 사람들

기획 의도: 자취생이라면 경험했을 '냉장고 털어먹기'를 위해, 식재료를 기반으로 레시피를 추천하고, 공유하는 서비스, '털랭'을 기획했습니다. 기존의 사이트에선 요리명을 통해 특정 레시피를 찾지만, 저희 서비스에선 재료명을 검색하여 여러 레시피를 확인할 수 있다는 것이 주요 특징입니다. 식재료를 검색할 때 키워드와 이미지로 검색할 수 있고, 사용자가 직접 레시피를 등록하는 것 또한 가능합니다. 사용자가 요리를 하면서 레시피 확인, 그리고 이미지 검색을 하는 데에 있어서 용이하도록 털랭 서비스는 모바일 환경을 지원합니다.

배포 주소

털랭

개발 인원

	김현우	우은진
GitHub	https://github.com/Duboo31	https://github.com/EunjinWoo
Blog	https://velog.io/@duboo	https://esthrelar.tistory.com/

개발 환경

• Node.js v18.17.1
• npm 9.6.7

"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@reduxjs/toolkit": "^1.9.7",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^13.0.0",
"@testing-library/user-event": "^13.2.1",
"axios": "^1.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.48.2",
"react-hook-use-form": "^1.2.0",
"react-query": "^3.39.3",
"react-redux": "^8.1.3",
"react-router-dom": "^6.18.0",
"react-scripts": "5.0.1",
"redux-persist": "^6.0.0",
"swiper": "^11.0.3",
"web-vitals": "^2.1.0"

주요 스택 💻

Development

Communication

시작 가이드

$ git clone https://github.com/Duboo31/final_project_teulang_client.git

Frontend

$ cd final_project_teulang_client
$ npm i
$ npm run start

화면 구성

메인

Desktop 🖥️	Mobile 📱

인기 / 최신 레시피를 슬라이드로 볼 수 있는 페이지

모바일 네비게이션

Mobile 📱

모바일 화면을 고려한 네비게이션

회원가입

Desktop 🖥️	Mobile 📱

일반 회원가입 혹은 카카오 계정을 이용한 회원가입을 진행할 수 있는 페이지

로그인

Desktop 🖥️	Mobile 📱

일반 계정 로그인 혹은 카카오 계정을 이용한 로그인을 진행할 수 있는 페이지

비밀번호 재설정

Desktop 🖥️	Mobile 📱

비밀번호를 분실할 경우 가입한 이메일을 통한 인증 후 비밀번호를 재설정 할 수 있는 페이지

전체 레시피

Desktop 🖥️	Mobile 📱

털랭의 모든 레시피를 인기 / 최신 정렬 및 페이지네이션을 사용해 20개씩 볼 수 있는 페이지

자유 게시판

Desktop 🖥️	Mobile 📱

털랭의 자유 게시판 / 레시피 리뷰에 대한 게시글을 페이지네이션을 사용해 20개씩 볼 수 있는 페이지

레시피 작성

Desktop 🖥️	Mobile 📱

조리 방법을 추가하여 레시피를 이미지, 재료, 설명 등.. 작성할 수 있는 페이지

게시글 작성

Desktop 🖥️	Mobile 📱

자유 / 리뷰를 선택해 이미지, 내용 게시물을 작성할 수 있는 페이지

마이 페이지 (내 레시피)

Desktop 🖥️	Mobile 📱

내가 작성한 레시피와 편집 그리고 팔로우/팔로잉을 확인할 수 있는 페이지

마이 페이지 (북마크 레시피)

Desktop 🖥️	Mobile 📱

내가 북마크한 레시피를 확인할 수 있는 페이지

마이 페이지 (내 냉장고)

Desktop 🖥️	Mobile 📱

내가 직접 입력한 내 냉장고 재료들을 확인하고 소비기한이 다가오는 재료를 사용한 레피시를 추천 받을 수 있는 레시피

마이페이지 (프로필 수정)

Desktop 🖥️	Mobile 📱

프로필 이미지, 닉네임, 비밀번호 등 수정이 가능한 페이지

마이페이지 (회원 탈퇴)

Desktop 🖥️	Mobile 📱

회원 탈퇴에 대한 내용 확인 및 탈퇴를 할 수 있는 페이지

이미지 검색

Desktop 🖥️	Mobile 📱

,를 통해 여러 재료를 입력해 레시피를 검색할 수 있는 기능

이미지 검색

Desktop 🖥️	Mobile 📱

재료 이미지를 등록해서 어떤 재료인지 AI가 파악하고 해당 재료에 대한 레시피를 추천 해주는 기능