KDT0_KimMiJung / 우리집 식물 관리 서비스 #55
Conversation
|
우왓 저는 식물 살인마라서..각 식물들 별로 정보들 관리할 겸 이번 과제 식물 관리 할까 했었는데!!! |
|
식물 관리 컨셉에 맞는 디자인 구성이 굉장히 독특하고 이쁜 페이지네요! |
|
단일페이지로 깔끔하게 구현하셨네요 ㅎㅎ 한가지 아쉬운점이라면 반응형이 살짝 아쉬운데 어쩔수없었다고 봅니다.. 다시한번 고생하셨습니다! |
|
@developer-jyyun 감사합니다 지영님! 저는 사실 써보고싶은 이미지가 있어서 이쪽으로 방향을 잡게된거긴 했는데... 지영님은 찐으로 식물 키우기 매니아셨군요..!! 멋지십니당😊 좋은 피드백 주셔서 너무 감사드리고, 나중에 지영님도 식물 관련해서 프로젝트 하시게 되면 꼭 공유해주세요! 😊 |
|
@junkue20 정성 가득담긴 피드백 감사드려요 준규님 :) 모달창 닫기버튼 구현을 계속 해보려고 했는데, 뭐가 문제인건지 이런 방법 저런 방법을 써봤는데도 안되더라구요🥲🥲 결국 리프레쉬 시키는 방식으로 마무리했는데 개인적으로 많이 아쉽네요 흑ㅠㅠ 이 부분도 다시 연구좀 해봐야겠어요 뭐가 문제인지.......그리고 말씀해주신 삭제여부 되묻는 alert 기능은 꼭 필요한 기능인것 같아서 추가하는 방향으로 수정해보려고 합니다! 좋은 아이디어 주셔서 감사합니다 |
|
@jinuk0316 소중한 피드백 감사드려요 진욱님 :) 저는 단일페이지 구현한거였는데도 왜이리 손이 많이 가던지......ㅎㅎㅎㅎ 파이어베이스가 어렵기도 어려웠고 기존에 만들어놓은 클래스명, id랑 각종 요소들 연결하는게 정말 산 넘어 산이라 힘들었네요 🥲 추후에는 이러나 저러나 DB 연동을 먼저 시켜놓고 html/css를 하는게 훨씬 효율적일것 같다는 생각이 들었습니다....!! 반응형도 미리 만들어놓고 DB 연동시키면서 하나씩 다시 손보기 시작한거라 미완성 상태인것도 아쉬움이 많이 남네요 ㅠㅠ 다시 차근차근 손 봐야할거같아요ㅋㅋ |
|
식물 등록 부분에서 업로드를 하면 upload complete가 뜨는게 인상깊었습니당 !! 수정하는 화면에서 기존 사진이 보이는 부분과 제목을 세로로 스타일 한 것도 신기했어요 :) 그리고 식물 목록 background에 보이는 이미지도 잘 하신 것 같아요 !! |
assets/css/main.css
Outdated
| @@ -0,0 +1,667 @@ | |||
| @import url(/assets/css/reset.css); | |||
There was a problem hiding this comment.
CSS에서 @import의 사용은 가급적 지양하시는 게 좋습니다!
| display: none; | ||
| } | ||
|
|
||
| @media screen and (max-width: 430px) { |
There was a problem hiding this comment.
max-width로 미디어 쿼리를 추가하게 되면 보통 성능이 더 안 좋은 모바일 기기에서 연산이 더 많이 일어나게 됩니다!
min-width로 디자인을 잡아보셔도 좋을 것 같아요.
| @import url(/assets/css/reset.css); | ||
|
|
||
| html { | ||
| font-size: 20px; |
There was a problem hiding this comment.
여기도 반응형 단위로 폰트 크기를 잡아주면 좋지 않을까요?
assets/css/main.css
Outdated
| width: 90vw; | ||
| } | ||
| .header__title span { | ||
| font-size: 1.8rem !important; |
There was a problem hiding this comment.
!important는 가급적 사용을 자제하시는 게 좋습니다.
assets/css/main.css
Outdated
| @media screen and (max-width: 430px) { | ||
| html, | ||
| body { | ||
| overflow: hidden; |
There was a problem hiding this comment.
모바일 기기에서 스크롤이 불가능해지네요...
가로로 넘치는 걸 막으시려면 overflow-x로 충분합니다!
| const percent = | ||
| (snapshot.bytesTransferred / snapshot.totalBytes) * 100; | ||
| progress.textContent = `Uploading: ${percent.toFixed(2)}%`; | ||
| }, |
assets/js/index.js
Outdated
| function close() { | ||
| setTimeout(function () { | ||
| location.reload(); | ||
| }, 200); | ||
| } |
There was a problem hiding this comment.
닫을 때마다 새로 고침을 진행하는 이유가 혹시 있을까요?
html에도 새로고침하는 스크립트가 곳곳에 있더라고요.
index.html
Outdated
| @@ -0,0 +1,276 @@ | |||
| <!DOCTYPE html> | |||
| <html lang="en"> | |||
index.html
Outdated
| <script> | ||
| function close() { | ||
| console.log("asdfasfd"); | ||
| setTimeout(function () { | ||
| location.reload(); | ||
| }, 1000); | ||
| } | ||
| </script> |
There was a problem hiding this comment.
호출이 안 되는 스크립트같은데, inline으로 들어가있는 이유가 있을까요?
index.html
Outdated
| <button | ||
| id="btn-close" | ||
| class="close-button" | ||
| onclick="{location.reload()}" |
There was a problem hiding this comment.
이벤트 핸들러는 가급적 스크립트에서 등록해주시는 게 좋습니다.
로직을 추적하고, 코드를 재사용하기도 힘들어지고, 옵션을 추가하기는 불가능해집니다.
|
@marshallku 멘토님 바쁘실텐데 자세히 코드리뷰 해주셔서 정말 감사합니다! 말씀해주신 부분들 최대한 참고하여 리팩토링 진행하겠습니다. 😊 |
🪴 우리집 식물 관리 서비스 - 마이플랜트 🪴
우리집에서 키우는 식물들의 정보를 쉽게 추가하고 관리할 수 있게 해주는 서비스입니다!
[배포 링크]
https://phenomenal-biscotti-07c845.netlify.app
기술 스택
[필수 요구사항 - 구현 완료]
✔️ Firebase 서비스를 이용하여 사진을 관리할 수 있는 페이지 구현
✔️ 프로필 페이지 개발
✔️ 스크롤이 가능한 형태의 리스팅 페이지 개발
✔️ 전체 페이지 데스크탑-모바일 반응형 페이지를 개발
✔️ 사진 등록, 수정, 삭제 기능 추가
✔️ 유저 플로우를 제작하여 리드미에 추가
✔️ CSS - 애니메이션 구현 & 상대수치 사용(rem, em)
✔️ JavaScript - DOM event 조작
[선택 요구사항 중 구현한 기능]
✔️ 직원 등록, 수정, 삭제 기능 추가
아쉬운점 & 느낀점
[화면 예시]
리스트 조회
프로필 정보 보기
[유저플로우]