HanghaeE5

TODO WITH

항해99 7기 39개 팀 중 1위 수상😎

📌 링크

TodoWith 링크
Front-End Repo 링크
Back-End Repo 링크
Notion 링크
소개 영상

🎬 프로젝트 소개

우리는 하루에도 수 많은 일들을 합니다. 할 일을 쉽게 기록하고 확인할 수 있는 것이 있다면 얼마나 좋을까요? 우리의 서비스 TODOWITH 은 쉽고 재미있게 TODO 를 수행할 수 있도록 도와주는 여러분들의 친구입니다.

⏳ 프로젝트 기간

2022년 6월 24일 - 2022년 8월 5일

🙏 팀원

이름	포지션	깃허브 or 블로그	담당
심아영	Front-End	https://github.com/ccimayoung	[부리더] 1. CICD/무중단배포 2. 로그인/회원가입/온보딩 3. 메인페이지 4. 채팅 5. 친구목록/친구페이지 6. 알림 7.인터셉터 로직
조윤경	Front-End		1. 투두 페이지 2. 커뮤니티 페이지 3. 이벤트페이지 4. 공통컴포넌트
김지환	Back-End	https://github.com/Kimjipang	[리더] 1. 커뮤니티 CRUD 2. To Do 정렬 코드 변경 3. 알림 기능(간단한 알림 테스트 O , 프로젝트에 구현은 X)
이건우	Back-End	https://github.com/geonoo	1. CICD / 무중단배포 2. 로그인(일반, 소셜) 3. 이벤트 기능(스케줄러, 랜덤뽑기) 4. 커뮤니티 검색
양희수	Back-End	https://github.com/hee1su123	1. 채팅(WebSocket, Redis) 2. 친구추가 기능 3. To-do 리스트 4. 캐릭터 및 아이템 기능
박혜진	DESIGNER		1. 소개페이지 2. 투두리스트페이지 3. 커뮤니티 페이지 4. 친구목록페이지 5. 채팅페이지 6. 캐릭터선택페이지 7.이벤트 배너 및 상세페이지
최민영	DESIGNER		1. 로그인페이지 2. 회원가입 페이지 3. 홈 페이지 4. 프로필/닉네임 편집 페이지 5. 홈 화면 내 각 캐릭터 gif, 레벨업 gif 6. 로고

🎁 주요 기능

😃 간단하고 안전한 회원가입

구글, 네이버, 카카오를 통한 소셜 로그인 및 이메일 인증을 통한 회원가입
페이지 설명
- 소셜 or 일반로그인
- 온보딩페이지(온보딩 페이지를 통해 투두윗이 어떠한 서비스인지 알 수 있음)
- PWA 다운가능

😃 메인 페이지

페이지 설명
- 메인페이지에서 캐릭터 gif를 볼수있음.(2가지 캐릭터)
- 캐릭터와 아이템은 스텝에 따라 변화함으로써, 사용자에게 To Do 달성을 더 재미있게 할 수 있도록 흥미와 동기를 부여함.

😃 계획 작성, 목표 달성을 위한 TO-DO 리스트 작성

구글, 네이버, 카카오를 통한 소셜 로그인 및 이메일 인증을 통한 회원가입
페이지 설명
- 소셜 or 일반로그인
- 온보딩페이지(온보딩 페이지를 통해 투두윗이 어떠한 서비스인지 알 수 있음)
- PWA 다운가능

😃 커뮤니티를 통한 위드투두 진행 및 일상 공유

커뮤니티에서 TO-DO 를 함께 진행할 사람들을 모을 수 있음.
페이지 설명
- 단체채팅방을 참여하여 함께 TO-DO 를 진행하는 사람들과 소통이 가능함.

😃 친구와 함께 공유 가능한 TO-DO 리스트 및 캐릭터

친구 추가 후 TO-DO 리스트 공유 가능😃 친구와 소통하며 함께 TO-DO 를 진행할 수 있는 채팅방
페이지 설명
- 닉네임을 통해 친구 요청(받은 사람은 수락 또는 거절 가능)
- 친구 페이지에서 캐릭터, 보유 아이템, 당일 투두를 볼 수 있으며 친구가 비공개로 해놓은 경우에는 볼 수 없음.

