배포 링크: https://ro1ling.netlify.app/
- 추억의 롤링페이퍼 서비스입니다.
- 자신만의 롤링페이퍼 페이지를 만들고 친구에게 공유할 수 있습니다.
- 친구의 롤링페이퍼에 반응과 메세지를 남길 수 있습니다.
| 김서영 | 김세민 | 류혜원 | 장익재 | 홍서하 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| @ssseeo0 | @sermain2 | @un0211 | @Ik5606 | @hongseoha |
| 메인페이지, 기능(3-1, 5-3/4/5), 버그 수정 |
메세지 생성 페이지, 이미지 최적화 |
전체보기 페이지, 롤링페이퍼 페이지, 버그 수정 |
롤링페이퍼 생성 페이지 | 롤링페이퍼 목록 페이지 |
| 회의 진행, 노션 관리, UI/UX 개선사항 논의 |
깃허브 관리, 배포, 초기 작업 환경 설정, UI/UX 개선사항 논의 |
팀내 디자인 작업, UI/UX 개선사항 논의 |
주어진 API 사용
- 사전 작업: 2024.04.24 ~ 2024.04.30
ㄴ 기술 스택 선정, 역할 배분, 규칙 정리(팀 규칙, 코드 컨벤션, 커밋 컨벤션 등) - 페이지 구현: 2024.05.01 ~ 2024.05.10
- 추가 작업: 2024.05.11 ~ 2024.05.15
ㄴ 버그 해결, 추가 기능 구현 - 발표준비: 2024.05.14 ~ 2024.05.15
- 코어 타임: 오후 2시 ~ 6시를 코어 타임으로 정해 협업이 원활하도록 했습니다.
- 데일리 스크럼: 매일 오후 2시 데일리 스크럼을 진행하여 작업 상황을 공유했습니다.
- 어제 한 일, 오늘 할 일
- 작업 과정에서 어려운 점
- 기존 요구 사항에서 개선할 만한 사항
- PR 리뷰
- 작업 단위로 PR을 올려 작업을 공유했습니다.
- 다른 사람의 작업이 팀 규칙을 잘 지켰는지 확인하고 리뷰를 남겼습니다.
- 한 명 이상의 승인을 받고 PR을 머지했습니다.
- 팀 규칙
ro1ling
├──.github
├── node_modules
├── public
├── src
├─ apis
├─ assets
├─ icons
└─ images
├─ components
├─ common
├─ ...Page
├─ constants
├─ pages
├─ styles
├─ utils
├─ App.js
└─ index.js
├── .gitignore
├── README.md
├── jsconfig.json
├── package-lock.json
└── package.json
- 구경해보기 버튼을 클릭하면 롤링페이퍼 목록 페이지로 이동합니다.
- 모니터 환경에서는 캐러셀로 페이지를 확인하실 수 있습니다.
- 태블릿 환경에서는 슬라이드로 페이지를 확인하실 수 있습니다.
- 전체 롤링페이퍼 목록을 볼 수 있는 페이지입니다.
- 목록 끝에 다다르면 무한스크롤로 롤링페이퍼를 더 불러옵니다.
- 롤링페이퍼 전체보기 페이지에서의 검색 기능입니다.
- 롤링페이퍼 이름에 해당하는 롤링페이퍼가 조회됩니다.
- 롤링페이퍼 생성하기 페이지입니다.
- 생성하기 페이지는 롤링페이퍼를 만드는 기능을 담당합니다.
- 받는 사람의 이름을 입력할 수 있는 입력란이 제공됩니다.
- 이름을 입력하지 않고 포커스 아웃을 할 경우, 에러 메시지가 표시됩니다.
- 이름을 입력하면 생성하기 버튼이 활성화됩니다.
- 배경화면을 선택할 수 있는 기능이 있습니다.
- 컬러 또는 이미지 버튼을 눌러 컬러나 이미지 둘 중 하나를 선택할 수 있습니다.
- 클릭하여 선택된 배경화면에는 체크 이미지가 표시됩니다.
- 모든 필수 정보를 입력하고 생성하기 버튼을 클릭하면, 롤링페이퍼가 생성됩니다.
- 생성된 롤링페이퍼는 데이터베이스에 저장됩니다.
- 생성된 롤링페이퍼의 수신자 이름을 기반으로 해당 롤링페이퍼의 페이지로 이동됩니다.
- 생성된 개인별 롤링페이퍼 페이지입니다.
- 이름과 다른 사용자들의 반응 및 메세지를 확인하고 링크를 공유할 수 있습니다.
- 메시지는 목록 끝에 다다르면 무한스크롤로 더 불러옵니다.
- 상단 내비게이션에서 다른 사람들의 반응을 확인할 수 있습니다.
- 추가 버튼을 클릭하면 반응을 추가하고 확인할 수 있습니다.
- 외부를 클릭하면 창이 닫힙니다.
- 상단 내비게이션에서 링크를 공유할 수 있습니다.
- 카카오톡 공유를 클릭하면 카카오톡과 연결되어 친구에게 공유할 수 있습니다.
- URL 공유를 클릭하면 URL이 복사됩니다.
- 외부를 클릭하면 창이 닫힙니다.
- 메세지 카드를 클릭하면 모달을 통해 메세지를 상세 조회할 수 있습니다.
- 모달 외 영역과, 확인 버튼을 클릭하면 모달창이 닫힙니다.
- 별도의 로그인 기능이 없어 누구나 삭제할 수 있습니다.
- 삭제하고 싶은 메세지 카드를 선택해 여러 개 삭제할 수 있습니다.
- 삭제할 메세지를 한 개 이상 선택 시 삭제하기 버튼이 활성화됩니다.
- 메세지 삭제 후 해당 롤링페이퍼 페이지로 이동합니다.
- 별도의 로그인 기능이 없어 누구나 삭제할 수 있습니다.
- 롤링페이퍼 삭제 후 롤링페이퍼 리스트 페이지로 이동합니다.
- 메세지 보내기 페이지에서 이름과 프로필 이미지, 텍스트, 폰트 등을 선택하여 메세지 카드를 생성할 수 있습니다.
- 메세지 보내기 페이지에서 이름과 텍스트를 입력하지 않으면 생성하기 버튼이 비활성화 됩니다.
- 유효하지 않은 주소로 접근하는 경우 404 페이지로 이동합니다.
- 원인: 롤링페이퍼 수가 많아지면 캐러셀, 가로 스크롤로 원하는 롤링페이퍼를 찾기 어렵다.
- 개선방안: 전체 롤링페이퍼를 확인할 수 있는 페이지를 만들고 원하는 페이지를 검색할 수 있는 기능을 추가했다.
- 원인: 여러개의 메시지를 삭제하고 싶을 때 일일이 확인하면 번거롭다.
- 개선방안: 삭제하고 싶은 메세지를 모두 선택하고 삭제할 수 있도록 하여 확인의 번거로움을 줄였다.
- 원인: 브라우저의 뒤로가기 버튼은 이전 페이지로만 이동한다.
- 개선방안: 롤링페이퍼 페이지에서는 목록 페이지로 이동하는 버튼을, 롤링페이퍼 수정 중에는 수정을 취소하는 버튼을 추가했다.
- 사용자 경험 개선을 위해 클릭 가능한 요소(버튼, 카드)의 크기가 변하도록 애니메이션 효과를 추가했다.
- 서버에서 데이터를 불러오는 동안 로딩중이라는 것을 알기 쉽도록 스켈레톤을 추가했다.
팀원들과 함께 코드 컨벤션을 직접 정하고 정해진 규칙을 준수하며 코드를 작성하는 능력을 키울 수 있었습니다. 정해진 컨벤션 덕분에 작업 진행이 원활해졌고, 프로젝트 초기에 요구사항 분석과 코드 컨벤션의 중요성을 깊이 깨닫게 되었습니다. 또한, 혼자 문제를 해결하기 위해 노력하는 것도 중요하지만, 팀원들과 함께 문제를 해결하며 모르는 것을 파악하고 질문하는 자세를 기르는 것도 중요하다는 것을 느꼈습니다. 이 과정에서 다른 팀원의 코드를 이해하는 능력과 자신의 지식을 명확하게 설명하는 능력도 향상시킬 수 있었습니다.더불어, 기존 요구사항에 더해 사용자 경험(UX)을 개선할 수 있는 추가 기능을 고안하면서 프로젝트의 완성도를 높일 수 있었습니다.
이 프로젝트를 통해 React를 활용한 개발과 협업의 중요성을 몸소 느꼈습니다. 사용자와의 상호작용을 고려한 UI 구성부터 데이터의 유효성 검사와 서버와의 통신까지 다양한 측면에서 경험을 쌓을 수 있었습니다. 특히, React와 관련된 기술과 개발 환경에 대해 보다 깊게 이해하고, 팀원들과의 소통과 협업 능력을 향상시킬 수 있었습니다.
프로젝트 초기에 규칙과 기술 스택을 잘 설정해 두는 것의 중요성을 실감했습니다. 지금까지는 기존에 세팅된 환경에 적응하는 경험만 해서, 직접 규칙을 설정하는 것은 이번이 처음이었습니다. 어디서부터 어디까지를 규칙으로 삼을지부터 정해야해서 막막했는데, 함께 논의하여 잘 해낸 것 같습니다. 정해놓은 규칙 덕분에 큰 문제 없이 협업이 가능했다고 생각합니다.
계획 단계에서는 빠르게 구현을 완료하고 유저 테스트를 통해서 더 개선해 볼 생각이었는데, 구현이 계획보다 늦어져서 그러지 못한 점은 아쉽습니다. 그러나 유저 경험을 고려하여 요구사항 외 개선할 부분이나 추가로 있었으면 하는 기능을 논의하고 구현해낸 점이 만족스럽습니다.
이번 롤링페이퍼 홈페이지 팀 프로젝트를 통해 웹개발의 기본을 익히는 동시에 팀워크의 중요성을 깨달았습니다. 혼자 해결하려다 작업이 지연되어 팀원들에게 피해를 끼쳤지만, 팀원들의 도움 덕분에 문제를 해결할 수 있었습니다. 이 경험을 통해 협력과 소통의 중요성을 깊이 느꼈고, 앞으로는 더 효율적으로 시간 관리를 하며 팀과 적극적으로 소통하겠습니다.
혼자 작업할 때보다 훨씬 즐거웠습니다. 초반에 구현하고자 하는 요구사항에 그치지 않고, 개선할 부분을 계속해서 찾고자 노력하고 어느정도 구현했다는 부분이 만족스러웠습니다. 문제 해결을 위해 다방면으로 알아보고 노력하는 것도 물론 좋지만, 함께 기간을 정해두고 작업하는 것이므로, 고민하고 있는 부분이 다른 사람에게 있어서는 금방 해결할 수 있는 것이라면 시간을 낭비하지 않고 도움을 청하는 게 훨씬 도움이 된다고 느꼈습니다.
리드미 구성 참고: https://github.com/likelion-project-README/README