Skip to content

추억의 롤링페이퍼를 웹페이지로 구현해 보았습니다.❤️✉️

Notifications You must be signed in to change notification settings

hankim0904/Rolling

 
 

Repository files navigation

rolling cover

💌 웹 상에서도 추억의 롤링 페이퍼를 즐길 수 있는 플랫폼, '롤링'을 소개합니다!

💖 친구, 가족, 지인들에게 따뜻한 한마디를 전하고,

🎨 원하는 이미지와 색깔로 개성 넘치게 꾸며보세요


🌟 Rolling에서 마음 전달해 보기


프로젝트 소개

Rolling에서는 마음을 전하고 싶은 사람을 위한 대시보드를 생성할 수 있습니다.

이 대시보드를 통해 롤링 페이퍼를 작성하면, 카드 형식으로 나열됩니다.

대시보드에는 이모지를 사용하여 감정을 표현할 수 있고,
롤링 페이퍼의 개수, 글을 작성한 멤버, 이모지 개수 등 다양한 정보를 한눈에 볼 수 있습니다.

마지막으로 필터 기능을 이용하면 원하는 카드만 골라서 볼 수도 있어 편리합니다.🌈

기술 스택

카테고리 스택
주요 기술 React javascript
스타일 Sass cssmodules Classnames
CI/CD vite cloudflare
라이브러리 Axios React Router React Quill


주요 기능

메인 페이지

사이트에 접속하면 가장 처음 보이는 페이지로 롤링 사이트에 대한 간단한 설명이 기재 돼 있습니다.

롤링_메인



롤링 보드 페이지

유저들이 생성한 롤링 보드 중 인기 롤링 보드와 최신 롤링 보드를 볼 수 있습니다.
검색 기능을 통해 롤링 보드를 검색할 수 있습니다.

롤링_롤링 보드

롤링 보드 생성하기

나도 만들어 보기를 클릭하면 롤링 보드를 생성할 수 있습니다.
롤링 페이퍼를 전달하고 싶은 사람의 이름을 쓰고 원하는 이미지도 선택하거나 첨부할 수 있습니다.

롤링_롤링 보드 생성하기

롤링 페이퍼 작성하기

생성한 롤링 보드에서 롤링페이퍼를 작성할 수 있습니다.
프로필 이미지 첨부하고 메세지를 원하는 대로 꾸밀 수 있습니다.

롤링_롤링 페이퍼 작성하기

대시보드에서 롤링 페이퍼 모아보기

대시보드에서는 롤링 페이퍼를 필터로 편리하게 볼 수 있습니다.
사이드바를 이용하면 대시보드의 현황을 한번에 파악하고 리액션도 남길 수 있습니다.

롤링_대시보드

대시보드 관리하기

대시보드 이름 옆의 연필 아이콘을 누르면 편집 기능을 이용할 수 있습니다.
작성한 글을 삭제하거나 대시보드를 삭제할 수 있습니다.

롤링_대시보드 관리

팀원 소개

김하은 김희수 노진욱 전소은
김하은 김희수 노진욱 전소은

About

추억의 롤링페이퍼를 웹페이지로 구현해 보았습니다.❤️✉️

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 59.9%
  • SCSS 39.3%
  • HTML 0.8%