codesoom / project-react-3-2zero1

엽서 만들기

소개

코로나로 인해 만나지 자주 만나지 못했던 지인에게 추억이 되는 사진으로 엽서를 보낼 수 있습니다.

웹사이트

http://zero1s.shop/?key=3ead694ca3c284b592cb3a4debedc75ff149606e007c70b700c18fe4994f2a6c

사용법

1. 다른 사람으로 부터 문자 또는 카카오톡으로 엽서 링크를 받으면 자신의 엽서를 확인할 수 있습니다.
2. 받은 엽서를 사용하여 최대 5번의 엽서를 작성할 수 있습니다.
3. 엽서를 작성할때는 보내는 사람과 받는 사람 그리고 엽서 내용과 추억하고 싶은 사진을 첨부하며 마지막에 어떻게 보여질 지 미리보기로 확인할 수 있습니다.
4. 마지막으로 제작에 완료하면, 친구에게 보낼 메시지를 복사할 수 있고 그 메시지 안에 엽서의 링크가 들어 있습니다. 그리고 문자 또는 카카오톡으로 보낼 수 있습니다.

엽서 페이지 소개

1. 입장 페이지
   • 링크를 타고 들어가면 바로 볼 수 있는 페이지 이며 비공개 엽서라면 엽서 암호를 입력하고 인증을 해야 엽서를 확인할 수 있습니다. 공개라면 바로 엽서를 확인할 수 있습니다.
   • 엽서를 받았다면 총 5회의 엽서를 작성할 수 있으며, 5회 모두 작성했다면 엽서 작성하기 버튼은 보여지지 않습니다.
   • 현재까지 작성된 엽서의 수를 볼 수 있습니다.
   • 다른 사람 엽서를 보러 가거나 또는 파기하는 페이지로 넘어갈 수 있습니다.
2. 엽서 페이지
   • 앞면과 뒷면이 존재하며, 엽서 어디든 클릭시 (이전 버튼 제외) 반대편 엽서를 볼 수 있습니다.
   • 옆서 앞면에선 보낸이, 받는이 그리고 엽서 내용을 볼 수 있습니다.
   • 엽서 뒷면에선 보낸이가 첨부한 사진과 사진에 대한 메시지를 볼 수 있습니다.
3. 엽서 작성 페이지
   • 엽서 작성 페이지는 총 5단계로 이루어져 있습니다.
   • 1페이지 : 기본 정보를 입력하기 위한 페이지입니다. a. 보낸 사람과 받는 사람을 입력받습니다. b. 엽서 암호는 엽서를 비공개할 경우 엽서 확인할때와 엽서를 파기할때 필요합니다. c. 공개여부를 비공개로 할 경우 엽서 확인시 엽서 암호가 필요하며, 다른 사람 엽서 보기 페이지에서 보여지지 않습니다.
   • 2페이지 : 엽서의 내용을 작성하는 페이지입니다.
   • 3페이지 : 이미지를 첨부할 수 있으며, 이미지에 대한 메시지를 남길 수 있습니다.
   • 4페이지 : 미리보기 페이지로, 만들어질 엽서를 확인할 수 있습니다. a. 앞면 뒷면으로 이루어져 있으며, 엽서 영역 클릭시 반대편 엽서를 볼 수 있습니다. b. 완료 버튼 클릭시 엽서 제작이 완료됩니다.
   • 5페이지 : 엽서 제작 완료 페이지로, 전송 메시지 복사 버튼을 클릭시 친구에게 보낼 메시지에 엽서 URL과 엽서 암호가 포함되어 복사됩니다.
4. 다른 사람 엽서 보러가기
   • 다른 사람들이 작성한 엽서를 볼 수 있습니다.
5. 해당 엽서를 파기할 수 있는 페이지입니다. 파기할 땐 엽서 암호가 필요합니다.

project-react-3-2zero1's Issues

4주차 계획

생각해 보니 4주차 계획을 세웠지만 이슈에는 올리지 않았군요 ..

이 앱을 언제 사용하나요?

