Skip to content

[오늘의실패 Version1] 실패를 기록하고 영수증을 만들어 공유해보는 서비스

Notifications You must be signed in to change notification settings

TodaysFail/TodaysFail-FE

Repository files navigation

오늘의 실패

오늘의 실패 목업

오늘의 실패를 영수증으로 남겨 보세요
배포 URL: https://todaysfail.com




프로젝트 소개

바쁜 일상을 살아가다보면 어쩔 수 없이 성공과 효율에만 집중하게 됩니다. 그런 강박때문에 작은 시도조차도 하기 어려울 때가 많죠. 실패가 두려워 아무것도 하지 않은 적이 있지 않나요? 아니면 작은 실패에도 크게 좌절하고 힘들어하고 계시진 않나요? 🥲

<오늘의 실패>로 크고 작은 실패를 기록하면서 실패를 조금 더 가볍게 대해보세요! 실패를 다른 말로 하면 ‘도전‘이라고 할 수 있죠. ‘나’를 성장시킨 오늘의 실패는 무엇이었나요? 여러분의 도전 증거를 차곡차곡 모아 보세요! 매일 기록하다보면 어느새 실패에 의연해진 모습을 발견할 수 있을 거예요!


🗓️ 매일 기록하는 오늘의 실패
오늘은 어떤 실패를 경험하셨나요? 어떤 실패를 했는지 자세하게 적고 그 경험을 통해 느낀점을 적어보세요! 기록을 마치면 객관적인 시선으로 바라볼 수 있을 거예요.


🧾 오늘은 어떤 시도를 했을까?

오늘 기록한 크고 작은 실패를 모아 한 장의 영수증으로 뽑아보세요. 어떤 시도로 하루를 채워나갔는지 한 눈에 볼 수 있어요! 한 장 한 장 차곡차곡 모으다 보면 얼마나 많은 도전을 했고 얼마나 많은 것을 얻었는지 알게 될 거예요!



팀원 소개 및 역할 분담

프론트엔드 백엔드 디자이너
메이 세잇 지우 도모 주니

스크린샷 2023-04-19 오후 6 12 33



개발 일정

전체 개발 일정: 2023.02.23 ~ 진행 중

  • MVP 개발: 2023.02.23 ~ 2023.02.27
  • 1차 개발: 2023.03.01 ~ 2023.04.13
  • 설문 및 피드백: 2023.04.17 ~ 2023.05.01


개발 환경

기술

  • Front-End
  • Back-End

협업

  • 디자인 도구
    피그마 주소
  • 협업 도구

    • 노션을 활용한 회의 기록 정리 스크린샷 2023-04-19 오후 8 20 12
    • 슬랙을 이용한 진행 상황 공유 및 의견 공유 스크린샷 2023-04-19 오후 8 18 01

배포

  • 클라우드 타입


폴더 구조

프론트엔드 폴더 구조 보기
.github
 ┣ ...
node_modules
 ┣ ...
public
 ┣ _redirects
 ┣ favicon.ico
 ┣ index.html
 ┗ og-image.png
