🍃구해줘요, 동물의 숲🍃

• 배포 URL: https://ending-to-change.vercel.app

1. 프로젝트 소개

• "구해줘요, 동물의 숲"은 탄소 중립과 환경 보호를 주제로 한 프로젝트입니다.
• 퀴즈와 걷기 활동을 통해 사용자에게 능동적인 참여를 유도하며, 단순한 정보 전달을 넘어 실질적인 행동 변화를 이끌어내는 것을 목표로 합니다.
• 사용자는 자신의 환경 보호 실천 기록을 확인하고, 퀴즈를 통해 환경 문제에 대한 지식을 넓힐 수 있습니다.
• 또한, 걷기 데이터를 기반으로 탄소 절감량을 확인하며 개인의 노력이 환경에 미치는 긍정적인 영향을 체감할 수 있습니다.
• 해당 프로젝트는 사람들이 일상 속에서 실천 가능한 방법을 제시해 지속 가능한 미래를 만들어가는 데 기여합니다.

2. 팀원 구성

류경혜	이나래	이지희	이하람	홍유진
ryukyung	dlskfdo	ji1210h	HalamLee	ujeans

3. 역할 분담

🐧 류경혜

• UI
  • 페이지: 로그인, 마이홈, 회원정보 수정, 올클리어
  • 공통 컴포넌트: 카테고리 선택(지구), 카테고리 뱃지, 404, error
• 기능
  • 소셜 로그인 및 회원 정보 수정
  • 카테고리 진행 상태 시각화
  • 데이터베이스 설계
  • 미들웨어를 통한 페이지별 접근 권한 관리

🐥 이나래

• 디자인
  • 페이지 UI, 캐릭터 일러스트

🐨 이지희

• 디자인
  • 페이지 UI, 캐릭터 일러스트, 카테고리별 배경
• UI
  • 페이지: 메인 페이지 1단계 ~ 3단계, 뱃지
  • 공통 컴포넌트: 메세지
• 기능
  • 물약을 사용하여 카테고리별 캐릭터 레벨 변화

🐤 이하람

• UI
  • 페이지: 걷기 지도, 걷기 설정
  • 공통 컴포넌트: 헤더, 모달, 링크 버튼, 클릭 버튼

🐵 홍유진

• UI
  • 페이지: 퀴즈, 통계
  • 공통 컴포넌트: 프로그래스바(Lv, Km), 보상 모달
• 기능
  • 카테고리별로 퀴즈 풀기
  • 캘린더에서 날짜 클릭시 해당 날짜에 맞는 걸은양 및 감소된 탄소배출량 및 클릭한 날짜 기준으로 일주일 통계 보여주기
  • 사용자 목표 거리 설정
  • 오늘 날짜 기준으로 걸은 거리 기록

4. 개발 환경

• Front: Next.JS, Tailwind CSS, Zustand
• Back: Next.JS
• Database: Supabase
• 버전 및 이슈 관리: Github, Github Issues
• 협업 툴: Discord, Notion
• 디자인 툴: Figma, Photoshop, Illustrator
• 서비스 배포 환경: Vercel
• 컨벤션

5. 개발 기간

• 디자인: 2024.09
• 개발: 2024.10 ~ 2024.12

6. 페이지별 기능

[로그인]

• 서비스 접속 초기화면으로 소셜 로그인 페이지가 나옵니다.
  • 구글 계정으로 로그인이 가능합니다.
• 처음 회원가입을 할 때 유저 닉네임을 랜덤으로 배정해줍니다.

로그인

[카테고리 선택]

• 회원가입이 되면 카테고리 선택하는 창이 나옵니다. 이때 6개의 카테고리 중 하나를 선택할 수 있습니다.
• 이미 회원가입을 한 경우라면 로그인 후 메인페이지로 이동합니다.

처음 카테고리 선택 전	처음 카테고리 선택 후

• 다른 주민 버튼을 클릭하고 나온 카테고리 페이지에 내가 구한 주민은 민트색 뱃지로 볼 수 있습니다.
• 다른 카테고리를 선택할 수 있습니다. 해당 뱃지는 주황색으로 보입니다.
• 내가 선택한 카테고리에서의 주민을 구하면 해당 뱃지 아이콘은 주민 얼굴로 바뀝니다.
• 다음 버튼을 누르면 해당 카테고리가 보이는 메인 페이지로 이동합니다.

내가 구한 주민 & 초기	다른 카테고리 선택	다음 버튼 클릭

[메인]

• 카테고리에서 선택한 캐릭터를 볼 수 있습니다.
• 해당 카테고리는 3단계로 나눠져 있고 물약으로 Lv을 높일 수 있습니다.
  • 물약 1개당 프로그래스바에서 10씩 증가합니다.
  • Lv.1은 0 ~ 100, Lv.2는 0 ~ 150, Lv.3은 0 ~ 200입니다.
