- BattleTalk은 흔히 '밸런스 게임', '찬반 투표' 를 위한 프로젝트로, 어떠한 주제에 대해 2개의 입장을 나누어 배틀을 올리고, 사람들이 배틀에 참여하여 주제에 대한 자신의 의견을 올릴 수 있는 프로젝트 입니다.
- 2개의 옵션(red/blue) 중 하나의 옵션을 선택하여 댓글을 올릴 수 있으며 재참여는 불가능합니다.
- 옵션은 실시간 resultBar에 반영되어 현재 배틀 현황을 파악할 수 있고, 올린 댓글은 해당 옵션 파트에 실시간으로 업로드 됩니다.
- 로그인 및 회원가입
- 배틀 보기 (무한 스크롤)
- 배틀 참여하기 (투표 및 댓글 작성)
- 배틀 생성 및 삭제
2024.1.20 ~ 2024.1.28 (+이후 리팩토링 진행)
| 날짜 | 내용 |
|---|---|
| 21(월) | 프로젝트 기획 및 디자인, 세팅, 컨벤션 |
| 22(화) | 공용 컴포넌트 제작 |
| 23(수) | 페이지 제작, api 분석 |
| 24(목) | 퍼블리싱 완료, axios 및 query 작업 |
| 25(금) | api 연결 |
| 26(토) | api 연결 |
| 27(일) | 완성 및 배포 |
|
|
| 회원가입/로그인 | 닉네임 변경 |
|---|---|
|
|
| 배틀 생성 | 배틀 참여 |
|
|
| 배틀 리스트 보기(인피니티 스크롤) | 배틀 삭제 |
| Environment | 사용 |
|---|---|
| Communication | |
 |
gitHub |
 |
discord |
 |
Notion |
| tools | |
 |
디자인 |
 |
리니어 |
 |
조직도 툴 |
 |
Config |
| Language | |
 |
타입스크립트 |
| Library | |
 |
api call, 백엔드 데이터 연결 및 관리 |
 |
라우팅 연결 |
 |
