Feat: "Link to firebase-store"

add feature getting data from firebasestore

src/js/firebase/firebase.js

@@ -1,6 +1,7 @@
 import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js';
 import { getAnalytics } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-analytics.js';
 import { getAuth, signInWithEmailAndPassword } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-auth.js';
+import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-firestore.js';
 
 const firebaseConfig = {
   apiKey: 'AIzaSyCy7QYDgKpkn-0eH42AmxAki6u4DH1oGZ0',
@@ -35,4 +36,17 @@ const signinSubmit = (auth, email, password) => {
     });
 };
 
-export { auth, signinSubmit };
+/* ------------------------------------ - ----------------------------------- */
+const db = getFirestore(app);
+
+const getData = async members => {
+  const snapshot = await getDocs(collection(db, 'members'));
+
+  snapshot.forEach(doc => {
+    const data = doc.data();
+
+    members.unshift(data);
+  });
+};
+
+export { auth, signinSubmit, db, getData };

src/js/pages/main/main.js

@@ -1,13 +1,29 @@
+import render from './render.js';
+import { db, getData } from '../../firebase/firebase.js';
+
 const $form = document.getElementById('modal-form');
 const $modal = document.getElementById('modal');
 const $backDrop = document.getElementById('modal-backdrop');
 const $body = document.body;
 const [$name, $divisions, $email, $password, $contact, $imageFile] = $form;
 const $logout = document.getElementById('logout');
+
+const state = {
+  isSignin: true,
+  members: [
+    // {
+    //   person: '남궁종민',
+    //   email: 'vbghdl@naver.com',
+    //   contact: '010-6428-6518',
+    //   division: '품질관리부',
+    //   profileUrl: 'https://newsimg.sedaily.com/2021/12/09/22V85NTJGY_1.jpg',
+    // },
+  ],
+};
 /* -------------------------------- Function -------------------------------- */
 const activateModalButton = () => {
   document.getElementById('modal-button').disabled =
-    !$name.value || !$divisions.value || !$password.value || !$contact.value || !$imageFile.value;
+    !$name.value || !$divisions.value || !$email.value || !$password.value || !$contact.value || !$imageFile.value;
 };
 
 const toggleModal = () => {
@@ -44,3 +60,11 @@ document.getElementById('add-button').addEventListener('click', e => {
 document.getElementById('user').addEventListener('click', e => {
   $logout.classList.toggle('hidden');
 });
+
+/* ------------------------------------ - ----------------------------------- */
+
+window.addEventListener('DOMContentLoaded', async e => {
+  await getData(state.members);
+
+  render(state.members);
+});