• 물약 버튼을 누르면 프로그래스바의 진행도가 높아지며 포인트만큼 회복했다는 텍스트가 나옵니다.
• 각 단계를 회복했을 시 다음 레벨로 이동하는 텍스트 컴포넌트가 나옵니다.
  • 해당 말풍선을 클릭하면 다음 단계로 이동합니다.
  • 각 단계별 말풍선 내용이 다르며 Lv.3 단계까지 회복시켰을 시 다른 주민을 구하기 버튼이 나옵니다.
  • 다른 주민 버튼을 클릭하면 다시 카테고리 선택 페이지로 이동하여 다른 주민을 구할 수 있습니다.

Lv.1	Lv.2	Lv.3

[마이홈]

• 프로필 이미지, 닉네임, 현재 획득한 뱃지의 개수를 알 수 있습니다.
• 카테고리를 Lv.3까지 회복 시키면 뱃지가 보입니다.
• 뱃지를 클릭하면 회복된 주민의 최종 모습을 볼 수 있습니다.

뱃지 획득 전	획득 후	획득한 뱃지 클릭

[회원정보 수정]

• 마이홈 페이지에서 토글 버튼에서 회원정보 수정 버튼을 클릭하면 회원정보 수정 페이지로 이동합니다.
• 연필 아이콘을 클릭시 프로필 닉네임을 수정할 수 있습니다.
• 저장하기 버튼을 클릭시 회원정보가 수정됩니다.
• 글자수는 10글자로 제한되어 있습니다.

회원정보 수정 클릭	초기	연필 버튼 클릭

[퀴즈]

• 메인 페이지에서 퀴즈로 물약얻기 버튼을 클릭하면 퀴즈 페이지에서 카테고리에 맞는 문제를 볼 수 있습니다.
• 퀴즈에 대한 문제를 맞히면 해설과 함께 치료약 보상 2point를 주고 틀리면 1point를 줍니다.

초기	정답	오답	정답 보상	오답 보상

[걷기]

• 메인 페이지에서 걷기로 물약얻기 버튼을 클릭하면 걷기 페이지에서 지도를 볼 수 있습니다.
• 실시간 현재 위치를 받아와 걸으면 해당 거리에 폴리라인이 그려집니다.
• 걷기 중일때 해당 창을 나가면 경고창이 보이고 걷기를 멈추고 < 클릭하면 보상 받기 모달이 보입니다.
• 보상 받기 버튼 또는 선물 아이콘을 클릭하면 km 기준으로 치료약 보상을 줍니다.
  • 1km당 2point를 지급하고 1km를 채우지 못했을 때는 1point를 지급합니다. (예: 2km -> 4point, 1.5km -> 3point, 0km -> 0point)

걷기 초기 상태	걷기 중	걷기 중 헤더 < 클릭	걷기 멈춤	걷기 멈춤 헤더 < 클릭	보상

[탄소 기록함]

• 걷기 페이지에서 통계 버튼을 누르면 탄소 기록함 페이지를 볼 수 있습니다.
• 처음 페이지가 렌더링 될 때 오늘 날짜를 기준으로 데이터가 보여집니다.
• 캘린더와 오늘 걸은 거리 및 탄소 배출량 그리고 일주일치 통계를 볼 수 있습니다.
  • 캘린더에서 오늘 날짜에는 배경이 주황색으로 보입니다.
  • 걸은 날일경우 민트색 동그라미로 해당 날짜를 표시합니다.
  • 다른 날짜를 클릭하면 클릭한 날짜는 회색 배경으로 바뀌고 오늘 날짜는 주황색 텍스트로 변경됩니다.
  • 차트를 호버하면 해당 날짜에 걸은 거리를 볼 수 있습니다.
• 캘린더에서 날짜를 클릭하면 해당 날짜를 기준으로 아래 데이터가 변경됩니다.

걷기 기록이 없을 때	걷기 기록이 있을 때	다른 날짜를 클릭했을 때

[걷기 설정]

• 탄소 기록함 페이지에서 걷기 설정 버튼을 누르면 해당 모달이 나옵니다.
• 처음에는 기본값이 3km으로 되어 있습니다.
• 슬라이드를 이용하여 원하는 거리를 설정하고 결정 버튼을 누르면 탄소 기록함 페이지의 오늘 거리� 프로그래스바의 max의 값이 변경됩니다.
  • 결정 버튼을 누르지 않고 모달을 닫을시 데이터는 변경되지 않습니다.

초기	걷기 설정

[올클리어]

• 마지막 카테고리를 구하면 마이홈으로 가는 버튼이 나옵니다.
• 해당 버튼을 클릭하면 마이홈 페이지에서 모두 획득 된 뱃지의 모습을 볼 수 있습니다.
• 마이홈 페이지에 토글 버튼을 클릭하면 공유하기가 생깁니다. 해당 버튼을 누르면 모두 구한 주민들의 모습을 공유할 수 있습니다.

마지막 주민 구했을 때	모든 주민을 구한 마이홈	공유하기 버튼	올클리어 페이지

[카테고리별 주민 Lv.1 ~ 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 말풍선	최종

• 대기오염 (너굴이)

Lv.1	Lv.1 말풍선	Lv.2	Lv.2 말풍선	Lv.3	Lv.3 말풍선	최종

7. 시연 영상

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