전역 상태 관리 |
| 표기 | 표기 사용 상황 |
|---|---|
| Feat | 새로운 기능의 추가 |
| Remove | 파일 삭제 |
| Chore | 빌드 업무 수정, 패키지 매니저 수정(ex .gitignore 수정 같은 경우) |
| Fix | 버그 수정 |
| docs | 문서 수정 |
| Rename | 파일 이름 변경 |
| Style | 스타일 관련 기능(코드 포맷팅, 세미콜론 누락, 코드 자체의 변경이 없는 경우) |
| Refactor | 코드 리펙토링 |
- 원만한 디자인 개발과 공유를 위해 Figma에서 디자인과 기획 작업을 진행하였습니다.
- 피그마 링크
- 프로젝트 웹페이지의 전반적인 과정을 한 눈에 보기 위한 조직도를 구현했습니다.
플래닝 포커를 사용해서 체감 난이도에 따라 역할을 효율적으로 분담했습니다.
프로젝트 관리 툴인 리니어를 사용해서 프로젝트 진행 과정을 단위 별로 효과적으로 관리하였습니다. 리니어(Linear) : 23년 9월 미국에서 대규모 투자유치를 받으며 최근에 인기가 급부상한 협업을 위한 프로젝트 관리 툴입니다.
issue 별로
프로젝트 파트를 구분해서 백로그에 넣어둡니다.
깃허브와 연동으로
자동으로 진행을 표시할 수 있습니다.
깃허브에 merge
완료시 자동으로 In Done으로 넘어가며 자동으로 완료가 됩니다.
저희는 리니어를 사용하기 위해 브랜치 이름을 BT-리니어 넘버-작업 이름 으로 통일하여
진행하였습니다.
-
깃허브를 이용하면 깃허브에서 제공하는 다양한 협업 방식을 사용할 수 있습니다.
-
Pull request시 사용할 수 있는 라벨 - 현재의 요청이 어떤 상태인지 표시할 수 있습니다.
📦src
┣ 📂apis
┃ ┣ 📜auth.ts
┃ ┣ 📜core.ts
┃ ┗ 📜post.ts
┣ 📂assets
┃ ┣ 📂image
┣ 📂atom
┃ ┗ 📜user.ts
┣ 📂components
┃ ┣ 📂ui
┃ ┃ ┣ 📜alert-dialog.tsx
┃ ┃ ┗ 📜button.tsx
┃ ┣ 📜BasicModal.tsx
┃ ┣ 📜Button.tsx
┃ ┣ 📜CharaterCounter.tsx
┃ ┣ 📜FormCard.tsx
┃ ┣ 📜GoBackButton.tsx
┃ ┣ 📜ImageBox.tsx
┃ ┣ 📜Input.tsx
┃ ┣ 📜NavigateBox.tsx
┃ ┣ 📜ProfileModal.tsx
┃ ┣ 📜ResultBar.tsx
┃ ┣ 📜ResultCss.ts
┃ ┣ 📜Textarea.tsx
┃ ┗ 📜TopButton.tsx
┣ 📂const
┃ ┣ 📜EndPoint.ts
┃ ┣ 📜Keys.ts
┃ ┣ 📜ModalMessage.ts
┃ ┗ 📜queryKey.ts
┣ 📂docs
┣ 📂hooks
┃ ┣ 📜useGetInputFile.tsx
┃ ┗ 📜useInput.tsx
┣ 📂layout
┃ ┣ 📂components
┃ ┃ ┣ 📜BattleCreateButton.tsx
┃ ┃ ┣ 📜Header.tsx
┃ ┃ ┣ 📜LoginButton.tsx
┃ ┃ ┣ 📜Navbar.tsx
┃ ┃ ┗ 📜ProfileButton.tsx
┃ ┗ 📜HeaderLayout.tsx
┣ 📂lib
┃ ┗ 📜utils.ts
┣ 📂pages
┃ ┣ 📂CreateBattlePage
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📜BattleOption.tsx
┃ ┃ ┃ ┣ 📜BattleTopic.tsx
┃ ┃ ┃ ┣ 📜Category.tsx
┃ ┃ ┃ ┗ 📜CreateForm.tsx
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂DetailPage
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📜BattleJoinButton.tsx
┃ ┃ ┃ ┣ 📜BattleJoinModal.tsx
┃ ┃ ┃ ┣ 📜ColorCommentList.tsx
┃ ┃ ┃ ┣ 📜CommentBox.tsx
┃ ┃ ┃ ┣ 📜CommentList.tsx
┃ ┃ ┃ ┗ 📜DetailBattleCard.tsx
┃ ┃ ┗ 📜index.tsx
┃ ┣ 📂LoginPage
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📜FormChangeBtn.tsx
┃ ┃ ┃ ┣ 📜SignIn.tsx
┃ ┃ ┃ ┗ 📜SignUp.tsx
┃ ┃ ┗ 📜index.tsx
┃ ┗ 📂MainPage
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📜BattleHeader.tsx
┃ ┃ ┃ ┗ 📜MainBattleCard.tsx
┃ ┃ ┗ 📜index.tsx
┣ 📂router
┃ ┗ 📜routing.tsx
┣ 📂styles
┃ ┣ 📜common.style.ts
┃ ┗ 📜global.css
┣ 📂types
┃ ┣ 📜postType.ts
┃ ┗ 📜userType.ts
┣ 📂utils
┃ ┣ 📜cookieStorage.tsx
┃ ┣ 📜localStorage.tsx
┃ ┣ 📜timeHelper.tsx
┃ ┗ 📜toastMessage.tsx
- Rin
일주일 동안 기획부터 배포까지 하루하루가 챌린지 같은 주였습니다. 기존에 사용했던 협업 툴을 넘어서(pr 탬플릿, 노션, 피그마) 리니어, 플래닝 포커, JS Docs등 새로운 협업 툴을 배우고 익히는 것이 재밌었습니다. 협업을 위한 도구를 쓰고 컨벤션으로 사용하는 것은 귀찮기도 하지만 팀원의 코드를 읽을 때 훨씬 편하고 도움이 되서 쓰는 것이 좋다는 것을 크게 체감했습니다. 프로젝트를 나혼자서 하는 것이 아닌, 다른 사람들과 진행하는 것이기 때문에 나만을 위한 코드를 짜면 안되겠다는 것을 느꼈습니다. 마지막 마무리를 해준 팀원들에게 고맙고, 제가 생각한 기획보다 더 재밌는 결과물이 나와서 만족스러웠던 프로젝트였습니다.
- Daniel
이번 모비톤을 하면서 타입스크립트를 사용법을 잘익힐 수 있어서 좋았습니다. 특히 개발 과정에서 자동완성에 위대함을 느낀 거 같습니다 ㅎㅎ 추가로 tailWindCSS를 제대로 써보아서 너무 좋았고 협업의 중요성을 많이 깨달았습니다!
- Jack
이번 프로젝트는 타입스크립트를 사용해보는 경험과 문서화 그리고 협업을 중점으로 프로젝트를 진행한 결과 어떻게 프로젝트를 구상하고 계획하며 프로젝트를 함께 진행해야하는지 알수있는 좋은 기회였습니다.