코드잇 부트캠프 스프린트 프론트엔드 6기 : Part2 10팀 1차 프로젝트
- 배포 URL : https://rolling-sprint.vercel.app/
- 프로젝트 노션 : https://sprint-part2-10.notion.site/Rolling-e0ec29ff878c43a29ad085250d0d2be8?pvs=4
- 어릴 적 써봤던 롤링페이퍼를 온라인으로 쉽게 작성할 수 있는 서비스입니다.
- 로그인 없이 나만의 롤링페이퍼를 생성하고, 해당 링크를 나에게 메시지를 남겨줬으면 하는 사람에게 공유할 수 있습니다.
- 롤링페이퍼에 글을 남기고 싶은 사람은 수신자에게 메시지를 쓸 수 있고, 헤더의 이모지를 추가해 수신자에 대한 감정을 표현할 수 있습니다.
팀원 | 역할 | 개발 내용 |
---|---|---|
곽서연 | 발표자료 제작 | 메시지카드/리스트, 글로벌헤더 |
김영운 | 발표 | 메인페이지, 롤링페이퍼 생성폼, 공용 버튼 UI |
김용인 | 시연영상 제작 | 롤링페이퍼 헤더, 카카오 SDK 공유 기능 |
김지윤 | 팀장&PM | API 함수 모음, 메시지카드 생성폼, 롤링페이퍼 편집 기능, 다크 테마 |
임진조 | 배포 | 롤링페이퍼 카드/리스트, 롤링페이퍼 헤더(Message Counter), 페이지 전환 애니메이션 |
![](https://private-user-images.githubusercontent.com/64190056/331169875-31f0b6b3-2b6c-490e-9a64-38e9f2773c1e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzExNjk4NzUtMzFmMGI2YjMtMmI2Yy00OTBlLTlhNjQtMzhlOWYyNzczYzFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFiMWVhYTI4NDE4YzVkZDQ2YWVhMTUxZTMzZTVkMzM3ZWQyZDJjOGFjODBkOWY0YWQ4ODk0NWI3NWFkNDY1MmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.dtKnqzQVniJZSw-7wdhZZ2QDQiBUFjUaWsFpHvPiwCU)
![](https://private-user-images.githubusercontent.com/64190056/331170480-2d18eda8-dfad-405a-8e12-0e2a0d325c49.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzExNzA0ODAtMmQxOGVkYTgtZGZhZC00MDVhLThlMTItMGUyYTBkMzI1YzQ5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTllMTQzNTE3NWRjMzg4MmQyN2EwYTBlNDBkOWY0MWE2MDk4NmYzMjY2NjlkNTI1YWMyNGM3YjkyMTA3ZWE1Y2ImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.PL5ql9byCy4nyEPmEEzBrLq756gGRVb_BQ2P7GguyEU)
![](https://private-user-images.githubusercontent.com/64190056/331171780-36ff03cf-1251-4b1c-a43f-a6b63c4b6ef1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzExNzE3ODAtMzZmZjAzY2YtMTI1MS00YjFjLWE0M2YtYTZiNjNjNGI2ZWYxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU1MGJlNjMwNWI2ZWE3Nzg3ZTE0ZDE5MDVlNGViMWJiMWQ0NWY1NDJlMDU2YjExZjFkMjUxZjc0YWI2ZjU3ZGQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.5zslqbKsSj3F3CopmX5z7DEKM3oCmbS1vHvo0sXt2rA)
- React를 사용해 유지보수와 재사용성을 고려했습니다.
- 컴포넌트 단위로 작업을 나누어 역할 분담에 용이했습니다.
- 롤링페이퍼 헤더의 하위 컴포넌트들이 중복으로 사용되었고, 컴포넌트를 통한 리소스 절약이 가능했습니다.
- CSR을 채택해 페이지 간 화면 전환을 부드럽게 했습니다.
프로젝트 구조
src % tree -d
.
├── assets
│ ├── fonts
│ ├── icons
│ └── images
├── components
│ ├── animation
│ ├── layout
│ └── ui
│ ├── primary-button
│ ├── rolling-header
│ │ ├── best-emoji
│ │ ├── emoji-add
│ │ ├── emoji-drop-down
│ │ ├── message-counter
│ │ ├── profile-preview
│ │ ├── rolling-paper-name
│ │ └── share-drop-down
│ └── text
├── hooks
├── pages
│ ├── home
│ ├── message-post
│ │ └── components
│ │ ├── DropDownBox
│ │ ├── content-editor
│ │ ├── drop-down
│ │ ├── message-form
│ │ └── profile-selector
│ ├── my-paper
│ │ └── components
│ │ ├── add-message
│ │ ├── message-card
│ │ ├── message-list
│ │ ├── modal
│ │ └── my-page-header
│ ├── paper-edit
│ ├── paper-list
│ │ └── components
│ │ ├── card-list
│ │ └── rolling-paper-card
│ └── paper-post
│ └── components
│ ├── check-box
│ ├── paper-form
│ ├── select-box
│ └── toggle-button
├── services
└── styles
49 directories
- PR을 올리면 최소 1명의 코드리뷰가 있어야
main
브랜치에 병합되도록 보호 규칙을 정했습니다. - 각 PR들을
main
에 병합할 때 Squash and Merge로 메인 브랜치의 히스토리를 깔끔하게 유지하도록 했습니다.
- 코드리뷰 중 컨벤션을 안 지킨 경우가 많아 가독성이 안좋은 것을 느꼈으며, 프로젝트 중반에 코드 컨벤션에 맞게 리팩토링했습니다.
- State값과 useEffect훅 사용을 줄이기 위해, 데이터 패치 로직을 커스텀 훅으로 분리했습니다.
- 관련 PR 링크
![](https://private-user-images.githubusercontent.com/64190056/337983634-9ffd20c2-c8f7-4cac-865e-dad5c5f44f8a.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzc5ODM2MzQtOWZmZDIwYzItYzhmNy00Y2FjLTg2NWUtZGFkNWM1ZjQ0ZjhhLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE0N2YyOTBiZjgyYWQ3YjQ4NzRkODY1ODkyMzFiYTRmMDEwM2Q2MDM0MzkzNTljYmI4NjQzNzM1ZWZiY2QwNjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Qd2O3VUdYY9NwsT8Jz3zKitcVTRgrKRIjAzKUeFaxac)
- 서비스 메인 화면으로, 서비스 설명 및 롤링페이퍼 리스트를 구경할 수 있습니다.
![](https://private-user-images.githubusercontent.com/64190056/337983667-02de1774-a6a4-40f8-aeba-1a5f22c372af.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzc5ODM2NjctMDJkZTE3NzQtYTZhNC00MGY4LWFlYmEtMWE1ZjIyYzM3MmFmLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE2N2NlMmNkYzUxZTAxZTNlYTg0OGY2OGZjMmI0YzJlM2VjZmFlZWZjZjg3YmZjODFkYWNiYjRmNjc4OGIwZjImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.gZPCrhDcIVbD06eDmUf9PrNeefFxzHDvp8hPCoRatE8)
- 롤링페이퍼를 생성할 수 있으며, 이름을 필수로 입력하면 롤링페이퍼 배경 이미지를 선택할 수 있습니다.
![](https://private-user-images.githubusercontent.com/64190056/337985028-936ee81a-e258-4f66-8226-ef05ae9a39e3.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzc5ODUwMjgtOTM2ZWU4MWEtZTI1OC00ZjY2LTgyMjYtZWYwNWFlOWEzOWUzLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJlYjg5NGJhMTIxMGU2Y2ZmZDYwYmI1ZTdlNjgyN2JkZTExMjI0MTI4MjQ5ODBjZjkyYmNjNzlkNjBjZTQ3YmEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.kv2ki_LVkk4P_65T0pfBAHaCjX5vFujbgTOxjC7TD1Y)
- 롤링페이퍼에 메시지를 작성할 수 있으며, 이름과 메시지 글을 필수로 입력합니다.
- 프로필 이미지와 폰트를 설정할 수 있습니다.
![](https://private-user-images.githubusercontent.com/64190056/337985108-7a0a77e6-a133-4ddc-b56b-56cf6c61fa28.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzc5ODUxMDgtN2EwYTc3ZTYtYTEzMy00ZGRjLWI1NmItNTZjZjZjNjFmYTI4LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWYwNTZhYmRkOGU0ZmRkZjhhODU5OWIyYjMzNzhhOTFlZTYxNDUyNTNiMjBlZGYzM2ViYTM4MWI4YmVhNTAxZjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Mb4zEItKu2ZQCvntacq8s2cekvhdEOPJbY-9DK0UJhw)
- 메시지 카드, 롤링페이퍼 페이지를 삭제할 수 있습니다.
![](https://private-user-images.githubusercontent.com/64190056/337985115-0090b19e-1fc6-4d9d-bef0-6ea93f241342.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzc5ODUxMTUtMDA5MGIxOWUtMWZjNi00ZDlkLWJlZjAtNmVhOTNmMjQxMzQyLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWIxZTljMzgyNzY0NGVhNjA2ZGFlZjYyMTY4NTUzYjJlMzIyODE0ZjI1MzNlNzA2MmM0NDc4NDBlZTQ3MDMzMDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.MwjQyOqGxoN-AmFfmEphvTPxryh65WuOEWlOB3wydXw)
- 이모지 피커를 통해 롤링페이퍼에 이모지를 추가할 수 있습니다.
- 카카오톡 계정과 연동해 롤링페이퍼 링크를 공유할 수 있습니다.
![](https://private-user-images.githubusercontent.com/64190056/337985120-2fec9dd7-5af0-4866-a112-9e452eca0896.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ0MzA2NzksIm5iZiI6MTcyNDQzMDM3OSwicGF0aCI6Ii82NDE5MDA1Ni8zMzc5ODUxMjAtMmZlYzlkZDctNWFmMC00ODY2LWExMTItOWU0NTJlY2EwODk2LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIzVDE2MjYxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZiNTkxZTcxMjZhYjgwNzMyMTJiOGFjNGEwNzM2ODBhOTdhYmJjMmVjOGJmYjg3Nzk2ZTQ1NDAzMTYxY2E4MzImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.llVM8iCSI3J-xrmP2hdE-cpVcqGygzEWJxpSfkIbRss)
- 헤더의 아이콘으로 다크/라이트 모드를 토글할 수 있습니다.
- 설정한 모드는 로컬 스토리지에 저장되어, 브라우저에 다시 접속해도 설정한 모드가 유지됩니다.