Giter VIP home page Giter VIP logo

dailyreceipt-fe-web's Introduction

og_image

Daily Receipt - 하루 영수증

Print your time🖨

Todo List, Pomodoro Timer, Daily Receipt.

Daily Receipt는 하루의 일과를 영수증 형태로 출력해주는 서비스입니다.

dailyReceipt

🎙 서비스 기획의도

  • 사람들이 소중한 시간을 알차게 사용하여 매일 더 성장한 자신을 만들고, 마음껏 자랑도 했으면 하는 마음을 담아 서비스를 기획하게 되었습니다.
  • 투두리스트를 기반으로 한 서비스이기 때문에 개인의 일정을 관리하도록 도와줍니다.
  • 하루의 최종 결과를 영수증으로 출력한 후 영수증에 담긴 결과를 보며 그 날을 다시 돌아볼 수 있고, 보상감을 느낄 수 있다고 생각합니다.
  • 투두리스트 항목으로부터 만들어진 영수증을 저장하여 주변사람들과 공유할 수 있습니다.

🏹서비스 목적

  • 유저가 투두리스트로 열심히 목표를 세우고 실천하면 그 하루를 모아 영수증으로 출력해주어 하루를 잘 살았다는 만족감을 주고 싶습니다.
  • 영수증의 심미성이 유저의 맘에 들어서 외부에 공유하고 싶다는 마음을 주고 싶습니다.
  • 위 두가지를 통해 꾸준히 일정 관리를 하고싶게끔 선순환을 만들어가고 싶습니다.

🧭서비스 방향성

  • 서비스의 목적에 맞게 최대한 간결한 투두리스트 UI를 만드는 것과 어딘가에 공유하고 싶은 영수증 이미지를 만들어내는 것에 집중하였습니다.

웹에서 보기 => https://www.daily-receipt.com/

  • 현재 새로운 기능 추가를 위해 수리 중입니다🛠️
  • 반응형이지만 모바일 우선으로 UI가 만들어졌습니다. 개발자도구에서 모바일 스크린 크기로 보는 것을 추천드립니다.

🔎 기능 🔎

📝 Todo List with Pomodoro Timer 📝

태스크를 항목으로 관리하세요.

image

각 태스크마다 뽀모도로 타이머로 시간을 기록하세요.

image

🧾 Print Receipt 🧾

완료한 항목 혹은 시간이 기록된 항목을 영수증으로 출력해보세요.

image

🗂 Archaiv Receipt 🗂

로그인 한후에 보관하고 싶은 영수증을 Pin하면 라이브러리처럼 보관도 가능해요.

image

협업 과정

=> Figjam에서 보기 image

📍도메인설정

image

📍API설계서

https://github.com/EasyAndBeauty/DailyReceipt-FE-WEB/wiki/API-문서

📍피그마로 UI/UX 초안 작성

프로세스1

📍피그잼으로 기능단위별 역할배분 및 페어프로그래밍 병행

협업프로세스2

협업프로세스3

📍이슈 해결 방식

이슈 해결방식

📍1차 스프린트 회고(2022.08.24~29)

1차스프린트회고

📍2차 스프린트 회고(2022.09.04~11)

2차스프린트회고

📍3차 스프린트 회고(2022.09.19~26)

3차스프린트 회고

📍4차 스프린트 회고(2022.09.27~10.30)

4차 스프린트 회고

📌 5차 스프린트 회고 📌(2022.11.22~12.25)

5차 스프린트 스케쥴표

dailyreceipt-fe-web's People

Contributors

ighost-p avatar mdgarden avatar jayjeong8 avatar gygy7151 avatar parkjooyoung0608 avatar

Stargazers

yb__char avatar 이희령 avatar avatar avatar avatar Brandon Ha avatar Wonsuk Choi avatar Gose avatar avatar avatar

Forkers

ighost-p mdgarden parkjooyoung0608 dongdongee gygy7151

dailyreceipt-fe-web's Issues

이슈/PR 템플릿화

제가 쓰던 방식과 댄이 쓰던 방식의 템플릿에서 좋은점만 뽑아와서 우리 팀만의 템플릿을 새로 만들고 싶습니다.
노션에 있는 이슈 템플릿
개인적으로는 카테고리에 어떤 것을 쓰면 좋을지 한번 설명을 들어보고 싶어요!

