Chap-Chap은 1920px 기준으로 제작되었으며 반응형 적용이 되어 있지 않습니다.
figma 👉
디자인 확인하기
vercel 👉
구현된 사이트 확인하기
| account info | |
| ID | chapchap |
| password | chap1234 |
본 사이트는 1920px 기준으로 디자인되었으며 반응형이 적용되어 있지 않습니다.
플래닝 포커, 혹은 스크럼 포커는 그룹 구성원들이 테이블 위에 숫자가 적힌 카드를 뒤집어 놓고 동시에 카드를 뒤집어 노동시간을 계산하는 노동시간 계산법 중 하나 입니다. James Grenning이 창안했으며 애자일 개발 이론에 사용됩니다.
저희는 검색했을 때 나오는 피보나치 수열의 카드를 가지고 하는 방법이 아닌,
"내가 이 페이지를 진행한다면 어느 정도의 시간이 걸릴 것인가, 나에겐 어떤 난이도인가"를 두고 포커를 진행했습니다.
배팅은 1~100까지 가능하며 가장 적게 배팅한 사람이 해당 프로젝트를 진행하게 됩니다. 단, 다음 프로젝트의 담당자를 정할 때는 누적으로 계산합니다.
약 10일의 기간동안 해커톤 느낌으로 진행되는 프로젝트이기 때문에 위와 같은 방식으로 task를 분담했습니다. 플래닝 포커로 담당자를 정해 각자 맡은 페이지를 진행하지만 blocking이 오래 지속되는 경우 함께 해결했습니다.
|
|
|
| Amy | Ann | Kimi |
|---|---|---|
| Frontend | Frontend | Frontend |
|
| Peanut |
|---|
| Backend |
프로젝트 전체 진행 기간 : 2024.01.19 ~ 2024.01.28
배포 및 오류 수정 :
| number | 🗓️ | todo title | detail | issue |
| day 01 | 2024-01-19 | 기획 | open API & concept | - |
| day 02 | 2024-01-20 | 와이어프레임 & BDD | - | |
| day 03 | 2024-01-21 | 디자인 | figma design | - |
| day 04 | 2024-01-22 | ETA 01 | 기초 셋팅 & publishing | tailwind CSS 설정 지연 |
| day 05 | 2024-01-23 | ETA 02 | API & publishing | API 호출 지연 & CORS error |
| day 06 | 2024-01-24 | ETA 03 | publishing & developing | - |
| day 07 | 2024-01-25 | ETA 04 | developing | 각자 고군분투 중 |
| day 08 | 2024-01-26 | ETA 05 | developing | - |
| day 09 | 2024-01-27 | ETA 06 | developing | - |
| day 10 | 2024-01-28 | ETA 07 | developing | - |
| Environment | 사용 |
| Communication | |
|
GitHub |
|
Discord |
| Tools | |
|
for design |
|
for coding |
 |
config |
| Language | |
 |
HTML5 |
 |
CSS3 |
 |
React |
 |
TypeScript |
| Library | |
 |
tailwind CSS |
 |