친구에게 추억이 담긴 응원, 감사 메시지를 남기고 싶을때 사용합니다.

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

엽서를 받은 사람은 메시지와 사진을 첨부하여 엽서를 제작하며, 제작단계 마지막에 미리보기로 만들어질 엽서를 미리볼 수 있습니다. 만든 후에는 링크가 나오며, 링크를 친구에게 공유하면 친구는 해당 링크로만 작성된 엽서를 확인할 수 있습니다. 엽서를 작성하기 위해서는, 다른 사람으로 부터 엽서를 받아야 작성할 수 있습니다. 받은 엽서로 약 5개 정도의 엽서를 다른 사람에게 작성할 수 있습니다.

이번주가 지나면 사용자는 무엇을 할 수 있나요?

1. 엽서를 작성해서 친구에게 보낼 수 있다.
2. 디자인된 앱을 볼 수 있다.
3. 잘못된 접근 또는 서버 클라이언트의 상태가 다를 경우 처리되는 것을 볼 수 있다.(좀 더 안정적인 앱을 볼 수 있다.)

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

• 엽서 작성 마무리(디자인 포함)

• 엽서 페이지 마무리(디자인 포함)

• 입장 페이지 마무리(디자인 포함)

• aws(ec2, s3, rds) docker를 이용하여 서버 배포 하는것 공부하고 배포하기

• 서버와 연동해서 동작할 수 있도록 client 배포

• 배포 후 피드백 정리

• open graph, google analytics 적용

• 입장 페이지에 비밀 메시지 틀릴 경우 기본 에러 메시지가 아니라 잘못된 비밀 메시지라고 표시해주기

• 서버에서 에러 반환시 클라이언트 처리(화면 이동 & 토스트) 설계

• 서버 에러 경우의수 파악하고, 정해놓은 에러 프로토콜 반환하도록 변경.(현재 그냥 대충 처리하고있음.)

• 클라이언트 에러 처리 구현

README를 꾸며주세요

구상하신 서비스가 어떤 서비스인지, 그리고 어떻게 사용할 수 있을지 알 수 있도록 간단하게 작성 해주면 좋을 것 같아요~

엽서 작성하기에서 미리보기 단계에 뭘 해야될지 모르는 현상이 발생함.

이전에는 사진이 있었어서 클릭시 뒷면을 볼 수 있었는데, 우편으로 대체되어 어떻게 진행해야될지 모르는 문제가 발생하였음.

남은 일정

4월 3주차

• 오픈 그래프, 구글 애널리틱스 적용

• 서버 에서 에러 반환시 클라이언트 처리

• 서버 에러가 발생할 경우 파악하고, 정해놓은 에러 프로토콜 변환하도록 적용

4월 4주차

• 1차 배포 피드백 적용

• 다른 사람 엽서 페이지 구현 후 배포(2차 배포)

  • 서버 구현
  • 프런트 구현
  • 배포

• 파기 페이지 구현 후 배포(3차 배포)

  • 서버 구현
  • 프런트 구현
  • 배포

• 엽서 암호가 틀릴 경우 현재 기본 에러메시지를 보여주고 있는데, 엽서 암호가 올바르지 않다는 메시지를 보여줘야한다. (코드 구조 변경 필요)

• 현재 gitpubpage에 있는 spa 처리기는 url에 key를 넣어 사용하는 내 앱을 다 처리하지 못하고 있음. github의 404 페이지가 뜨고 있는 문제 해결하기
  - 원인 : WritePage에서 checkValidAccess를 한 후에 문제가 있으면 history.push(?key='') 방식으로 넣어주는 부분이 문제임

• 미리보기 부분에 앞면 뒷면 버튼을 만들어준다.

4월 5주차

• 테스트 코드 리팩터링(관심사에 관련된 테스트 작성하기 ! )

  • page
  • container
  • presentational

• 리덕스 inputFields 부분 나누기

• ec2에 올라간 docker가 주기적으로 종료되는 현상 해결하기

