| 테스트 계정 | |
|---|---|
| ID | [email protected] |
| PW | test1234 |
src
├─ @types # 재사용되는 타입들을 저장하며 "a.type.ts" 와 같은 파일 네이밍 컨벤션 사용
├─ api # API 관련 로직
├─ assets # 폰트, 아이콘, 이미지와 같은 정적 자원
│ ├─ fonts
│ ├─ icons
│ └─ images
├─ components # 재사용되는 컴포넌트
├─ constants # 상수화가 필요한 변수
├─ hooks # 커스텀 훅
├─ pages # 재사용되지 않는 컴포넌트 (하위 폴더는 페이지 단위 구분)
├─ routes # React-router의 라우팅 관련 코드
├─ styles # GlobalStyle, Mixins, 재사용되는 스타일 관련 변수 등
└─ utils # 재사용되는 유틸 함수
 |
|---|
- 자신이 등록한 식물들의 리스트를 보여주며 메인에 나타나있는 식물의 간단한 정보 (마지막으로 물 준 날, 처음 함께한 날, 다음 물주기 날까지 남은 디데이) 를 확인할 수 있습니다.
- 현재 보고 있는 식물의 이미지 옆에 물주기 버튼을 클릭하여 특정 식물에게 물을 준 날짜를 기록할 수 있으며 이미지 클릭시 상세 페이지로 이동하게 됩니다.
- Geolocation API를 활용하여 사용자의 위치정보를 받아 해당 지역의 날씨 정보를 받아올 수 있으며 메인 페이지 상단에 날씨에 대한 정보(사용자의 위치, 날씨 이미지, 날씨, 온도, 날씨에 맞는 텍스트)를 보여줍니다.
 |
|---|
- 사용자가 어떤 날짜에 어떤 식물에게 물을 주었는지 시각적으로 확인할 수 있는 페이지입니다.
 |
|---|
- 이메일 로그인과 소셜 로그인 기능을 구현하였으며 사용자는 로그인하지 않았을 경우 항상 로그인 페이지로 이동됩니다.
- "비밀번호를 잃어버리셨나요?" 버튼을 통해 이메일 입력시 가입여부 확인 후 비밀번호 재설정 메일이 전송됩니다.
- "가입하기" 버튼을 통해 회원가입 페이지로 이동할 수 있습니다.
 |
|---|
- 사용자가 궁금하거나 찾고자하는 식물을 검색해 찾을 수 있는 페이지로 식물에 대한 정보(종, 분류, 습도, 관리 수준, 병해충)와 식물이 자라기 좋은 환경(일조량, 수분량, 생육적정온도)에 대한 정보를 제공합니다.
- 식물도감 메인페이지에서는 다양한 카테고리별 (식린이를 위한, 빨리 성장하는 식물, 수분량이 적은 식물, 일조량이 적은 식물) 식물을 슬라이드로 형태로 추천해줍니다.
- 또한, 유저의 사용성을 고려해 해당 식물의 상세보기 탭에 내 식물로 바로 추가할 수 있는 버튼을 추가하였습니다.
 |
|---|
- 사용자가 식물에 대한 일기 혹은 기록이 필요한 경우 활용할 수 있는 다이어리입니다.
- 사진과 함께 다이어리를 작성, 수정, 삭제할 수 있으며 특정 식물 혹은 여러개의 식물을 태그할 수 있습니다.
- 다이어리의 메인 페이지는 게시글 형태로 보기, 갤러리 형태로 보기 두 가지 형태를 지원합니다.
 |
|---|
- 사용자의 식물을 관리할 수 있는 페이지입니다.
- 북마크 버튼을 통해 사용자의 메인 식물을 변경할 수 있으며 메인 식물로 설정한 경우 메인페이지에 접근할 때 해당 식물이 메인에 노출됩니다.
- 해당 페이지에서 사용자는 식물 등록, 수정, 삭제를 할 수 있습니다.
- 해당 페이지의 상세페이지에서는 식물 도감에서 볼 수 있는 식물에 대한 다양한 정보와 메인페이지에서 볼 수 있는 정보를 확인할 수 있습니다.
 |
|---|
- 사용자가 자신에 대한 정보를 확인하고 수정할 수 있는 페이지입니다.
- PWA로 사용하는 방법과 자주 묻는 질문, 식물 추가 요청 구글 폼, 로그아웃 등의 기능이 포함되어 있습니다.