[프론트엔드 부트캠프 우수 프로젝트] 한끼도시락

도시락을 꾸리는 것을 좋아하는데 함께 소통할 공간이 없어 아쉬웠던 적 있으신가요? 멋쟁이사자처럼 프론트엔드 부트캠프에서는 수강생들이 직접 팀을 이뤄 실전 수준의 서비스를 설계하고 구현해요.

이번 우수 프로젝트 '한끼도시락'은 즐거운 한 끼를 나누는 도시락 커뮤니티 서비스예요. 홈 화면부터 모임·피드 기능까지, 프론트엔드 실무 스택으로 완성한 결과물을 지금 확인해 보세요.

목차

1. 한끼도시락이란?

2. 기술 스택

3. 기획 과정

4. 주요 기능 구현

1. 한끼도시락이란?

즐거운 한 끼를 나누는 도시락 커뮤니티, 한끼도시락이에요

한끼도시락은 사람들이 도시락에 관하여 글을 올리고 모일 수 있는 도시락 커뮤니티예요. 개인의 피드에 본인이 만든 도시락과 과정을 올릴 수 있고, 다른 사용자들을 팔로우하고 댓글과 좋아요 기능을 통해 소통할 수 있어요. 모임에 참여하여 다른 사용자들과 목표를 세우고, 도시락 정보를 공유할 수 있어요.

기획 기간은 2023.02.19 - 2023.02.25이며, 개발 기간은 2023.02.26 - 2023.03.14예요. 파이널 프로젝트 6조 탕수육 팀이 함께 개발했어요.

2. 기술 스택

프론트엔드부터 텍스트 에디터·빌드 도구까지 다양한 기술로 구성했어요

3. 기획 과정

디자인 시안을 작성해 서비스 화면을 설계했어요

개발에 앞서 디자인 시안을 작성해 서비스 화면을 설계했어요.

4. 주요 기능 구현

1) 홈 화면

랜덤으로 레시피 추천을 받을 수 있어요. 자신이 받은 좋아요 개수, 속한 모임 수, 올린 피드 개수등을 확인할 수 있어요.

랜덤 레시피 추천은 하루에 한 번 랜덤 레시피를 추천하며, 새로고침 버튼으로 새로운 레시피를 추천받을 수 있어요. 사용자 활동에서는 사용자가 참여하고 있는 모임의 수, 업로드된 피드 게시글 수를 제공하며, 클릭 시 각각 모임, 피드 페이지로 이동해요.

2) 모임 기능

인기 모임에서는 가장 인기 있는 모임과 모임 추천을 받을 수 있어요. 최신 모임에서는 최근에 글이 올라왔던 모임을 시간순으로 확인할 수 있어요.

또한 사용자가 현재 참여 중인 모임을 확인할 수 있어요. 모임을 직접 생성하거나 탈퇴 또한 가능해요. 사용자가 직접 본인의 목적에 따라 모임의 이름과 해시태그를 생성 가능해요. 탈퇴하고 싶은 모임 또한 자유롭게 탈퇴할 수 있어요.

모임 목록(인기/최신)은 좋아요순, 참여수, 모임 생성순으로 정렬돼요. 스와이프를 사용한 Top5 모임을 확인할 수 있고, Intersection Observer를 사용한 무한스크롤을 구현했어요.

모임 정보에서는 모임 상세, 해시태그, 좋아요 참여자 및 좋아요 수를 제공해요. 모임 만들기는 아이콘을 눌러 모임 만들기 페이지로 이동할 수 있어요. 사용자가 참여하고 있지 않은 모임의 상세페이지에 접속 시에만 모임 참여하기 버튼이 제공돼요.

3) 피드 기능

인기 피드에서는 가장 좋아요를 많이 받은 순서로 피드를 볼 수 있어요. 추천 피드에서는 랜덤으로 사용자의 피드를 추천 받을 수 있어요.

팔로잉에서는 사용자가 팔로우 하는 다른 유저를 볼 수 있어요. 내 피드에서는 본인이 쓴 게시글을 한눈에 나열해서 볼 수 있어요. 글쓰기 버튼을 눌러서 자유롭게 게시글을 작성할 수 있어요.

댓글과 좋아요, 북마크 기능을 통해 다른 사용자와 활발하게 소통할 수 있어요. 피드 검색 부분에서 궁금했던 피드에 대해 키워드를 통하여 검색이 가능해요.

피드 목록(인기/추천)에서는 팔로우, 좋아요, 북마크, 댓글 기능을 제공해요. Intersection Observer를 사용한 무한스크롤을 구현했으며, 스크롤이 길어졌을 때 상단으로 이동할 수 있도록 스크롤이동 버튼을 제공해요.

팔로우한 사용자의 게시글은 팔로잉 탭에서 확인 가능해요. 피드 글쓰기에서는 TinyMCE를 사용하여 텍스트 에디터를 구현했어요.

💡 프로젝트 시연 영상

'도시락'은 홈 화면·모임·피드라는 세 가지 핵심 기능으로 도시락 커뮤니티 서비스를 완성한 프론트엔드 우수 프로젝트예요.

멋쟁이사자처럼 국비지원 부트캠프에서 어떤 프로젝트를 만들 수 있는지 직접 확인해 보세요.