리펙토링을 해야하지 않을까 싶어요..!

내용

  1. 현재 atomic design과 일반 컴포넌트 방식이 섞여 있어서 하나로 통일하는게 좋을것 같아요
  2. atomic design으로 한다면 좀 더 개발자 친화적이게
    image
    폴더명과 동일한 jsx => 해당 폴더에서 js에서 export를 함 => components index.js에서 모아서 사용
    으로 하면 나중에 유지보수 할때 더 편할것 같아요!
  3. JSDoc 사용하기 , 타입스크립트를 사용하지 않는 지금, 나중에 유지보수나, 해당 컴포넌트 또는 함수를 사용할때 실수 하기가 쉽기때문에 JSDoc을 써보는건 어떨까요?

[issue] 인스타그램 API 신청 및 발급

요약

인스타그램 API를 이용할 수 있도록 신청합니다. 가급적이면 빠른 시일내에 신청해서 개발일정에 차질이 없도록합니다.

완료조건

테스트 케이스

영수증 저장 이름 개선

매번 my_receipt으로 저장되는데 이름이 중복되니 my_receipt_날짜_닉네임 같은 이름으로 저장되면 좋을 것 같아요

한글 폰트 검토

영수증을 영어로 쓰면 넘나 이쁘긴하지만 실질적으로 이용대상자는 국내 유저들이기 때문에 영어로 쓰게 유도하기 보다는 적절한 한국어 폰트를 찾는게 좋겠다는 생각이 들었습니다.
물론 저는 봐도 뭐가 이쁜지 모르기때문에 전적으로 결정권은 제이에게 넘기겠습니다(˘꒳˘)

급한 것도 아니고 나중에 폰트만 바꾸면 되는거니까 천천히 생각하셔도 될 것 같아요.

[issue] 카카오에서 가져올 정보

요약

카카오에서 어떤 정보를 가져올지 이야기해보고 싶습니다.

상세

스프린트 맨처음 와이어프레임을 짤 때 카카오에서 가져온 사용자 프로필 사진도 있었던 것 같습니다.
닉네임은 웹에서 설정한다해도, 프로필 사진도 필요할까요?
만약 필요하다면 사용자가 개별적으로 올리게하나요, 아니면 카카오에서 가져와야하나요?
카카오에서 가져와야할 경우 백엔드에도 API가 추가되어야하고 UI/UX도 정해야하기 때문에 빠르게 결정해야할 것 같습니다.

RN WebView만 넣어봐도 될까요?

다른 기능은 아직 넣을 생각없고
스플래쉬 + 아이콘 + 웹뷰만 넣어서 잘 동작하는지 or 추가적으로 필요한 부분은 있는지 알아보고 싶어서요~!

SNS 로그인 구현 (UI)

요약

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

내용

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

참고

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

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

투두를 길게 입력시

투두를 길게 입력하는 테스트를 해보았는데 너무 길어지니까 영수증이 예뻐보이지 않네요!
또한 한글과 달리 영어로 길어지면 레이아웃을 뚫고 나가고 있습니다.

투두라는 특성상 항목이 그렇게 길어지지 않을 거라고 생각해서 20자 정도로 제한하면 좋을 것 같습니다.

[feature] 마이페이지 닉네임 표시, 설정

요약

마이페이지에서 닉네임표시하고 설정할 수 있게 합니다.
최종적으로 목표해야할 태스크이긴하나, UI부터 결정해야하므로 길게 잡고 3차 스프린트로 설정했습니다.

선행과제 : #102

완료조건

  • 닉네임 설정 UI 정하기
    • 닉네임이 미설정 상태일 때
    • 닉네임을 수정할 때
  • API 설정
  • 프론트 구현
    • 닉네임 유효성 검사
    • 닉네임 변경 버튼 구현
    • 모달 구현
    • Cancel 버튼 기능 구현
    • Change 버튼 기능 구현

