🐬 Dolphinity

돌고래와 인간의 공생을 위한 웹 서비스, Dolphinity

kakao X goorm : 제1회 구름톤 우수상 수상작 🏆

Project

주제

• 제주 연안에 살고 있는 남방큰돌고래를 육안으로 확인할 수 있는 장소 확인 서비스

주제 선정 이유

• 제주 남방큰돌고래는 개체수가 너무 적어서 지금은 선박관광보다는 보전에 중점을 두어야 한다.
• 돌고래, 환경, 인간은 서로 영향을 주고받는 상생관계이며, 현재 돌고래의 피해가 미래의 인간의 피해가 될 수 있다.
• 지속적이고 반복적인 관광선박의 접근은 돌고래들의 생체리듬을 교란시키고, 스트레스를 유발한다.
  • 선박관광이 계속될 경우 스트레스로 인해 돌고래 개체수가 감소하는 결과로 나타날 가능성이 높다.
• 제주남방큰돌고래는 연안성이어서 육상에서 충분히 관찰할 수 있다.

시연영상

• 🎥 프로젝트 시연영상

Project 인원

yangseungchan Frontend	malgamlee Frontend/PM	Stark-Industries0417 Backend

기능

• 기능 1
  • 카카오맵 API를 이용한 돌고래 목격장소 위치 표시
• 기능 2
  • 사용자의 현재정보와 목격한 고래 사진 및 시간정보를 받아 하나의 게시물로 저장
• 기능 3
  • 게시글 및 댓글기능을 통하여 돌고래 목격장소에 대해 이야기를 나누는 커뮤니케이션 기능

메인 화면

• 서비스의 기능을 의미하는 시작페이지에서 화살표 버튼을 클릭하면 메인페이지로 이동한다.
• 메인 페이지는 이전 버튼, 로고, 현재 시간, 핀과 지도, 기능 버튼으로 구성되어 있다.
  • 이전 버튼을 클릭하면 직전 페이지로 이동한다.
  • 지도를 드래그하여 이동할 수 있고, 확대/축소 버튼으로 지도 레벨 조절, 현재 위치 이동이 가능하다.
  • 지도 위의 핀을 클릭하면 해당 핀에서 촬영된 돌고래 사진과 관련 내용 팝업이 등장한다.
  • 팝업의 상세 버튼을 클릭하면 해당 핀에 대한 상세 내용 페이지로 이동한다.

상세/등록 화면

• 상세 화면
  • 사용자가 작성한 제목, 주소, 업로드한 사진, 내용을 확인할 수 있다.
  • 다른 사용자가 게시글을 보고 하트를 클릭할 수 있고, 댓글을 달 수 있다.
• 등록 화면
  • 사용자가 돌고래를 목격한 게시글을 작성할 수 있다.
  • 제목, 내용, 날짜가 입력되고, 위치는 현재 위치를 자동으로 받아온다.
  • 사용자가 촬영한 사진을 업로드할 수 있다.
  • 등록하기 버튼을 클릭하면 서버에 저장된다.

UI Design

• 피그마 디자인 시안

기술 스택

Typescript	Emotion	Next.js	Mantine

배운 점 & 아쉬운 점

• 필수적인 기능들은 가능한 많이 구현했다는 점은 유익했다

• 카카오맵 API에 대한 낮은 숙련도로 인해 프로젝트의 시간의 많은 부분을 빼앗김

라이센스

© 9oormthon