마지막 날 다른 스프린트 참가자들의 피드백을 받으며 생각보다 제법 많은 분들이 영수증 출력 버튼을 쉽게 찾지 못하는 모습이 있었습니다. 투두 입력창에 상대적으로 기능 및 요소들이 몰려있어, 하단에 위치한 출력 버튼 보다 가까이에 있는 영수증 모양 버튼(마이페이지 이동 버튼)에 더 먼저 눈이 가서 헤메게 되는 듯 합니다. 어떻게 수정해야 좋을까요?

요약

카카오 말고 다른 소셜 로그인 구현에 대해 화면 레이아웃을 확정해야합니다.

내용

• [ ] 화면 레이아웃 확정(카카오 로그인 페이지에 넣을건지? 별도의 화면을 넣을건지?)
• [ ] 어느 소셜 로그인을 가능하게 할지
• [ ] 로그인 버튼 UI 조정이 가능한지, 조정할 수 있다면 어떻게 바꿀건지

참고

확인은 해야겠지만 보통 다음과 같은 느낌의 버튼이 제공되고 수정할..수있을겁니다(아마도)

어느 소셜 로그인 버튼만 넣을지는 우리가 선택할 수 있습니다.

요약

AuthClient를 실제로 연결해보면 useContext의 값이 null이라는 에러가 뜸

재현방법

아무 파일에서나 todoClient안에 있는 함수를 호출함

에러 로그

react.development.js:209 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useContext @ react.development.js:1602
useAuthState @ authContext.js:33
RefreshToken @ client.js:64
AuthClient @ client.js:27
./src/controllers/todoController.js @ todoController.js:3
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/components/pages/TodoPage/TodoPage.jsx @ index.js:1
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/components/pages/TodoPage/index.js @ TodoPage.styles.jsx:51
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/components/index.js @ index.js:1
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/App.js @ todo_check_icon.svg:33
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
fn @ hot module replacement:62
./src/index.js @ useLocalStorage.jsx:12
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
Show 2 more frames


react.development.js:1618 Uncaught TypeError: Cannot read properties of null (reading 'useContext')
    at useContext (react.development.js:1618:1)
    at useAuthState (authContext.js:33:1)
    at RefreshToken (client.js:64:1)
    at AuthClient (client.js:27:1)
    at ./src/controllers/todoController.js (todoController.js:3:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/pages/TodoPage/TodoPage.jsx (index.js:1:1)
    at options.factory (react refresh:6:1)

현재 영수증 API 생각해보고 있는데,

• 마이페이지에서 볼 수 있는 가로 영수증은 몇 개까지 들어갈 예정인가요? 무한 스크롤인가요?
• 원래 마이페이지에 넣을 예정이었던 XX님이 지금까지 만드신 영수증은 n개입니다 이 문구에서 출력하는 영수증 개수는 모든 영수증의 통합이 맞나요? (기간 상관없이)
• 가로 영수증에서 특정 영수증을 클릭시, 무슨 일이 일어나나요? 해당 영수증을 작성한 날로 이동하나요? 아니면 그냥 그 영수증이 크게 보일 뿐인가요?

요약

로그인 기능 구현

내용

해야할 일

우선 순위

• [x] JWT에 대한 이해 및 조사
• [x] 프론트에서 JWT를 구현하기 위한 이해 및 조사
• [x] GET 요청으로 백엔드에서 토큰을 받아오는 로직 구현
• [x] 토큰을 받아온 이후 쿠키에 토큰을 저장
• [x] 토큰을 매 API 요청때마다 헤더에 실어보내는 로직 구현

후 순위

• [x] 카카오 로그인과 SNS 로그인(파이어 베이스)를 섞어서 사용할 경우 JWT를 어떻게 이용해야하는지 조사
• [x] 기타 로그인에 대해서 프론트가 처리하는 베스트 프랙티스 조사

요약

제곧내

재현 방법

• 로그인 한 상태에서 새로 투두리스트를 등록
• 한번 타이머를 실행시킨 뒤, stop버튼을 눌러 타이머 정지 및 타이머 모달 닫기
• 다시 한번 같은 투두의 타이머를 재생시키면 숫자가 비정상적으로 크게 바뀌어있음 (11초 ->47222:13:20)

상세

• 데이터베이스

타이머가 밀리세컨드로 저장됨 -> 프론트와 백 사이에서 변환에 문제가 있는듯

요청 사항

★데이터베이스에 밀리세컨 단위가 아닌 초 단위로 저장되게 해주세요!!　예) 5분 -> 300 / 1분 20초 -> 80 ★

요약

영수증 pin 기능 추가

상세

• [x] pin 클릭시 fill 스타일 및 버튼이름명 pinned로 변경
• [ ] 영수증 작성 결과 화면에서 pin을 누르면 해당 영수증의 정보를 백엔드로 전송함
• [ ] 가로영수증 화면에서 pin된 영수증만 보여줌
• [ ] 영수증 작성 화면에서 pin을 해제할 수 있음
• [ ] 영수증 작성 화면에서 pin을 해제하면 해당 영수증의 pinned:false 정보를 백엔드로 전송함

