[멋쟁이사자처럼] 프론트엔드 스쿨 6기 - 파이널프로젝트

🍕 비우자 냉장고

냉장고에 있는 재료를 최대한으로 활용하여 오늘의 메뉴를 추천해주는 서비스

⭐️ 배포 주소 https://make-my-fridge-empty.netlify.app/

🚀목차

📸 Project 미리보기
👩‍💻 Project 팀
📂 파일 구성
🔨 컨벤션
🗄️ 프로젝트 관리
🙋🏼‍♀️ 페이지 별 설명
📊 Project 사이트 성능 검사 결과
🎈 소감

📸 Project 미리보기

👩‍💻🧑‍💻 Project 팀

팀명: 오리멘탈 🐤

서로 다른 오리가 모여 화합을 이루는 오리멘탈입니다!

김민성	김다연	김성재	김희소

그냥왕 킹민성	긍정왕 김다연	운동왕 김성재	여행왕 김희소

👩‍💻🧑‍💻 Project 팀원별 역할

김민성

조장	IngredientButtonGaro 컴포넌트	MenuItem 컴포넌트

MyFridge 페이지	AddIngredients 페이지	FridgeMenu 페이지

김다연

스크럼마스터	InputBox 컴포넌트	Heading 컴포넌트

CategoryButton 컴포넌트	Button 컴포넌트	LikeButton 컴포넌트

MenuItem 컴포넌트	Start 페이지	SignIn 페이지

SignUp 페이지	Search 페이지	MenuList 페이지

RecipeLiked 페이지	MyProfile 페이지	RecipeDetail 페이지

김성재

MenuBox 컴포넌트	RecipeLiked 페이지

김희소

IngredientButtonSero 컴포넌트	Title 컴포넌트	SearchInput 컴포넌트

NavBar 컴포넌트	MenuItem 컴포넌트	로딩 중 안내 문구

로딩 중 안내 문구	Home 페이지

🗓️ Project 기간

2023년 9월 4일 (월) ~ 2023년 9월 25일 (월)

🚙✨사용 기술 스택

HTML & CSS

Language

Package Manager

GIT

TOOLS

SETTING

DATABASE

Disign & Communication

📂 파일 구성

폴더 구성