• post 응답 후에 처리되는 부분의 테스트 코드를 작성해야하는데 dispatch.toBeCalledWith로 보면 anonymous function이 오고있음. 이부분을 어떻게 테스트하면 좋을지 찾아봐야함(redux thunk로 action이 그냥 함수로 날라오고 있음.).

1주차 계획

이 앱을 언제 사용하나요?

친구에게 추억이 담긴 응원, 감사 메시지를 남기고 싶을때 사용합니다.

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

엽서를 받은 사람은 메시지와 사진을 첨부하여 엽서를 제작하며, 제작단계 마지막에 미리보기로 만들어질 엽서를 미리볼 수 있습니다. 만든 후에는 링크가 나오며, 링크를 친구에게 공유하면 친구는 해당 링크로만 작성된 엽서를 확인할 수 있습니다. 엽서를 작성하기 위해서는, 다른 사람으로 부터 엽서를 받아야 작성할 수 있습니다. 받은 엽서로 약 5개 정도의 엽서를 다른 사람에게 작성할 수 있습니다.

이번주가 지나면 사용자는 무엇을 할 수 있나요?

1. 입장 페이지에 접근할 수 있다.
2. 엽서 작성 페이지에 접근할 수 있다.
3. 엽서를 작성할 수 있다.

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

1. 개발 환경 세팅
2. 입장 페이지 제작
3. 엽서 제작 페이지 1단계 제작
4. 엽서 제작페이지 2단계 제작
5. 엽서 미리보기( 제작 페이지 3단계)페이지 제작

입장 페이지와 엽서 작성 1페이지

엽서 확인하기 페이지에선 무엇을 선택해야하는지, 어디에 어떤 정보가 노출되는지 잘 모르겠어요.

이미지가 노출되지 않아서 그런 느낌이 더 드는것 같아요~

그리고 이미지 등록시에 기본 이미지를 제공하거나 생략할 수 있으면 좋을 것 같네요 ㅎㅎ

2주차 계획

이 앱을 언제 사용하나요?

친구에게 추억이 담긴 응원, 감사 메시지를 남기고 싶을때 사용합니다.

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

엽서를 받은 사람은 메시지와 사진을 첨부하여 엽서를 제작하며, 제작단계 마지막에 미리보기로 만들어질 엽서를 미리볼 수 있습니다. 만든 후에는 링크가 나오며, 링크를 친구에게 공유하면 친구는 해당 링크로만 작성된 엽서를 확인할 수 있습니다. 엽서를 작성하기 위해서는, 다른 사람으로 부터 엽서를 받아야 작성할 수 있습니다. 받은 엽서로 약 5개 정도의 엽서를 다른 사람에게 작성할 수 있습니다.

이번주가 지나면 사용자는 무엇을 할 수 있나요?

1. 엽서 작성후 미리 보기 기능을 이용하여 내가 만든 엽서를 볼 수 있다.
2. 엽서를 만들고 완료페이지를 볼 수 있다.
3. 엽서 파기 페이지를 볼 수 있다.

---

4/1일 수정

1. 엽서 작성 후 미리보기 기능을 이용하여 내가 만든 엽서를 볼 수 있다.

• 가치 : 추억이 될 엽서 내용과 사진을 입력하여 친구에게 전해줄 엽서를 확인해볼 수 있다.
• 엽서 페이지는 서버가 없다면 누구한태 보여줄 수 없기 때문에 거의 똑같은 미리 보기 페이지를 통해 자신이 만든 엽서를 확인해 볼 수 있도록 먼저 진행한다.
• 3일에 한번씩 배포가 되도록 프로젝트 일정을 다시 계획하기

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

• 엽서 페이지 제작
• 엽서 미리보기 페이지 제작
• 엽서 완료 페이지 제작
• 배포 자동화 시스템 구축
• 엽서 미리보기 페이지 디자인 적용 후 배포
• 입장 페이지 디자인 적용 후 배포

엽서(미리보기) 페이지
앞면 뒷면

---

금요일 할일