src
 ┣ actions
 ┃ ┗ recordListActions.js
 ┣ api
 ┃ ┗ apiController.jsx
 ┣ assets
 ┃ ┣ ...
 ┣ components
 ┃ ┣ common
 ┃ ┃ ┣ Button.jsx
 ┃ ┃ ┣ Logo.jsx
 ┃ ┃ ┣ Logout.jsx
 ┃ ┃ ┗ Modal.jsx
 ┃ ┣ layout
 ┃ ┃ ┗ MainLayout.jsx
 ┃ ┣ login
 ┃ ┃ ┣ Button.jsx
 ┃ ┃ ┣ DuplicationCheckBtn.jsx
 ┃ ┃ ┣ Form.jsx
 ┃ ┃ ┣ SignForm.jsx
 ┃ ┃ ┗ ValidForm.jsx
 ┃ ┣ myPage
 ┃ ┃ ┣ Character.jsx
 ┃ ┃ ┣ DailyFailure.jsx
 ┃ ┃ ┣ DailyFailureList.jsx
 ┃ ┃ ┣ EventBanner.jsx
 ┃ ┃ ┣ Failure.jsx
 ┃ ┃ ┣ FixedButton.jsx
 ┃ ┃ ┣ NoFailures.jsx
 ┃ ┃ ┣ Profile.jsx
 ┃ ┃ ┗ TodaysDate.jsx
 ┃ ┣ receipt
 ┃ ┃ ┣ FailureCard.jsx
 ┃ ┃ ┣ FailureList.jsx
 ┃ ┃ ┣ ReceiptShareContainer.jsx
 ┃ ┃ ┗ RecordDateCard.jsx
 ┃ ┣ record
 ┃ ┃ ┣ Button.jsx
 ┃ ┃ ┣ InputForm.jsx
 ┃ ┃ ┗ Modal.jsx
 ┃ ┗ signUp
 ┃ ┃ ┣ SignUpButton.jsx
 ┃ ┃ ┗ SignUpForm.jsx
 ┣ hooks
 ┃ ┣ useDebounce.jsx
 ┃ ┗ useOnClickOutside.jsx
 ┣ pages
 ┃ ┣ LoginPage
 ┃ ┃ ┗ LoginPage.jsx
 ┃ ┣ MyPage
 ┃ ┃ ┗ MyPage.jsx
 ┃ ┣ RecordPage
 ┃ ┃ ┗ RecordPage.jsx
 ┃ ┣ SharePage
 ┃ ┃ ┗ SharePage.jsx
 ┃ ┗ SignUpPage
 ┃ ┃ ┗ SignUpPage.jsx
 ┣ reducers
 ┃ ┣ recordListReducer.js
 ┃ ┗ rootReducer.js
 ┣ router
 ┃ ┣ AuthRoute.jsx
 ┃ ┣ NoAuthRoute.jsx
 ┃ ┣ Router.jsx
 ┃ ┗ const.js
 ┣ style
 ┃ ┗ GlobalStyle.jsx
 ┣ utils
 ┃ ┗ helpers
 ┃ ┃ ┗ checkCurrentTime.js
 ┣ App.js
 ┣ index.js
 ┗ store.js
 .env
 .eslintrc.json
 .gitignore
 .prettierignore
 .prettierrc
 package-lock.json
 package.json
 README.md


협업 컨벤션

  • 효율적인 협업을 위해 커밋 메시지, 이슈 템플릿, PR 템플릿 설정
  • 컨벤션 보러가기


구현 기능

1. 회원가입 2. 로그인
3. 마이페이지 4. 기록하기
5. 영수증 공유하기 6. 로그아웃


스프린트

MVP 개발 기간

테오의 스프린트 14기 활동
- 7일간 몰입해서 '기획-디자인-개발-패포' 협업 사이클 경험하며 스프린트 진행


Day 1

  • 서로를 알아가기 위해 온보딩 프로세스 진행
  • 팀 캔버스 그리기
    스크린샷 2023-04-19 오후 8 00 37

Day 2

  • 서로의 아이디어를 확장하고 발산하며 구체화하는 시간
  • 지도 그리기
    스크린샷 2023-04-19 오후 8 03 57

Day 3

  • 사용자의 행동을 중심으로 개발을 진행하는 방식인 BDD 방법론에 입각하여 설계 및 태스크 분배
    스크린샷 2023-04-19 오후 8 07 15

Day 4~Day 5

  • 분배받은 태스크를 기반으로 기능 구현 진행
  • 개발 기간 동안 '게더타운' 적극 활용하여 모여서 기능 개발
  • MVP 구현 후 데모 진행
  • 회고 진행 및 이후 방향성 논의
    스크린샷 2023-04-19 오후 8 11 45

🔗 팀 피그잼 링크



1차 개발 기간

테오의 스프린트 이후의 활동
팀원들과 논의 후 서비스를 확장시키기로 결정


  • 스프린트 단위: 일주일
  • 회의 요일: 매주 목요일

개선점

  1. 로그인 페이지 및 로그아웃 페이지 리팩토링
  • 로컬스토리지로 구현되어있던 로그인/회원가입 기능을 세션 방식으로 전환
  • capsLock 알림 추가

  1. 로그아웃 기능 구현
  • MVP 모델에서 구현하지 않았던 로그아웃 기능 추가

  1. 마이페이지 및 기록하기 페이지 리팩토링
  • 기록 수정 및 삭제 기능 구현

  1. 기존 영수증 페이지와 공유 페이지가 나뉘어있던 것이 UX 측면에서 불필요하다 생각해 합치는 작업 실행


서비스 홍보 및 유저 설문조사

2023.04.17 ~ 2023.05.01

About

[오늘의실패 Version1] 실패를 기록하고 영수증을 만들어 공유해보는 서비스

Resources

Stars

Watchers

Forks

Releases

No releases published