📦src
 ┣ 📂api
 ┃ ┗ 📜pocketbase.jsx
 ┣ 📂components
 ┃ ┣ 📂button
 ┃ ┃ ┣ 📜Button.jsx
 ┃ ┃ ┗ 📜Button.module.css
 ┃ ┣ 📂categoryButton
 ┃ ┃ ┣ 📜CategoryButton.jsx
 ┃ ┃ ┗ 📜CategoryButton.module.css
 ┃ ┣ 📂like
 ┃ ┃ ┗ 📜Like.jsx
 ┃ ┣ 📂likeButton
 ┃ ┃ ┣ 📜LikeButton.jsx
 ┃ ┃ ┗ 📜LikeButton.module.css
 ┃ ┣ 📂navBar
 ┃ ┃ ┣ 📜NavBar.jsx
 ┃ ┃ ┗ 📜Component.module.css
 ┃ ┣ 📜BigMenuList.jsx
 ┃ ┣ 📜Heading.jsx
 ┃ ┣ 📜IngredientButtonGaro.jsx
 ┃ ┣ 📜IngredientButtonSero.jsx
 ┃ ┣ 📜IngredientItem.jsx
 ┃ ┣ 📜IngredientItemGaro.jsx
 ┃ ┣ 📜InputBox.jsx
 ┃ ┣ 📜MenuBox.jsx
 ┃ ┣ 📜MenuImge.jsx
 ┃ ┣ 📜MenuImgeItem.jsx
 ┃ ┣ 📜MenuItem.jsx
 ┃ ┣ 📜SearchInput.jsx
 ┃ ┣ 📜SeeAll.jsx
 ┃ ┗ 📜Title.jsx
 ┣ 📂hooks
 ┃ ┗ 📜list.js
 ┣ 📂layout
 ┃ ┗ 📜RootLayout.jsx
 ┣ 📂payges
 ┃ ┣ 📜Footer.jsx
 ┃ ┣ 📜Header.jsx
 ┃ ┣ 📜Nav.jsx
 ┃ ┗ 📜RootLayOut.jsx
 ┣ 📂pages
 ┃ ┣ 📂signUp
 ┃ ┃ ┣ 📜SignUp.jsx
 ┃ ┃ ┗ 📜SignUp.module.css
 ┃ ┣ 📜AddIngredients.jsx
 ┃ ┣ 📜FridgeMenu.jsx
 ┃ ┣ 📜Home.jsx
 ┃ ┣ 📜MenuList.jsx
 ┃ ┣ 📜MyFridge.jsx
 ┃ ┣ 📜MyProfile.jsx
 ┃ ┣ 📜RecipeDetail.jsx
 ┃ ┣ 📜RecipeLiked.jsx
 ┃ ┣ 📜Search.jsx
 ┃ ┣ 📜SignIn.jsx
 ┃ ┗ 📜Start.jsx
 ┣ 📂store
 ┃ ┣ 📜auth.js
 ┃ ┣ 📜category.js
 ┃ ┣ 📜like.js
 ┃ ┣ 📜search.js
 ┃ ┗ 📜storeState.js
 ┣ 📂styles
 ┃ ┗ 📜tailwind.css
 ┣ 📂utils
 ┃ ┣ 📜debounce.js
 ┃ ┗ 📜getPbImageUrl.js
 ┣ 📜App.jsx
 ┣ 📜main.jsx
 ┗ 📜routes.jsx

🪓🔨 컨벤션

Code Convention

띄워쓰기 2칸 = 1tab = tabsize
따옴표 : 작은따옴표로 통일
브랜치 이름
- 브랜치명은 현재 개발하고있는 component 또는 page 명으로 작성
- 브랜치명은 Kebab Case 로 작성
파일 이름
- Component 파일명 : PascalCase
- Non-Component 파일명/속성명/변수명/컴포넌트 내 함수명 : camelCase
함수 이름은 동사+명사 의 형태로 표현

isNumber()
getNumber()
checkNumber()

변수
- var 사용 금지
- let, const만 사용
설명이 필요한 기능들에 주석 작성하고 기능 구현 완료시 “주석 삭제하기”
- Better Comment 확장 프로그램 사용

// 기본 주석 - 자유롭게 작성

// ? 의견을 묻는 주석 예시입니다.
→ 의견을 구해야하거나, 피드백을 구하려할때 사용해주세요

// ! 주의해주세요
→ 신경 쓸 부분이나 중요한 이야기가 있을 때 사용해주세요


** 모든 주석은 기능 구현 중일때에만 작성, 전달 => 기능 구현 완료시 주석 삭제

if문 사용시 else if 는 사용을 자제 => 가능하다면 삼항연산자로 작성
async, await를 기본적으로 사용
- 프로미스를 사용할 때는 반드시 주석에 표시 →Better Comment 의 * 기호 사용
객체, 배열 : 마지막 요소 뒤에 쉼표 넣기. 단, 한 줄로 작성한 경우에는 제외한다.
객체 : 중괄호 안쪽에 공백을 추가하여 작성
Tailwindcss: module.css 작성 시, 선택자 (:after, :before, :hover 등) 를 사용하여 스타일링 하는 경우, 개행하여 작성한다.

Commit Convention

Commit Type(Gitmoji 확장프로그램 사용)
아래 표에서 알맞은 이모지와 뜻을 확인하고 커밋 메세지를 작성합니다.
- 커밋 메세지 작성 예시 : 🎉 초기 Settings 완료
구현이 아직 완료되지 않은 경우, 설명 뒤에 'Test' 를 붙여 커밋 완료합니다.
- 커밋 메세지 작성 예시: ✨ 좋아요 기능 구현 Test

