일상을 칭찬으로 기록하고 공유하는 칭찬 커뮤니티
👥👥 : "너무 당연한 일이라 그닥 칭찬받을만한지 모르겠네요"
당연한 일은 칭찬하면 안되는걸까? 라는 생각에서 시작된 서비스입니다.
이 생각을 시작으로
스스로 칭찬하고 사람들과 나누는 과정에서 자기긍정감을 높일 수 있는 선순환 커뮤니티를 생각하게 되었습니다.
- next-auth를 사용하여 구글, 네이버, 카카오톡 OAuth인증을 통해 로그인할 수 있습니다.
- 회원에 한하여 글 작성과 리액션이 가능합니다.
- 사용자들의 칭찬 기록을 모아볼 수 있는 게시판입니다.
- 비회원이어도 볼 수 있습니다.
- 사용자가 전체공개로 설정한 기록에 한하여 공개됩니다.
- 회원에 한하여 리액션 버튼을 통해 칭찬을 할 수 있습니다.
- 기록을 한눈에 볼 수 있는 캘린더와 칭찬 추가하기
- 캘린더 형식으로 내가 작성한 칭찬기록을 효과적으로 시각화하였습니다.
- 캘린더의 날짜를 클릭하여 해당 날의 기록을 추가할 수 있습니다.
- 기록이 성공적으로 수정되면, 스낵바 알림으로 확인할 수 있습니다. 실패 시, error 스낵바가 나타납니다.
- 내가 한 일을 떠올리며 스스로 기록을 추가하는 컨셉에 맞춰 미래날짜를 클릭하면 추가버튼이 비활성화됩니다.
- 기록 수정, 삭제하기
- 모달창을 통해 기록을 수정, 삭제할 수 있습니다.
- 목표 페이지에서 나의 목표를 수정,추가할 수 있습니다.
- 해당 목표를 수정, 삭제하거나 새로운 목표를 만들 수 있습니다.
- 목표설정 시, 공개범위를 설정할 수 있습니다. 전체공개로 설정한 목표에 속한 나의 칭찬들만 전체글 페이지에 표시됩니다.
- 로그인한 사용자가 로그아웃, 탈퇴할 수 있습니다.
- 연동된 이메일과 이름을 확인할 수 있습니다.
- 모든 기능에 키보드 포커싱으로 조작이 가능하도록 보장
- 버튼 외에 인터렉션이 가능한 곳은 tabIndex 속성으로 아웃라인 표시
- 아웃라인에 색상과 dotted 속성 지정
- 스낵바에
role="alert,aria-live=”assertive”,aria-atomic=true지정하여 출현 시, 스크린리더 작동
- 각종 컨벤션 의논
- 변수이름, 폴더구조 (Atomic Design), Git 플로우, Git 커밋 메시지 등
- 목표 설정 페이지 개발
- 설정 페이지 개발
- 기록 수정용 모달창 개발
- 와이어프레임, 일정 조율, 배포
- 전체공개 글을 모두 보여주는 전체글 페이지 구현
- 캘린더와 기록 추가,삭제,수정이 가능한 내 피드 페이지 구현
- redux saga를 이용한 deleteUser, getGoalsByIds saga 작성
- 서비스 전반의 웹 접근성 개선
- 전역 상태관리, 데이터 통신에 대한 전반적인 작업
- redux saga 로 firestore 와 데이터 통신
- 데이터 통신 작업을 위한 hook 작성 (React Query 를 흉내)
- redux 를 이용한 서버사이드에서의 데이터 통신과 SSR 구현
- authentication, authorization 관련 provider
- 개인사용자 위주의 기능 배포
- 유저 회원가입(로그인,로그아웃, 탈퇴)
- 목표(추가,수정,삭제)
- 내피드(기록 추가,수정,삭제)
- 사용성 개선, 전체글 페이지 추가
- Global Navigation Bar 추가
- 전체글 페이지(비회원도 읽을 수 있는 컨텐츠) 추가
- safari애서 svg안보임 현상 수정
- SEO를 고려한 전체 글 리스트를 SSR처리(해당페이지의 SSR처리함수에서 vercel 무료버전 타임아웃 이슈가 발생하여, csr로 재전환하기로 논의함)
- 리액션 기능 추가
- 전체 글 리스트 CSR로 전환
- 기존 구글 파이어스토어 백엔드를 MongoDB와 Express서버로 이전하고 새로운 REST API 적용
- 스낵바 사용을 위한 Provider와 커스텀 훅 추가
- 첫 페이지 리팩토링으로 렌더링 최적화
- 헤더 네비게이션에 "홈" 추가