our-house-meal-table: A TypeScript repository from minnyoung

🍽 우리집 한 달 식단표를 만들어봐요! 🍽

우리집 식단표 서비스 소개

우리집 식단표는 한 달 식단표를 직접 제작할 수 있는 웹 서비스입니다. 🍽

서비스로 이동하기 👉 https://our-house-meal-table.web.app/

✍ 테스트 계정

아이디	비밀번호
test@test.com	12345678

작성한 회고들 보러가기 📝

기능 소개

회원가입 / 로그인

Firebase Authentication을 이용해 이메일, 구글 계정을 통해 로그인을 구현했습니다.
추후 아이디/비밀번호 찾기 기능과 다른 SNS 계정을 통한 로그인 구현 예정입니다.


회원가입	로그인(이메일)	로그인(구글계정)

달력에 메뉴 등록하기

onDrag, onDrop 이벤트를 적용해 오른쪽 메뉴 리스트에서 달력으로 드래그 시 원하는 날짜에 원하는 메뉴를 등록할 수 있습니다.
달력 내 날짜칸을 클릭하면 상세정보를 확인할 수 있는 모달창을 구현했습니다.
onClick 이벤트를 적용해 상세정보창이 열려있을 경우, 클릭으로 더욱 편리하게 메뉴를 등록할 수 있습니다.
메인메뉴, 국/찌개류는 1개씩 등록 가능하며 반찬류는 3개까지 등록이 가능합니다.
달력 상단의 '메뉴 저장하기' 버튼을 누르면 서버에 식단표가 저장됩니다.


메뉴를 달력으로 드래그하면 메뉴가 등록됨	모달창에서도 메뉴 드래그 시 메뉴 등록가능

모달창(상세정보창)이 열린 상태에서 메뉴를 클릭하면 간편하게 메뉴등록 가능

달력에 등록한 메뉴 삭제하기

날짜별 메뉴 전체삭제/메뉴 부분삭제, 월별 메뉴 전체삭제 기능이 있습니다.
날짜별 메뉴 전체삭제와 메뉴 부분삭제 기능은 달력 날짜칸 클릭 시 나타나는 모달을 통해서만 할 수 있습니다.


날짜별 메뉴 전체삭제/메뉴 부분삭제	월별 메뉴 전체삭제

메뉴 검색하기

오른쪽 메뉴 리스트에서 원하는 메뉴를 검색할 수 있습니다.
불필요한 렌더링을 방지하기 위해 debounce 기능을 이용해 300ms 마다 검색될 수 있도록 했습니다(custom hook 코드 보러가기, 적용코드 보러가기).
검색한 메뉴도 달력으로 드래그 시 등록이 가능합니다.


메뉴 검색	검색된 메뉴 달력에 등록

추가기능

서비스 이용방법 메뉴얼 구현

처음 서비스를 이용하는 사용자들을 위한 메뉴얼을 모달을 이용해 구현했습니다.
로그인 후 식단표 페이지에서 모달창으로 확인할 수 있으며, localStorage의 유효 기간이 없고 영구적으로 이용 가능한 특성을 이용해 다시 보지 않기 checkbox를 구현했습니다.

등록한 메뉴 레시피 검색페이지로 이동

날짜에 등록된 메뉴를 클릭하면 만개의 레시피 검색 페이지로 이동할 수 있게 구현했습니다.

식단표를 이미지로 저장할 수 있는 기능

html2canvas 라이브러리를 이용해 사용자가 만든 식단표를 이미지로 저장할 수 있는 기능을 구현했습니다.


레시피 검색페이지로 이동	식단표 이미지 저장 기능

서비스 이용방법 메뉴얼 구현

핵심 기술

Front-end

기술 스택 : React, TypeScript, Zustand, Styled-components

Back-end

기술 스택 : Firebase

실행방법

// 프로젝트를 클론합니다.
git clone https://github.com/minnyoung/our-house-meal-table.git

// 클론한 프로젝트 내부로 이동합니다.
cd our-house-meal-table

// 의존 패키지를 설치합니다.
npm install

npm run start

파이어 베이스 사용을 위해 src 폴더 하위에 .env 파일을 추가합니다. .env 파일의 내용은 다음과 같습니다.

// firebase

REACT_APP_API_KEY = {FIREBASE_API_KEY}
REACT_APP_AUTH_DOMAIN = our-house-meal-table.firebaseapp.com
REACT_APP_PROJECT_ID = our-house-meal-table
REACT_APP_STORAGE_BUCKET = {FIREBASE_STORAGE_BUCKET}
REACT_APP_MESSGIN_ID = {FIREBASE_MESSGIN_ID}
REACT_APP_APP_ID = {FIREBASE_APP_ID}

폴더구조

📦src
 ┣ 📂apis
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂calendar
 ┃ ┣ 📂element
 ┃ ┣ 📂icons
 ┃ ┗ 📂menuSection
 ┣ 📂hooks
 ┣ 📂pages
 ┣ 📂store
 ┣ 📂styles
 ┣ 📂types
 ┣ 📂utils
 ┣ 📜App.css
 ┣ 📜App.test.tsx
 ┣ 📜App.tsx
 ┣ 📜firebase-config.js
 ┣ 📜index.css
 ┣ 📜index.tsx
 ┣ 📜react-app-env.d.ts
 ┣ 📜reportWebVitals.ts
 ┣ 📜router.tsx
 ┗ 📜setupTests.ts

minnyoung/our-house-meal-table

🍽 우리집 한 달 식단표를 만들어봐요! 🍽

목차

우리집 식단표 서비스 소개

✍ 테스트 계정

기능 소개

회원가입 / 로그인

달력에 메뉴 등록하기

달력에 등록한 메뉴 삭제하기

메뉴 검색하기

추가기능

서비스 이용방법 메뉴얼 구현

등록한 메뉴 레시피 검색페이지로 이동

식단표를 이미지로 저장할 수 있는 기능

핵심 기술

Front-end

Back-end

실행방법

폴더구조