테스트 케이스

  • 마이페이지에서 닉네임 변경 버튼을 눌렀을 시 닉네임 변경 모달이 표시됨
    • 이모지가 들어간 닉네임
    • 특수문자가 들어간 닉네임
    • 공백이 들어간 닉네임
    • 공백으로 시작하는 닉네임
    • 위의 사항들이 모두 포함된 닉네임
  • 유효성 검사에 부적합할시 에러 문구가 출력됨
    • 공백만 존재할 경우
    • 아무것도 입력하지 않았을 경우
  • 유효성 검사에 부적합할시 Change 버튼을 누를 수 없음
  • Cancel 버튼을 누르면 모달이 비표시됨
  • Change 버튼을 누르면 닉네임이 변경됨

put API에서 CORS 에러가 발생

개요

로컬환경에서 put API로 요청을 보냈을 때, CORS 에러가 발생

에러 내용

xhr.js:220          PUT http://3.36.239.183:8080/api/v1/todo/1 net::ERR_FAILED
dispatchXhrRequest @ xhr.js:220
xhrAdapter @ xhr.js:16
dispatchRequest @ dispatchRequest.js:58
request @ Axios.js:109
httpMethod @ Axios.js:144
wrap @ bind.js:9
updateTodo @ todoController.js:38
confirmData @ index.jsx:26
(anonymous) @ index.jsx:34
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
localhost/:1 Access to XMLHttpRequest at 'http://3.36.239.183:8080/api/v1/todo/1' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

image

설명

const response = await client.put(`/todo/${id}`, { ...todo });
여기서 에러가 발생

  • post API 에서는 발생하지 않음
  • 포스트맨에서도 발생하지 않음

프론트 API 더미데이터화

내용

API가 전체적으로 다 엎어질 예정이므로 프론트의 API를 더미로 만들어놓겠습니다.

TODO

  • GET
  • POST
  • PUT
  • DELETE

Receipt

  • GET
  • POST
  • PUT

User

  • GET

Login

  • GET

SNS 로그인 기능 구현 (파이어 베이스)

요약

파이어베이스로 SNS 로그인 기능 구현

내용

  • 선행과제 : #102
  • 파이어베이스 선정 이유 : 코드가 정말정말 간단하고 쉽게 유저 고유값을 받을 수 있기 때문에

해야할 일

  • 파이어베이스를 프론트에 실장해서 백엔드와 JWT 통신이 가능한지 조사
  • 만약 프론트 파이어베이스를 실장해서 백엔드와 JWT 통신에 문제가 없을 시, 카카오톡과는 JWT 방식이 달라지는지 조사하기
  • 파이어베이스의 유저 정보와 카카오톡의 유저정보를 어떻게 통합하여 관리할지 백엔드와 상담

투두 입력란의 체크표시 아이콘

디자인 알못이 순전히 의미론적으로만 바라봤을 때의 의견입니다🙇‍♀️
image

저희 체크표시가 입력 아이콘의 모습인데 보통 체크표시는 완료 표시로 많이 쓰이잖아요? 이게 UX적으로 헷갈리지는 않을까요? 위치상으로는 문제가 없지만 핀이나 종이비행기? 같은 아이콘도 한번 검토해보면 좋지않을까 하는 생각이 들었습니다.

영수증 저장시 종이질감 텍스쳐가 반영되지 않음

저장 버튼을 누르면 html2canvas로 만든 영수증 컴포넌트를 canvas로 변환시켜서 다운받습니다.
깃허브 및 스택오버플로우에 나오는 options 적용 및 이미지 설정 변경을 시도했으나 성공하지 못했습니다.

투두 엔터로 입력을 가능하게 하기

저희가 그때 공통된 의견으로 엔터로 입력되는 걸 방지하자고 얘기했었는데,
테스트해보니 모바일과 pc 둘 다에서 사용자 경험이 저하된다고 생각해서 엔터 입력이 가능한 것으로 바꾸는게 좋을 것 같습니다.

마이페이지 영수증 관련 질문&확인

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

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

[issue] setInterval을 어떻게 처리해야 깔끔할까요? 

import { useState } from "react";
import min25 from "assets/images/25min.png";
import min20 from "assets/images/20min.png";
import min15 from "assets/images/15min.png";
import min10 from "assets/images/10min.png";
import min5 from "assets/images/5min.png";

