기능
※ Auth
- 파이어베이스를 활용한 로그인, 로그아웃, 회원가입, 회원정보 관리 기능
- 로그인, 회원가입 유효성 검사 기능 (ex. 비밀번호가 틀렸습니다. 올바른 형식의 이메일을 입력하세요.)
- 개인정보 수정, 본인이 쓴 게시물 모아보기 기능(MyPage)
- 도로명 주소 API를 이용한 간편한 주소 입력 기능 (회원가입, MyPage)
- 로그인/로그아웃 전후 출력 페이지 다르게 설정(INFO, Doggitter 글쓰기 등)
- 로그인/로그아웃 전후 사용 기능 다르게 설정 (아바타 버튼 클릭 시 - 로그인 전에는 로그인, 회원가입 / 로그인 후에는 마이프로필, 로그아웃)
※ Design
- 테마 컬러 설정 : primary : 오렌지 secondary : 블랙.
각 메인 테마 컬러 별 main, light, dark 색상 별도 설정으로 조화롭게 컬러 배치
- 메인 컨셉 설정 : 심플 + 친근함
- 가독성 좋은 메인화면, 각 요소를 개별 컴포넌트로 구성 (배너 + 소개 + 반려견칼럼 + 애견핫플레이스 +광고 배너)
- 모든 페이지 반응형 (PC, 태블릿, 모바일 호환)
- 네비바 반응형 (모바일 환경으로 접속시 메뉴가 리스트아이콘으로 축소됨)
- 로그인 시 네비바 아바타에 사용자 이름 출력 (로그아웃 상태에서는 랜덤 강아지 사진)
- 로그인/메인화면 재접속 시 배너 이미지 랜덤으로 출력 (총 7개의 강아지 이미지)
- 전 페이지에 스크롤 업 버튼 추가(숨겨져 있다가 화면을 일정 길이만큼 내리면 자동으로 생성됨)
※ Doggitter(CRUD)
- 아바타 + 사진 + 제목 + 내용 + 좋아요 + 댓글기능 등 SNS 기본 기능 모두 탑재
- 게시글 작성하기 : 제목, 내용, 이미지 첨부파일 입력시 리스트에 게시물 추가
- 게시글 수정, 삭제 : 본인 게시글 Edit, Delete 가능 (타인 게시글 불가)
- 좋아요 : ID당 한 개만 가능. 자동 카운트
- 코멘트 : 각 게시글별 코멘트 작성 가능. 본인 코멘트일 경우에만 삭제 가능
※ Dog MBTI(심리테스트)
- 문항, 문답, 이미지를 개별 파일에 있는 배열, 객체로 저장한 후 페이지에서 불러와서 보여주는 기능
- 각 문항별로 할당된 점수를 카운트한 후, 최종 점수에 따라 16가지의 각각 다른 결과값과 이미지 도출
- 진행 상황에 따라 바뀌는 프로그레스 바 구현
- 테스트 페이지별 썸네일, 결과 내용이 함께 나오는 카카오톡 공유하기 기능
※ INFO(지도 API)
- 회원가입 시 입력한 주소 정보를 기반으로, 내 근처에 있는 강아지 산책 가능 공원을 확인하는 기능
- 지도에 주변 산책 가능 공원이 마크됨
- 지도 옆에는 공원 이름, 정보, 위치, 전화번호가 표시된 텍스트 리스트가 있어 간편하게 정보 파악 가능
- 스크롤 시 지도 확대,축소 기능을 on/off 할 수 있는 버튼
- 회원가입 시 입력한 주소뿐만 아니라, 직접 위치정보를 입력하는 방식으로도 검색 가능
- 회원 정보 변경시 자동으로 지도 업데이트 됨
※ 기타
- 이미지, 사이트 정보 등 Meta OG 태그 들어가있어 SNS 공유시 사람들의 흥미를 끌 수 있음
특장점
- 간편한 회원가입, 로그인만으로 쉽게 SNS 활동을 할 수 있음.
- 게시글 업로드, 코멘트, 좋아요 기능으로 사람들과 소통 가능
- 사람들의 흥미를 끌 수 있는 심리테스트 페이지와 카카오톡 공유하기 기능이 구현되어 있어, 사이트 홍보 효율적으로 가능
- 클릭 한 번으로 강아지 산책 공원 정보를 한 눈에 확인할 수 있음.
- 웹뿐만 아니라 모바일에서도 가독성이 좋은 반응형 홈페이지
- 색깔, 디자인 컨셉이 잘 잡혀있는 홈페이지
사용기술 및 개발환경
- 개발환경 : PC
- 개발도구 : VSC
- 개발언어 및 프레임워크 : HTML, CSS, javascript, REACT
- API : 다음 지도 API, 다음 주소(도로명) API
