팀소개웹사이트 3일차

 

├── templates/
│   └── phoenix.html
├── static/
│   └── style.css
├── app.py
└── database.db

 

위의 구조로 간소화했으며 

 

아래의 작동들이 되도록 만들었다.

1. 이미지를 클릭시 nickName을 확인하여 DB에서 유저 정보를 가져와 하단에 출력하는 것.

하단에 출력되었을 떄 버튼도 만들어지는데 삭제 버튼과 수정 버튼도 나타나도록 만들었다

 

#details
@app.route("/members/<username>/details", methods=["GET"])
def member_details(username):
    member = Member.query.filter_by(username=username).first_or_404()
    return jsonify({
        "username": member.username,
        "image_url": member.image_url,
        "mbti": member.mbti,
        "collabo_style": member.collabo_style,
        "advantage": member.advantage,
        "blog_url": member.blog_url
    })

 

 

    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.portrait').forEach(function (portrait) {
        portrait.addEventListener('click', function () {
          const username = this.getAttribute('data-username');

          fetch(`/members/${username}/details`)
            .then(response => response.json())
            .then(data => {
              const textbox = document.querySelector('.gr_box #textbox');
              textbox.innerHTML = `<h3 class="name">${data.username}</h3>
                                    <p class="mbti">${data.mbti}</p>
                                    <p><br /></p>
                                    <p class="collabo_style">${data.collabo_style}</p>
                                    <p class="advantage">${data.advantage}</p>
                                    <p class="blogurl">${data.blog_url}</p>
                                    <button type="button" class="btn btn-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">EDIT</button>
                                    <button type="button" class="btn btn-danger" onclick="deleteMember('${username}')">삭제</button>
                                    `
                ;
              // 필요한 경우 이미지 업데이트
              const photobox = document.querySelector('.gr_box .photobox');
              photobox.innerHTML = `<img src="${data.image_url}" alt="${data.username}" style="width: 100%; height: auto;">`;
            })
            .catch(error => console.error('Error:', error));
        });
      });
    });

 

 

 

2. 하단에 출력된 삭제 버튼의 삭제 함수

    function deleteMember(username) {
      if (confirm('삭제 하시겠습니까?')) {
        fetch(`/members/${username}/delete`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
        }).then(response => {
          if (response.ok) {
            alert('멤버가 성공적으로 삭제되었습니다.');
            // 변경사항을 반영하기 위해 페이지 새로고침 또는 UI 업데이트
            window.location.reload(); // 페이지 새로고침
          } else {
            alert('멤버를 삭제하는데 실패했습니다.');
          }
        }).catch(error => {
          console.error('Error:', error);
          alert('에러가 발생했습니다.');
        });
      }
    }

 

 

3번째는 팀원분이 좋은 아이디어로 코드를 재사용성을 올려 수정하기를 편하게 바꾸었다.
팀원을 생성할때 이름이 비워져있으면 생성이 되고 이미 있는 이름이면 다른 값을 수정할 수 있는 로직을 만들어 놓으셨다
아쉬운 점이 2가지 있었다.
1. ID값으로 했다면 이름도 변경이 가능하여 좋았을 것 같았다. 하지만 기존의 코드를 다시 한번 갈아엎어야했다.
2. EDIT 모달창의 선택한 팀원의 데이터가 나타났으면 좋았을 것 같았다.

 이 떄 당시 다시 또 갈아엎기에는 다음날이 발표였기에 시간이 부족하다는 판단하에 그대로 진행했다.

발표 준비를 하면서 서로에게 코드 리뷰를 진행하고 맡은 바에 각자 최선을 다한것 같았다