예제] 레시피, 게시판, 모달

1. 레시피

<div class="container">
    <!-- ♥♥ Ex1. 레시피 등록 -->
    <div class="row">
        <div class="col">
            <!-- 1. 입력양식 들어가는 곳 -->
            <div class="row">
                <div id="recipe-list" class="col">
                    <!-- 여기서 만들어서 템플릿으로 ctrl+x 함 -->
                </div>
            </div>

            <!-- 2. 입력양식 추가하는 버튼 -->
            <div class="row">
                <div class="col d-grid">
                    <button onclick="addRecipeInput()" class="btn btn-outline-primary"> 입력양식 추가 </button>
                </div>
            </div>
        </div> 
    </div>
</div>

<div id="templete" class="d-none">
    <!-- ♥♥ Ex1 -->
    <!-- 3. 레시피 입력양식 -->
    <div class="recipe-input row">
        <div class="col">
            <div class="row">
                <!-- 옵션 -->
                <div class="col">
                    <select class="form-select">
                        <option>한식</option>
                        <option>중식</option>
                        <option>일식</option>
                    </select>
                </div>
                <!-- 삭제버튼 -->
                <div class="col d-grid">
                    <button onclick="deleteInput(this)" class="btn btn-danger">
                        삭제
                    </button>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <textarea class="form-control">
                        글쓰는 공간
                    </textarea>
                </div>
            </div>
        </div>
    </div>
</div>

 <script>
    // ================♥♥ Ex1==================

    // 4. 복사하는 함수만들기
    function addRecipeInput(){

        // 4-1. 템플릿 복사
        const recipeInput = document.querySelector("#templete > .recipe-input").cloneNode(true);

        // 4-2. 데이터 조작
        document.querySelector("#recipe-list").appendChild(recipeInput);
    }

    // 5. 삭제하는 함수만들기
    function deleteInput(target){

        // 5-1. 부모찾아서 remove
        target.closest(".recipe-input").remove();
    }
</script>

 

2. 게시판

<div class="container">
    <!-- ★★ Ex2. (게시판) 제목 listing -->
    <div class="row">
        <div class="col">
            <!-- 1. 입력양식 들어가는 곳 -->
            <div class="row">
                <div id="boardListBox" class="col">
                    <!-- 여기서 만들어서 템플릿으로 ctrl+x 함 -->
                </div>
            </div>

            <!-- 2. 새로고침 버튼 -->
            <div class="row">
                <div class="col d-grid">
                    <button onclick="reloaodTitleList()" class="btn btn-outline-primary"> 글 제목 리스트 새로고침 </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="templete" class="d-none">
    <!-- ★★ Ex2 -->
    <!-- 3. 게시글 입력양식 -->
    <div class="titleWrapper row">
        <div class="boardNum col">1</div>
        <div class="boardTitle col-5">하이이이이이이</div>
        <div class="boardWriter col-5">한조</div>
        <div class="boardDate col">2023.10.16</div>
    </div>
</div>

<script>
// ================★★ Ex2==================
        
    // 4. 복사하는 함수만들기
    // --> 가정] 어떠한 이유에선가 JSON형태로 데이터를 수신하고 있음
    function reloaodTitleList(){
        const response = {
            result: "success",          // ---> 수신 성공했다는.... 그런거겠지뭐
            data: [
                {
                    number: 7,
                    title: "JSON양식{}안에 []안에 {}넣는중",
                    writer: "이런식으로 여러개가 날라오겠지",
                    date: "23.10.16"
                },
                {
                    number: 7,
                    title: "JSON양식{}안에 []안에 {}넣는중",
                    writer: "이런식으로 여러개가 날라오겠지",
                    date: "23.10.16"
                },
                {
                    number: 7,
                    title: "JSON양식{}안에 []안에 {}넣는중",
                    writer: "이런식으로 여러개가 날라오겠지",
                    date: "23.10.16"
                },
                {
                    number: 7,
                    title: "JSON양식{}안에 []안에 {}넣는중",
                    writer: "이런식으로 여러개가 날라오겠지",
                    date: "23.10.16"
                },
                {
                    number: 7,
                    title: "JSON양식{}안에 []안에 {}넣는중",
                    writer: "이런식으로 여러개가 날라오겠지",
                    date: "23.10.16"
                }
            ]
        };


        // 5. 내용복사
        // 가정] 백엔드와 통신을 통해, 위와같이 JSON형태의 데이터가 구성됨
        // --> CSR(클라이언트 사이드 렌더링) 필요!!!

        // 5-1. 새로고침이니까 초기화하는게 필요하겠지. 초기화안하면 같은내용이 밑에 계~~~속 붙어
        const getBoardListBox = document.querySelector("#boardListBox")
        getBoardListBox.innerHTML = "";

        // 5-2. response의 data에 접근, 반복문 돌기. --> 이건저번에 했으니까는...
        for(d of response.data){    
            const getTitleWrapper = document.querySelector("#templete > .titleWrapper").cloneNode(true);

            getTitleWrapper.querySelector(".boardNum").innerText = d.number;
            getTitleWrapper.querySelector(".boardTitle").innerText = d.title;
            getTitleWrapper.querySelector(".boardWriter").innerText = d.writer;
            getTitleWrapper.querySelector(".boardDate").innerText = d.date;

            // 이제 listBox뒤에 wrapper붙이면 됨.
            getBoardListBox.appendChild(getTitleWrapper);
        };
    }
</script>

 

3. 모달

<div class="container>
<!-- ♣♣ Ex3. 모달 -->
    <!-- 모달 : 사용자와 상호 작용하거나 추가 정보를 제공하기 위한 임시적인 대화 상자 -->
    <!-- 활용 : 로그인 및 회원 가입, 알림/경고메세지 등등... -->
    <!-- 사용 의도 : 다음 진행 혹은 특정한 행동을 처리하기 위해 필요에 의해 사용되는 창 -->
    <!-- 결론 : 사용자가 특정 행동을 수행하도록!!!! -->

    <!-- 1. 글등록 들어가는 곳 -->
    <div class="row">
        <div class="col d-grid">
            <button onclick="showModal()" class="btn btn-outline-primary">글 등록</button>
        </div>
    </div>
</div>

<body>
    <!-- ♣♣ Ex3. 모달 -->
    <!-- 2. BS복붙해옴 -->
    <!-- 다른 요소와의 간섭을 피하기 위해, container 바깥 && 맨밑에 넣어놓기... -->

    <div id="writeModal" class="modal" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Modal title</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>

              <!-- 4. 저장하기 버튼 -->
              <button onclick="save()" type="button" class="btn btn-primary">저장하기</button>
            </div>
          </div>
        </div>
    </div>
</body>

<script>
    // ================♣♣ Ex3==================
    // 3. 보이게하기
    // --> 필요시 여기서 백엔드와 연동함... CSR
    function showModal(){
        const modal = bootstrap.Modal.getOrCreateInstance("#writeModal");
        modal.show();
    }

    // 4-1. 저장하기버튼 함수만들기
    // --> 필요시 여기서 백엔드와 연동함... CSR
    function save(){
        const modal = bootstrap.Modal.getOrCreateInstance("#writeModal");
        modal.hide();
    }

</script>