KDT0_KimDaBin 아티스트 사진 관리 서비스 #52

dabin-Hailey · 2023-08-18T14:15:37Z

스타쉽 아티스트 사진 관리 서비스

📌 프로젝트 개요

🔗 사이트 URL

배포 링크

📆 프로젝트 기간

2023.08.07 ~ 2023.08.18

🛠️ 기술 스택

📂 디렉토리 구조

📦public
 ┣ 📂.firebase
 ┃ ┗ 📜hosting.cHVibGlj.cache
 ┣ 📂assets
 ┃ ┣ 📂favicon
 ┃ ┃ ┗ 📜fav1.PNG
 ┃ ┗ 📂image
 ┃ ┃ ┗ 📜No-Image.png
 ┣ 📂css
 ┃ ┗ 📜main.css
 ┣ 📂js
 ┃ ┣ 📜index.js
 ┃ ┣ 📜loader.js
 ┃ ┣ 📜profile.js
 ┃ ┣ 📜register.js
 ┃ ┗ 📜showImg.js
 ┣ 📜404.html
 ┣ 📜index.html
 ┣ 📜profile.html
 ┗ 📜register.html

👤 유저 플로우

📌 프로젝트 내용

✅ 구현 내용

[필수 요구사항]

[선택 요구사항]

사진 관리 페이지와 관련된 기타 기능도 고려해 보세요.
페이지가 보여지기 전에 로딩 애니메이션이 보이도록 만들어보세요.
직원을 등록, 수정, 삭제가 가능하게 해보세요.
직원 검색 기능을 추가해 보세요.
infinity scroll 기능을 추가해 보세요.
사진을 편집할 수 있는 기능을 추가해 보세요.
LocalStorage 사용

✅ 구현 세부사항

전체 아티스트 리스트 페이지 (index.html)	아티스트 삭제 (index.html)

✔️ 전체 아티스트 정보 확인 ✔️ '정보 수정' 버튼을 통해 아티스트 상세 프로필 페이지로 이동	✔️ 삭제 원하는 아티스트 선택해서 삭제 가능 (체크박스) ✔️ 체크박스 선택 후 '아티스트 삭제' 버튼 누르면 즉시 삭제
신규 아티스트 등록 (register.html)	아티스트 상세 프로필 페이지 (profile.html)

✔️ 아티스트 정보 기입 및 사진 추가 가능 ✔️ 정보 미기입 시 alert 창 띄우기 ✔️ '등록' 버튼 누르면 기입한 내용 및 사진을 DB에 반영 후 전체 리스트 페이지로 이동	✔️ 아티스트 정보 수정 가능 ✔️ 사진을 클릭하면 다른 사진으로 변경 가능 ✔️ '사진 삭제' 버튼을 눌러 사진 삭제 가능 ✔️ 아티스트 모든 정보 수정 후 '수정' 버튼을 누르면 수정된 정보 DB에 반영 후 전체 리스트 페이지로 이동 ✔️ 'Home' 버튼을 눌러 정보를 수정하지 않고 전체 리스트 페이지로 이동
로딩 애니메이션	모바일 반응형

✔️ 정보를 받아오는 과정이 필요한 페이지에 진입하면 로딩 애니메이션 작동 ✔️ 전체 리스트 페이지 ✔️ 아티스트 상세 프로필 페이지	✔️ 모바일과 태블릿 환경에 진입 시(최대 768px) 반응형 작동

YongYong21

Readme 구체적으로 작성하셔서 보기가 편했습니다.

저도 다음부터 Readme를 구체적으로 작성해봐야겠어요

프로젝트 고생하셨습니다.

YongYong21 · 2023-08-21T10:38:03Z

public/js/register.js

+  if ($('#name').val() === '') {
+    alert('이름을 입력하세요.');
+  } if ($('#age').val() === '') {
+    alert('나이를 입력하세요.');
+  } if ($('#phone').val() === '') {
+    alert('휴대폰 번호를 입력하세요.');
+  } if ($('#group').val() === '') {
+    alert('소속 그룹을 입력하세요.');
+    return;
+  }


else if로 작성하는 것이 더 좋아보여요.
alert창이 여러개가 나오는 것은 좋지 않아보입니다.

YongYong21 · 2023-08-21T10:42:11Z

public/js/profile.js