요약

뽀모도로를 한번도 실행안했을 경우, 영수증에 누적 시간을 0:00으로 변경합니다.

완료조건

• [x] 초기 시간을 0:00 으로 변경

테스트 케이스

• [x] 뽀모도로 타이머를 한번도 누르지 않고 영수증을 출력했을 경우, 시간이 0:00으로 표시된다.
• [x] 뽀모도로 타이머를 1분 미만으로 실행하고 영수증을 출력했을 경우, 시간이 0:00으로 표시된다.

요약

• 이전 이슈 #102

상세

• 카카오톡으로 로그인을 가능하게 합니다.

동작확인

• [x] 로그인 후, 로컬 스토리지에 JWT가 보관되어있는 것을 확인
• [x] 최초 앱 기동시, 로컬 스토리지에 JWT가 있으면 로그인 상태로 하기
  • [x] #138 확인해보고 SDK를 활용해서 간단하게 구현 가능한지 확인
• [x] 로그아웃시, 로컬 스토리지에 JWT가 삭제되어있는 것을 확인
• [x] #148

이 이슈에서 진행할 태스크를 한줄로 요약해주세요

요약

투두리스트 각 항목 삭제 기능 추가

내용

어떠한 사항들이 구현되면 PR을 작성할 수 있는 상태가 되는건지 태스크로 나눕니다.

UI

• [x] #113

게스트

• [x] 로컬 스토리지에서 삭제

회원

• [ ] API 통신을 통한 항목 삭제
• [ ] 에러 발생시 에러 모달 표시

구현 후, 본인의 개발 환경에서 어떤 동작확인(테스트)를 진행할건지 미리 적어둡니다. 코딩을 시작하기 전 미리 적어 어떠한 버그와 에러를 예방해야하는지 파악해두면 코딩에 많은 도움이됩니다. 코딩을 완료하고 나서 동작확인을 하며 자신이 예상한대로 코드가 움직이는지 확인합니다.

테스트 케이스

• [x] 투두리스트를 삭제한 후, 투두리스트에서 해당 항목이 표시되지않는 것을 확인한다.
• [x] 투두리스트를 삭제한 후, 화면을 새로고침하여 해당 항목이 표시되지않는 것을 확인한다.
• [x] 투두리스트를 삭제한 후, 다른 기기/브라우저에서 로그인하여 해당 항목이 표시되지 않는 것을 확인한다.
• [ ] 동시에 두 페이지를 열어 같은 날짜의 투두리스트 항목 페이지를 열어놓는다. 한쪽 페이지에서 삭제 시킨 후, 다른 페이지에서 같은 항목을 삭제했을 때 "이미 삭제된 항목입니다"라는 내용의 모달이 표시된다.

요약

마이페이지에서 영수증을 클릭했을 때, 해당 날짜의 영수증 출력 페이지로 이동하는 기능 구현

Todo

• [x] 마이페이지에서 영수증을 클릭했을 때, 해당 날짜의 영수증 출력 페이지로 이동

테스트 케이스

• [x] 마이페이지에서 영수증을 클릭했을 때, 해당 날짜의 영수증 출력 페이지로 이동할 것
• [x] 출력 페이지에서 뒤로 가기를 눌렀을 때, 마이 페이지로 이동할 것
• [x] 마이페이지에서 출력 페이지로 이동한 후, 출력 페이지의 핀 아이콘이 "pinned" 상태일 것

요약

일부 UI의 레이아웃을 수정하고 더 나은 사용성을 위해 개선하려고 합니다.

완료조건

• [x] 캘린더 UI가 왼쪽에 치우치지 않고 중앙에 오도록 수정
• [x] 투두 리스트의 목록이 많을 때 화면이 커도 아래쪽이 잘려서 스크롤로만 볼 수 있는 문제 수정
• [x] 영수증 출력 페이지 pin 버튼을 누르면 나오는 모달 UI 수정 (버튼 간격 수정 및 텍스트 언어를 서비스에 맞게 수정)

요약

크로스브라우징이 적용되지 않은 문제로 카카오 브라우저에서 save버튼 작동하지 않음

완료조건

• [ ] 크롬 ★
• [ ] 익스플로어
• [ ] 엣지
• [ ] 카카오 ★
• [ ] 네이버
• [ ] 삼성
• [ ] 아이폰
• [ ] 오페라
• [ ] 웨일
• [ ] 사파리 ★
• [ ] 파이어 폭스

카카오에서 대신 동의를 해주긴하지만 어쨌거나 사소하더라도 유저의 개인정보를 다루게 되는데, 별도의 알람이나 안내 등 없이 그냥 무턱대고 카카오톡에서 닉넴 받아와서 표시해도 되는걸까요? 개인정보 취급처리방침은 어느정도의 규모가 표시해야하는지, 어느 경우에 게시해야하는지 확인이 필요할 것 같습니다. 이와 더불어 쿠키 표시도 반드시 해야하는건지 같이 확인하면 좋을 것 같아요.