종류(type)	설명(Description)
✨ feat	기능 및 코드 추가
🔥 remove	기능 및 코드 제거
💎 modify	기능 및 코드 수정
🎨 styling	코드 스타일링
➕ add	파일 추가
➖ remove	파일 제거
📦 move	파일 이동
🏗️ structure	프로젝트 구조 변경
🐛 fix	버그 수정
🚑 hotfix	치명적인 버그 수정
♻️ refactor	코드 리팩토링
📝 doc	문서 작성 및 편집
🎉 init	초기 커밋
🚀 deploy	프로젝트 배포

커밋 메시지를 너무 길게 작성하지 말 것
- 핵심 내용을 요약하여 1~2 줄로 작성
- 남겨야 할 메시지가 많을 경우 git issue 사용

Git GuideLine

develop 브랜치로만 PR 한다.
제목의 대괄호 안은 add, modify, delete, refactor 로 크게 구분한다.
제목에는 컴포넌트명과, PR 되는 내용을 요약하여 작성한다.
제목은 명사형으로 작성한다. (예: 토글 기능 추가, 로고 이미지 삭제)
내용에는 추가/변경/삭제 되는 내용을 최대한 상세하게 작성한다.
필요한 경우, 미구현 내용도 상세하게 작성한다.
필요한 경우, 스크린샷을 첨부한다.

[add] InputBox 마크업 추가
input box 컴포넌트에 해당하는 마크업 추가하였습니다. - 미구현 사항: 스타일링, props 전달

2. Git Project Guideline

개발 관련 Task 작성 시, 제목은 [이름] 브랜치명 or 컴포넌트명 or 파일명 을 포함하여 형식에 맞춰 작성한다.
예: [다연] input-box 컴포넌트 구현
Task 시작일에 맞는 milestone 을 선택한다.
내용에 구현 내용, 스크린샷을 첨부하고 issue 를 닫는다.

🗄️ 프로젝트 관리

🗃️ Git Project

git project 링크: https://github.com/FRONTENDSCHOOL6/5lemental-final

🎨 기획 및 디자인

FIGMA 링크: https://www.figma.com/file/JPKVOCvLBIeTRKlR7CpMzu/%EB%B9%84%EC%9A%B0%EC%9E%90-%EB%83%89%EC%9E%A5%EA%B3%A0-%EC%8B%9C%EC%95%88?type=design&node-id=0%3A1&mode=design&t=5fKObW8eYaPEee8R-1

🙋🏼‍♀️ 페이지 별 설명

1. Start

FIGMA 시안	스타일링 및 기능 구현
	1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 냉장고 400px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 화면 클릭 또는 터치 시, 다음 페이지 (/signin) 로 이동

실제 구현 화면

스마트폰 화면	태블릿 화면

2. SignIn

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[완료] 포켓베이스 user 데이터와 이이디 및 비밀번호 일치여부 확인
[완료] 일치여부 확인 후, 로그인 버튼 클릭 시 /home 으로 이동
[완료] user 의 id, token, isValid 여부 zustand 로 상태관리
[완료] 아이디 또는 비밀번호 불일치 시, 경고 문구 렌더링

3. 사용 컴포넌트
< InputBox />
< Button />

실제 구현 화면

스마트폰 화면	태블릿 화면

3. SignUp

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[ ] 포켓베이스 user 데이터와 아이디 중복 여부 확인
[ ] 사용 가능한 아이디로 확인된 경우 체크 아이콘 렌더링
[ ] 사용할 수 없는 아이디의 경우, 알림 문구 렌더링
[ ] 닉네임 중복 여부 확인
[ ] 사용할 수 없는 닉네임의 경우, 알림 문구 렌더링
[ ] 비밀번호와 비밀번호 일치여부 확인 및 불일치 시, 알림 문구 렌더링
[ ] 비밀번호 정규식 조건에 맞지 않는 경우, 알림 문구 렌더링
[ ] 약관 동의 항목 체크 시 체크박스 색상 변경
[ ] 전체 약관 동의 시 모든 체크박스 색상 변경
[ ] 회원가입 버튼 클릭 시, 강비 완료된 데이터 pocketbase 에 create 함

