팀바팀 5주차,6주차 회고(폭풍 개발과 3차데모데이)

기간: 23/07/24 ~23/08/04

GitHub - woowacourse-teams/2023-team-by-team: 대학생이 여러 팀플을 하는데 쉽게 협업을 할 수 있도록 도와

스토리북 배포

@storybook/cli - Storybook

휘몰아치는 이슈 쳐내느라 저번주 회고를 작성하지 못했다. 그래서 이번에는 스프린트 기간이었던 2주 전체를 회고해보려한다. 항상 시간이 다 지나고 작성하려하면 기억이 나지않아서 아쉽긴하지만 작성하는게 어디야ㅎ

 

스프린트 기간동안 진행한 일정

• 스프린트 
  • 스프린트회의 (API 명세)
  • 프론트 프린트 회의
  • 스프린트 중간회의
• 디자인
  • 팀 피드 디자인
  • 통합 캘린더 디자인
• 개발
  • 팀 캘린더 하루일정
  • 스케줄 바 3개 이상일 때 더보기
  • 통합 캘린더
  • 통합 하루 일정
  • 팀 피드 스레드
    
    • 무한 스크롤
  • 팀 피드 공지
  • 스레드 등록 바텀 시트
  • 캘린더 일정 등록 종일/시간대 선택
  • 팀 피드 페이지
  • 팀 전환 기능
  • 웹 접근성
• 데모데이
  • 데모데이 발표자료 준비
  • 데모데이 대본 준비
  • 데모데이 발표

스프린트

이번 스프린트에서는 팀 피드를 위주로 진행하며, 그전 스프린트에서 구현했던 기능인 팀 캘린더를 고도화하기로 했다.

추가적으로 지난 스프린트에서 구현하지 못한 통합 캘린더 또한 이번 스프린트에서 진행하기로 했다.

스프린트 공통 회의

• 통합캘린더
  • 통합캘린더 조회 연결
  • 통합캘린더에서 나의 일정(하루단위) 보기
• 팀 캘린더에서 일정 하루단위 보기
• 팀 피드
  • 스레드 작성, 스레드 조회, 일정 알림, 공지등록, 최신공지조회

공통 회의가 끝난 후에는 바로 이어서 이번 구현할 부분에 대한 API 명세를 다같이 작성했다.

특히 이번 구현부분인 팀 피드는 일정알림과 스레드가 하나의 api 통신으로 와야하기 때문에 이 둘의 타입을 다르게 설계할건지, 아니면 같은 필드로 오는데 프론트에서 나눠서 처리할건지 정해야했다.

결론은 백엔드에서 두개를 나눠서 처리하기는 소요되는 시간 대비 가성비가 나오지 않아서 프론트에서 TYPE가드를 활용하여 처리하도록 했다. 

{
	"threads" : [
    	{
			"id" : 1,
			"type" : "thread",
			"authorId" : userid,
			"authorName" : "성하",
			"profileImageUrl" : "http://example.com/profile/image.png",
			"createdAt" : "2023-07-28 14:07",
			"content" : "이번주는 ~~을 해야해요~~"
			
		},
		{
			"id" : 2,
			"type" : "notification",
			"authorId" : scheduleId
			"authorName" : "schedule",
			"profileImageUrl" : ""
			"createdAt" : "2023-07-28 14:07",
			"content" : "'범죄심리학 발표자료..' 일정이 수정되었습니다."
		}
		...
	]
}

피드는 무한스크롤로 구현했는데 이때 페이지 단위로 스레드를 요청한다면 새로운 데이터가 쌓였을 때 이미 반환된 데이터가 다시 전송될 수 있을 것이라고 생각했다. 때문에 가장 마지막에 응답온 스레드에서 마지막 아이디를 추출해 다음 pageParam으로 스레드를 요청하도록 했다.

/api/team-place/{teamPlaceId}/feed/threads?last-thread-id={threadId}&size={size}

/api/team-place/{teamPlaceId}/feed/threads?size={size} // 첫 요청시

