codesoom / project-react-2-onys-programmer

project-react-2-onys-programmer

어플리케이션 링크

https://codesoom.github.io/project-react-2-onys-programmer/

Goal

이 앱을 사용하는 사람은 갖고 싶은 습관을 가지게 됩니다.

Process

목표 습관을 정합니다.

그 목표 습관은 수직적으로 유연해집니다.

• 3단계의 난이도로 분화됩니다. (팔굽혀펴기 1개 -> 팔굽혀펴기 10개 -> 팔굽혀펴기 30개)

그 목표 습관은 수평적으로 유연해집니다.

• 3가지 종류의 습관으로 분화됩니다. (스케이트보드<->팔굽혀펴기<->스포츠댄스)

결국 당신은 매일 당신의 입맛에 따라 골라 실천할 수 있는 9개의 습관 매트릭스를 갖게 됩니다.

How to use this app

안내메시지와 대화하며 자신에게 적합한 9가지 습관을 형성하세요.

NPC가 안내해줄 겁니다. 자연스럽게 대화하며 습관형성 flow를 따라가세요.(준비될 예정입니다.)

습관을 다 형성하면 매일 9가지 습관중 하나를 선택해 실천하세요.

실천 프로세스가 준비될 예정입니다. 리워드 프로세스가 준비될 예정입니다.

project-react-2-onys-programmer's Issues

README에 어떻게 사용해야하는지 적어주세요

앱을 어떻게 사용할 수 있는지 링크와 함께 간단한 설명도 같이 첨부해주세요

폴더구조를 정리하면 좋을 것 같아요

지금은 하나의 폴더에 모든 파일들이 모여있어서 파악하기 어려운 것 같아요

5주차 진행

이 앱을 언제 사용하나요?

꼭 가지고 싶은 습관을 자신의 것으로 만들기 위해 사용합니다.

제약 조건은 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.

구체적인 사례는 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
  한 가지 옵션은 3단계의 수직적 유연성, 그리고 3가지 종류의 수평적 유연성 총 9개의 옵션으로 분화됩니다.

• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
  옵션버튼을 클릭하면 달성상태가 업데이트되고 그 상태에 따라 캘린더에 달성 스탬프가 찍힙니다.

• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
  옵션버튼을 클릭할 때 게임처럼 성취감을 줄 수 있는 시각적, 청각적, 촉각적 자극이 있어야 합니다.
  캘린더 페이지로 들어갔을 때 성취감을 줄 수 있는 시각적 자극이 있어야 합니다.

• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.
  달성상태가 업데이트 되지 않았다면 피드백을 할 수 있도록 달성하지 못한 원인을 찾는 가이드를 구현합니다.
  피드포워드를 할 수 있도록 캘린더페이지에서 옵션을 수정할 수 있는 기능을 구현합니다.

이번주에 구현 할 기능을 우선 순위대로 작성해 주세요.

---

• 폴더 정리

1. • 레벨업 만들기

• 버튼 누르면 경험치가 올라가도록 구현
• 버튼이 7번 눌리면 레벨이 바뀌고 경험치 0으로

. - 배포:

• 잘 동작하는지 테스트하기

. - 유지보수:

• 코드 리팩터링

---

비고

2주차 진행

이 앱을 언제 사용하나요?

꼭 가지고 싶은 습관을 자신의 것으로 만들기 위해 사용합니다.

제약 조건은 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.

구체적인 사례는 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
  한 가지 옵션은 3단계의 수직적 유연성, 그리고 3가지 종류의 수평적 유연성 총 9개의 옵션으로 분화됩니다.

• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
  옵션버튼을 클릭하면 달성상태가 업데이트되고 그 상태에 따라 캘린더에 달성 스탬프가 찍힙니다.

• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
  옵션버튼을 클릭할 때 게임처럼 성취감을 줄 수 있는 시각적, 청각적, 촉각적 자극이 있어야 합니다.
  캘린더 페이지로 들어갔을 때 성취감을 줄 수 있는 시각적 자극이 있어야 합니다.

• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.
  달성상태가 업데이트 되지 않았다면 피드백을 할 수 있도록 달성하지 못한 원인을 찾는 가이드를 구현합니다.
  피드포워드를 할 수 있도록 캘린더페이지에서 옵션을 수정할 수 있는 기능을 구현합니다.

이번주에 구현 할 기능을 우선 순위대로 작성해 주세요.

---

1. 최초 사용 가능 버전 만들기 마무리하기

1. • 습관 만들기 구현
2. • 습관 매트릭스 페이지 구현
3. • 습관 기록 페이지 구현
4. • 꾸미기: - 글로벌 스타일
5. • 배포

