📱 EmotiPop

image 에 EmotiPop을 검색하세요

이렇게 바뀌는 중이에요

• React-Native expo를 활용해 프로젝트를 진행 하였는데, React-Native를 활용해 리펙토링해 보고 싶어서 시작하게 되었습니다.

(削除) 웹툰 원작인 드라마 유미의 세포들을 보면, 다음과 같은 장면이 나옵니다. (削除ここまで)

(削除) 주인공 유미가 남자친구인 웅이에게 불만이 생길 때마다, 웅이에게 불만을 드러내지 않고 유미의 감정 세포들이 박에 콩주머니를 던집니다. (削除ここまで)

(削除) 그리고 이 감정이 쌓여 결국 나중에 박이 터지면서 유미의 감정이 극대화되어 나타나죠. (削除ここまで)

(削除) 이 장면을 보고, 감정이 쌓여서 결국 터진다는 표현을 이렇게 할 수 있구나라고 깨달았고, 이 부분을 활용하여 감정 정리 서비스를 만들어보면 어떨까라는 호기심에서 (削除ここまで)

(削除) 시작하여 결국 EmotiPop을 기획하게 되었습니다. (削除ここまで)

image

image

image

image

image

image

image

image

image

image

image

image

스크린샷 2022年02月26日 오후 11 21 48

• 구조

  • Root Stack
    • Tutorial Stack
      • 튜토리얼 페이지들
      • 로그인 및 회원가입 페이지
    • MainTab
      • 메인 페이지(Stack)
      • 캘린더 페이지
      • 차트 페이지
      • 마이 페이지

• 탭네비게이션

  • Emotipop: Redux 활용 탭 네비게이션 직접 구현
  • Remotipop: BottomTabNavigation

• 로그인 & 회원가입 창

  • 컴포넌트화 하여 재활용
  • 인풋, 버튼 컴포넌트화

• 메인 페이지(감정일기 작성 메인)

  • 긍정박(긍정적 감정 기록 선택 창)과 부정박(부정적 감정 기록 선택 창) 분리(기존에는 두 박이 하나로 합쳐져 있었음).
  • 긍정방 및 부정방 감정 기록 페이지 컴포넌트 화
  • state에 따라 컴포넌트화 된 방 재활용
  • 긍정 기록과 부정 기록에 따른 애니메이션 재생 페이지 컴포넌트 화
  • 상태와 컴포넌트를 활용해 재활용

• 캘린더 페이지

  • React-Native-calendars 라이브러리 활용
  • 날짜에 쓰여진 글 목록을 달력 메인 페이지와 연동
  • 없는 데이터 처리(보강 필요)

• 차트 페이지

  • React-Native-svg-charts 라이브러리 활용

• 마이 페이지

  • 로직 분리
  • 버튼 및 인풋 컴포넌트 재활용해 사용

• ios 호환
• Modal 제작(현재는 내장 컴포넌트 사용중)
• Alert 제작(현재는 내장 컴포넌트 사용중)
• 인트로 애니메이션(어플 재접속 하면 인트로 애니메이션 살짝 보이는 부분)
• (削除) Alert창(dispatch 후 에러에 따라 나타나는 얼럿창의 동작이 의도와는 다르게 작동) (削除ここまで)
• 차트 라벨 생성
• 다양한 차트 지원(데이터 필터 및 다양화)
• 튜토리얼 페이지 넘김 버튼