+    // '사진 삭제' 버튼
+    const removeImgBtnEl = document.getElementById('remove-img-btn');
+
+    removeImgBtnEl.addEventListener('click', () => {
+      const previewImg = document.getElementById('previewImg');
+
+      //미리보기 이미지 기본 이미지로 변경
+      previewImg.setAttribute("src", "https://firebasestorage.googleapis.com/v0/b/artist-photo.appspot.com/o/image%2FNo-Image.png?alt=media&token=3dfa5a87-5480-436b-ac2b-fc81fbec36a8");
+
+
+      //firebase에서 프로필 사진을 기본 이미지로 변경
+      docRef.update({ "이미지": "https://firebasestorage.googleapis.com/v0/b/artist-photo.appspot.com/o/image%2FNo-Image.png?alt=media&token=3dfa5a87-5480-436b-ac2b-fc81fbec36a8" });
+    })


사진 삭제 버튼 클릭시가 아니라, 수정 버튼 클릭시 변경하는 것이 좋아보여요.

ewinkite

코드에 설명을 꼼꼼하게 적어주셔서 보기 편했습니다!! 수고하셨습니다 :)

ewinkite · 2023-08-22T10:40:34Z

public/js/index.js

+
+      // 데이터베이스에서 해당하는 데이터 가져오기
+      db.collection('artistList')
+        .where('휴대폰번호', '==', phoneNum)


휴대폰번호를 기준으로 데이터를 찾으신 이유가 있으실까요?? 궁금합니다!!

휴대폰번호를 기준으로 데이터를 찾으신 이유가 있으실까요?? 궁금합니다!!

아마 firestore객체에서 찾을만한 데이터가 없으셔서 핸드폰번호로 찾은것 같습니다.
id를 데이터 객체에 추가해야 id로 찾을 수 있습니다.

휴대폰번호를 기준으로 데이터를 찾으신 이유가 있으실까요?? 궁금합니다!!

아마 firestore객체에서 찾을만한 데이터가 없으셔서 핸드폰번호로 찾은것 같습니다. id를 데이터 객체에 추가해야 id로 찾을 수 있습니다.

맞습니다! 이름은 동명이인이 있을 수도 있어서 처음 기준을 잡을 때 휴대폰번호로 설정하였습니다.
이 부분은 리팩토링 시에 수정해보겠습니다! :)

KSJT · 2023-08-25T11:36:44Z

다빈님 이번 과제 테마? 너무 좋아요 어떤 생각으로 과제를 하셨는지 느껴져서 너무 좋았고 고민이 많다고 말씀하시는데 코드는 항상 너무 깔끔한 거 같아요 또 많이 배우고 갑니당

LEEJAEHYUB

다빈님 firebase를 사용하셔서 firestore에 데이터 업로드 및 삭제 , 불러오기 등 다 잘구현 하셨어요!
HTML/CSS 부분은 지난 과제부터 계속 잘해주시고 계십니다 ㅎㅎ
Javascript 로직을 짜는 부분도 잘하셨지만 조금 더 로직을 깔끔하게 정의해보시고 작성해보세요!
과제하느라 고생하셨습니다!

LEEJAEHYUB · 2023-08-25T14:52:03Z

firestore.rules

@@ -0,0 +1,9 @@
+rules_version = '2';
+
+service cloud.firestore {


firestore의 규칙은 .gitignore에 등록하시는 것을 추천드립니다 :)

LEEJAEHYUB · 2023-08-25T14:52:34Z

public/404.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>


404페이지 만들어보셨군요! 훌륭합니다 :)

LEEJAEHYUB · 2023-08-25T14:54:29Z

public/index.html