mui UI |
|
라우팅 연결 |
|
api call, 백엔드 데이터 연결 및 관리 |
|
RHF |
|
zod |
아래 PR 및 commit 컨벤션은 .github 폴더 안에 마크다운 파일로 형식을 강제하고 있습니다.
| 표기 | 표기 사용 상황 |
|---|---|
| 🟢 feat | 새로운 기능 |
| 🔴 Remove | 파일을 삭제하는 작업만 수행한 경우 |
| 🔥 HOTFIX | 급하게 치명적인 버그를 고쳐야하는 경우 |
| 🐞 fix | 버그 수정 |
| 📂 docs | 문서 수정 |
| 🔖 Rename | 파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우 |
| 💬 Comment | 필요한 주석 추가 및 변경 |
| 🎁 style | 레이아웃, 코드 스타일 수정 |
| 💡 refactor | 기능, 코드 개선 |
error 발생 후 해결 방법 공유 & blocking 됐을 때 상황 공유는 gitHub issue에 등록하기
타입스크립트를 처음 프로젝트에 적용하고 있기 때문에 처음부터 깔끔한 코드를 쓰는 것은 어려울 것이라 판단됩니다. 따라서 각자 맡은 파트를 진행하는 과정에서 새롭게 알게 된 방법이나 개선하면 좋은 방법 등 공유도 issue를 통해 공유하고 있습니다.
| 🔴 | issue occur |
| 🟡 | postpone small issue |
| 🟢 | solved |
| 🏳️ | give up, can't resolve now |
style을 적용할 때 통일을 위해 적용할 컨벤션
| condition | name |
| 최상위 div | Container |
| 하위 감싸는 div | Wrap000 / Wrapper |
| 번들 사이즈 감소를 위해 | S로 export |
- 로그인 / 회원가입
- 메인페이지 레시피 무한스크롤
- 레시피 스크랩
- 마이페이지(my-dialog) / 개인정보 수정
2024-01-27.2.42.21.mov
2024-01-28.1.00.37.mov
2024-01-28.10.32.56.mov
" 좀 더 에자일(Agile)하게 협업하자! "
Amy's Memoirs
처음 프로젝트를 진행할 때 협업이 잘 되지 않았던 부분을 보완하고자 각별히 신경썼던 chapchap.
PR templete이나 git issue를 활용해 서로 막히는 부분을 공유하는 것, 그리고 daily scrum을 다른 사이트가 아닌 git issue에 적을 수 있는 점 등
협업에 관해 새로운 것을 많이 알아가는 기회가 되었다. Linear도 처음엔 낯설었지만 매일 사용하면서 익숙해질 수 있어 다음 프로젝트 때 더욱 잘 활용할 수 있을 것 같다.
다만 조직도(overflow)를 미리 구상하고 시작하지 못했던 부분과 api를 좀 더 철저히 분석하지 못하고 넘어갔던 부분이 아쉬웠던 것 같다.
Ann's Memoirs
이번 프로젝트에서 제가 맡았던 TASK는 MainPage와 ScrapPage 입니다.
[MainPage]
css
무한스크롤링 적용
예전엔 전혀 이해하지 못한 로직을 이번에 적용하게 되면서
이해도 하고 좋은 경험이있습니다 아직 완전히 관심사 분리로
나누지는 못했지만 리팩토링을 하면서 다시 다뤄볼 수 있으면
수정할 예정이 있습니다
[ScrapPage]
css
ScrapPage에서는 MainPage에 생각보다 시간이 많이 들어가서
기능 구현이 많이 되지 않았습니다
이 또한 무한 스크롤링으로 적용해야는 부분이라
지금상태로는 관심사 분리가 되지 않아
같은 컴포넌트로 적용이 어려우며 추후 MainPage 리팩토링 진행 시
ScrapPage에도 적용할 수 있는 컴포넌트로 변경할 예정입니다!
Kimi's Memoirs
이번에 얻어가고 싶었던 것들의 얻어가게 된 것과 아쉬운 점들을 남겨보도록 하겠습니다.
얻어가게 된 것
zod: 지금까지 로젝트에서는 회원가입 로그인 폼을 할 때, React-hook-form + yarrn을 썼었는데, zod가 타입스크립트에서 호환성이 좋다고 하여 쓰게 되었는데, 쓰면서 장점을 많이 알게 되었고 라이브러리에 대한 거부감을 하나씩 덜고 있는 것 같습니다.
협업경험: 리니어, 깃허브 이슈, 데일리스크럼 등 리뷰문화를 제대로 경험해보면서 팀원들과의 소통이 중요하다는 것을 깨달았고, 이렇게 하면 당시에 생산성은 좀 저하되지만 프로젝트 규모가 커질수록 유지보수하는 데에 좋을 거 같다는 생각이 들었습니다.
끝까지 해본 경험: 지금까지는 하다가 안되면 포기하고 넘어갔는데 이번엔 끝까지 잡아보는 노력을 해보았습니다.
아쉬운 점
데이터에대한 아키텍처를 제대로 어떤 데이터가 올지 구상하지 못하고 프로젝트에 들어갔던 것이 아쉬움으로 남았습니다. 다음 번에 제대로 회의하여 큰 그림을 그리고 싶습니다.
안되는 점들을 좀 오래 끌었던 것이 아쉽습니다. 한 개의 기능을 끈질기게 완성해보는 것이 목표라,,, 그랬지만 다른 기능 구현이 delay 되는 부작용이 있었습니다.