JS CRD 연습

슬프게도 프론트에서 너무 많이 막혀서..

적어도 같은 곳에서는 다시금 시간 지연을 반복하지 않게끔 공부해보았다.

 

// POST 요청 보내기
// 1. 요청할 데이터 생성(정의)
// 2. POST 요청 설정(headers = 인증방식, body 양식 등 / body = 내용)
// 3. fetch 사용하여 요청, 응답 받기(서버 urls.py에 보냄, 서버의 응답 상태를 사용자에 보고) 

async function reviewupload() {
    // 1. 요청할 데이터 생성
    const review = document.getElementById('review').value
    var data = {
      "content": review
    };
  
    // 2. POST 요청 설정
    var requestOptions = {
      method: 'POST',
      headers: {
        'Authorization': 'Bearer ' + localStorage.getItem("access"),
        'content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    };
  
    // 3. fetch를 사용하여 요청 보내기
    fetch('http://127.0.0.1:8000/review/alcohol/', requestOptions)
      .then(response => {
        if (response.ok) {
          console.log("리뷰가 성공적으로 전송되었습니다.");
        } else {
          console.error("리뷰 전송에 실패했습니다.");
        }
      })
      .catch(error => {
        console.error("오류 발생:", error);
      });
  }

// GET
// 1. 다음 페이지에서 가져와야 할 것을 설정
// 2. 맞는 것과 아닌 것을 구분하는 장치
// 3. 맞는 경우 응답(HTML 파일)과, 아닌 경우 응답을 게시

async function AlcholCategoryShow(category_name) {
    // 3개의 카테고리 중 맞는 카테고리의 것만 들고 올 것(카테고리 이름이 인자)
    let url = ''
    if (category_name == undefined) {
        url = `${BACKEND_API}/alchol/`
    } else {
        url = `${BACKEND_API}/alchol/category/${category_name}/`
    }
    //GET method를 설정
    const response = await fetch(url, {
        method: "GET",
    });
	
    let response_json = await response.json()
	// 카테고리 이름이 다를 때 응답
    if (category_name == undefined) {
        response_json = response_json['results']
    }

    const alchol_category_list = document.getElementById('alchol-category-list')

    alchol_category_list.innerHTML = ''
	// 카테고리 이름이 같을 때(이상 없을 때) 응답
    response_json.forEach(e => {
        const id = e.id
        const name = e.name
        const beverage = e.beverage
        const image = e.image
        const taste = e.taste
		
        //우리가 원하고자 하는 카드섹션을 가져옴
        alchol_category_list.innerHTML += `<div class="card" onclick="AlcholDetailShow(${id})">
                                    <img src="${BACKEND_API}${image}">
                                    <div class="alchol-card">
                                        <span class="alchol-name">${name}</span>
                                        <span class="alchol-desc">${beverage}도</span>
                                        <span class="alchol-desc">#${taste}</span>
                                    </div>
                                </div>`
    })
}

// GET 2번째

async function AlcholDetailInfoShow() {
// URL에서 쿼리 매개변수를 추출하여 alchol_id 변수에 저장. 이를 통해 요청할 알코올 정보의 ID를 얻음
  const urlParams = new URL(location.href).searchParams;
  const alchol_id = urlParams.get('id');
  // 서버로 GET 요청을 보냄. 백엔드 서버의 기본 URL에 알코올 ID를 포함한 경로를 만듦.
  const response = await fetch(`${backend_base_url}/alchol/${alchol_id}/`, {
    method: 'GET',
  })
  // 응답을 await 키워드를 사용하여 기다립니다. response.json() 메서드를 호출하여 응답을 JSON 형식으로 변환. 그 결과를 response_json 변수에 저장.
  const response_json = await response.json()
  
  // imageCard라는 HTML 요소를 찾고, img 요소를 동적으로 생성하여 src 속성을 설정.
  // response_json.alchol.image는 응답에서 추출한 알코올 이미지의 URL을 나타냄.
  // 생성한 img 요소를 imageCard에 추가.
  // 아래 내용들도 비슷한 형식으로 자식요소에 추가.
  const imageCard = document.getElementById('image-box')
  const alcholImage = document.createElement('img')
  alcholImage.setAttribute('src', `https://api.sw-iing.com/${response_json.alchol.image}`)
  imageCard.appendChild(alcholImage)

  const newName = document.getElementById('name')
  const Name = document.createElement('p')
  Name.innerText = response_json.alchol.name
  newName.appendChild(Name)

  const newBeverage = document.getElementById('beverage')
  const Beverage = document.createElement('p')
  Beverage.innerText = response_json.alchol.beverage
  newBeverage.appendChild(Beverage)

  const newSort = document.getElementById('sort')
  const Sort = document.createElement('p')
  Sort.innerText = response_json.alchol.sort
  newSort.appendChild(Sort)
  
  const newTaste = document.getElementById('taste')
  const Taste = document.createElement('p')
  Taste.innerText = response_json.alchol.taste
  newTaste.appendChild(Taste)
  
  // review_list라는 HTML 요소를 찾고, response_json.reviews 배열에 대해 반복문을 실행.
  // 각 리뷰에 대해 콘텐츠와 ID를 추출하여 동적으로 생성한 HTML 요소에 추가.
  const review_list = document.getElementById('review-list')
  response_json.reviews.forEach(review => {
    const content = review.content 
    const id = review.id 
    const column_JM = document.createElement('div')
    column_JM.setAttribute('class', 'column-JM')
    review_list.appendChild(column_JM)
    const typing_review = document.createElement('div')
    typing_review.setAttribute('class', 'typing-review')
    typing_review.innerText = content
    column_JM.appendChild(typing_review)
    // 각 리뷰에 대한 삭제버튼 생성
    const delete_review = document.createElement('button')
    delete_review.setAttribute('type', 'button')
    delete_review.setAttribute('class', 'btn btn-info')
    delete_review.setAttribute('id', `delete_review${id}`)
    delete_review.innerText = '리뷰 삭제'
    column_JM.appendChild(delete_review)
    // 버튼 누를 시에 deleteReview 함수 실행
    document.getElementById(`delete_review${id}`).addEventListener('click',()=>{
      deleteReview(id)
    })
  })
  
  //북마크 버튼이라는 HTML 요소를 찾아서 정의함
  // 북마크 버튼 누를 시에 AlcholBookmark 함수 실행
  const bookmarkButton = document.getElementById('bookmarkButton')
  bookmarkButton.setAttribute('onclick', "AlcholBookmark()")
}

// DELETE method
// 보낼 body 내용이 없기 때문에 사용자 인증을 딴 headers만 보냄.

async function deleteReview(review_id){
  const response = await fetch(`${backend_base_url}/review/alcoholreview/${review_id}`, {
    method : 'DELETE',
    headers : {
      'Authorization': 'Bearer ' + localStorage.getItem("access"),
    }
  })
  location.reload()
}