😃 채팅 페이지

커뮤니티의 With To Do 기능을 통해 함께 TO-DO 를 진행 중인 사람들 또는 친구와의 일대일 채팅 가능
페이지 설명
- 새로운 메시지가 온 순서대로 채팅방이 정렬됨.
- 영구적 저장 DB(늦게 들어온 사용자도 채팅방의 모든 내용을 확인 가능함)

😃 알림 기능

알림페이지에서 이벤트(출석 도장), 친구(친구 요청, 수락, 거절), 캐릭터(스텝업, 레벨업) 관련 알림을 확인 가능
친구요청, 수락, 거절 알림의 경우 전체 페이지에 팝업됨
PWA 배포로 PC 백그라운드에서도 알림 확인 가능

😃 나만의 프로필 사진과 닉네임

프로필 사진과 닉네임을 변경할 수 있음.
페이지 설명
- 닉네임 중복 확인이 가능하며, 프로필 사진을 설정할 수 있음.
- 비밀번호 변경

😃 TO-DO 완료하고 상품을 받을 수 있는 이벤트

오늘의 TO-DO 를 전부 완료 시(당일 날짜로 지정한 미완료 TO-DO가 없어야 함) 도장을 받을 수 있음
도장의 개수가 누적 3개가 모이면, 응모권으로 교환하여 이벤트 참여 가능
페이지 설명
- 다양한 상품의 기프티콘 랜덤 당첨

🔨 아키텍처 / 기술 스택

아키텍처

기술 스택

Front-End

사용 기술	기술 선정 이유 및 설명
Type Script	• 타입을 미리 지정하여 예상하지 못한 오류가 뜨지 않도록 해줌. 오류가 발생하면 어떤 오류인지 조금이나마 더 정보를 얻을 수 있음. • state나 api의 데이터를 정확하고, 안전하게 사용할 수 있었음. 투두 페이지의 필터나 정렬타입, select box의 value 등에 string이 아닌 literal type을 선언해 사용했음.
PWA	• 웹앱으로 홈화면에 아이콘을 설치해 앱처럼 사용할 수 있게하는 기술. • native 앱과 최적화와 성능면에서 차이는 있지만, 우리 프로젝트 특성상 웹보다는 앱처럼 이용하는 것이 사용자 접근성이 높을 것 같아 선택했음 • 캐싱이 되기 때문에 오프라인에서도 접속은 가능하다. https에서만 사용이 가능하고, push 기능도 이용할 수 있다. 이를 통해 사용자에게 알림도 보낼 수 있다.
Recoil , React-Query	• 전역상태 관리는 Recoil, 서버와 클라이언트 간 비동기 작업에는 React Query를 사용했음. • Redux는 타임머신 기능이 있지만 작은 기능이여도 액션등을 필수로 만들어야함. 액션 타입, 리듀서, 액션 생성함수 등 보일러 플레이트 코드가 반복적으로 생성되므로 사용하지 않았음. • Recoil은 store 하나로 어디서든 쉽게 데이터를 가져오고, 상태를 변화할 수 있어서 사용했음. • React Query는 목적에 맞게 client state와 server state를 분리할수 있고 useQuery hook을 이용해서 데이터를 가져오는 것에 대한 성공, 로딩, 에러 콜백을 쉽게 할 수 있음. 그리고 리패칭, 캐싱 등의 기능을 쉽게 제공받을 수 있어서 사용했음. 커뮤니티같은 목록형 정보를 fresh하게 관리하여 새로운 정보를 잘 받아올 수 있음.
Axios	• Async / Await 등을 이용하여 통신 순서를 지정할 수 있으며, then보다 깔끔히 작성 가능.
Web Socket	• 웹 소켓은 Statefull protocol임 • 그 중, socket.js를 사용하여 양방향 통신을 가능하게 해줌
Chart JS	• 경험치 바 요구사항 : “가운데가 투명하며 둘레의 일부분이 뚫려야함, 그라데이션으로 게이지바가 채워져야함, 애니메이션 효과 필요” 있었음. • 캐릭터 경험치바에 차트 JS를 사용했으며, 그라디언트에는 캔버스 함수를 활용 • CSS에서는 원하는 만큼 둘레를 뚫기 어렵고, 경험치에 따른 애니메이션 효과를 주기 어려워서 배제함. • Canvas는 구현 가능하지만, 애니메이션 효과와 그라데이션을 위해 공부해야하는 부분이 많아서 프로젝트 시간동안 터득하기 어려웠다. 이부분이 아쉽고, 3D 인터랙션을 공부하고싶어서 실전프로젝트 종료 후 공부할 예정이다.
LightHouse	• 원하는 페이지의 느린 속도 원인을 파악하는데 도움을 주고, 해결 전후의 성능, 접근성, 권장사항, 검색 엔진 최적화를 파악하는데 사용
Styled-Components	• 자주 사용하는 디자인을 미리 컴포넌트화해서 사용 가능. • 코드를 깔끔하게 작성 가능
ESLINT	• 팀 내 정해놓은 규칙에 따라 코딩을 함으로써 미리 오류를 잡을 수 있고, 협업에 도움을 줌.
React Icon	• 디자이너님의 아이콘과 같은 경우 아이콘 용량을 줄이기 위해 사용

