[TeamProject] 'Apple Market' 1차 회고

💪🏻 약 5개월간 같이 스터디를 진행했던 팀원들과 새프로젝트를 시작했다. 
최근에 이력서 / 포트폴리오 / 자기소개서도 마무리하고, 기업에 이력서도 제출하고, 면접도 보고, 상담도 하고 엄청 바쁜 날을 보냈다. 어느정도 새로운 일상에 적응할 때쯤 시작한 팀프로젝트!

오랜만에 팀 회의를 하니 두근두근 👀

 

 

 

 

---

🍎 Project 'Apple Market'

💁‍♀️ 프로젝트 소개

👜 중고 물품 거래 플랫폼

* 1:1 채팅 기능
* 원하는 상품 지역 카테고리를 통해 검색 
* 지도를 통한 물품 검색 
* ChartJS를 통해 해당 상품의 인기도 구현
* 사용자 인증 (로그인 & 회원가입)
* 게시글 CRUD

 

 

 

🏃🏻‍♀️ 참여 인원

👉🏻 프론트엔드 3명
👉🏻 백엔드 1명

정말 감사하게도 팀원 분 중에 한 분이 백엔드 개발자 지인이 있다고 하셔서 부탁해서 같이 하게 되었다. 
선생님..! 감사합니다 🙇🏼‍♀️

 

 

 

👊🏻 프로젝트 취지

프로젝트를 시작하기 전 각자 해보고 싶었던 언어나 기능들을 알아오고, 프로젝트에 반영하기로 했다.
React Native를 사용해서 아예 모바일로만 만들어보고 싶기도 했고, 요즘 뜨는 Next.js도 사용해보고 싶었다. 

디자인은 css module을 많이 사용해봤으니, emotion으로도 구현해보고 싶었다. (예전에 강의 보고 따라해본 적만 있으니, 아쉽)
Ant Design과 daisyUI 외에도 많은 라이브러리가 있는데 그 중 꽤나 유명한 MUI를 사용해볼까 했다.

기능은 사용자의 경험을 개선해 보여지는 데이터를 chartJS를 사용해서 시각적으로 구현해보고 싶었다. 
또한 웹 스토리지 중 localStorage만 많이 활용해봤으니, 사용자 인증을 쿠키를 사용해서 보완을 더욱 강화하여 구현해보고 싶었다. (해보고 싶은건 참 많네,,)

 

 

 

✨ 기술 스택

Frameworks & Libraries	Design	Communication
NextJS	MUI	Figma
React	Emotion	Notion
Vite		Slack
Redux		Gather town
msw

 

 

 

🎨 Figma 

🎨 Figma로 원하는 Apple Market 화면을 제작해보았다.
primary color와 여러 기타 컬러들, font 크기, font체 등을 figma로 작성하고 팀원들을 초대하여 공유하였다. 
디자인은 미리 통일해야 나중에 번거롭게 변경할 필요가 없을 것 같아서 나중에 코드 짤 때도 figma를 보고 하면 좋을 것 같다 👍🏻

 

 

 

😺 Git & GitHub

🏃🏻‍♀️ 깃허브는 어느정도 익숙해져서 이번에 팀 협업으로 다루는데 오히려 친숙했다. (뭐 얼마나 했다고,,ㅋㅋㅋㅋ)
저번 팀 프로젝트에서는 ISSUE 카드에 에러 문제를 공유하거나, 해결 요청 등 정보를 공유하는 것으로 사용했지만,
이번 프로젝트는 은정님의 제안으로 ISSUE 카드를 계획표처럼 사용하기로 했다. (이렇게 또 하나 배우는군🙌🏻)
구현해야 할 기능들을 일정을 짜서 몇시간 정도 걸릴지 (ex. 'maybe 3h') Label을 붙이고, 구현이 완료되었다면 Dev Progress로 표시하기로 하였다.
또한 branch도 rule에 맞춰서 생성하기로 하여, 저번 팀 프로젝트보다 뭔가 더 짜여진 구조에 맞게 하는 것 같았다. 

역시 깃허브는 알면 알수록 매력적인 녀석이야.. ✨

 

 

 

📝 Notion

🏃🏻‍♀️ 개인 프로젝트 때 노션을 처음 사용해보고, 팀 프로젝트 때 거의 노션을 끼고 살았다. 
팀원들과 정보를 공유할 때 노션만큼 편한 프로그램이 없기에,, ⭐️
이번 팀 프로젝트는 직접 노션을 만들어 팀원들을 팀스페이스에 초대하고 공유하였다. 
포트폴리오랑 자소서도 노션으로 작성했더니 어느정도 익숙해졌나보다. 
하지만 노션.. 아직도 글 가운데 정렬하는 건 정말 어려워; 

 

 

 

🏃🏻‍♀️ 진행 완료

💁‍♀️ 전체 UI 및 디자인 구현
👉🏻 공통 CSS 작성 및 파일 생성
👉🏻 header & Footer 구현
👉🏻 login & sign up 컴포넌트 구현
👉🏻 mainpage 컴포넌트 구현

💁‍♀️ Figma, Notion 
👉🏻 Figma 활용하여 와이어프레임 작성
👉🏻 팀 프로젝트 노션 생성