1. 테스트 코드 커버리지 100% 채우기 (현재 약 86% 달성)이거 안하면 테스트 통과 안해서 배포가 안됨 ..
2. 엽서 페이지 작성 할 수 있도록 상태 값을 조정하기(배포 후 접근 가능할 수 있도록) (실패)
3. 엽서 미리보기 페이지 디자인 계획 (모바일 first로 css 구조 설계)(실패)
4. 필요한 css 리스트업 한 후 필요한 부분 서적을 통해 숙지(실패)
5. css 적용 한 후에 배포(실패)
6. 프로 자바스크립트 테크닉 책 읽기(실패)
7. 다음주 계획

---

토요일 할일

• 1. slice 코드 가독성 개선

• 2. entrance 부분 코드 가독성과 네이밍 개선

• 3. css 구조 설계

3주차 계획

이 앱을 언제 사용하나요?

친구에게 추억이 담긴 응원, 감사 메시지를 남기고 싶을때 사용합니다.

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

엽서를 받은 사람은 메시지와 사진을 첨부하여 엽서를 제작하며, 제작단계 마지막에 미리보기로 만들어질 엽서를 미리볼 수 있습니다. 만든 후에는 링크가 나오며, 링크를 친구에게 공유하면 친구는 해당 링크로만 작성된 엽서를 확인할 수 있습니다. 엽서를 작성하기 위해서는, 다른 사람으로 부터 엽서를 받아야 작성할 수 있습니다. 받은 엽서로 약 5개 정도의 엽서를 다른 사람에게 작성할 수 있습니다.

이번주가 지나면 사용자는 무엇을 할 수 있나요?

1. 메인페이지를 볼 수 있다.(다른 사람들이 작성한 엽서 그리고 내가 받은 엽서로 접근 가능)
2. 변경된 엽서 작성 페이지를 볼 수 있다.
3. 디자인된 앱 프런트엔드 전체를 볼 수 있다.

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

• css 디자인 설계
• 엽서 미리보기 디자인 적용
• 엽서 작성하기 디자인 적용
• 메인 페이지 제작
• 간단한 테이블 설계

mysql(rds)에 입력시 한글 깨짐 문제가 생깁니다.

검색 해서 찾아본 방법으로 적용하고 설정을 확인했는데 정상적으로 동작하지 않네요.. 계속 한글이 ??? 로 표시됩니다.

1차 배포 & 피드백 현황

1차 배포 현황

1. 사용자는 상대방으로 부터 받은 메시지에 있는 url을 통해 엽서 입장 페이지에 접근할 수 있다.
2. 사용자는 엽서를 확인할 수 있다.
3. 사용자는 사진과 메시지를 넣어 엽서를 작성할 수 있다.
4. 사용자는 작성한 엽서를 미리보기를 통해 먼저 확인할 수 있다.
5. 사용자는 작성 완료한 엽서의 링크를 복사하여 친구에게 전송할 수 있다.

피드백

1. 비밀 메시지가 헷갈린다.
   a. 엽서가 비공개로 작성될 경우 비밀 메시지가 무엇인지 헷갈린다. 비밀번호 같은데 이름을 비밀번호로 바꿔야할 것같다.
   b.엽서가 비공개로 작성될 경우 비밀 메시지를 입력 해야 하는데 입력해야될게 비밀메시지인지 몰랐다. 서로만의 아는 메시지로 의미를 두고싶다면 '접선 암호' 라는 식으로 해도 될것 같다.

2. 엽서 앞면에 우표로 사진이 붙어 있는데, 우표 이미지로 꾸며도 좋을 것 같다.

3. 엽서 작성시 이미지 업로드를 선택 적으로 할 수 있었으면 좋겠다. 이미지를 업로드 하지 않을 경우엔 엽서 페이지에서 기본 이미지가 보여졌으면 좋겠다.

4. 옆서페이지에 들어갔을때 뒷면이 있는지 몰랐었다.

결정 사항

• 1. 엽서 암호로 변경

• 2. 엽서 앞면에 사진을 우표 이미지로 꾸민다.