상세 레시피 페이지 개발하기

0. 상세 레시피 페이지 img

1) 렌더링시 보이는 페이지

2) 레시피 탭 페이지

3) 재료 탭 페이지

4) 리뷰 탭 페이지

1. 첫번째로 구현한 js

$(document).ready(function(){

    $('ul.tabs li').click(function(){
    let tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tabContent').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
    })


})

탭의 전체를 담는 div를 사용하여 하나로 묶고, 두개의 탭 중 하나를 클릭했을 때, 클릭한 탭 개체에 "current"클래스를 추가하도록 하는 코드이다.
이미 하나의 탭 개체를 클릭했을 때 다른 탭 개체를 클릭한 경우에는, 기존의 클릭되었던 탭 개체에는 "current"클래스를 지우고 새로 클릭한 탭 개체에 "current" 클래스를 부여하도록 한다.

2. 두번째로 구현한 js

$(document).ready(function () {
        // 레시피 이름 url에서 가져오기
            const urlParams = new URLSearchParams(window.location.search);
            const name = urlParams.get("recipe_name");
            })

이후 해당 레시피의 데이터들을 불러올 때 사용하기 위해 list 페이지에서 클릭한 레시피의 이름을 url로 받아오는 작업이다.

3. 세번째로 구현한 js

$.ajax({
                type: "GET",
                url: `/detail/recipe-detail?recipe_name=${name}`,
                data: {},
                success: function (response) {

                    let targetRecipe = response['target_recipe']
                    // console.log(targetRecipe)

                    let recipeName = targetRecipe['recipe_name']
                    let recipeImg = targetRecipe['recipe_img']
                    let recipeIngs = targetRecipe['recipe_ing']
                    let recipeDiff = targetRecipe['recipe_diff']
                    let recipeTime = targetRecipe['recipe_time']
                    let recipeDetails = targetRecipe['recipe_detail']
                    let recipeLike = targetRecipe['recipe_like']
                    let recipeWritter = targetRecipe['recipe_writter']
                    // console.log(recipeName, recipeImg, recipeIngs, recipeDiff, recipeTime, recipeDetails, recipeLike, recipeWritter)

            // 레시피 이미지, 레시피 타이틀 박스, 레시피 탭의 아이콘 박스 append
                    temp_html = `<img class="recipe_img" src="${recipeImg}">`
                    temp_html2 = `<span class="recipe_name" id="name">${recipeName}</span><br>
                                  <span class="recipe_writter" id="writter">${recipeWritter}</span><br>
                                  <span class="recipe_diff"><img src="/static/img/diffIcon.png" class="diffIcon">${recipeDiff}</span><br>
                                  <div class="recipe_add">
                                      <button type="button" id="bookmarkBtn"><img src="/static/img/addIcon.png" class="addIcon"></button>
                                      <p class="arrow_box">즐겨찾기에 추가!</p>
                                  </div>
                                  <span class="recipe_like"><img src="/static/img/likeIcon.png" class="likeIcon">${recipeLike}</span>`

                    temp_html3 = `<div class="timeIconWrap">
                                      <img src="/static/img/timeIcon.png" class="timeIcon">
                                      <span class="timeBox">${recipeTime}</span>
                                  </div>
                                  <div class="diff2IconWrap">
                                      <img src="/static/img/3starsIcon.png" class="diff2Icon">
                                      <span class="diff2Box">${recipeDiff}</span>
                                  </div>`

                    $('#imgWrap').append(temp_html)
                    $('#titleWrap').append(temp_html2)
                    $('#iconWrap').append(temp_html3)

url로 받아온 클릭된 레시피의 이름의 관련 데이터들을 서버에서 받아오는 작업이다. 그 후, temp_html이란 변수를 사용하여 레시피의 이미지, 타이틀 박스 내의 각종 이름, 추천 수, 조리과정 등을 실제 웹에 구현한다.