Back-End

사용 기술	기술 선정 이유 및 설명
spring-security	인증 및 리소스 권한을 직접 소스로 만들게 되면 많은시간이 소요되기 때문에 사용
spring-mail	이메일 인증 관련
oauth2	소셜 로그인
websocket	• 양방향 통신이 필요한 채팅 기능을 구현하기 위해 선정 • 요청이 오면 응답을 하는 http 프로토콜과 달리 연결상태를 유지하여 실시간 상호작용 가능 • Polling, Long Polling, Streaming 방식으로 비슷한 효과를 보일 수는 있지만, 이들은 불필요한 트래픽이 야기함.
stomp	• Spring Framework 에서 사용 가능( 써본적 없는 NodeJs 를 배워서 하는 것 보다 Spring 에서 구현해 보는 것이 더 좋다고 판단 ) • pub/sub 방식으로 작동해 송/수신 처리가 명확 • 여러 브로커를 사용 가능 (메모리, Rabbitmq, Kafka, Redis 등등)
swagger	• Spring REST Docs라는 문서화 도구와는 달리 Swagger는 코드 몇 줄만 추가하면 만들 수 있고, 적용하기가 쉬움. • 테스트 할 수 있는 UI를 제공 → Spring REST Docs는 테스트를 돌리면서 성공 여부를 확인하지만 Swagger는 문서 화면에서 바로 API 테스트 가능함.
Querydsl	• 문자가 아닌 코드로 쿼리를 작성함으로써, 컴파일 시점에 문법 오류를 쉽게 확인할 수 있다. • 자동 완성 등 IDE의 도움을 받을 수 있다. • 동적인 쿼리 작성이 편리하다. • 쿼리 작성 시 제약 조건 등을 메서드 추출을 통해 재사용할 수 있다.
aws-s3 upload	• 저장 용량이 무한대이고 파일 저장에 최적화되어 있다. 용량을 추가하거나 성능을 높이는 작업이 필요 없음 • 다른 설치 파일 없이 HTTP 프로토콜로 파일 업로드/다운로드 처리 가능 • 비용이 저렴
MySQL Full Text Search(MATCH ~ AGAINST)	• LIKE 검색 개선
nGrinder / JMeter	• 부하 테스트
Redis	• Redis 의 Pub/Sub 기능을 활용해 서로 다른 서버에서도 Stomp 프로토콜 활용이 가능 • 메인 서버가 다운되더라도 채팅 메시지를 보존 가능
Github Action	• 코드를 배포해야하는 상황이 빈번히 발생하고 배포 시에 잠깐 서버가 중단되는 상황을 개선하기 위해 고려함. • Jenkins와 Github Action 2가지를 고려했지만 Jenkins 를 사용하려면 도커에 설치해야 함. 더불어, 여러 절차가 필요 • Github Action 은 설치 없이 간단하게 적용 할 수 있었기에 같은 기능을 한다면 간단하게 적용할 수 있는 Github Action을 선택함.