프론트 스프린트 회의

통합 캘린더

• 통합캘린더 조회 API 연결
• UI 구현
• 통합캘린더에서 나의 하루 일정 보기 UI (팀정보, 기간, 일정 정보)
• 통합캘린더에서 나의 일정 보기 API 연결 

팀 캘린더

• 스케줄바에서 타이틀 표시
• 하루 일정 조회
• 종일 일정 / 시간 정해진 일정 UI 구분

팀 피드

• 스레드 작성
  • 바텀시트 UI
  • 작성 API 연결
  • 공지 등록
    • 체크박스 변경될 예정
    • 등록 API 연결
• 스레드 조회
  • 일정 알림 컴포넌트 UI
  • 스레드 컴포넌트 UI
  • 조회 API 연결
• 최신 공지 조회
  • 공지 컴포넌트 UI
  • 조회 API 연결

팀 플레이스 전환

모아보기

• 사이드바 + 네비게이션바 ⇒ 탬플릿 만들기

프론트 스프린트에서 도출한 이번 스프린트 요구사항이다. 팀피드 관련된건 크게 3가지로 나누어져서 나, 유스, 요토 하나씩 맡기로했다. 내가 배정받은 것은 스레드 조회이다. CRUD중에 계속 R만 맡는 것 같아 아쉬웠지만 무한스크롤을 리액트 쿼리를 사용해 구현해본 경험을 할 수 있어서 좋았다. 또한 유스랑 요토는 지난 기능들의 디자인 픽스나, 자잘한 세부사항을 맡았으며 나는 통합캘린더 전체, 팀플레이스 전환,  팀캘린더의 하루일정 조회, 페이지 템플릿 만들기를 맡았다.

이렇게 보니 진짜 많이 했네 ㄷㄷ

 

이번기간동안 close한 60개의 PR 중에서 22개의 PR이 내가 보낸거다. 생각보다 별로 안했네..ㅠㅠ 그래도 큼직한게 많으니 그게 어디야,,ㅎㅎ

 

스프린트 중간 회의

스프린트 중간회의에서는 스프린트 기간동안의 목표를 다시 리마인드하고, 파트별 현재 진행상황과 앞으로 남은 부분에 대해 이야기를 했다. 우리는 문제없이 모든 요구사항을 끝낼 수 있을 것이라고 판단했다. 그리고 다행히(?) 완료했음^0^

+ ) 원래는 4차 스프린트 영역이지만 시간이 좀 남아서 백엔드는 로그인 기능을 구현했다.

 

디자인

 

 

항상 말했듯 우리팀은 디자인 안가져오면 발언권 없고 투표권만 준다. (사실 잘 안지켜지긴 하지만) 없었을 때 보다 디자인이 빠르게 나와서 만족중이다. 매번 구현하기 전주에 4일정도 시간 주고 원하는 사람만 디자인한 다음 투표를 통해 하나의 시안을 정하고 프론트끼리 세부적인 배치를 논의 하는 방식으로 하고 있다. 이번에 새로 디자인 된 부분은 통합캘린더와 팀 피드, 하루일정 조회 모달 이다. 티스토리는 그림 이어서 보여주기가 안되는걸까 개빡친다

개발

아 개발한거 넘넘 많은데 버그픽스 빼고 내가 개발한거만 잊지 안도록 적어보자면

• 일정더보기 컴포넌트, 하루일정 모달 컴포넌트 UI 구현
• 일정더보기와 하루일정모달 연결
• 팀피드 일정알림 컴포넌트, 스레드 컴포넌트 UI 구현
• 스레드 조회 API 구현 (무한스크롤 구현)
• 통합캘린더, 통합 하루일정 컴포넌트 UI 구현
• 통합 캘린더 API 구현
• 통합 하루 일정 컴포넌트 API구현
• 통합 캘린더 스케줄 렌더링 (한팀당 하나의 badge만 렌더링)
• 공용 컴포넌트 team badge 구현
• SideBar 구현 (통합캘린더 + 통합하루일정)
• Navigation Bar 구현
• 페이지 템플릿 구현
• 팀 조회 API 구현 및 연결
• 팀 Info 구하는 유틸 함수 구현
• 팀 조회를 이용해 팀별 색상 로직 구현
• 팀 전환 기능 구현

