본문 바로가기
Sparta 내일배움캠프 Java 5기/[사전캠프] mini_mini Team Project ✓ 2024. 4. 8.

(24.04.08) 프로젝트 1차 코드 취합

 

프로젝트 1차 코드 취합

팀원별 기능 구현 정리

- A
    배너 무한 루프 기능구현    
- B
    백그라운드 이미지
    등록하기 부분 백그라운드 구별 
    사진 별 프레임 씌우기    
    사진, 설명 넣기    
- Genie
    Wireframe 작성
    등록 모달 구현
-D
    등록된 카드에 삭제 버튼 구현하고, 버튼을 클릭하면 삭제 모달창을 띄우고, 모달창에 예, 아니요 둘 중 하나를 선택하고 한 후 예를 선택하면 등록된 카드를 삭제하게 만들기

더보기
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>배스킨라빈스(추후수정)</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

        * {
            font-family: "Noto Sans KR", sans-serif;
            font-optical-sizing: auto;
            font-weight: <weight>;
            font-style: normal;
        }

        body {
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }



        .mytitle {
            background-color: transparent;
            height: 300px;
            color: black;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

        }

        .mytitle>button {
            height: 50px;
            weight: 150px;
            width:auto;
            background-color: #F986BD;
            color: white;
            border: 1px solid #F986BD;
            border-radius: 5px;
            margin-top: 10px;
        }

        .mycard {
            width: auto;
            height: 50%;
            margin: 30px auto 0px auto;
            background-color: white;
        }

        .mypostingbox {
            width: 500px;
            margin: 30px auto 0px auto;

            padding: 20px;
            box-shadow: 0px 0px 3px 0px blue;
            border-radius: 5px;
        }

        .mybtn {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }

        .mybtn>button {
            margin-right: 5px;
        }

        /*모달에 관한 CSS */
        .modal-footer {
            display: flex;
            justify-content: center;
        }


        .modal-footer button {
            margin: 0 5px;
            width: 40%;
        }

        .btn-flavors {
            margin-bottom: 10px;
        }

        .btn-flavors .btn {
            margin: 5px;
        }

        /*등록 카드의 아이스크림 배치 등에 관한 */
        .card .row .col img {
            width: 120px;
        }

        .card .row {
            margin: -30px 0;
        }

        .card .col {
            margin-right: -150px;
        }

        .card {
            display: flex;
            justify-content: center;
            padding-top: 30px;
            background-color: white;
        }
        .buttons {
        margin-right: 5px;
      }

        .section input[id*="slide"] {
            display: none;
        }

        .section {
            background-color: blanchedalmond;
            width: auto;
            height: 35%;
            margin: 50px auto 0 auto;
        }

        .section .slidewrap {
            width: auto;
            height: auto;
            margin: 0 auto 0 auto;
            position: center;
        }

        .section .slidelist {
            white-space: nowrap;
            font-size: 0;
            overflow: hidden;
            position: relative;
            width: auto;
            height: auto;
            margin: 10px 15% 10px 15%;
        }

        .section .slidelist>li {
            display: inline-block;
            vertical-align: middle;
            width: 100%;
            transition: all .7s;
        }

        .section .slidelist>li>a {
            display: block;
            position: relative;
        }

        .section .slidelist>li>a img {
            width: 100%;
        }

        .section .slidelist label {
            position: absolute;
            z-index: 10;
            top: 50%;
            transform: translateY(-50%);
            padding: 50px;
            cursor: pointer;
        }

        .section .slidelist .textbox {
            position: absolute;
            z-index: 1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            line-height: 1.6;
            text-align: center;
        }


        /* input에 체크되면 슬라이드 효과 */
        .section input[id="slide01"]:checked~.slidewrap .slidelist>li {
            transform: translateX(0%);
        }

        .section input[id="slide02"]:checked~.slidewrap .slidelist>li {
            transform: translateX(-100%);
        }

        .section input[id="slide03"]:checked~.slidewrap .slidelist>li {
            transform: translateX(-200%);
        }

        /* 좌,우 슬라이드 버튼 */
        .slide-control>div {
            display: none;
        }

        .section .left {
            left: 30px;
            background: url('./img/left.png') center center / 100% no-repeat;
        }

        .section .right {
            right: 30px;
            background: url('./img/right.png') center center / 100% no-repeat;
        }

        .section input[id="slide01"]:checked~.slidewrap .slide-control>div:nth-child(1) {
            display: block;
        }

        .section input[id="slide02"]:checked~.slidewrap .slide-control>div:nth-child(2) {
            display: block;
        }

        .section input[id="slide03"]:checked~.slidewrap .slide-control>div:nth-child(3) {
            display: block;
        }

        /* 페이징 */
        .slide-pagelist {
            text-align: center;
            padding: 20px;
        }

        .slide-pagelist>li {
            display: inline-block;
            vertical-align: middle;
        }

        .slide-pagelist>li>label {
            display: block;
            padding: 8px 30px;
            border-radius: 30px;
            background: #ccc;
            margin: 20px auto 10px auto;
            cursor: pointer;
        }

        .section input[id="slide01"]:checked~.slidewrap .slide-pagelist>li:nth-child(1)>label {
            background: #999;
        }

        .section input[id="slide02"]:checked~.slidewrap .slide-pagelist>li:nth-child(2)>label {
            background: #999;
        }

        .section input[id="slide03"]:checked~.slidewrap .slide-pagelist>li:nth-child(3)>label {
            background: #999;
        }
    </style>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
        import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
        import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


        // Firebase 구성 정보 설정
        const firebaseConfig = {
            apiKey: "AIzaSyCGxdvDyVsYEfoEnitKaonaXjMaxpxUzDw",
            authDomain: "sparta-bee1a.firebaseapp.com",
            projectId: "sparta-bee1a",
            storageBucket: "sparta-bee1a.appspot.com",
            messagingSenderId: "354592468831",
            appId: "1:354592468831:web:86f959a0da2ff302d9d0ea",
            measurementId: "G-FW22WNY4XT"
        };

        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);

        $("#postingbtn").click(async function () {
            let title = $('#title').val();
            let name = $('#name').val();
            let recommend = $('#recommend').val();

            var selectedFlavors = [];

            // 선택한 맛에대한 이미지 URL을 baskin_DB=아이스크림 이미지 DB에서 불러서 저장하기
            $(".btn-flavors .btn").each(function () {
                if ($(this).hasClass('active')) {
                    selectedFlavors.push($(this).text());
                }
            });
            let flavorsString = selectedFlavors.join(', ');
            let imageURLs = [];
            // baskin_DB에는 flavor아이스크림 이름, imageURL 해당 이미지URL 필드로 자료저장되어있음
            for (let i = 0; i < selectedFlavors.length; i++) {
                let flavor = selectedFlavors[i];
                let querySnapshot = await getDocs(collection(db, "baskin_DB"));

                querySnapshot.forEach((doc) => {
                    if (doc.data().flavor === flavor) {
                        imageURLs.push(doc.data().imageURL);
                    }
                });
            }

            let doc = {
                'title': title,
                'name': name,
                'recommend': recommend,
                'imageURL': imageURLs,  // 가져온 imageURL들 배열
                'flavors': flavorsString
            };

            await addDoc(collection(db, "baskin_register"), doc);
            alert('등록되었습니다');
            window.location.reload();
        });

        $("#postingbtn-close").click(function () {
            $('#exampleModal').modal('hide');
        });



        // 등록된 imageURL들은 많아 배열로 만든 후, 반복문으로 2열로 만들어 카드에 넣기
        let docs = await getDocs(collection(db, "baskin_register"));
        docs.forEach((doc) => {
            let row = doc.data();
            let images = row['imageURL'];
            let title = row['title'];
            let name = row['name'];
            let recommend = row['recommend'];
            let flavors = row['flavors'];

            let temp_html = `
    <div class="col">
        <div class="card h-100">
            <div class="row flavor-table">`;

            images.forEach((image, index) => {
                temp_html += `
            <div class="col">
                <img src="${image}" class="card-img-top" alt="...">
            </div>`;
                if ((index + 1) % 2 === 0 && index !== images.length - 1) {
                    temp_html += `</div><div class="row flavor-table">`;
                }
            });

            temp_html += `
            </div> <!-- flavor-table 닫음 -->
            <div class="card-body">
                <h5 class="card-title" style="margin-top: 30px;">${title}</h5>
                <p class="card-text" style="color: gray;">${recommend}</p>
                <br>
                <p class="card-text" style="font-size: 13px;">by ${name}</p>
                
            </div>
            <div class="card-footer">
                <small class="text-body-secondary" style="color: gray;"">${flavors}</small>
            </div>
            <div class="buttons">
                <button type="button" class="btn btn-dark" id="delete1" style="margin-left: 45px;">삭제</button>
                <button type="button" class="btn btn-dark" id="enlargement" style="margin-left: 10px;" >확대</button>
            </div>
        </div>
    </div>`;

            $('#card').append(temp_html);
        });



        $('#postingbox').hide();
        $("#savebtn").click(async function () {
            $('#postingbox').toggle();

        })

        document.addEventListener('click', async function (event) {
        if (event.target && event.target.id === 'delete1') {
          if (confirm('정말 삭제하시겠습니까?')) {
            var card = event.target.closest('.card')
            console.log(card)
            if (card) {
              var cardClass = card.classList.value
              card.style.transition = 'transform 0.5s ease-in-out'
              card.style.transform = 'translateX(500%)'
              setTimeout(() => {
                card.parentElement.removeChild(card)
              }, 500)
            }
          }
        } else if (event.target && event.target.id === 'enlargement') {
          var card = event.target.closest('.card')
          if (card) {
            // 현재 확대 상태를 확인하기 위한 변수
            var isEnlarged = card.style.transform === 'scale(1.5)'
            // 확대/축소 토글
            if (isEnlarged) {
              card.style.transform = '' // 기본 값으로 변경하여 축소
              card.style.zIndex = '' // 기본 값으로 변경하여 다른 카드와 같은 레벨로 설정
            } else {
              // 확대될 때 zIndex 값을 크게 설정하여 다른 카드보다 앞쪽에 표시
              card.style.transition = 'transform 0.5s ease-in-out'
              card.style.transform = 'scale(1.5)' // 확대
              card.style.zIndex = '999' // 다른 카드보다 큰 값으로 설정
              // 여기에 추가적인 확대 작업을 수행할 수 있습니다.
            }
          }
        }
    })

    </script>


    <script>
        $(document).ready(function () {
            $('#modalbtn').click(function () {
                $('#exampleModal').modal('show');
            });
        });

    </script>

    <script>
        $(document).ready(function () {
            $('.btn').on('click', function () {
                $(this).toggleClass('active');
            });
        });
    </script>


