Sparta 내일배움캠프 Java 5기/[사전캠프] mini_mini Team Project ✓
(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차 취합 계획
'Sparta 내일배움캠프 Java 5기 > [사전캠프] mini_mini Team Project ✓' 카테고리의 다른 글
| (24.04.05) 기능 구현 코드 짜기 (0) | 2024.04.08 |
|---|---|
| (24.04.05) 미니프로젝트 선정, 와이어프레임, 기능 구현 분배 (1) | 2024.04.08 |
| (24.04.02) 미니프로젝트 기획안 + 브레인스토밍 (0) | 2024.04.02 |
