스위프 주관 팀 프로젝트를 진행하며…
스위프에서 주관하는 팀 프로젝트에 참여하면서 기존에 부족했던 협업에 대한 과정을 잘 배워보려고 합니다.
팀 구성은 PM1, 디자이너2, FE 2, BE 3 으로 구성되어서 여러 방면에서 부족했던 협업을 진행 할 수 있을 것 같습니다.
1주차 ( 6월 30일 ~ 7월 6일)
FE 기술스택 표 | 프레임 워크 | 디자인 | 컴포넌트 라이브러리 | Api 호출 | 전역상태관리 |
메인 기술 스택 | Next.js(15) | TailwindCSS4 | shadcn | TanstackQuery | Zustand(예상) |
기타 라이브러리 | react-big-calrendar | react-hook-form | motion |
진행사항
- shadcn 동작 방식 이해 및 디자인 커스텀 테스트 진행.
- variants 추가를 통한
theming방법.
- react-big-calrendar 라이브러리 커스텀 테스트 진행.
- 특정 UI 클릭 시 활용 가능한 이밴트 콜백 테스트
- tailwindCSS 4버전 3버전과 다른 사용법 적용해보기
회고
- Mui를 커스텀 했던 경험이 shadcn 커스텀 할때 도움이 많이 된 것 같았다.
- react-big-calrendar 테스트를 하면서 생각보다 많은 디버깅 경험을 해서 신기했다.
2주차 ( 7월 7일 ~ 7월 13일)
이번 프로젝트는
PWA (Progressive Web App) 형태로 MVP를 만들 예정이다. 고려 대상은 테블릿과 모바일인데, 모바일 APP과 비슷한 UX를 위해 이밴트 라이브러리를 사용 할 예정이다.
HTTP 메서드로
ky 를 사용하자는 의견이 나와서 ky와 axios에 대한 내용을 정리하고,TanStackQuery의 키 관리에 키 팩토리 패턴을 사용하자고 해서 관련 내용도 정리를 했다.
Motion
ky
회고
- 이번 팀플에서 다른 직군과 협업을 경험하는 것도 좋지만, 같은 프론트엔드 분야에 있는 사람에게 인사이트를 얻을 수 있는 것이 많아서 정말 좋은 경험인 것 같다.(팀원을 잘 만난 것 같다.)
- 한번에 많은 새로운 것을 이번 프로젝트에서 하게 될 것 같지만 시간이 많은 것을 적극 활용해서 많이 배워가야 할 것 같다.
3주차 ( 7월 14일 ~ 7월 20일)
진행사항
react-big-calendar에 대한 대략적인 디자인이 나와 커스텀을 시작하였다.- Event, DateHeader, MonthHeader, Toolbar 그리고 기본 디자인 등등..
- 커스텀을 하다보니 커스텀 컴포넌트들이 많이 생겼고 응집도가 높아져서
컴파운드 컴포넌트 패턴을 적용했다. - 캘린더의 높이가 Mobile 기준으로는 너무 작아서 기획 적인 해결이 필요해 보인다.
- 지금까지 개인 레포에 태스트 하던 것을 팀 레포에 반영하였다.
StoryBook을 깃허브 페이지에 배포하여 비 개발자들이 UI를 확인할 수 있게 작업 하였다. 전략은 다음과 같다.
storyBook 배포 링크 https://happy-happy-10th.github.io/happy-happy-frontend
회고
- GitHub-Action과 CI/CD는 언젠가 꼭 시간을 내서 해보고 싶었는데 이렇게 우연치 않게 해봐서 좋았다. 비록 반쪽자리 느낌이 없지않지만 그래도 좋은 경험이었다고 생각한다.
- 피그마 디자인을 보고 디자인을 하는데 px을 고정하지 않고 반응형으로 구현을 하다 보면 뭔가 내 의견이 디자인을 망치거나 하진 않을까 고민이 많이 된다…
4주차 ( 7월 21일 ~ 7월 27일)
아직 화면이 전체적으로 디자인이 픽스가 안돼서 조금 불안하다. shadcn을 처음 쓰는데 잘 활용해서 구현을 빠르게 잘 할 수 있을지 걱정이 조금 있지만 그래도 공통 컴포넌트들을 만들고 색상 파레트 지정하면서 뭔가가 계속 나와서 의미는 있는 것 같다.
진행사항
- 모바일/ 테블릿(PC)에 각각 보여질 캘린더 형태를 구현하고 임의 기준으로 랜더링 하게 추가했다.
- 2주 차에 학습한 ky, 키 팩토리 내용을 활용해서 테스트 캘린더 Api를 만들고 Api를 호출하는 로직 및 TanstackQuery로 캐싱하는 코드를 추가 했다.
- 커스텀한 캘린더 관련 컴포넌트들을 shadcn을 설치하면 주는
cn()방식으로 디자인 설정을 통일했다. 이제 내가 만든 코드는 동일한 방식으로 테일윈드 ClassName을 적용해서 코드가 일관적 이다.
하단 네비게이션 추가
@/components/base/items/Navigator.tsx (index.ts 에 추가)
@/components/base/items/NavActionLink.tsx
@/util/navigator/setActionLinkValue.ts
- ActiveLink (useSelectedLayoutSegment 사용) 기능 구현
- 부모 기준 반응형으로 구현
이밴트 리스트 컴포넌트 추가
@/components/features/datEventList/DayEventList.tsx (index.ts 에 추가)
@/components/features/datEventList/ui/DayEventBox.tsx
@/components/features/datEventList/ui/DayEventListHead.tsx
- mock데이터로 테스트 리스트업 ( 해당요일 이밴트 가져오는 기능은 아직 미 구현)
일부 유틸함수 수정
@/utils/calendar/dateConverter.ts
- 기존의 event 배열의 시작일 종료일을 string <-> Date 변경하는 함수 2종 이름 변경.
- 이밴트 객채 하나의 시작일 종료일을 string <-> Date 변경하는 함수 2종 추가.
react-big-calendar 이밴트 추가 노출을 위해 CSS 수정
@/styles/global.css
- 내부 계산용 CSS를 글로벌 CSS에 추가.
storybook RootLayout 추가
- 반응형 테스트를 위한 RootLayout 추가
색상 파레트 및 CSS 변수 추가
@/styles/global.css
/앱 테마 정의/
- -color-yoteyo-main : var(--yoteyo-main);
- -color-yoteyo-sub : var(--yoteyo-sub);
- -color-yoteyo-error : var(--yoteyo-error);
- -color-yoteyo-black : var(--yoteyo-black);
- -color-yoteyo-gray-100 : var(--yoteyo-gray-100);
- -color-yoteyo-gray-200 : var(--yoteyo-gray-200);
- -color-yoteyo-gray-300 : var(--yoteyo-gray-300);
/이밴트 테마 정의/
- -color-yoteyo-red : var(--yoteyo-red);
- -color-yoteyo-orange : var(--yoteyo-orange);
- -color-yoteyo-yellow : var(--yoteyo-yellow);
- -color-yoteyo-green : var(--yoteyo-green);
- -color-yoteyo-emerald : var(--yoteyo-emerald);
- -color-yoteyo-sky : var(--yoteyo-sky);
- -color-yoteyo-blue : var(--yoteyo-blue);
- -color-yoteyo-purple : var(--yoteyo-purple);
- -color-yoteyo-pink : var(--yoteyo-pink);
- -color-yoteyo-black : var(--yoteyo-black);
5주차 ( 7월 28일 ~ 8월 3일)
shadcn 컴포넌트 설치
- Label
- Switch
- Separator
- Calendar
- Popover
라이브러리 설치
- MotionFramer
테일윈드 변수 변경.
- 폰트관련 유틸리티 클래스 (ex text-yoteyo-m-title-sm)이 cn 함수안에서 다른 text 접두어와 충돌이나서 명칭 변경
- yoteyo-m-title-md
features 컴포넌트 추가 및 이름변경
- monthNavigator
- datePicker
- Navigator => bottomTab
기타
- react-big-calendar 에 MonthNavigator 추가
- 기타 디자인 이슈 처리