배포 URL : https://rocknrolling.netlify.app/
공유 팀 노션 : https://www.notion.so/Rolling-in-the-deep-296a95aa05b946869d046e5fdfd462e9?pm=c
목차
- 프로젝트 소개
- 팀원 소개 및 역할 분담
- 채택한 기술 및 브랜치 전략
- 프로젝트 구조
- 프로젝트 일정
- 페이지별 시연 및 기능 설명
- 프로젝트 이슈 및 트러블 슈팅
- 개선 사항 및 추가 기능
- 프로젝트 후기
- 추억의 롤링 페이퍼를 웹 상에서도 즐길 수 있는 플랫폼인 '롤링' 서비스입니다.
- 롤링페이퍼를 만들고 친구에게 공유할 수 있습니다.
- 친구의 롤링페이퍼에 반응과 메세지를 남길 수 있습니다.
🕓 코어 타임: PM 2:00 - PM 6:00
(안 되는 날이 있을 경우 최소 하루 전까지 말해주기)
🕓 스크럼 시간: PM 2:00
최대 15분 이내 마치기
- 지난 데일리 스크럼부터 지금까지 내가 완수한 사항
- 다음 데일리 스크럼까지 내가 완수해야하는 사항
- 현재 장애가 되고 있는 (곤란하고 어려운 것) 사항
- Front :
HTML, React, SCSS - Back-end : 제공된
API활용 - 버전 및 이슈관리 :
Github, Github Project - 협업 툴 :
Discord, Notion, Github, Git - 서비스 배포 환경 :
Netlify - 디자인 : Figma 디자인
😎 최민경 (팀장) @mxkxx1011
- 페이지
- 롤링페이퍼 메시지 list 페이지 (/post/id, /post/id/edit 페이지)
- 컴포넌트
- 카드, 카드리스트, 옵션, 스켈레톤(카드, 카드리스트) 컴포넌트
- 기능
- 메시지 리스트 무한스크롤 적용
- 페이지 삭제, 선택 삭제, 전체 선택 삭제
- 이모지 post 요청 기능
- 카카오톡 공유, URL copy
- 역할
- 깃허브 관리, 배포, 초기 세팅(컬러, 폰트), 코드리뷰를 통한 개선사항 논의
🥔 김광호 (팀원) @ouranos1
- 페이지
- 롤링페이퍼 list 페이지 (/list 페이지)
- 컴포넌트
- 텍스트필드, 드롭다운 컴포넌트
- 기능
- 통합 API 함수 작성
- 공통 Axios 함수 작성
- Recipient, Message, Reaction API 작성
- API 에러처리
- 카드 리스트 컴포넌트 캐러셀 형식 구현
- 통합 API 함수 작성
- 역할
- 발표
😆 박재현 (팀원) @reenact11
- 페이지
- 롤링페이퍼 메시지 작성 페이지 (/post/id/message 페이지)
- 컴포넌트
- 헤더, 라벨, 에러메시지 컴포넌트
- 기능
- input 유효성 검사 및 에러 처리
- 무작위 이름 생성 기능 추가
- 텍스트 에디터 모듈 폰트 색상 선택 기능 추가
- 메시지 추가 post 요청 기능
- 역할
- 코드리뷰를 통한 개선사항 논의
- git 브랜치 전략 정리
- 프로젝트 계획 수립
🤩 오소영 (팀원) @Ocean423
- 페이지
- 롤링페이퍼 작성 페이지 (/post 페이지)
- 컴포넌트
- 모달, 토스트, 뱃지 컴포넌트
- 기능
- input 유효성 검사 및 에러 처리
- 롤링페이퍼 추가 post 요청 기능
- 토글 버튼에 따른 옵션 이미지 불러오기
- 배경 이미지 랜덤 버튼 추가
- 역할
- 디자인 담당
😵💫 정한주 (팀원) @HanjuJung
- 페이지
- 랜딩 페이지 (/ 페이지)
- 컴포넌트
- 기본 버튼
- 화살표, 휴지통, 플러스 버튼
- 버튼 토글 컴포넌트
- 기능
- 카드리스트 hover 애니메이션 추가
- nesting(중첩)을 통해 HTML 구조와 유사한 방식으로 스타일을 작성할 수 있는 scss를 선택했습니다.
- scss의 장점
- 변수를 사용하여 색상, 폰트 크기, 간격 등의 값을 저장하고 재사용할 수 있습니다.
- 반복되는 CSS 코드 조각을 믹스인으로 정의하고 필요할 때마다 호출하여 사용할 수 있습니다
- 조건, 반복문 및 연산 기능을 제공해 복잡한 스타일 규칙을 간단하게 정의할 수 있습니다.
- 코드 스타일에 대한 일관성을 쉽게 유지하고 스타일 컨벤션을 자동적으로 관리하기 위해 eslint와 prettier를 사용했습니다.
- 기타 컨벤션은 코드 컨벤션을 참고했습니다.
- github flow를 기반으로 개발에는 develop과 feature브랜치를 사용했습니다.
- main : 배포단계에서 사용하는 브랜치로, 작업이 끝난 후 develop에서 main으로 머지합니다
- develop : 개발단계에서 main 브랜치의 역할을 하는 브랜치로 항상 최신 내역을 유지하고 있으며, feature 브랜치로부터 작업이 끝나서 코드리뷰를 마친 pr은 develop으로 머지합니다.
- feature : 특정 기능을 개발하기 위한 브랜치로 develop으로 부터 분기하여 사용해, 개발 과정에서 다른 기능이나 버그 수정 작업과 충돌 없이 개발을 진행하도록 했습니다.
📦Rolling
┣ 📂node_modules
┣ 📂public
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┣ 📂fonts
┃ ┃ ┣ 📂images
┃ ┃ ┗ 📂styles
┃ ┣ 📂components
┃ ┃ ┣ 📂card
┃ ┃ ┣ 📂header
┃ ┃ ┣ 📂modal
┃ ┃ ┣ 📂option
┃ ┃ ┣ ...
┃ ┣ 📂constants
┃ ┣ 📂context
┃ ┣ 📂data
┃ ┃ ┣ 📜CallAPI.jsx
┃ ┣ 📂hooks
┃ ┣ 📂pages
┃ ┃ ┣ 📂home
┃ ┃ ┣ 📂list
┃ ┃ ┣ 📂message
┃ ┃ ┣ 📂postmessage
┃ ┃ ┣ 📂postpage
┃ ┃ ┣ 📜Main.jsx
┃ ┃ ┗ 📜NotFoundPage.jsx
┃ ┣ 📂utils
┃ ┃ ┣ 📜FormatDate.jsx
┃ ┃ ┣ 📜Scroll.jsx
┃ ┃ ┣ ...
┃ ┣ 📜App.jsx
┃ ┗ 📜index.jsx
┣ 📜.env
┣ 📜.eslintrc.json
┣ 📜.gitignore
┣ 📜.prettierignore
┣ 📜.prettierrc.json
┣ 📜jsconfig.json
┣ 📜package-lock.json
┣ 📜package.json
┗ 📜README.md
- 6/7 주제 선정
- 6/8 - 6/9 상세 분석 및 컨벤션 수립
- 6/10 폴더 구조 컨벤션 수립
- 6/10 - 6/12 R&R 분배 및 컴포넌트 구현
- 6/12 - 6/14 웹 페이지 기본 퍼블리싱 구현 및 1차 점검
- 6/15 - 6/18 페이지 기본 기능 완성 및 2차 점검
- 6/19 - 6/21 추가 기능 구현 및 3차 점검
- 6/22 리팩토링
- 6/23 발표 자료 제작 및 최종 배포
- 사이트 소개 배너 배치
- 버튼 클릭시 알맞은 페이지로 이동
- 반응형 구현 (모바일/태블릿/PC)
- 전체 cardlist 데이터를 정렬 조건을 통해 인기순과 최신순 정렬 배치
- 캐러셀을 통한 데이터를 배치해 자연스러운 데이터 이동 기능 구현
- 슬라이드 방식과 방향 버튼을 이용해 리스트 이동
- 받는 사람을 입력하지 않았을 경우 버튼 비활성화 & 에러 메시지 표시
- 컬러/이미지 토글에 따라 배경 옵션 컴포넌트 변경
- '이미지' 옵션의 [이미지 셔플] 버튼을 누르면 랜덤 배경 표시
- 모두 입력하고 '생성하기'버튼을 누르면 /list 페이지로 이동 후 생성된 롤링페이퍼 표시
- 메시지 클릭 시 모달로 확인 가능
- 추가 버튼 클릭 후 이모지를 눌렀을 경우 바로 화면에서 이모지가 증가된 것을 확인 가능
- 총 리액션이 8개 넘었을 경우 +버튼을 통해 모든 리액션 확인 가능
- useInview를 통해 ref와 inview를 사용해 스크롤 하단에 관찰한 ref를 설정해 ref와 만났을 경우 데이터를 더 불러오는 무한 스크롤 기능 구현
- 기본 기능인 휴지통 버튼을 눌렀을 경우 삭제되고 다시 메시지 리스트를 보여주는 /post/id 페이지로 이동
- 롤링 페이퍼를 삭제하고 싶을 경우 페이지 삭제를 눌러서 삭제
- 페이지 삭제를 했을 경우 롤링페이퍼 리스트 페이지로 이동
- 삭제하고 싶은 메시지를 선택해서 삭제하기 버튼을 누르면 삭제 후 메시지 리스트 페이지로 이동
- 전체 선택을 누르면 모든 메시지가 선택되고 삭제하기 버튼을 누르면 삭제 후 메시지 리스트 페이지로 이동
- 이름과 텍스트를 입력하지 않으면 생성하기 버튼이 비활성화
- 무작위 이름 생성 버튼을 누르면 익명의 @@@ 이름이 INPUT에 입력됨 (@@@은 동물 이름)
- 프로필 이미지 및 관계, 폰트를 선택하여 메세지를 생성
- 이상 없이 생성되었다면 롤링페이퍼 메시지 리스트 페이지로 이동
-
Git 이슈
- 프로젝트 초반 커밋에 대한 이해 부족으로 작업한 내용을 병합할 때 충돌이 자주 발생했습니다. 각 브랜치에서 같은 파일에 대해 서로 다른 변경 사항이 있을 경우, 이를 병합하는 과정에서 충돌이 발생하고 이를 해결하기위한 노력이 필요했습니다.
- Git의 기본 개념과 명령어를 충분히 이해하지 못한 상태에서 작업하다 보니, 충돌이 발생했을 때 이를 효과적으로 해결하지 못하고, 브랜치 전략 또한 제대로 활용하지 못했습니다.
- 그래서 팀 회의 시간에 Github Flow 브랜치 전략을 활용하기로 결정하고,
feature,develop브랜치 등 브랜치의 역할을 명확히 구분하여 사용하였습니다. 또한 매일 회의 시간인 2시에 정기적인 병합을 통해 병합 충돌을 최소화하였고 최신 상태를 유지하는 노력을 통해 해당 이슈를 해결할 수 있었습니다.
-
개인적인 이슈
- 김광호 :
- 캐러셀이라는 방식을 모르고 cardlist의 구현을 진행하여 스크롤링을 기본적인 css 통해 구현하여 요구사항에 만족시키기 어려웠으나 멘토님과의 소통을 통해 캐러셀이라는 새로운 개념을 배워 다시 구현하는 과정을 거치면서 많은 시간과 노력을 소모했다.
- 캐러셀을 알고 구현에 있어 라이브러리 없이 구현 후 조건에 부합하여 라이브러리로 다시 구현해 2배의 시간과 노력을 소모했다.
- 최민경 :
- 데이터를 불러올 때 어떤 경우엔 데이터가 잘 표시되는데 어떤 경우엔 데이터가 중간이 잘리는 경우가 있었다.
- useEffect에서는 비동기 작업들이 원하는대로 동작하지 않을 수 있다는 것을 깨달았고 그 깨달음을 통해 일관적인 UI를 표시할 수 있게 변경하였다.
- 김광호 :
-
스켈레톤 컴포넌트
- 개선 이유 : 로딩중일때 빈 화면이 뜨는 것이 UI/UX 측면에서 이상하게 느껴졌다.
- 개선 방안 : 로딩이 완료되고 배치되는 컴포넌트들과 위치를 맞춰 사용자에게 로딩 후 화면을 예측할 수 있게 했으며, 스켈레톤을 통해 로딩 중임을 알 수 있도록 표현했다.
-
선택 삭제
- 개선 이유 : 일일히 사용자가 휴지통 버튼을 통해 삭제를 하게 된다면 번거로운 페이지 이동도 늘어나고 버튼 클릭도 늘어나니 UX 측면에서 비효율적이다.
- 개선 방안 : 사용자가 원하는 메시지를 체크박스를 통해 삭제할 수 있게 하였고 해당 페이지의 모든 메시지를 삭제하고 싶다면 전체삭제 체크박스를 통해 삭제할 수 있게 했다.
-
무작위 이름 생성
- 개선 이유 : 롤링페이퍼에 메시지를 익명으로 남기고 싶을 때 의미없는 문자열을 넣는게 번거롭다.
- 개선 방안 : input에 귀여운 동물들의 이름을 랜덤으로 넣어주는 기능을 만들어 편리하게 익명으로 작성할 수 있도록 버튼을 추가했습니다.
-
사진 랜덤 선택
- 개선 이유 : '롤링페이퍼 만들기' 페이지의 옵션 선택 부분 효과가 밋밋하고, 배경 이미지 소스가 더 많으면 좋겠다는 생각이 들어 추가 기능을 개선하게 되었습니다.
- 개선 방안 : '이미지 셔플' 버튼을 클릭하면, 랜덤으로 이미지 배경 옵션을 다시 불러오는 기능을 구현했고, 버튼과 배경 옵션 아이템 Hover시, 애니메이션 효과도 추가해 좀 더 생동감있는 효과를 주었습니다.
첫 협업이라 깃과 프로젝트에 대한 막연한 두려움이 있었습니다.
하지만 좋은 팀원들을 만나 각자 맡은 부분에 대해 회의나 자주 소통하면서 진행했기 때문에 프로젝트 진행에 큰 어려움은 없었습니다.
초반에 머지할 때 충돌이 자주 발생해 깃에 대한 어려움은 있었지만, 멘토님께 같이 여쭤보고 함께 소통하면서 해결해 나가 중후반부에는 깃에 대한 어려움도 없었습니다.
코드 리뷰를 남겼을 때, 팀원들이 잘 수용해 수정해 주셔서 감사했고, 부족한 팀장이었지만 모두의 협력 덕분에 프로젝트를 무사히 완성할 수 있어 기뻤습니다.
협업에 있어서 소통이 제일 중요한 걸 다시 한 번 체감하게 되었고, 첫 팀 프로젝트를 이렇게 좋은 경험으로 마무리했기 때문에 다음에도 잘 해낼 수 있을 것 같습니다.
첫 프로젝트 이다보니 익숙하지 않은 컨밴션과 전략으로 인해 초반 부분 다양한 실수와 수정이 많았습니다.
하지만 꾸준하게 문제점을 지적해주는 팀원분들 덕분에 점점 발전해 협업 방식에 익숙해 질 수 있었습니다.
또한 개발에 자잘한 고민과 방향성을 팀원들과 상의를 통해 보다 나은 방법과 방향을 정해 개발 시간과 노력에 많은 도움을 받았습니다.
4팀 최고!!👍
팀원들과 함께 컨벤션을 정하고 협업에 필요한 규칙들을 하나하나 만들어가는 경험이 새로웠고,
정해진 규칙들이 프로젝트 기간 동안 편하게 작업하는데 도움이 많이 되어 신기하면서 뿌듯했습니다.
프로젝트 기간 동안 팀원들과 적극적인 의견 교류를 통해 협업 능력을 키울 수 있었고, 코드리뷰를 주고 받으며 더 성장할 수 있었습니다.
좋은 분위기 속에서 멋진 팀워크를 보여준 팀원들 덕분에 정해진 일정보다 여유롭게 프로젝트를 잘 마칠 수 있었던 것 같아 만족스럽습니다.
이번 프로젝트를 통해 초기 세팅과 컨벤션 작업의 중요성을 알게 되었습니다.
초반 세팅을 잘 다져놓아서 수월하게 작업을 할 수 있었어요 🙂
그리고 팀원들과 GitHub으로 협업하는 방법을 배울 수 있어 좋았습니다.
좋은 팀원분들을 만나 이번 6월 한달의 기억이 좋은 추억으로 남을 것 같습니다.
다들 너무 고생 많으셨어요~!!
지금껏 혼자서 모든 것을 아우르던 미션과 다르게 다른 팀원과 협업하는 경험은 굉장히 새로웠다.
팀원들과 같이 협업하는 프로젝트는 내가 작성하지 않은 코드가 존재한다는 것이 가장 큰 어려움이지 않았나 싶었고,
친절하고 멋진 팀원들이 각자 맡은 코드를 잘 설명해주어 프로젝트 전반에 대한 이해가 그나마 가능했다.
서로 소통하며 하나의 목표를 향해 같이 달린다는 것이 큰 힘이 되었고 힘들기도 했지만 멋진 경험이었다.
개인적인 사유로 프로젝트에 지장이 생겨 가장 기초적인 부분을 담당해 구현을 마치고 다른 팀원들이 구현한 부분을 이해하는데 노력하려고 했다