• 오류나기 이전으로 프로젝트 되돌리기
• 배포하기
• README 작성하기
  6 - 유지보수
• 코드리뷰 중심으로 리팩터링

---

**2. 핵심기능 포함시키기 **

1. • 습관 만들기:
     습관 3분화 guidePage 구현

• 탄력적 습관 책 분석하여 스토리텔링 전략 수립하기
• 질문에 대한 대답이 상태에 저장되게 하기

2. • 습관 매트릭스 페이지 구현:

• 상태에 저장된 value에 따라 3분화된 습관을 버튼으로 표시

3. • 습관 기록 페이지 구현: 다음기회에
4. • 꾸미기: - 글로벌 스타일

• 컴포넌트 위치 잡기
• 버튼 크기 조정

5. • 배포:

• 잘 동작하는지 테스트하기

6. • 유지보수:

• 코드 리뷰를 중심으로 리팩터링

시간이 남으면..

• 습관 기록 페이지 구현:

• 클릭하면 "complete!" 나타나게 하기

• 꾸미기:

• : 폰트 잡기

---

비고

dist폴더는 Git으로 관리되면 안됩니다.

dist 폴더는 배포할 때만 사용하므로, Git으로 관리되면 안됩니다. untracking되도록 수정해주세요

1주차 진행

이 앱을 언제 사용하나요?

꼭 가지고 싶은 습관을 자신의 것으로 만들기 위해 사용합니다.

제약 조건은 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.

구체적인 사례는 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
  한 가지 옵션은 3단계의 수직적 유연성, 그리고 3가지 종류의 수평적 유연성 총 9개의 옵션으로 분화됩니다.

• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
  옵션버튼을 클릭하면 달성상태가 업데이트되고 그 상태에 따라 캘린더에 달성 스탬프가 찍힙니다.

• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
  옵션버튼을 클릭할 때 게임처럼 성취감을 줄 수 있는 시각적, 청각적, 촉각적 자극이 있어야 합니다.
  캘린더 페이지로 들어갔을 때 성취감을 줄 수 있는 시각적 자극이 있어야 합니다.

• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.
  달성상태가 업데이트 되지 않았다면 피드백을 할 수 있도록 달성하지 못한 원인을 찾는 가이드를 구현합니다.
  피드포워드를 할 수 있도록 캘린더페이지에서 옵션을 수정할 수 있는 기능을 구현합니다.

이번주에 구현 할 기능을 우선 순위대로 작성해 주세요.

1. 개발환경 구축

• webpack

• babel

• eslint

• jest

• router

• react

• emotion

• react-redux

• 화면 스케치

2. 최초 사용 가능 버전 만들기

1. • 습관 만들기 구현:

• 이름 입력
• 갖고 싶은 습관 입력

2. • 습관 매트릭스 페이지 구현:

• value에 따른 습관 표시
• 습관을 버튼으로 표시

3. • 습관 기록 페이지 구현:

• 페이지를 만들기 이전에 오른쪽 공간 활용: 습관 버튼을 누르면 "Complete!" 표시하기

4. • 꾸미기: - 글로벌 스타일

• 컴포넌트 위치 잡기
• 폰트 적용
• 버튼 모양 잡기

5. • 배포:

• 다른 동기님들은 어떻게 배포했는지 살펴보고 학습하기
• 배포하기
• 잘 동작하는지 테스트하기

6. • 유지보수:

• 중복 코드 제거

3. 발전 버전 만들기

1. • 습관 만들기 발전:

• 습관의 3분화 : 수직적 유연성 확보

2. • 습관 매트릭스 페이지 발전:

• 3분화된 습관 버튼으로 표시

3. • 습관 기록 페이지 발전:

• 3분화된 습관 버튼을 누르면 "Complete!" 표시하기

4. • 꾸미기: - 컬러링 작업

• 배경이미지 적용
• 배경 컬러 조정
• 폰트 컬러 조정
• 버튼 컬러 조정
• 버튼 hover 설정 -> 컬러 조정

5. 배포:

• 피드백 받기
• 마케팅에 적용

6. 유지보수:

• 중복코드 제거
• 불편한 점 파악
• 해결방법 구상
• 해결방법 적용

---

비고

3주차 진행

이 앱을 언제 사용하나요?

꼭 가지고 싶은 습관을 자신의 것으로 만들기 위해 사용합니다.

제약 조건은 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.

구체적인 사례는 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
  한 가지 옵션은 3단계의 수직적 유연성, 그리고 3가지 종류의 수평적 유연성 총 9개의 옵션으로 분화됩니다.

• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
  옵션버튼을 클릭하면 달성상태가 업데이트되고 그 상태에 따라 캘린더에 달성 스탬프가 찍힙니다.

• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
  옵션버튼을 클릭할 때 게임처럼 성취감을 줄 수 있는 시각적, 청각적, 촉각적 자극이 있어야 합니다.
  캘린더 페이지로 들어갔을 때 성취감을 줄 수 있는 시각적 자극이 있어야 합니다.

• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.
  달성상태가 업데이트 되지 않았다면 피드백을 할 수 있도록 달성하지 못한 원인을 찾는 가이드를 구현합니다.
  피드포워드를 할 수 있도록 캘린더페이지에서 옵션을 수정할 수 있는 기능을 구현합니다.

이번주에 구현 할 기능을 우선 순위대로 작성해 주세요.

---

• Flexible 소개,
• 여정 소개,
• 스킵버튼 생성
• 운동하기 Intro 구현
• 헤더 추가하기
• 꾸미기: - 글로벌 스타일
• 컴포넌트 위치 잡기
• 버튼 크기 조정

** 1. 핵심기능 포함시키기 **

1. • 습관 만들기:

• 탄력적 습관 책 분석하여 스토리텔링 전략 수립하기
• guidePage - Horizontal flexibility 구현하기 : Input 3개와 입력버튼 + 가이드메시지
• 입력된 3개의 카테고리가 상태에 저장되게 하기
• HabitMatrix 컨테이너에서 HorizontalFlexibility로 CategoryCreateContainer 옮기기
• CategoryCreateContainer 라우터 연결
• VerticalFlexibilityPage 구현 및 라우터로 연결
• 상태에 저장된 카테고리에 따라 3분화된 습관을 VerticalFlexibilityPage 상단에 표시
• guidePage - Vertical flexibility 구현하기 : Input 9개와 입력버튼 + 가이드메시지
• Input에 값 넣고 입력 누르면 그 자리에 표시되게 구현하기
• 편집 버튼 누르면 다시 Input으로 바뀌게 구현하기

. - 습관 기록 페이지 구현: 다음기회에

. - 배포:

• 잘 동작하는지 테스트하기

. - 유지보수:

• 코드 리뷰를 중심으로 리팩터링

시간이 남으면..

• 꾸미기:
• : 폰트 잡기

---

비고

4주차 진행

이 앱을 언제 사용하나요?

꼭 가지고 싶은 습관을 자신의 것으로 만들기 위해 사용합니다.

제약 조건은 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.

구체적인 사례는 무엇인가요?

• 사용자가 정한 습관을 9가지의 옵션으로 생성해야 합니다.
  한 가지 옵션은 3단계의 수직적 유연성, 그리고 3가지 종류의 수평적 유연성 총 9개의 옵션으로 분화됩니다.

• 생성된 옵션버튼을 클릭하여 습관 달성 여부를 기록할 수 있어야 합니다.
  옵션버튼을 클릭하면 달성상태가 업데이트되고 그 상태에 따라 캘린더에 달성 스탬프가 찍힙니다.

• 습관 달성 기록을 추적하여 성취감을 느낄 수 있어야 합니다.
  옵션버튼을 클릭할 때 게임처럼 성취감을 줄 수 있는 시각적, 청각적, 촉각적 자극이 있어야 합니다.
  캘린더 페이지로 들어갔을 때 성취감을 줄 수 있는 시각적 자극이 있어야 합니다.

• 습관 달성 기록을 추적하여 피드백, 피드포워드를 할 수 있어야합니다.
  달성상태가 업데이트 되지 않았다면 피드백을 할 수 있도록 달성하지 못한 원인을 찾는 가이드를 구현합니다.
  피드포워드를 할 수 있도록 캘린더페이지에서 옵션을 수정할 수 있는 기능을 구현합니다.

이번주에 구현 할 기능을 우선 순위대로 작성해 주세요.

---

• HomePage에 헤더이미지 추가
• 폴더 정리
• 기본 디자인 꾸미기
• Flexible 소개 구현
• 여정 소개 구현
• 스킵버튼 생성
• 운동하기 Intro 구현
• 헤더 추가하기
• 꾸미기: - 글로벌 스타일
• 컴포넌트 위치 잡기
• 버튼 크기 조정

** 1. 핵심기능 포함시키기 **

1. • 습관 만들기:

• guidePage - Vertical flexibility 구현하기 : Input 9개와 입력버튼 + 가이드메시지
• Input에 값 넣고 입력 누르면 인풋이 있던 자리에 값 표시되게 구현하기
• 편집 버튼 누르면 다시 Input으로 바뀌게 구현하기

. - 배포:

• 잘 동작하는지 테스트하기

. - 유지보수:

• 코드 리뷰를 중심으로 리팩터링

---

비고