🤗 유저 테스트 & 피드백

🤗 유저 만족도

UT 피드백 이후 추가&개선 기능

	주요 피드백	처리 내용
추가	서비스 내용을 로그인해야지만 알 수 있다.	온보딩 페이지 추가
추가	하루 todo 완료를 10개 초과했을 때 레벨업이 되지 않음	레벨업이 되지 않는 것이 맞음. 서비스 설명창에 적혀있지만 확인을 하지 못하는 유저가 있었음. 따라서 todo완료 11개부터는 당일의 경험치는 모두 쌓았다는 안내 팝업 추가
추가	투두를 실수로 완료했을 때 원복이 불가하다.	투두 완료 시 완료하는 것이 맞는지 묻는 팝업 추가
추가	전체/미완료/완료 필터만 있어서 당일의 투두를 바로 보기 어려움	디폴트 값으로 당일의 투두 필터 추가
추가	친구의 마이페이지에서 친구를 추가 할 수 없고 친구목록 페이지에 넘어와서 추가해야 한다.	친구의 메인페이지에서 바로 친구 추가하는 아이콘을 추가
개선	브라우저 별 호환성이 맞지 않아 안드로이드의 네이버앱, 삼성 브라우저에서 캐릭터 경험치 바 확인 불가	유저 인입 브라우저를 파악한 뒤 문제 브라우저 유입 시 크롬 브라우저 사용 유도 - App.tsx 에 인입 브라우저 확인 function 도입
개선	커뮤니티 페이지에서 스크롤을 많이 내리면 올라오기 쉽지 않고, 게시물을 본 뒤 뒤로 가면 스크롤이 올라가서 다시 내려가야 함	각 페이지에 TOP 이동 기능 추가 - div에 ref를 줘서 Element.scrollTo 속성으로 처리 게시물 확인 후 뒤로 갔을 때 확인한 부분까지 스크롤 유지 - 상세 포스트를 팝업처럼 띄웠음. 포스트를 눌렀을 때 path는 변경하고, 목록 페이지에서 useEffect와 useParam으로 포스트의 id가 있을 때 상세 포스트 페이지를 조건부렌더링 함.
개선	커뮤니티 사진 높이가 짤려서 나옴	커뮤니티 사진 비율 개선
개선	Todo 달력에서 월 전체 선택을 여러번 누르면 선택이 취소되지 않고 해당 일수만큼 추가되는 버그가 있음	일수 추가 버그 해결, 버튼을 다시 눌렀을 때 선택을 취소하는 기능 도입
개선	캐릭터 설명 아이콘이 잘 보이지 않음	아이콘 위치를 변경하여 잘 보이게 함
개선	화면 길이가 짧은 일부 기종에서는 하단 내용을 볼 때 불편함	각 페이지 하단에 여백을 줘서 버튼이 쉽게 눌리도록 함

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

HanghaeE5

TODO WITH

📌 링크

🎬 프로젝트 소개

⏳ 프로젝트 기간

2022년 6월 24일 - 2022년 8월 5일

🙏 팀원

🎁 주요 기능

😃 간단하고 안전한 회원가입

😃 메인 페이지

😃 계획 작성, 목표 달성을 위한 TO-DO 리스트 작성

😃 커뮤니티를 통한 위드투두 진행 및 일상 공유

😃 친구와 함께 공유 가능한 TO-DO 리스트 및 캐릭터

😃 채팅 페이지

😃 알림 기능

😃 나만의 프로필 사진과 닉네임

😃 TO-DO 완료하고 상품을 받을 수 있는 이벤트

🔨 아키텍처 / 기술 스택

아키텍처

기술 스택

🤗 유저 테스트 & 피드백

🤗 유저 만족도

UT 피드백 이후 추가&개선 기능

Pinned Loading

Repositories

People

Top languages

Most used topics