KDT0_KimMiJung / 우리집 식물 관리 서비스

.env

@@ -0,0 +1,6 @@
+FIREBASE_API_KEY = AIzaSyAaOxlvdJlsMMUZHDi325Y4SOUI2-wvO6U
+FIREBASE_AUTH_DOMAIN = myplant-21025.firebaseapp.com
+FIREBASE_PROJECT_ID = myplant-21025
+FIREBASE_STORAGE_BUCKET = myplant-21025.appspot.com
+FIREBASE_MESSAGING_SENDER_ID = 258161978128
+FIREBASE_APP_ID = 1:258161978128:web:4228fd8ad30674909c5395

.gitignore

@@ -0,0 +1,2 @@
+.DS_Store
+.env

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}

README.md

@@ -1,50 +1,55 @@
+# 🪴 우리집 식물 관리 서비스 - 마이플랜트 🪴
 
-# :camera: 직원 사진 관리 서비스
-
-직원들의 사진을 관리할 수 있는 사진 관리자 서비스를 만들어 보세요.
-
-과제 수행 및 리뷰 기간은 별도 공지를 참고하세요!
-## [과제 수행 및 제출 방법]
-1. 현재 저장소를 로컬에 클론(Clone)합니다.
-2. 자신의 본명으로 브랜치를 생성합니다.(구분 가능하도록 본명을 꼭 파스칼케이스로 표시하세요, git branch KDT0_이름)
-3. 자신의 본명 브랜치에서 과제를 수행합니다.
-4. 과제 수행이 완료되면, 자신의 본명 브랜치를 원격 저장소에 푸시(Push)합니다.(main 브랜치에 푸시하지 않도록 꼭 주의하세요, git push origin KDT0_이름)
-5. 저장소에서 main 브랜치를 대상으로 Pull Request 생성하면, 과제 제출이 완료됩니다!(E.g, main <== KDT0_이름)
-6. Pull Request 링크를 LMS로도 제출해 주셔야 합니다.
-7. main 혹은 다른 사람의 브랜치로 절대 병합하지 않도록 주의하세요!
-8. Pull Request에서 보이는 설명을 다른 사람들이 이해하기 쉽도록 꼼꼼하게 작성하세요!
-9. Pull Request에서 과제 제출 후 절대 병합(Merge)하지 않도록 주의하세요!
-10. 과제 수행 및 제출 과정에서 문제가 발생한 경우, 바로 담당 멘토나 강사에서 얘기하세요!
-
-## [필수 요구사항]
-- “AWS S3 / Firebase 같은 서비스”를 이용하여 사진을 관리할 수 있는 페이지를 구현하세요.
-- 프로필 페이지를 개발하세요.
-- 스크롤이 가능한 형태의 리스팅 페이지를 개발하세요.
-- 전체 페이지 데스크탑-모바일 반응형 페이지를 개발하세요.
-- 사진을 등록, 수정, 삭제가 가능해야 합니다.
-- 유저 플로우를 제작하여 리드미에 추가하세요.
-* CSS
-  * 애니메이션 구현
-  * 상대수치 사용(rem, em)
-* JavaScript
-  * DOM event 조작
-
-## [선택 요구사항]
-- 사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
-- 페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
-- 직원을 등록, 수정, 삭제가 가능하게 해보세요.
-- 직원 검색 기능을 추가해 보세요.
-- infinity scroll 기능을 추가해 보세요.
-- 사진을 편집할 수 있는 기능을 추가해 보세요.
-- LocalStorage 사용
+우리집에서 키우는 식물들의 정보를 쉽게 추가하고 관리할 수 있게 해주는 서비스입니다!
+<br>
+
+## [배포 링크]
+
+https://
+<br>
+
+## 기술 스택
+
+<img src="https://img.shields.io/badge/html5-E34F26?style=for-the-badge&logo=html5&logoColor=white">
+<img src="https://img.shields.io/badge/css-1572B6?style=for-the-badge&logo=css3&logoColor=white">
+<img src="https://img.shields.io/badge/javascript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black">
+<img src="https://img.shields.io/badge/firebase-FFCA28?style=for-the-badge&logo=firebase&logoColor=white">
+<img src="https://img.shields.io/badge/git-F05032?style=for-the-badge&logo=git&logoColor=white">
+<img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white">
+
+## [필수 요구사항 - 구현 완료]
+
+✔️ Firebase 서비스를 이용하여 사진을 관리할 수 있는 페이지 구현
+✔️ 프로필 페이지 개발
+✔️ 스크롤이 가능한 형태의 리스팅 페이지 개발
+✔️ 전체 페이지 데스크탑-모바일 반응형 페이지를 개발
+✔️ 사진 등록, 수정, 삭제 기능 추가
+✔️ 유저 플로우를 제작하여 리드미에 추가
+✔️ CSS - 애니메이션 구현 & 상대수치 사용(rem, em)
+✔️ JavaScript - DOM event 조작
+<br>
+
+## [선택 요구사항 중 구현한 기능]
+
+✔️ 직원 등록, 수정, 삭제 기능 추가
+
+## 아쉬운점 & 느낀점
+
+- HTML, CSS 부터 먼저 완성한 뒤 Database 연결 작업을 시작했는데, 기존에 만들어져있던 무수한 클래스명과 각종 요소들을 다시 Firebase와 연결하는 과정에서 꽤나 애를 먹었다. 때문에 시간이 촉박하여 완전히 구현하지 못한 기능들도 많고 개인적으로 아쉬움이 많이 남는다. 이번 과제를 계기로 추후에는 DB 연결부터 먼저 해놓고 디자인을 시작하는게 훨씬 효율적일 것 같다.
+- 구현하는 과정에서 아직 어려운 개념들이 너무 많다고 느껴졌고, 자바스크립트와 친해지기 위해서 앞으로도 부단히 노력해야겠다는 생각이 들었다.
 
 ## [화면 예시]
-![111](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/f1afed4b-547e-4289-8e83-2f0fa188cccb)
-![222](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/72f1ea35-8965-4050-9d0b-b9f27c933f64)
 
+### 리스트 조회
+
+!사진
+<br><br>
 
+### 식물 정보 추가 / 수정
 
-## [흐름]
-![333](https://github.com/KDT1-FE/Y_FE_JAVASCRIPT_PICTURE/assets/96465306/44707a0e-6c5a-4d04-a6bd-58e46f02a9a9)
+!사진
+<br><br>
 
+## [유저플로우]
 
+<img width="718" alt="image" src="https://github.com/mysdpy30s/mysdpy30s/assets/137375435/505a4196-b7cc-416c-ac38-42726882ee59">