냉장고에 있는 재료를 최대한으로 활용하여 오늘의 메뉴를 추천해주는 서비스
⭐️ 배포 주소 https://make-my-fridge-empty.netlify.app/
서로 다른 오리가 모여 화합을 이루는 오리멘탈입니다!
| 김민성 | 김다연 | 김성재 | 김희소 |
|---|---|---|---|
| 그냥왕 킹민성 | 긍정왕 김다연 | 운동왕 김성재 | 여행왕 김희소 |
| 조장 | 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 페이지 |
|---|---|
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 전달 |
- 개발 관련 Task 작성 시, 제목은 [이름] 브랜치명 or 컴포넌트명 or 파일명 을 포함하여 형식에 맞춰 작성한다.
- 예: [다연] input-box 컴포넌트 구현
- Task 시작일에 맞는 milestone 을 선택한다.
- 내용에 구현 내용, 스크린샷을 첨부하고 issue 를 닫는다.
- git project 링크: https://github.com/FRONTENDSCHOOL6/5lemental-final
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 냉장고 400px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 화면 클릭 또는 터치 시, 다음 페이지 (/signin) 로 이동 |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 포켓베이스 user 데이터와 이이디 및 비밀번호 일치여부 확인 [완료] 일치여부 확인 후, 로그인 버튼 클릭 시 /home 으로 이동 [완료] user 의 id, token, isValid 여부 zustand 로 상태관리 [완료] 아이디 또는 비밀번호 불일치 시, 경고 문구 렌더링 3. 사용 컴포넌트 < InputBox /> < Button /> |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [ ] 포켓베이스 user 데이터와 아이디 중복 여부 확인 [ ] 사용 가능한 아이디로 확인된 경우 체크 아이콘 렌더링 [ ] 사용할 수 없는 아이디의 경우, 알림 문구 렌더링 [ ] 닉네임 중복 여부 확인 [ ] 사용할 수 없는 닉네임의 경우, 알림 문구 렌더링 [ ] 비밀번호와 비밀번호 일치여부 확인 및 불일치 시, 알림 문구 렌더링 [ ] 비밀번호 정규식 조건에 맞지 않는 경우, 알림 문구 렌더링 [ ] 약관 동의 항목 체크 시 체크박스 색상 변경 [ ] 전체 약관 동의 시 모든 체크박스 색상 변경 [ ] 회원가입 버튼 클릭 시, 강비 완료된 데이터 pocketbase 에 create 함 3. 사용 컴포넌트 < InputBox /> < Button /> |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 검색창에 값 입력과 동시에 /search 페이지로 이동 [완료] 내 재료 - 해당 계정에서 추가되었던 재료 목록 pocketbase 와 통신하여 렌더링 [완료] 오늘 뭐 먹지? - 현재 서비스 내에 있는 전체 메뉴 목록 랜더링 (랜더링 시, 요리 사진, 요리명, 주요 재료 랜더링 필요) [진행중] 오늘 뭐 먹지? - 좌우 스크롤로 이동하며, 최대 5개까지의 메뉴 렌더링 [완료] 전체보기 - /menulist 페이지로 이동 [완료] 내 냉장고 속 재료로 요리하기 버튼 - /fridge 페이지로 이동 [완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동 3. 사용 컴포넌트 < Heading /> < SearchInput /> < IngredientButtonSaero /> < MenuItem /> < Button /> < NavBar /> |
| 스마트폰 화면 | 태블릿 화면 | 네트워크 문제 발생 시 |
|---|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 검색 결과 렌더링 [진행중] 검색 결과 렌더링 시, 메뉴 이름, 메뉴 설명, 좋아요 갯수 함께 렌더링 됨. [완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동 3. 사용 컴포넌트 < SearchInput /> < SearchRecord /> < MenuImage /> < MenuBox /> < LikeButton /> < NavBar /> |
| 스마트폰 화면 | 태블릿 화면 | 검색결과 없을 경우 |
|---|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 카테고리 버튼 선택 시, background-color 변경됨 [완료] 해당 카테고리에 맞는 메뉴 렌더링 [진행중] 메뉴 렌더링 시, 메뉴 사진, 주요 재로, 좋아요 버튼 함께 렌더링 됨 [완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동 3. 사용 컴포넌트 < Heading /> < CategoryButton /> < MenuItem /> < NavBar /> |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 로그인한 user 의 닉네임 및 프로필 사진 랜더링 [완료] 내 냉장고 열어보기 버튼 클릭 시, /myfridge 로 이동 [완료] 좋아요한 음식 버튼 클릭 시, /recipeliked 로 이동 [진행중] 랜덤 메뉴 클릭 시 (미정) 3. 사용 컴포넌트 < Heading /> < Button /> < NavBar /> |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 해당 user 가 냉장고에 추가한 재료 전체 목록 렌더링 3. 사용 컴포넌트 < Heading /> < IngredientButtonGaro /> < NavBar /> |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 검색창에 재료 검색 기능 [완료] 재료 버튼 클릭 시 배경 색 변경되며 체크 표시 [완료] 재료 확정 버튼 클릭 시, 체크된 재료 전체 목록 해당 user 의 현재 냉장고 재료에 update 3. 사용 컴포넌트 < Heading /> < SearchInput /> < IngredientButtonGaro /> < Button /> < NavBar /> |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] 내 냉장고 재료를 활용할 수 있는 재료 렌더링 [완료] 렌더링 시, 메뉴 사진, 주요 메뉴, 좋아요 버튼 렌더링 [완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동 3. 사용 컴포넌트 < Heading /> < MenuItem /> < NavBar /> |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [완료] Heading 에 메뉴 이름 랜더링 [진행중] 메뉴 사진 및 좋아요 개수 랜더링 [완료] 재료 전체 목록 랜더링하며, 좌우 스크롤 가능 [완료] 하단에 레시피 랜더링 3. 사용 컴포넌트 < Heading /> < IngredientItem /> < NavBar /> |
| 스마트폰 화면 | 태블릿 화면 |
|---|---|
| FIGMA 시안 | 스타일링 및 기능 구현 |
|---|---|
| 1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용) 2. 기능 구현 [진행중] 해당 user 가 좋아요 버튼을 눌렀던 메뉴 레시피 렌더링 [진행중] 렌더링 시, 메뉴 이름, 메뉴 설명, 좋아요 버튼 렌더링 [완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동 [진행중] 좋아요 버튼 클릭 시, 좋아요 취소 가능 3. 사용 컴포넌트 < Heading /> < MenuBox /> < MenuImage /> < LikeButton /> < NavBar /> |
| 스마트폰 화면 | 로딩 화면 | 태블릿 화면 |
|---|---|---|
📊 Project 사이트 성능 검사 결과
Keep
돌이켜보니 이번 프로젝트에서 다양한 기능을 구현해볼 수 있는 좋은 기회가 된 것 같습니다!
잘 모르더라도 일단 알아가면서 부딪혀보고, 무슨 일이 있어도 끝까지 구현해보려고 했던 제 시도들이 결과적으로는 좋은 양분이 된 것 같습니다.
Problem
독촉하는 느낌이 들 것 같아 진행 현황을 데일리로 체크하지 않았는데, 후반부에 작업량이 많이 몰리게 되며 그 점이 문제였다는 생각을 했습니다.
중간에 컨벤션 관련된 문제를 해결하는 시간을 오래 가졌기 때문에 컨벤션 관련 문제를 겪어보는 중요한 경험이 되었습니다.
Try
프로젝트의 원활한 진행을 위해서는 데일리 스크럼, 기록, 지속적인 현황 체크가 중요다는 점을 깨달았습니다.
매일 매일 진행현황을 여쭤보는 부담보다, 후반부에 팀이 마주하게 될 부담이 더 클 수 있다는 점을 느꼈습니다.
또 다음번에는 컨벤션을 더 빈틈없이 촘촘하게, 자세히 수립해야할 필요가 있겠다는 생각을 했습니다.
컨벤션을 깃허브에 올려두고 공유만 하는 것으로는 부족할 수 있으니
초반 미팅 시간을 컨벤션을 위해 별도로 할애하여 다같이 확인하고 검토해보거나,
작업 초반까지는 실제 각 담당자의 파일, 폴더, 커밋, PR 내용을 확인하는 시간을 가지는 방법도 고려해볼 것 같습니다.
역시 어떤 일이든 기본이 가장 중요하다, 기초 공사 없이는 건물도 없다는 것을 깨닫는 좋은 기회였습니다.
Keep
해결하고자 하는 문제를 구글링, 질의응답을 통해 모두 해결했고,
처음 목표로 잡았던 내용은 달성하였다.
최대한 열심히 팀원들과 소통하려 노력하였다.
Problem
리액트에 대한 이해도가 많이 부족했다.
수료 이후에도 리액트에 대한 학습을 더 해나가야겠다고 다짐하게 되었다.
왜 회사에서 커뮤니케이션 능력을 주요하게 보는지 이해할 수 있는 시간이었다.
Try
수료 이후 제공되는 VOD를 최대한 많이 시청하여 리액트의 이해도를 올린다.
더 많은 사람들과 협업하는 경험을 가져본다.
Keep
파일이나 커밋의 이름과 규칙을 미리 지정해서 다른 팀원이 봤을때 어디 페이지에 무엇이 바뀌었는지 바로 알수 있게 하는 것이 좋았다.
Problem
개인적으로 나의 자바스크립트와 리엑트의 공부가 부족했다. 함수에 대한 이해도가 많이 낮아 코드를 짜거나 수정하기가 매우 어려웠다.
Try
각자 맡은 부분에 기한을 잡아두고 일정을 정해서 진행상황이나 코드리뷰 시간을 만든다.
Keep
커밋 메시지를 자세히 남기니 pr 남길 때 바뀐 것들을 쉽게 파악할 수 있어 좋았다. 뿌듯함은 덤!
issue 와 milestone 을 이용해 나의 진행 상황을 정리하니 스스로 파악하고 기록하는 데에 도움이 되었다.
Problem
코드 리뷰를 하지 않아 전체 페이지의 ui를 다듬을 때, 다른 팀원이 짠 코드를 파악하는 데에 시간이 오래 걸렸고 결국 모든 문제를 해결할 수 없었다.
컴포넌트 이름으로 컴포넌트의 역할을 파악하기 힘들었다.
Try
매일매일 진행상황을 공유하고, 한 기능이나 컴포넌트 등이 끝날 때에는 코드 리뷰를 자세히 해서 모든 팀원들이 코드를 이해하게 한다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent