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 페이지로 이동
1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)
2. 기능 구현 [완료] 카테고리 버튼 선택 시, background-color 변경됨 [완료] 해당 카테고리에 맞는 메뉴 렌더링 [진행중] 메뉴 렌더링 시, 메뉴 사진, 주요 재로, 좋아요 버튼 함께 렌더링 됨 [완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동
1. UI [완료] FIGMA 시안 구현 [완료] 반응형 UI (max-width: 820px 까지 확대, 이후 여백 적용)
2. 기능 구현 [진행중] 해당 user 가 좋아요 버튼을 눌렀던 메뉴 레시피 렌더링 [진행중] 렌더링 시, 메뉴 이름, 메뉴 설명, 좋아요 버튼 렌더링 [완료] 메뉴 카드 선택 시, 해당 /recipedetail 페이지로 이동 [진행중] 좋아요 버튼 클릭 시, 좋아요 취소 가능
Keep
돌이켜보니 이번 프로젝트에서 다양한 기능을 구현해볼 수 있는 좋은 기회가 된 것 같습니다!
잘 모르더라도 일단 알아가면서 부딪혀보고, 무슨 일이 있어도 끝까지 구현해보려고 했던 제 시도들이 결과적으로는 좋은 양분이 된 것 같습니다.
Problem
독촉하는 느낌이 들 것 같아 진행 현황을 데일리로 체크하지 않았는데, 후반부에 작업량이 많이 몰리게 되며 그 점이 문제였다는 생각을 했습니다.
중간에 컨벤션 관련된 문제를 해결하는 시간을 오래 가졌기 때문에 컨벤션 관련 문제를 겪어보는 중요한 경험이 되었습니다.
Try
프로젝트의 원활한 진행을 위해서는 데일리 스크럼, 기록, 지속적인 현황 체크가 중요다는 점을 깨달았습니다.
매일 매일 진행현황을 여쭤보는 부담보다, 후반부에 팀이 마주하게 될 부담이 더 클 수 있다는 점을 느꼈습니다.
또 다음번에는 컨벤션을 더 빈틈없이 촘촘하게, 자세히 수립해야할 필요가 있겠다는 생각을 했습니다.
컨벤션을 깃허브에 올려두고 공유만 하는 것으로는 부족할 수 있으니
초반 미팅 시간을 컨벤션을 위해 별도로 할애하여 다같이 확인하고 검토해보거나,
작업 초반까지는 실제 각 담당자의 파일, 폴더, 커밋, PR 내용을 확인하는 시간을 가지는 방법도 고려해볼 것 같습니다.
역시 어떤 일이든 기본이 가장 중요하다, 기초 공사 없이는 건물도 없다는 것을 깨닫는 좋은 기회였습니다.
김민성
Keep
해결하고자 하는 문제를 구글링, 질의응답을 통해 모두 해결했고,
처음 목표로 잡았던 내용은 달성하였다.
최대한 열심히 팀원들과 소통하려 노력하였다.
Problem
리액트에 대한 이해도가 많이 부족했다.
수료 이후에도 리액트에 대한 학습을 더 해나가야겠다고 다짐하게 되었다.
왜 회사에서 커뮤니케이션 능력을 주요하게 보는지 이해할 수 있는 시간이었다.
Try
수료 이후 제공되는 VOD를 최대한 많이 시청하여 리액트의 이해도를 올린다.
더 많은 사람들과 협업하는 경험을 가져본다.
김성재
Keep
파일이나 커밋의 이름과 규칙을 미리 지정해서 다른 팀원이 봤을때 어디 페이지에 무엇이 바뀌었는지 바로 알수 있게 하는 것이 좋았다.
Problem
개인적으로 나의 자바스크립트와 리엑트의 공부가 부족했다. 함수에 대한 이해도가 많이 낮아 코드를 짜거나 수정하기가 매우 어려웠다.
Try
각자 맡은 부분에 기한을 잡아두고 일정을 정해서 진행상황이나 코드리뷰 시간을 만든다.
김희소
Keep
커밋 메시지를 자세히 남기니 pr 남길 때 바뀐 것들을 쉽게 파악할 수 있어 좋았다. 뿌듯함은 덤!
issue 와 milestone 을 이용해 나의 진행 상황을 정리하니 스스로 파악하고 기록하는 데에 도움이 되었다.
Problem
코드 리뷰를 하지 않아 전체 페이지의 ui를 다듬을 때, 다른 팀원이 짠 코드를 파악하는 데에 시간이 오래 걸렸고 결국 모든 문제를 해결할 수 없었다.
컴포넌트 이름으로 컴포넌트의 역할을 파악하기 힘들었다.
Try
매일매일 진행상황을 공유하고, 한 기능이나 컴포넌트 등이 끝날 때에는 코드 리뷰를 자세히 해서 모든 팀원들이 코드를 이해하게 한다.