- 추억의 롤링 페이퍼를 웹 상에서도 즐길 수 있는 플랫폼인 '롤링' 서비스입니다.
- 모든 롤링페이퍼를 한 눈에 확인할 수 있습니다.
- 본인의 롤링페이퍼 페이지도 생성해보고, 다른 사람의 페이지에 롤링페이퍼도 작성해 보세요.
- 배포 URL : https://5rolling.netlify.app/
- 개발 기간 : 2024.4.9 - 2024.4.24
├── 📄.gitignore
├── 📄package-lock.json
├── 📄package.json
├── 📦public
│ ├── 📄_redirects
│ ├── 📄favicon.ico
│ └── 📄index.html
└── 📦src
├── 📄App.jsx
├── 📄index.js
├── 📄Main.jsx
├── 📂apis
│ ├── 📄firebase.js
│ └── 📄api.js
├── 📂assets
│ ├── 📂fonts
│ ├── 📂images
│ └── 📂styles
│ └── 📄Global.styled.js
├── 📂components
│ ├── 📂AddButton
│ │ ├── 📄AddButton.jsx
│ │ └── 📄AddButton.styled.js
│ ├── 📂ArrowButton
│ ├── 📂Badge
│ ├── 📂Button
│ ├── 📂Card
│ ├── 📂CardFolder
│ ├── 📂CardSlider
│ ├── 📂ColorOption
│ ├── 📂DeleteButton
│ ├── 📂EmojiBadge
│ ├── 📂Header
│ ├── 📂HeaderService
│ ├── 📂ImageUploader
│ ├── 📂Inner
│ ├── 📂KakaoButton
│ ├── 📂LoadingModal
│ ├── 📂Modal
│ ├── 📂ProfileImage
│ ├── 📂ProfileList
│ ├── 📂SenderProfile
│ ├── 📂TextField
│ ├── 📂Toast
│ └── 📂ToggleButton
├── 📂hooks
│ ├── 📄useAsync.js
│ └── 📄useInfiniteScroll.js
├── 📂pages
│ ├── 📂ApiTestPage
│ │ ├── 📄ApiTestPage.jsx
│ │ └── 📄ApiTestPage.styled.js
│ ├── 📂HomePage
│ ├── 📂ListPage
│ ├── 📂MessagePage
│ ├── 📂NotFoundPage
│ ├── 📂PostPage
│ └── 📂RollingPage
└── 📂utils
└── 📄convertBackgroundColor.js
| 박준영 | 이보미 | 이진욱 | 정성혜 | 오다은 |
|---|---|---|---|---|
 |
 |
 |
 |
 |