</head>

<body>
    <div class="section">
        <input type="radio" name="slide" id="slide01" checked>
        <input type="radio" name="slide" id="slide02">
        <input type="radio" name="slide" id="slide03">
        <div class="slidewrap">
            
            <ul class="slidelist">
                <!-- 슬라이드 영역 -->
                <li class="slideitem">
                    <a>
                        <img src="https://www.baskinrobbins.co.kr/upload/main/banner/77c24fc6211c25ff06a303ef04b0a5b6.png">
                    </a>
                </li>
                <li class="slideitem">
                    <a>
                        <img src="data:image/png;base64,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">
                    </a>
                </li>
                <li class="slideitem">
                    <a>
                        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJi0Xjx1O8xmr_I77c5pLWeHJ9gV9B4OY_Gg&s">
                    </a>
                </li class="slideitem">
    
                <!-- 좌,우 슬라이드 버튼 -->
                <div class="slide-control">
                    <div>
                        <label for="slide03" class="left"></label>
                        <label for="slide02" class="right"></label>
                    </div>
                    <div>
                        <label for="slide01" class="left"></label>
                        <label for="slide03" class="right"></label>
                    </div>
                    <div>
                        <label for="slide02" class="left"></label>
                        <label for="slide01" class="right"></label>
                    </div>
                </div>
    
            </ul>
            <!-- 페이징 -->
            <ul class="slide-pagelist">
                <li><label for="slide01"></label></li>
                <li><label for="slide02"></label></li>
                <li><label for="slide03"></label></li>
            </ul>
    
            <div class="mytitle">
        <h1 style="font-size: 50px;">배스킨라빈스(추후수정)</h1>
        <button id="modalbtn" type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#exampleModal">
            등록하기
        </button>
    </div>



    <div class="mycard">
        <div id="card" class="row row-cols-1 row-cols-md-5 g-4">
        </div>
    </div>

    <!-- 아이스크림 선택 모달 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">정보 입력하기</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- 아이스크림 선택 버튼들 -->
                    <div class="btn-flavors">
                        <input type="checkbox" class="btn-check" id="btn-check-1" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-1">아이스 도쿄바나나</label>
                        <input type="checkbox" class="btn-check" id="btn-check-2" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-2">와사비 아이스크림</label>
                        <input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-3">팥있는 말차당</label>
                        <input type="checkbox" class="btn-check" id="btn-check-4" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-4">봉쥬르, 마카롱</label>
                        <input type="checkbox" class="btn-check" id="btn-check-5" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-5">피치 요거트</label>
                        <input type="checkbox" class="btn-check" id="btn-check-6" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-6">민트 초코 봉봉</label>
                        <input type="checkbox" class="btn-check" id="btn-check-7" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-7">망고 탱고</label>
                        <input type="checkbox" class="btn-check" id="btn-check-8" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-8">러브미</label>
                        <input type="checkbox" class="btn-check" id="btn-check-9" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-9">아빠는 딸바봉</label>
                        <input type="checkbox" class="btn-check" id="btn-check-10" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-10">엄마는 외계인</label>
                        <input type="checkbox" class="btn-check" id="btn-check-11" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-11">민트 초콜릿 칩</label>
                        <input type="checkbox" class="btn-check" id="btn-check-12" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-12">뉴욕 치즈케이크</label>
                        <input type="checkbox" class="btn-check" id="btn-check-13" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-13">레인보우 샤베트</label>
                        <input type="checkbox" class="btn-check" id="btn-check-14" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-14">체리쥬빌레</label>
                        <input type="checkbox" class="btn-check" id="btn-check-15" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-15">슈팅스타</label>
                        <input type="checkbox" class="btn-check" id="btn-check-16" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-16">사랑에 빠진 딸기</label>
                        <input type="checkbox" class="btn-check" id="btn-check-17" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-17">오레오 쿠키 앤 크림</label>
                        <input type="checkbox" class="btn-check" id="btn-check-18" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-18">베리베리 스트로베리</label>
                        <input type="checkbox" class="btn-check" id="btn-check-19" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-19">31요거트</label>
                        <input type="checkbox" class="btn-check" id="btn-check-20" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-20">바람과 함께 사라지다</label>
                        <input type="checkbox" class="btn-check" id="btn-check-21" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-21">바닐라</label>
                        <input type="checkbox" class="btn-check" id="btn-check-22" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-22">이상한 나라의 솜사탕</label>
                        <input type="checkbox" class="btn-check" id="btn-check-23" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-23">초콜릿 무스</label>
                        <input type="checkbox" class="btn-check" id="btn-check-24" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-24">그린티</label>
                        <input type="checkbox" class="btn-check" id="btn-check-25" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-25">피스타치오 아몬드</label>
                        <input type="checkbox" class="btn-check" id="btn-check-26" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-26">초콜릿</label>
                        <input type="checkbox" class="btn-check" id="btn-check-27" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-27">자모카 아몬드 훠지</label>
                        <input type="checkbox" class="btn-check" id="btn-check-28" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-28">월넛</label>
                        <input type="checkbox" class="btn-check" id="btn-check-29" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-29">아몬드 봉봉</label>
                        <input type="checkbox" class="btn-check" id="btn-check-30" autocomplete="off">
                        <label class="btn btn-outline-secondary" for="btn-check-30">애플 민트</label>

                    </div>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" id="title" placeholder="name@example.com">
                        <label for="floatingInput">제목</label>
                    </div>
                    <div class="form-floating mb-3">
                        <input type="email" class="form-control" id="name" placeholder="name@example.com">
                        <label for="floatingInput">작성자 이름</label>
                    </div>

                    <div class="form-floating">
                        <textarea class="form-control" id="recommend" placeholder="Leave a comment here"
                            id="floatingTextarea"></textarea>
                        <label for="floatingTextarea">추천 이유</label>
                    </div>

                </div>
                <div class="modal-footer">
                    <!-- 모달 푸터 -->
                    <button id="postingbtn" type="button" class="btn btn-info">등록하기</button>
                    <button id="postingbtn-close" type="button" class="btn btn-secondary"
                        data-bs-dismiss="modal">닫기</button>
                </div>
            </div>
        </div>
    </div>


</body>

</html>

+

추가 기능 구상 및

코드 수정 2차 취합 계획