[2team_introduce] HTML file들 합쳐서 페이지 이동 구현

3일차

 

제출 시간이 얼마 남지 않았다....! 벌써 내일이라니...

팀원들이 만든 모든 페이지를 빠르게 합쳐서 검토한 후 영상과 시연 발표까지 하는 것이 내 임무!

아직 팀원 상세 소개 페이지가 덜 완성되어서 메인페이지와 멤버 카드 페이지 먼저 합치고 있어야겠당

 

찾아보니 어렵지 않다!

아래처럼 따라하면 뚝딱!

 

 

 today's to-do-list 

• DB에서 데이터 가져와서 수정/삭제하기.
• 팀원들이 만든 파일들 합치기.
• 깃허브로 배포하기.

 

DB에서 데이터 가져와서 수정/삭제하기.

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { doc, setDoc, updateDoc, deleteDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { query, where } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


// DB Config
const firebaseConfig = { };


// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);


//DB에서 id 값에 맞는 특정 데이터 가져오기
const q = query(
            collection(db, 'members'),
            where('id', '==', id2)
);
        
        
// DB에서 id 값에 맞는 특정 데이터 가져오기
const querySnapshot = await getDocs(q);
querySnapshot.forEach((el) => {
    name = el.data().name;
    mbti = el.data().mbti;
    hobby = el.data().hobby;
    live = el.data().live;
    style = el.data().style;
    point = el.data().point;
    github = el.data().github;
    blog = el.data().blog;
    email = el.data().email;
    pw = el.data().password;
    image = el.data().image;
    date = el.data().date;
    id = el.data().id;

});


//해당 정보를 해당 위치에 기입
$("#name").text(name);
$("#name-text").text(name);
$("#mbti").text(mbti);
$("#birth").text(date);
$("#hobby").text(hobby);
$("#live").text(live);
$("#style").text(style);
$("#point").text(point);
$("#github").text(github);
$("#blog").text(blog);
$("#email").text(email);
$("#profileimg").attr("src", image);


// 데이터 수정
$("#modifconfirmbtn").click(async function () { //수정버튼을 누르면
            let modipw = $('#modipw').val();

            if (modipw == pw) { // 패스워드가 일치할 때
                verifyModal.hide();
                modifyModal.show();

                $("#upload-image-url").val(image);
                updateImagePreview(image);
                $("#modiname").val(name);
                $("#modimbti").val(mbti);
                $("#modiDateInput").val(date);
                $("#modihobby").val(hobby);
                $("#modilive").val(live);
                $("#modistyle").val(style);
                $("#modipoint").val(point);
                $("#modiGithub").val(github);
                $("#modiBlog").val(blog);
                $("#modiEmail").val(email);
            } else {
                alert('비밀번호를 확인해주세요')
                return;
            }
        });

DB Config는 생성한 DB에서 값들을 가져오면 된다. 이 값들이 공개되면 누구나 접근할 수 있기 때문에 값은 기입하지 않았다.

 

 

HTML file들 합쳐서 페이지 이동할 수 있도록 구현하기.

// 멤버 구경하러가기 버튼을 누르면 멤버카드 페이지로 이동.
<script>
      document.addEventListener("DOMContentLoaded", function () {
          var button = document.querySelector(".sticky-button");
          button.addEventListener("click", function () {
              window.location.href = "member.html";
          });
      });
</script>
    
    

// header에 있는 로고 이미지를 눌렀을 때, main페이지로 이동.
<img onclick="location.href='main.html'" class="logoimg" src="./로고.png">

 

위의 코드처럼 다른 페이지들도 이어주고, DB에서 데이터들도 정상적으로 이동하는지 검토해보면 완료!

 

 

깃허브로 배포하기. 

 

Github → 해당 Repository → Settings → Pages → Branch를 main으로 바꿔준 뒤 save를 누르고 조금만 기다리면

배포까 완료된 것을 볼 수 있다!!!

https://twoduel.github.io/2team_introduce/main%20project/main.html

이게 우리 팀 소개 페이지의 url이다!

 

시연 영상은 포트폴리오에 올려놓겠습니당^____^