3. 사용 컴포넌트
< InputBox />
< Button />

실제 구현 화면

스마트폰 화면	태블릿 화면

4. Home

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[완료] 검색창에 값 입력과 동시에 /search 페이지로 이동
[완료] 내 재료 - 해당 계정에서 추가되었던 재료 목록 pocketbase 와 통신하여 렌더링
[완료] 오늘 뭐 먹지? - 현재 서비스 내에 있는 전체 메뉴 목록 랜더링 (랜더링 시, 요리 사진, 요리명, 주요 재료 랜더링 필요)
[진행중] 오늘 뭐 먹지? - 좌우 스크롤로 이동하며, 최대 5개까지의 메뉴 렌더링
[완료] 전체보기 - /menulist 페이지로 이동
[완료] 내 냉장고 속 재료로 요리하기 버튼 - /fridge 페이지로 이동
[완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동

3. 사용 컴포넌트
< Heading />
< SearchInput />
< IngredientButtonSaero />
< MenuItem />
< Button />
< NavBar />

실제 구현 화면

스마트폰 화면	태블릿 화면	네트워크 문제 발생 시

5. Search

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[완료] 검색 결과 렌더링
[진행중] 검색 결과 렌더링 시, 메뉴 이름, 메뉴 설명, 좋아요 갯수 함께 렌더링 됨.
[완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동

3. 사용 컴포넌트
< SearchInput />
< SearchRecord />
< MenuImage />
< MenuBox />
< LikeButton />
< NavBar />

실제 구현 화면

스마트폰 화면	태블릿 화면	검색결과 없을 경우

6. MenuList

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[완료] 카테고리 버튼 선택 시, background-color 변경됨
[완료] 해당 카테고리에 맞는 메뉴 렌더링
[진행중] 메뉴 렌더링 시, 메뉴 사진, 주요 재로, 좋아요 버튼 함께 렌더링 됨
[완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동

3. 사용 컴포넌트
< Heading />
< CategoryButton />
< MenuItem />
< NavBar />

실제 구현 화면

스마트폰 화면	태블릿 화면

7. MyProfile

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[완료] 로그인한 user 의 닉네임 및 프로필 사진 랜더링
[완료] 내 냉장고 열어보기 버튼 클릭 시, /myfridge 로 이동
[완료] 좋아요한 음식 버튼 클릭 시, /recipeliked 로 이동
[진행중] 랜덤 메뉴 클릭 시 (미정)

3. 사용 컴포넌트
< Heading />
< Button />
< NavBar />

실제 구현 화면

스마트폰 화면	태블릿 화면

8. MyFridge

FIGMA 시안	스타일링 및 기능 구현
	1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 해당 user 가 냉장고에 추가한 재료 전체 목록 렌더링 3. 사용 컴포넌트 < Heading /> < IngredientButtonGaro /> < NavBar />

실제 구현 화면

스마트폰 화면	태블릿 화면

9. AddIngredients

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[완료] 검색창에 재료 검색 기능
[완료] 재료 버튼 클릭 시 배경 색 변경되며 체크 표시
[완료] 재료 확정 버튼 클릭 시, 체크된 재료 전체 목록 해당 user 의 현재 냉장고 재료에 update

3. 사용 컴포넌트
< Heading />
< SearchInput />
< IngredientButtonGaro />
< Button />
< NavBar />

실제 구현 화면

스마트폰 화면	태블릿 화면

10. FridgeMenu

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[완료] 내 냉장고 재료를 활용할 수 있는 재료 렌더링
[완료] 렌더링 시, 메뉴 사진, 주요 메뉴, 좋아요 버튼 렌더링
[완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동

3. 사용 컴포넌트
< Heading />
< MenuItem />
< NavBar />

실제 구현 화면

스마트폰 화면	태블릿 화면

11. RecipeDetail

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[완료] Heading 에 메뉴 이름 랜더링
[진행중] 메뉴 사진 및 좋아요 개수 랜더링
[완료] 재료 전체 목록 랜더링하며, 좌우 스크롤 가능
[완료] 하단에 레시피 랜더링

3. 사용 컴포넌트
< Heading />
< IngredientItem />
< NavBar />

실제 구현 화면

스마트폰 화면	태블릿 화면

12. RecipeLiked

FIGMA 시안

스타일링 및 기능 구현

1. UI
[완료] FIGMA 시안 구현
[완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)

2. 기능 구현
[진행중] 해당 user 가 좋아요 버튼을 눌렀던 메뉴 레시피 렌더링
[진행중] 렌더링 시, 메뉴 이름, 메뉴 설명, 좋아요 버튼 렌더링
[완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동
[진행중] 좋아요 버튼 클릭 시, 좋아요 취소 가능

3. 사용 컴포넌트
< Heading />
< MenuBox />
< MenuImage />
< LikeButton />
< NavBar />

실제 구현 화면

스마트폰 화면	로딩 화면	태블릿 화면

📊 Project 사이트 성능 검사 결과

1. Start

2. SignIn

3. SignUp

4. Home

5. Search

6. MenuList

7. MyProfile

8. MyFridge

9. AddIngredients

10. FridgeMenu

11. RecipeDetail

12. RecipeLiked

🎈 소감

김다연

Keep

돌이켜보니 이번 프로젝트에서 다양한 기능을 구현해볼 수 있는 좋은 기회가 된 것 같습니다!
잘 모르더라도 일단 알아가면서 부딪혀보고, 무슨 일이 있어도 끝까지 구현해보려고 했던 제 시도들이 결과적으로는 좋은 양분이 된 것 같습니다.


Problem

독촉하는 느낌이 들 것 같아 진행 현황을 데일리로 체크하지 않았는데, 후반부에 작업량이 많이 몰리게 되며 그 점이 문제였다는 생각을 했습니다.
중간에 컨벤션 관련된 문제를 해결하는 시간을 오래 가졌기 때문에 컨벤션 관련 문제를 겪어보는 중요한 경험이 되었습니다.


Try

프로젝트의 원활한 진행을 위해서는 데일리 스크럼, 기록, 지속적인 현황 체크가 중요다는 점을 깨달았습니다.
매일 매일 진행현황을 여쭤보는 부담보다, 후반부에 팀이 마주하게 될 부담이 더 클 수 있다는 점을 느꼈습니다.
또 다음번에는 컨벤션을 더 빈틈없이 촘촘하게, 자세히 수립해야할 필요가 있겠다는 생각을 했습니다.
컨벤션을 깃허브에 올려두고 공유만 하는 것으로는 부족할 수 있으니
초반 미팅 시간을 컨벤션을 위해 별도로 할애하여 다같이 확인하고 검토해보거나, 
작업 초반까지는 실제 각 담당자의 파일, 폴더, 커밋, PR 내용을 확인하는 시간을 가지는 방법도 고려해볼 것 같습니다.
역시 어떤 일이든 기본이 가장 중요하다, 기초 공사 없이는 건물도 없다는 것을 깨닫는 좋은 기회였습니다.

김민성

Keep

해결하고자 하는 문제를 구글링, 질의응답을 통해 모두 해결했고, 
처음 목표로 잡았던 내용은 달성하였다. 
최대한 열심히 팀원들과 소통하려 노력하였다.

Problem

리액트에 대한 이해도가 많이 부족했다. 
수료 이후에도 리액트에 대한 학습을 더 해나가야겠다고 다짐하게 되었다.
왜 회사에서 커뮤니케이션 능력을 주요하게 보는지 이해할 수 있는 시간이었다.

Try

수료 이후 제공되는 VOD를 최대한 많이 시청하여 리액트의 이해도를 올린다.
더 많은 사람들과 협업하는 경험을 가져본다.

김성재

Keep

파일이나 커밋의 이름과 규칙을 미리 지정해서 다른 팀원이 봤을때 어디 페이지에 무엇이 바뀌었는지 바로 알수 있게 하는 것이 좋았다.

Problem

개인적으로 나의 자바스크립트와 리엑트의 공부가 부족했다. 함수에 대한 이해도가 많이 낮아 코드를 짜거나 수정하기가 매우 어려웠다.

Try

각자 맡은 부분에 기한을 잡아두고 일정을 정해서 진행상황이나 코드리뷰 시간을 만든다.

김희소

Keep

커밋 메시지를 자세히 남기니 pr 남길 때 바뀐 것들을 쉽게 파악할 수 있어 좋았다. 뿌듯함은 덤!
issue 와 milestone 을 이용해 나의 진행 상황을 정리하니 스스로 파악하고 기록하는 데에 도움이 되었다.


Problem

코드 리뷰를 하지 않아 전체 페이지의 ui를 다듬을 때, 다른 팀원이 짠 코드를 파악하는 데에 시간이 오래 걸렸고 결국 모든 문제를 해결할 수 없었다.
컴포넌트 이름으로 컴포넌트의 역할을 파악하기 힘들었다.


Try

매일매일 진행상황을 공유하고, 한 기능이나 컴포넌트 등이 끝날 때에는 코드 리뷰를 자세히 해서 모든 팀원들이 코드를 이해하게 한다.

Name		Name	Last commit message	Last commit date
Latest commit History 429 Commits
.netlify		.netlify
.vscode		.vscode
public		public
src		src
.env		.env
.eslintrc.cjs		.eslintrc.cjs
.gitignore		.gitignore
README.md		README.md
index.html		index.html
jsconfig.json		jsconfig.json
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
prettier.config.cjs		prettier.config.cjs
tailwind.config.js		tailwind.config.js
vite.config.js		vite.config.js

FRONTENDSCHOOL6/make-my-fridge-empty

Folders and files

Latest commit

History

Repository files navigation

[멋쟁이사자처럼] 프론트엔드 스쿨 6기 - 파이널프로젝트

🍕 비우자 냉장고

🚀목차

📸 Project 미리보기

👩‍💻🧑‍💻 Project 팀

팀명: 오리멘탈 🐤

👩‍💻🧑‍💻 Project 팀원별 역할

김민성

김다연

김성재

김희소

🗓️ Project 기간

🚙✨사용 기술 스택

📂 파일 구성

🪓🔨 컨벤션

2. Git Project Guideline

🗄️ 프로젝트 관리

🗃️ Git Project

🎨 기획 및 디자인

🙋🏼‍♀️ 페이지 별 설명

1. Start

실제 구현 화면

2. SignIn

실제 구현 화면

3. SignUp

실제 구현 화면

4. Home

실제 구현 화면

5. Search

실제 구현 화면

6. MenuList

실제 구현 화면

7. MyProfile

실제 구현 화면

8. MyFridge

실제 구현 화면

9. AddIngredients

실제 구현 화면

10. FridgeMenu

실제 구현 화면

11. RecipeDetail

실제 구현 화면

12. RecipeLiked

실제 구현 화면

1. Start

2. SignIn

3. SignUp

4. Home

5. Search

6. MenuList

7. MyProfile

8. MyFridge

9. AddIngredients

10. FridgeMenu

11. RecipeDetail

12. RecipeLiked

🎈 소감

김다연

김민성

김성재

김희소

About

Resources

Stars

Watchers

Forks

Releases

Packages 0

Contributors 4

Languages

Packages