자잘한데 개 많네요ㄷㄷ.. 이번에 가장 어려웠던것은 무한스크롤과 잦은 API 요청 줄이기, 팀전환이였다.

잦은 API 요청은 팀 조회를 통해 팀별 색상을 현재 선택된 팀의 id를 통해 찾았어야했는데 필요할 때마다 API요청을 하게되어서 화면이 버벅거리더라. 애초에 내가 속한 팀 정보는 자주 바뀌는 정보도 아니고 팀 나가기, 팀 참여하기를 하지 않는 이상 계속 동일한 정보를 가지고 있기 때문에 한번만 요청하도록 로직을 바꾸었다. 그래서 teamPlace에 대한 정보를 가지고 있는 context 를 만들어 내가 속한 모든 팀의 정보, 현재 선택된 팀의 id, color, displayName을 서비스 어디에서든 접근 가능하도록 했다.

 

팀 전환의 경우 어렵진 않았는데 기존에 있던 코드에서 어떻게 색상을 내려줄건지 선택한 방식이 나, 유스, 요토 모두 달라서 코드를 하나하나 보면서 바꾸는 것이 머리가 터지는 줄알았다. props로 내려줄건지, context에 바로 접근을 할건지 생각도 해봐야했고 내가 어디까지 바꿨더라,, 이러면서 수정하느라 진짜진짜 개고생함

원래 4차 데모데이꺼였는데 다행히 성공해서 발표할 수 있었다. 다만 지금 라우터 설정을 너무 대충해놔서 팀을 선택하지 않았을 때 기본값으로 0을 선택하게 해서 이건 고쳐야한다. 

 

무한스크롤의 경우는 예전에 한번해보긴했는데 js 로 구현한거라 react-query를 사용하여 구현할 때 공부를 하느라 좀 오래걸렸다. 또한 우리는 페이지 단위가 아니라 마지막으로 온 thread의 id로 요청하는 건데 어떻게 하지..? 하면서 useInfiniteQuery를 공부하는게 어려웠지 실질적으로 구현하는건 오래안걸렸던 것 같다. 관련해서는 곧 블로그 작성할 예정.

 

웹접근성은 나 팀전환할동안 요토랑 유스랑 해서 따로 공부를 하긴해야한다. 이것도 곧 블로그 글 작성해야겠다.

하나도 모름,,ㅠㅠ 그런거 몰라도 개발자하게 해주세요 뿌에에에에에에엥

 

데모데이

이번에도 우리는 다같이 ppt를 만들고 취합 후 대본을 같이 썼으며 발표자들이 대본을 외웠다. 이번에는 지난 스프린트들과 달리 필수 요구사항이 많아서 발표할게 많았다.

목차

• 팀바팀 서비스 리마인드
• 진행 상황 공유
  • 3차 데모데이까지 완료한 것
    • 전체 요구 사항으로 보여주기(1차 2차 나눠서)
  • 개발 진행중인 부분 
  • 다음 스프린트까지 완료할 부분 
• 프론트엔드 기술
  • Tanstack Query 사용 이유
• 백엔드 기술
  • Feed → thread & notification 상속구조 
  • 이벤트 
  • 페이지네이션
• CI/CD 협업 설명 
• 서비스 시연

팀바팀 3차 데모데이.pptx

15.07MB

---

이제 2주 뒤면 모든 것이 끝난다. 어떻게 이걸 다 했지라는 생각과 함께 아직도 이만큼이나 남았네가 공존하는 심정..... 

다음주는 얼마나 바쁘고 힘들지 또 기대된다. 남은건 페이지 단위와 에러처리, 팀 참여/나가기, 소셜로그인 정도..?

남은 2주도 화이팅!ㅜ