/**
 * 5/10/15/20/25분 단위로 줄어드는 시간에 맞춰 이미지 변화시키는 함수
 * transition을 이용해서 자연스럽게 이미지가 바뀌게끔 하고 싶은데 어떻게 해야될지 모르겠어요.ㅠ
 * 아직 라우팅에 서툴러서 이 내용을 브라우저단에서 확인하고 싶은데 어떻게 해야할지 잘 모르겠네여..미생을 구해쥬세여 선배님들 ㅎㅎ ㅠ
 */
const 타이머시간바꾸기 = (present, setTimerImage) => {};

export function TimerImage() {
  const timeStamp = [min5, min15, min20, min25, min10, min5];
  const [timerImage, setTimerImage] = useState(timeStamp[0]);
  const [present, setPresent] = useState(25);

  //   let timer = setInterval(function () {
  //     if (present <= 0) {
  //       clearInterval(timer);
  //       return;
  //     } else {
  //       if (present === 25) {
  //         setTimerImage(min25);
  //       } else if (present === 20) {
  //         setTimerImage(min20);
  //       } else if (present === 15) {
  //         setTimerImage(min15);
  //       } else if (present === 10) {
  //         setTimerImage(min10);
  //       } else if (present === 5) {
  //         setTimerImage(min5);
  //       }
  //       setPresent(present - 5);
  //       console.log(present);
  //     }
  //   }, 5000); // 60000

  return (
    <div>
      <img src={timerImage} alt={"temp"} />
    </div>
  );
}

```jsx

get Todo 스키마 수정 요청

요약

레스폰스에 hour minute을 그냥 timer로 해주셨으면 좋겠습니다.

상세

post todo 에서는 timer로 보내고 있는데, get으로 조회를 할시 timer라는 항목이 hour와 minute으로 나누어져서 돌아옵니다.
영수증 출력화면에서는 편리하긴 하나, 투두 조회 API는 여러 화면에서 쓰이고 있으므로 timer로 통일하는 것이 더 편리할 것 같습니다.

유저 정보를 이용하는데 이에 대한 취급처리정보 방침 어쩌고를 웹에 게시하지않아도 괜찮을까요?

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

(feature 이슈 작성 예시) 투두리스트 각 항목 삭제 기능 추가

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

요약

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

내용

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

UI

게스트

  • 로컬 스토리지에서 삭제

회원

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

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

테스트 케이스

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

뒤로가기버튼

마이페이지와 영수증 출력페이지에 뒤로가기 버튼이 필요할거 같아요!
그냥 크롭뒤로가기 버튼으로 페이지 이동하니깐 다소 불편한 감이 없잖아 있네여ㅎ

영수증 저장 방식 개선

요약

이미지를 파일로 저장하기 때문에 저장 방식에 있어 UX 개선이 필요해보입니다.

내용

테스트 실시 환경 : 아이폰 8S

모바일 크롬

영수증 저장 버튼을 누르면 파일로 저장됩니다.
image

위 화면에서 다음에서 열기를 클릭하면 다음과 같은 옵션이 등장해서 카메라 앨범에 파일을 저장하기가 어렵습니다.
image

개선방안

1. 이미지를 프론트에서 만들어서 모달이나 별도 페이지에서 제공

현재 컴포넌트로 영수증을 출력하고 있는데, 이미지 저장 버튼을 눌렀을 때 파일로 다운로드 하는게 아니라 프론트에서 이미지가 된 영수증을 모달로 띄워주는게 어떨까요? 그대로 캡쳐를 해도 좋고, 오래 눌러서 이미지 저장해도 좋을 것 같습니다.

2. 저장 버튼을 눌렀을 때 클립보드로 복사

편의적인 면에서는 이게 좋을 것 같긴하지만, 브라우저나 유저의 사용환경에 따라서 불가능한 경우도 있다고 합니다.

Print the Receipt 버튼을 어떻게 수정해야 UX적으로 더 개선할 수 있을까요?

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

로그인 기능 구현(JWT)

요약

로그인 기능 구현

내용

해야할 일

우선 순위

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

후 순위

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

[feature] 로그아웃 구현

요약

제곧내

완료조건

작성중
쿠키 삭제하면 그만아닌가 싶기도 함

테스트 케이스

작성중

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.