솔직할지도 [ frankmap ]

지도 위에 써 내려가는 감정 일기, 솔직할지도

여러분의 감정을 기록하고 싶었던 적이 있으신가요? 하루하루 스쳐가는 다양한 감정을 기억하고, 되돌아보며 나를 이해하는 시간을 가져보는 건 어떨까요?

솔직할지도는 지도 위에 내가 방문했던 장소와 함께 그 때의 감정을 기록할 수 있는 감정 일기 서비스입니다. 바쁜 일상에서 느낀 나의 소중한 감정을 솔직할지도를 통해 기록해 보세요.

---

배포 링크 및 테스트 계정

솔직할지도

[ 테스트 계정 ]

ID: [email protected]
PW: qlqjs123

---

서비스 소개

서비스 주요 기능

첫째, 방문한 장소를 지도에서 선택하고 그곳에서 느낀 감정을 이모지로 기록할 수 있습니다. 일기도 작성하고 이미지도 추가할 수 있습니다. 내가 방문한 장소에서 느낀 감정을 자세히 기록해보세요.

둘째, 지도에서 감정 기록들을 확인할 수 있습니다. 감정 이미지를 클릭하면 지도 위에 표시된 감정 일기가 나타나 그 때의 감정을 생생하게 돌아볼 수 있습니다.

셋째, 달력에서 월별 감정을 확인할 수 있습니다. 솔직할지도에서 제공하는 감정 통계를 통해 한 달 간의 감정을 정리하고 최근 나는 어떤지 확인해보는 시간을 가지는 건 어떨까요?

---

팀원 소개

팀장 윤우중	민다인	박가희
캘린더 & 감정 통계 구현	에러 & 로딩페이지 구현	모달 & 감정 목록 페이지 구현
이소정	전희선	정진욱
카카오맵 & 메인페이지 구현	로그인/회원가입 & 헤더 구현	감정 등록 & 수정 페이지 구현

---

개발 일정

2024.06.03 ~ 2024.07.08

• 아이디어 구상 (2024.06.03 - 2024.06.07)
• 프로젝트 기획 (2024.06.07 - 2024.06.08)
• 화면 설계 및 디자인 (2024.06.08 - 2024.06.10)
• 코드 컨벤션 설정, 컴포넌트 분리, ERD 작성 (2024.06.10 ~ 2024.06.12)
• 개발 (2024.06.12 - 2024.06.28)
• 코드 보완 및 에러 수정, QA, 개발 내용 문서화 (2024.06.28 - 2024.07.08)

---

개발 환경 및 기술 스택

Front-end

HTML	CSS	TypeScript	Next.js	SaSS	Recoil	Kakao-Map

Back-end

Next.js	Supabase

Tools

Git	Notion	Discord	Slack

---

프로젝트 구조

---

플로우 차트 & ERD

---

상세 담당 업무

윤우중(팀장)

• 캘린더
  • 라이브러리를 사용하지 않은 자체적인 캘린더 UI 구현
  • 감정 입력 시 ⇒ 날짜에 맞게 캘린더에 실시간 반영 기능 구현
  • 프로젝트 전체에서 사용하는 공용 데이터 패칭 함수 구현
    
• 감정 통계
  • 사용자가 입력한 감정을 통계로 나타내는 기능 구현
  • 각 해당 년, 월 에 맞도록 입력한 감정을 토대로 기능 구현
  • 입력된 감정에 따라 보여지는 퍼센트 바 구현
    

민다인

• 에러 페이지(not-found) & 로딩 페이지 디자인 및 구현
  • useRouter를 이용한 not-found 페이지에서의 페이지 이동 기능 구현
  • 로딩 페이지를 라이브러리를 쓰지 않고 서버 컴포넌트로 사용하기 위해 loader를 CSS 만으로 구현
    
• QA
  

박가희

이소정

• 메인 페이지
  • 카카오맵 커스텀 및 검색 기능 구현
  • 현재 보이는 맵에 위치한 데이터만 호출
  • 맵 위치 이동시 Debounce 함수를 활용한 과도한 네트워크 요청 방지
• 바텀 시트
  • 터치 및 클릭 이벤트를 구분하여 다양한 디바이스에서 최적화되도록 구현
  • 콘텐츠의 높이에 맞춰 바텀 시트의 높이가 동적으로 조절되도록 구현

전희선

• 로그인, 로그아웃
  • 로그인 로그아웃 페이지 구현
  • 로그인
  • 회원가입
  • 로그아웃
  • 사용자 정보를 관리하는 userState (recoil) 작성
  • 사용자 정보를 로컬스토리지에 저장해 로그인 정보 저장
    
• 헤더
  • 헤더 구현
    
• 아이콘디자인
  

정진욱

• 공통 컴포넌트 - button 컴포넌트 구현 - input 컴포넌트 구현
  
• 감정 기록 - 단계별 감정기록 페이지 구현 (감정 선택 ⇒ 내용 기록) - 이미지 여러 장 업로드 및 미리보기 구현 - 감정 기록 api 연동
  
• 감정 수정 - 단계별 감정 수정 페이지 구현 (내용 수정 & 감정 재선택) - 감정 수정 api 연동
  
• supabase - user, record table 설계 - auth table ⇒ user table 연동 - record table ⇒ user table 참조 연동 - 이미지 저장 스토리지 생성