Repository files navigation
"구해줘요, 동물의 숲"은 탄소 중립과 환경 보호를 주제로 한 프로젝트입니다.
퀴즈와 걷기 활동을 통해 사용자에게 능동적인 참여를 유도하며, 단순한 정보 전달을 넘어 실질적인 행동 변화를 이끌어내는 것을 목표로 합니다.사용자는 자신의 환경 보호 실천 기록을 확인하고, 퀴즈를 통해 환경 문제에 대한 지식을 넓힐 수 있습니다.
또한, 걷기 데이터를 기반으로 탄소 절감량을 확인하며 개인의 노력이 환경에 미치는 긍정적인 영향을 체감할 수 있습니다.
해당 프로젝트는 사람들이 일상 속에서 실천 가능한 방법을 제시해 지속 가능한 미래를 만들어가는 데 기여합니다.
UI
페이지: 로그인, 마이홈, 회원정보 수정, 올클리어
공통 컴포넌트: 카테고리 선택(지구), 카테고리 뱃지, 404, error
기능
소셜 로그인 및 회원 정보 수정
카테고리 진행 상태 시각화
데이터베이스 설계
미들웨어를 통한 페이지별 접근 권한 관리
디자인
페이지 UI, 캐릭터 일러스트, 카테고리별 배경
UI
페이지: 메인 페이지 1단계 ~ 3단계, 뱃지
공통 컴포넌트: 메세지
기능
UI
페이지: 걷기 지도, 걷기 설정
공통 컴포넌트: 헤더, 모달, 링크 버튼, 클릭 버튼
UI
페이지: 퀴즈, 통계
공통 컴포넌트: 프로그래스바(Lv, Km), 보상 모달
기능
카테고리별로 퀴즈 풀기
캘린더에서 날짜 클릭시 해당 날짜에 맞는 걸은양 및 감소된 탄소배출량 및 클릭한 날짜 기준으로 일주일 통계 보여주기
사용자 목표 거리 설정
오늘 날짜 기준으로 걸은 거리 기록
Front: Next.JS, Tailwind CSS, Zustand
Back: Next.JS
Database: Supabase
버전 및 이슈 관리: Github, Github Issues
협업 툴: Discord, Notion
디자인 툴: Figma, Photoshop, Illustrator
서비스 배포 환경: Vercel
컨벤션
디자인: 2024.09
개발: 2024.10 ~ 2024.12
서비스 접속 초기화면으로 소셜 로그인 페이지가 나옵니다.
처음 회원가입을 할 때 유저 닉네임을 랜덤으로 배정해줍니다.
로그인
회원가입이 되면 카테고리 선택하는 창이 나옵니다. 이때 6개의 카테고리 중 하나를 선택할 수 있습니다.
이미 회원가입을 한 경우라면 로그인 후 메인페이지로 이동합니다.
처음 카테고리 선택 전
처음 카테고리 선택 후
다른 주민 버튼을 클릭하고 나온 카테고리 페이지에 내가 구한 주민은 민트색 뱃지로 볼 수 있습니다.
다른 카테고리를 선택할 수 있습니다. 해당 뱃지는 주황색으로 보입니다.
내가 선택한 카테고리에서의 주민을 구하면 해당 뱃지 아이콘은 주민 얼굴로 바뀝니다.
다음 버튼을 누르면 해당 카테고리가 보이는 메인 페이지로 이동합니다.
내가 구한 주민 & 초기
다른 카테고리 선택
다음 버튼 클릭
카테고리에서 선택한 캐릭터를 볼 수 있습니다.
해당 카테고리는 3단계로 나눠져 있고 물약으로 Lv을 높일 수 있습니다.
물약 1개당 프로그래스바에서 10씩 증가합니다.
Lv.1은 0 ~ 100, Lv.2는 0 ~ 150, Lv.3은 0 ~ 200입니다.
물약 버튼을 누르면 프로그래스바의 진행도가 높아지며 포인트만큼 회복했다는 텍스트가 나옵니다.
각 단계를 회복했을 시 다음 레벨로 이동하는 텍스트 컴포넌트가 나옵니다.
해당 말풍선을 클릭하면 다음 단계로 이동합니다.
각 단계별 말풍선 내용이 다르며 Lv.3 단계까지 회복시켰을 시 다른 주민을 구하기 버튼이 나옵니다.
다른 주민 버튼을 클릭하면 다시 카테고리 선택 페이지로 이동하여 다른 주민을 구할 수 있습니다.
프로필 이미지, 닉네임, 현재 획득한 뱃지의 개수를 알 수 있습니다.카테고리를 Lv.3까지 회복 시키면 뱃지가 보입니다.
뱃지를 클릭하면 회복된 주민의 최종 모습을 볼 수 있습니다.
마이홈 페이지에서 토글 버튼에서 회원정보 수정 버튼을 클릭하면 회원정보 수정 페이지로 이동합니다.
연필 아이콘을 클릭시 프로필 닉네임을 수정할 수 있습니다.
저장하기 버튼을 클릭시 회원정보가 수정됩니다.
글자수는 10글자로 제한되어 있습니다.
메인 페이지에서 퀴즈로 물약얻기 버튼을 클릭하면 퀴즈 페이지에서 카테고리에 맞는 문제를 볼 수 있습니다.
퀴즈에 대한 문제를 맞히면 해설과 함께 치료약 보상 2point를 주고 틀리면 1point를 줍니다.
메인 페이지에서 걷기로 물약얻기 버튼을 클릭하면 걷기 페이지에서 지도를 볼 수 있습니다.
실시간 현재 위치를 받아와 걸으면 해당 거리에 폴리라인이 그려집니다.걷기 중일때 해당 창을 나가면 경고창이 보이고 걷기를 멈추고 < 클릭하면 보상 받기 모달이 보입니다.
보상 받기 버튼 또는 선물 아이콘을 클릭하면 km 기준으로 치료약 보상을 줍니다.
1km당 2point를 지급하고 1km를 채우지 못했을 때는 1point를 지급합니다. (예: 2km -> 4point, 1.5km -> 3point, 0km -> 0point)
걷기 초기 상태
걷기 중
걷기 중 헤더 < 클릭
걷기 멈춤
걷기 멈춤 헤더 < 클릭
보상
걷기 페이지에서 통계 버튼을 누르면 탄소 기록함 페이지를 볼 수 있습니다.
처음 페이지가 렌더링 될 때 오늘 날짜를 기준으로 데이터가 보여집니다.
캘린더와 오늘 걸은 거리 및 탄소 배출량 그리고 일주일치 통계를 볼 수 있습니다.
캘린더에서 오늘 날짜에는 배경이 주황색으로 보입니다.
걸은 날일경우 민트색 동그라미로 해당 날짜를 표시합니다.
다른 날짜를 클릭하면 클릭한 날짜는 회색 배경으로 바뀌고 오늘 날짜는 주황색 텍스트로 변경됩니다.
차트를 호버하면 해당 날짜에 걸은 거리를 볼 수 있습니다.
캘린더에서 날짜를 클릭하면 해당 날짜를 기준으로 아래 데이터가 변경됩니다.
걷기 기록이 없을 때
걷기 기록이 있을 때
다른 날짜를 클릭했을 때
탄소 기록함 페이지에서 걷기 설정 버튼을 누르면 해당 모달이 나옵니다.
처음에는 기본값이 3km으로 되어 있습니다.
슬라이드를 이용하여 원하는 거리를 설정하고 결정 버튼을 누르면 탄소 기록함 페이지의 오늘 거리� 프로그래스바의 max의 값이 변경됩니다.
결정 버튼을 누르지 않고 모달을 닫을시 데이터는 변경되지 않습니다.
초기
걷기 설정
마지막 카테고리를 구하면 마이홈으로 가는 버튼이 나옵니다.
해당 버튼을 클릭하면 마이홈 페이지에서 모두 획득 된 뱃지의 모습을 볼 수 있습니다.
마이홈 페이지에 토글 버튼을 클릭하면 공유하기가 생깁니다. 해당 버튼을 누르면 모두 구한 주민들의 모습을 공유할 수 있습니다.
마지막 주민 구했을 때
모든 주민을 구한 마이홈
공유하기 버튼
올클리어 페이지
Lv.1
Lv.1 말풍선
Lv.2
Lv.2 말풍선
Lv.3
Lv.3 말풍선
최종
Lv.1
Lv.1 말풍선
Lv.2
Lv.2 말풍선
Lv.3
Lv.3 말풍선
최종
Lv.1
Lv.1 말풍선
Lv.2
Lv.2 말풍선
Lv.3
Lv.3 말풍선
최종
Lv.1
Lv.1 말풍선
Lv.2
Lv.2 말풍선
Lv.3
Lv.3 말풍선
최종
Lv.1
Lv.1 말풍선
Lv.2
Lv.2 말풍선
Lv.3
Lv.3 말풍선
최종
KakaoTalk_Video_2024-12-29-18-47-18.mp4
KakaoTalk_Video_2024-12-29-18-47-44.mp4
KakaoTalk_Video_2024-12-29-18-48-20.mp4
About
엔딩, 바꿔보려 합니다✨
Resources
Stars
Watchers
Forks
You can’t perform that action at this time.