| JunYoungee | Leebomi98 | kidboi666 | eqypo9 | O-daeun |
⚽ 오다은
- UI
- 페이지 : Rolling 페이지, NotFound 페이지
- 공통 컴포넌트 : 롤링페이퍼 카드, 헤더
- 기능
- 카드 리스트가 무한 스크롤로 9개씩 추가로 보여주기
- 카드를 클릭하면 상세히 볼 수 있도록 모달창 띄우기
- edit 페이지에서 버튼을 클릭하면 롤링페이퍼 페이지를 삭제하거나 롤링페이퍼 카드를 개별적으로 삭제하기
- 카카오톡 공유하기 버튼을 클릭하면 각 롤링페이퍼 페이지를 공유하기
- 접근할 수 없는 주소를 호출하면 NotFound 페이지를 보여주기
💮 이보미
- UI
- 페이지 : Home 페이지
- 공통 컴포넌트 : 롤링 페이퍼 상세 모달, 토스트 팝업, 관계 뱃지
- 기능
- Header의 버튼이 Home 페이지나 List 페이지에서만 보이기
- 버튼 클릭시 페이지 이동하기
👍 박준영
- UI
- 페이지 : Rolling페이지에서 HeaderService부분 구현
- 공통 컴포넌트 : Button, ArrowButton, AddButton, DeleteButton
- 기능
- 이모지 데이터 받아와서 순위별로 3번째까지 보여주고, 버튼 클릭시 상위 8개 이모지 보여주기
- Emoji-Picker라이브러리를 이용해서 버튼 클릭 시 이모지 선택 창 띄우고 이모지 선택 시 이모지가 데이터에 추가
- URL 복사하기 클릭 시 현재 URL이 복사되고 Toast 5초간 띄우기
🏀 정성혜
- UI
- 페이지 : List 페이지
- 공통 컴포넌트 : 드롭다운, 인풋창, 텍스트 에디터
- 기능
- 규격에 따라서 카드 슬라이드 좌우 스크롤 또는 좌우 버튼으로 넘기기
- 카드 좌측부터 채워지고, 카드 4개 초과부터 좌측 버튼 생성 되어 클릭시 카드 목록 한 페이지씩 불러오기
- 불러올 카드 데이터 없을 경우 좌우 버튼 없애기
- 카드 인기순 & 최신순으로 배열하기
- 사용자가 선택한 폰트에 따라 카드 모달 내의 글씨체 변경하기
🌱 이진욱
- UI
- 페이지 : Post 페이지, Message 페이지
- 공통 컴포넌트 : 카드폴더, 로딩모달, 프로필리스트
- 기능
- 서버에 데이터 요청 구문을 각 페이지 형식에 맞게 분리하기
- Firebase Storage를 통해 배경화면과 프로필이미지를 직접 설정하게 하기
- 배경화면 추가시 추가버튼 자리에 해당 이미지를 넣고 추가버튼은 다음 칸으로 이동하기
- 이미지를 클릭했을때 해당 이미지를 특정 미리보기 위치에도 띄워주기
- 카드 폴더의 색상에 따라 다른 디자인 적용시키기
 |
 |
|---|
- 카드 목록은 규격에 따라 좌우 스크롤과 버튼으로 넘길 수 있습니다.
- 카드는 좌측부터 채워지며 4개 초과시 우측 버튼이 생성되어 다음 페이지로 넘어갈 수 있습니다.
- 더이상 불러올 카드 데이터가 없으면 우측 버튼은 사라집니다.
- 카드는 인기순과 최신순으로 배열되어 있습니다.
 |
 |
|---|
- 카드 목록은 무한 스크롤 방식으로 보여집니다.
- 카드를 누르면 해당 카드가 확대되어 보여집니다.
- 카카오톡으로 공유하거나 URL을 복사할 수 있습니다.
- 이모지를 추가할 수 있습니다.
 |
 |
|---|
- /edit 경로로 이동하면 롤링페이퍼를 삭제할 수 있습니다.
 |
 |
|---|
- 원하는 색상의 배경화면을 선택 할 수 있습니다.
 |
 |
|---|
- 자신이 원하는 이미지를 업로드할 수 있습니다.
 |
 |
|---|
- 원하는 상대에게 롤링 페이퍼를 보낼 수 있습니다.
- 자신이 원하는 이미지를 선택하여 프로필 이미지를 선택할 수 있습니다.
 |
 |
|---|
- 이미지 파일을 직접 업로드하여 자신만의 프로필 이미지를 선택할 수 있습니다.
 |
 |
|---|
- 잘못된 주소로 접근할 경우 NotFound 페이지가 보여집니다.
 |
 |
|---|
- API 호출 시 pending 상태일 때 로딩중 아이콘이 회전하며 보여집니다.
 |
|---|
- 보드 작성 : 진행예정인 부분, 진행중인 부분, 완료한 부분 등을 보드에 작성하여 스스로 계획을 세우고 팀원들에게 프로젝트 진행상황에 대해 공유하기
- 코드 리뷰 : 코드리뷰 시 PR을 올린 멤버는 중요한 코드에 대해 PR 설명을 해주거나 미리 주석을 달아주고, 코드리뷰를 해주는 멤버는 컨벤션에 맞지 않거나 틀린 부분에 대해 알려주기
- 컨벤션 : 코드 작성, 커밋, PR 등 코드 컨벤션을 지키면서 코드를 작성하기
- 커밋 단위 : 커밋 단위를 명확하게 하여 커밋별로 어떤 기능을 개발했는지 나타내고, 커밋 메세지도 명확하게 컨벤션에 맞도록 작성하기