[프론트엔드 연습 프로젝트] 상세페이지 생성 및 수정

 

습관 별 상세 페이지를 만들고, 이를 수정할 수 있도록 하려고 한다. 

 

세부 습관 링크 만들기

예를 들어, 위의 사진처럼 습관 링크를 클릭하면, 아래 사진과 같이 세부 습관을 일자별로 나타낸다. 

 

세부 습관을 일자별로 나타낸다.

먼저, index.html 을 일부 수정해야 한다. script 태그를 다음과 같이 변경한다. 제목을 a href 태그로 감쌀 때, document 의 아이디로 링크를 이동시켜준다.

 

        const db = firebase.firestore();
          db.collection('habit').get().then((result)=>{
            result.forEach((doc)=>{
              console.log(doc.data())
              var dateHabit = new Date(doc.data().date.seconds*1000)
              var dateHabit = "Date:"+(dateHabit.getMonth()+1)+"/"+dateHabit.getDate()+"/"+dateHabit.getFullYear();
              
              var temp = `<div class="habit">
                <div class="in-box">
                  <div class="habit">
                    <h5 class="title"><a href="/habit.html?id=${doc.id}">${doc.data().title}</a></h5>
                    <div>
                      <span class="date">${dateHabit}</span> <span class="do">${doc.data().do}</span> 
                    </div>   
                  </div>
                </div>
                `;              
                $('.container').append(temp)
            })
        })

 

 

상세페이지를 habit.html 이라는 제목으로 생성한다. html 상단에는 다음과 같이 script 태그로 db 의 습관이름/시작일을 삽입할 container div 와 테이블을 만든다. 테이블은 추후에 일별 습관 기록을 데이터화하면 script 태그로 자동화할 예정이다.

 

<div class="container">

</div>

<button id="edit" class="btn btn-primary">edit</button>

<table class="table">
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Date</th>
      <th scope="col">Succeed</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">3</th>
      <td>05-13-2022</td>
      <td>yes</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>05-13-2022</td>
      <td>no</td>
    </tr>
    <tr>
      <th scope="row">1</th>
      <td>05-13-2022</td>
      <td>yes</td>
    </tr>
  </tbody>
</table>

 

하단의 script 태그는 다음과 같다. new URLSearchParams(window.location.search) 는 [ ] ...

edit 버튼을 누르면, /edit.html?id='...' 로 링크를 이동시킨다. 

 

        const db = firebase.firestore();

        var searchParam = new URLSearchParams(window.location.search)

        db.collection('habit').doc(searchParam.get('id')).get().then((result)=>{
            console.log(result.data())
              var dateHabit = new Date(result.data().date.seconds*1000)
              var dateHabit = "Date Started (M/D/Y): "+(dateHabit.getMonth()+1)+"/"+dateHabit.getDate()+"/"+dateHabit.getFullYear();
                          
              var temp = `<div class="habit">
                <div class="in-box">
                    <div>
                        <h5 class="title"> ${result.data().title}</h5>
                        <p class="firstDate"> ${dateHabit} </p>
                        <p class="do"> ${result.data().do} </p>
                    </div>
                </div>
                `;              
                $('.container').append(temp)            
     
        })
        
        $('#edit').click(function(){
            window.location.href = '/edit.html?id=' + searchParam.get('id')
        })

 

다음으로, 상세페이지를 수정할 수 있도록 만들자. edit 페이지는 write.html 과 유사하게 만드는데, [ ] 좀 더 추가