결혼식 축의금 얼마내지? 돈워리가 함께 해결해 줄게요!
친밀도, 참석 여부, 물가 상승 등 고민할 부분이 너무 많은 축의금! 돈워리를 통해 언제 어디서나 손쉽게 축의금 고민을 나눠보세요.
다양한 상황 테스트를 통해 상대방과의 친밀도를 알아보고, 축의금 금액을 결정해 보세요.
- 테스트 진행
- 2개의 사전 질문과 9개의 질문으로 구성된 친밀도 확인 테스트
- 사용자 이탈률을 낮추기 위한 퍼널 UI
- 테스트 결과
- 테스트 결과 비동기 통신 성공 전 로딩 기능
- 테스트 결과 이미지 저장 및 공유 기능
축의금 고민부터 결혼 축하 파티와 하객룩까지, 3초만에 로그인한 다음 투표를 만들고 참여하며 하객들의 다양한 고민을 해결해 보세요.
- 투표 등록하기
- 카테고리, 제목, 본문 내용, 투표 항목을 입력할 수 있는 투표 작성 폼
- 각 항목 유효성 검사 기능
- 투표 참여하기
- 커뮤니티에 등록된 투표의 항목을 선택해 투표 참여 및 결과 확인 가능
- 투표 공감 기능
- 댓글 작성하기
- 커뮤니티에 등록된 투표에 댓글 등록 및 삭제, 공감 기능
- optimistic update 적용
- 돈워리 배포 링크: https://donworry.vercel.app
- Storybook 배포 링크: https://65abd47d09661c4e79c3c260-xxrkvzfeor.chromatic.com/
준비중입니다.
| 스택 이름 | 장점 | 단점 | 결론 |
|---|---|---|---|
| Next.js | - 리액트와 달리 프레임워크기 때문에 라우팅이나 SSR 등을 구현하고자 할 때 필요한 보일러플레이트를 줄일 수 있음 | - 리액트와 다르게 Static Rendering이 기본이기 때문에 서버/클라이언트 컴포넌트에 대한 이해 필요 (러닝 커브) | 이 서비스의 주 목적은 고민 해결 커뮤니티이므로 유저 유입을 위한 SEO가 중요함. Next.js는 이러한 작업이 잘 추상화되어 있는 프레임워크기 때문에 프레임워크의 장점을 누리고자 채택 |
| Typescript | - 지정한 타입이 일종의 코드 설명서 역할을 해 주기 때문에 협업, 코드 리뷰에 매우 용이 - 인텔리센스를 활용한 개발 생산성 증가 |
- 타입을 작성하는 데에 추가적인 시간이 필요함 | 타입을 통해 팀원이 작성한 코드를 쉽게 이해할 수 있고 개발 과정에서 발생할 수 있는 오류를 사전에 방지할 수 있다는 장점이 있기 때문에 채택 |
| Storybook | - 의식적으로 재사용 가능한 컴포넌트에 대해 고민할 수 있음 - 컴포넌트를 문서화함으로써 개발자 간 협업에 용이 - 배포하여 활용할 경우 디자이너와의 협업에도 용이 |
- 스토리를 작성하는 데에 추가적인 시간이 필요함 - 스토리북을 사용한 경험이 없다면 약간의 러닝 커브 |
스토리를 작성하는 데에 추가적인 시간이 들지라도, 디자이너와 함께 진행되는 프로젝트인만큼 효율적인 협업과 공통 컴포넌트 관리를 위해 도입 |
| React-Query | - 다양한 API 제공 - 데이터 동기화를 간편하게 처리할 수 있음 - 훅을 사용함으로써 비동기 로직 코드 정리에 용이 |
- SWR보다 번들 사이즈가 큼 | 서버 상태 관리 및 통일성 있는 비동기 로직 관리를 위해 팀원 간 공통된 기술 스택인 리액트 쿼리 도입 |
| Framer-motion | - 애니메이션 라이브러리 중 가장 높은 점유율 - 리액트 친화적 |
- 작지 않은 번들 사이즈 | 디자인 상에서 필요한 애니메이션을 비롯하여 ExitAnimation 적용이 가능하고, 점유율이 높은 라이브러리인 만큼 공부해 보고자 도입 |
| React-hook-form | - 폼 라이브러리 중 가장 높은 점유율 - 비제어 방식이기 때문에 성능 상 이점 |
- 비제어 방식이기 때문에 입력에 따른 즉각적인 유효성 검사 불가 (→watch 기능 사용 시 해결됨) | 복잡한 폼 구성을 필요로 하는 기능이 있기 때문에 폼 라이브러리가 필요하다고 생각. 기획 상 즉각적인 유효성 검사를 필요로하지 않기 때문에 성능 상 이점이 있는 React-hook-form 도입 |
| Zod | - typescript 기반으로 설계되어 typescript 프로젝트와 잘 맞고, 종속성이 없음 - 스키마를 바탕으로 typescript에서 유효한 타입 사용 가능 |
- typescript에 친숙하지 않은 경우 러닝 커브 존재 | 유효성 검사 라이브러리를 사용하면 유효성 검증 관련 코드를 schema로 분리하여 코드를 깔끔하게 유지할 수 있음 + 라이브러리 중에서도 스키마를 바탕으로 타입을 추출할 수 있는 장점이 있는 zod 도입 |
.
└── src
├── api
├── app
├── assets
├── components
│ ├── common
│ ├── features
│ ├── layout
│ └── shared
├── constants
├── contexts
├── hooks
├── lib
├── schema
├── types
└── utils| type | description |
|---|---|
| ✨ | (feat) 새로운 기능 추가 |
| 🐛 | (fix) 버그 수정 |
| ⚡️ | (performance) 성능 향상 작업 |
| ♻️ | (refactor) 기능 추가가 없는 코드 리팩토링 |
| 📝 | (docs) 문서 수정 |
| 🚀 | (deploy) 배포 관련 작업 |
| 💄 | (design) 단순 css 디자인 수정 작업 |
| ✅ | (test) 테스트 관련 작업 |
| 🚧 | (wip) working in progress, 임시 커밋 |
| ➕ | (add file) 파일 추가 |
| ➖ | (remove file) 파일 삭제 |
| 🛠️ | (set) 프로젝트 셋팅 작업 및 라이브러리 설치/제거 |
| 🧹 | (chore) 기타 작업 |
| 💬 | (comment) 주석 추가 삭제 작업 |
| 이주영 | 성지현 | 이진호 | 이희건 | 길도현 | 길은진 |
|---|---|---|---|---|---|
 |
 |
 |
 |
||
| @CodyMan0 | @jhsung23 | @wlshooo | @dlrjs2360 | @e_unjin | |
팀장, 프론트엔드 |
프론트엔드 |
백엔드 |
백엔드 |
디자이너 |
디자이너 |