+  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
+  <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
+  <script>
+    const firebaseConfig = {


firebase의 설정도 javascript파일로 따로 빼서 작업해보세요!
그리고 물론 firebase의 설정키는 다른 API 키들 보다 안전해서 남들이 봐도 상관은 없다고는 하지만 그래도 개인 apikey같은 것은 env(환경변수)를 사용해서 관리해보세요! 해당 env파일은 gitignore에 등록하시는것잊지 마시구요 !

아 물론 리뷰를 위해서는 여기에 올려야 하는 것은 맞습니다 ㅎㅎ

LEEJAEHYUB · 2023-08-25T14:54:52Z

public/js/index.js

+    snapshot.forEach(doc => {
+      // console.log(doc.data())
+      // console.log(doc);
+      var template = `<tr>


var보다는 let, const 방식으로 변수를 선언하는게 좋아보여요!

LEEJAEHYUB · 2023-08-25T15:12:34Z

public/js/index.js

+          if (!snapshot.empty) {
+            const doc = snapshot.docs[0];
+            const id = doc.id;
+            // const imgURL = doc.data().이미지;


저는 이거 동작하던데요..! 다시 확인해보세요! 그리고 위의 코멘트에서 휴대폰번호를 기준으로 찾은이유는 저도 궁금했는데 데이터를 찍어보니 firestore의 객체에 기준으로 삼을만한 키값이 없더라구요. 보통은 고유한 값인 ID를 데이터 객체에 추가해서 id로 검색하고 추가, 삭제, 수정 등을 해주시는게 좋습니다 :) firestore에서 데이터를 등록하고 랜덤하게 생성한 id를 해당 객체에 등록하는 방법도 한번 찾아보세요!

LEEJAEHYUB · 2023-08-25T15:13:12Z

public/js/index.js

+
+      // 데이터베이스에서 해당하는 데이터 가져오기
+      db.collection('artistList')
+        .where('휴대폰번호', '==', phoneNum)


휴대폰번호를 기준으로 데이터를 찾으신 이유가 있으실까요?? 궁금합니다!!

아마 firestore객체에서 찾을만한 데이터가 없으셔서 핸드폰번호로 찾은것 같습니다.
id를 데이터 객체에 추가해야 id로 찾을 수 있습니다.

LEEJAEHYUB · 2023-08-25T15:14:03Z

public/js/profile.js

+      }
+
+      // 이미지 변경 처리
+      var file = document.querySelector('#profileImgInput').files[0];


let, const를 습관화해보세요!

LEEJAEHYUB · 2023-08-25T15:14:50Z

public/js/profile.js

+
+      if (file) {
+        var storageRef = storage.ref();
+        var 저장할경로 = storageRef.child('image/' + file.name);


지금은 학습중이라 한글로 변수명을 짓는 것은 매우 좋습니다 ㅎㅎ
하지만 영어로 변수를 짓는 연습도 자주 해두시는것을 추천드립니다.

LEEJAEHYUB · 2023-08-25T15:21:27Z

public/js/register.js

+const resetBtnEl = document.getElementById('reset-btn');
+
+uploadBtnEl.addEventListener('click', () => {
+  //입력 폼 유효성 검사 (입력 값이 비어있으면)


유효성검사는 항상 귀찮고 생각하기 힘든 부분인 것 같아요!
해당 부분을 조금 간단하게 바꿔본다면
로직을 이렇게 짤 수 있을것 같아요
name, age, phone, group의 value 중에서 하나라도 작성이 안되어 있다면 alert를 띄어주는 것이죠!

// isComplete는 input값들중 한개라도 작성 되지 않으면 false값이 되겟죠? const isComplete = $('#name').val() === '' && $('#age').val() === '' && $('#phone').val() === '' && $('#group').val() === ''; if(!isComplete) { alert("빈칸을 모두 채워주세요."); }

간단하게 알림창을 이렇게 바꿔볼 수도 있을 것 같습니다 ㅎㅎ
용희님 의견처럼 alert창을 여러개 띄우는건 유저 경험상 좋지는 않을 것 같아요 :)

리드미 수정

4d50edf

dabin-Hailey changed the title ~~KDT0_JeongSeoHyeon 아티스트 사진 관리 서비스~~ KDT0_KimDaBin 아티스트 사진 관리 서비스 Aug 18, 2023

YongYong21 reviewed Aug 21, 2023

View reviewed changes

ewinkite reviewed Aug 22, 2023

View reviewed changes

LEEJAEHYUB reviewed Aug 25, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

KDT0_KimDaBin 아티스트 사진 관리 서비스 #52

KDT0_KimDaBin 아티스트 사진 관리 서비스 #52

dabin-Hailey commented Aug 18, 2023

YongYong21 left a comment

YongYong21 Aug 21, 2023

YongYong21 Aug 21, 2023

ewinkite left a comment

ewinkite Aug 22, 2023

LEEJAEHYUB Aug 25, 2023

dabin-Hailey Aug 28, 2023

KSJT commented Aug 25, 2023

LEEJAEHYUB left a comment

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

LEEJAEHYUB Aug 25, 2023

		@@ -0,0 +1,9 @@
		rules_version = '2';

		service cloud.firestore {

KDT0_KimDaBin 아티스트 사진 관리 서비스 #52

Are you sure you want to change the base?

KDT0_KimDaBin 아티스트 사진 관리 서비스 #52

Conversation

dabin-Hailey commented Aug 18, 2023

스타쉽 아티스트 사진 관리 서비스

📌 프로젝트 개요

🔗 사이트 URL

📆 프로젝트 기간

🛠️ 기술 스택

📂 디렉토리 구조

👤 유저 플로우

📌 프로젝트 내용

✅ 구현 내용

✅ 구현 세부사항

YongYong21 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ewinkite left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KSJT commented Aug 25, 2023

LEEJAEHYUB left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment