개발새발
이화여자대학교 컴퓨터공학전공 수업 과제입니다 본문
프로토 타입: https://ovenapp.io/view/KK8LdLhjtYao8HW8lwoStUVzquylDzyR#hP8gZ
구현 코드: https://colab.research.google.com/drive/1NS9sgf9kL_nraDKEixslsnDUXeXbdmXI?usp=sharing https://colab.research.google.com/drive/1v1d0S5j4rNxUXTpDq0nEcZopVglWmR8g?usp=sharing https://colab.research.google.com/drive/11caaS06JD9xTNF1h9O96nDtQROByWIQH?usp=sharing
# 식당 목록 화면
# 이모티콘: ❌️⭕️🔴🔵🟢🟥🟦🟩🟨🚫🪑
restaurants = [
{"name": "진돈부리", "영업여부": "⭕️", "대기": "🟦", "좌석":"15"},
{"name": "모미지 ", "영업여부": "❌️", "대기": "🟥", "좌석":"20"},
{"name": "순희다이닝", "영업여부": "⭕️","대기": "🟦", "좌석":"25"},
{"name": "카페티아라", "영업여부": "❌️","대기": "🟨", "좌석":"13"},
{"name": "파체리토타코", "영업여부": "⭕️","대기": "🟥", "좌석":"5"},
{"name": "낭만식탁", "영업여부": "⭕️","대기": "🟨", "좌석":"11"},
{"name": "연어초밥", "영업여부": "⭕️","대기": "🟥", "좌석":"13"},
{"name": "언니네양식당", "영업여부": "❌️","대기": "🟦", "좌석":"17"},
{"name": "청년밥상문간", "영업여부": "⭕️","대기": "🟥", "좌석":"30"},
{"name": "리또리또", "영업여부": "⭕️","대기": "🟨", "좌석":"7"}
]
def display_restaurants():
print("상호명\t\t\t영업여부\t대기")
print("*********************************************\n")
for restaurant in restaurants:
print(f"{restaurant['name']}\t\t{restaurant['영업여부']}\t\t{restaurant['대기']}")
print("\n")
# Call the function to display the restaurants
display_restaurants()
# 카페 목록 화면
cafes = [
{"name": "드로윙하우스", "영업여부": "⭕️", "대기": "🟦", "좌석":"5"},
{"name": "이화다방 ", "영업여부": "❌️", "대기": "🟥", "좌석":"15"},
{"name": "벨라프라하", "영업여부": "⭕️","대기": "🟦", "좌석":"20"},
{"name": "스타벅스", "영업여부": "❌️","대기": "🟨", "좌석":"17"},
{"name": "할리스\t", "영업여부": "⭕️","대기": "🟥", "좌석":"11"},
{"name": "요거프레소", "영업여부": "⭕️","대기": "🟦", "좌석":"15"},
{"name": "스타벅스 리저브", "영업여부": "⭕️","대기": "🟥", "좌석":"33"},
{"name": "투썸플레이스", "영업여부": "❌️","대기": "🟨", "좌석":"40"},
{"name": "라이프커피", "영업여부": "⭕️","대기": "🟦", "좌석":"15"},
{"name": "공차\t", "영업여부": "⭕️","대기": "🟨", "좌석":"23"}
]
def display_cafes():
print("상호명\t\t\t영업여부\t대기")
print("*********************************************\n")
for cafe in cafes:
print(f"{cafe['name']}\t\t{cafe['영업여부']}\t\t{cafe['대기']}")
print("\n")
# Call the function to display the restaurants
display_cafes()
# 사용자가 실시간으로 대기 정보 갱신
def info():
print("\n*********************************************\n")
print('\n🟥: 1시간 이상 대기(상)\n')
print('🟨: 30분 이상 1시간 미만 대기(중)\n')
print('🟦: 5분 이상 30분 미만 대기(하)\n\n')
print("*********************************************\n")
def find_restaurant(desired_name):
for restaurant in restaurants:
if restaurant["name"] == desired_name:
found_index=restaurant
return restaurant
def update(rest_name, status):
request=find_restaurant(rest_name)
if status == '상':
request["대기"]="🟥"
elif status=='중':
request["대기"]="🟨"
else:
request["대기"]="🟦"
print(f'\n{request["name"]}의 대기 정보가 수정되었습니다: \n')
print("상호명\t\t\t영업여부\t대기\n")
print(f"{request['name']}\t\t{request['영업여부']}\t\t{request['대기']}")
print("\n*********************************************\n")
while True:
restaurant_name=input('상호명을 입력해주세요 예) 모미지: ')
choice=input('\n대기정보를 수정하시겠습니까? ( Y | N ) : ')
if choice=='N':
break
else:
info()
change=input('현재 대기 상태를 입력해주세요 (상,중,하): ')
update(restaurant_name,change)
choice=input('\n정보 수정을 계속하시겠습니까? ( Y | N) : ')
if choice =='Y':
continue
else:
print('\n정보 수정을 종료합니다.')
break
# 점주가 관리자모드로 공지 등록
# 관리자 모드 ID: admin
# 관리자 모드 PW: 1234
inputID=input('아이디를 입력하세요: ')
inputPW=input('\n비밀번호를 입력하세요: ')
if inputID=='admin'and inputPW=='1234':
print('\n관리자 모드로 로그인되었습니다.\n')
myRestaurant=input('매장을 입력해주세요: ')
myPlace=find_restaurant(myRestaurant)
answer=input('\n새로운 공지를 올리시겠습니까? (Y | N): ')
if answer=='Y':
print("\n*************************************************************\n")
print('1. 현재 대기 없이 바로 식사가 가능합니다.\n')
print('2. 곧 브레이크타임이 시작됩니다.\n')
print('3. 곧 브레이크타임이 종료됩니다.\n')
print('4. 재료소진으로 인해 영업종료합니다.\n')
print('5. 금일 영업하지 않습니다.')
print("\n*************************************************************\n")
msg=int(input('공지할 내용을 위에서 골라주세요 (1,2,3,4,5 중 택 1): '))
print("\n*************************************************************\n")
print(f'{myPlace["name"]}에 새로운 공지가 등록되었습니다: \n')
if msg==1:
print('<현재 대기 없이 바로 식사가 가능합니다>\n')
elif msg==2:
print('<곧 브레이크타임이 시작됩니다>\n')
elif msg==3:
print('<곧 브레이크타임이 종료됩니다>\n')
elif msg==4:
print('<재료소진으로 인해 영업종료합니다>\n')
else:
print('<금일 영업하지 않습니다>\n')
else:
print('정상 로그인되었습니다.')
# 종합 정보 제공 화면 (식당이나 카페 이름을 누르면 보이는 화면)
# UI 버튼을 눌렀다고 가정
# 좌석 수도 화면에 제시
desiredRest=input('식당을 선택해주세요: ')
myRest=find_restaurant(desiredRest)
print("\n\n상호명\t\t\t영업여부\t대기\t좌석")
print("****************************************************\n")
print(f"{myRest['name']}\t\t{myRest['영업여부']}\t\t{myRest['대기']}\t{myRest['좌석']}")
<!DOCTYPE html>
<html>
<head>
<title>로그인</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 40px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="password"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.form-group button {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
.form-group button:hover {
background-color: #45a049;
}
.form-group .error-message {
color: #ff0000;
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<h1>로그인</h1>
<form onsubmit="return validateForm()">
<div class="form-group">
<label for="username">아이디:</label>
<input type="text" id="username" name="username" required>
<span id="username-error" class="error-message"></span>
</div>
<div class="form-group">
<label for="password">비밀번호:</label>
<input type="password" id="password" name="password" required>
<span id="password-error" class="error-message"></span>
</div>
<div class="form-group">
<button type="submit">로그인</button>
</div>
</form>
</div>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var usernameError = document.getElementById("username-error");
var passwordError = document.getElementById("password-error");
// 아이디 필드가 비어있을 때 오류 메시지 출력
if (username === "") {
usernameError.textContent = "아이디를 입력하세요";
return false;
} else {
usernameError.textContent = "";
}
// 비밀번호 필드가 비어있을 때 오류 메시지 출력
if (password === "") {
passwordError.textContent = "비밀번호를 입력하세요";
return false;
} else {
passwordError.textContent = "";
}
// 폼이 유효하면 true 반환하여 submit 진행
return true;
}
</script>
</body>
</html>
로그인
<!DOCTYPE html>
<html>
<head>
<title>커뮤니티</title>
<style>
/* 에타 디자인 스타일 */
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 500px;
margin: 0 auto;
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.form-group label {
display: block;
font-weight: bold;
margin-bottom: 5px;
flex: 1;
}
.form-group input[type="text"],
.form-group textarea {
flex: 3;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.btn {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
text-align: center;
cursor: pointer;
color: #ffffff;
background-color: #1a7726;
border: none;
border-radius: 4px;
}
.post-list {
margin-top: 30px;
}
@import url('https://fonts.googleapis.com/css2?family=Dongle:wght@700&display=swap');
h1,.post{font-family: 'Dongle', sans-serif;
font-weight:700;}
.post {
margin-bottom: 10px;
padding: 10px;
background-color: #f2f2f2;
border-radius: 4px;
}
.post h2 {
margin-top: 0;
cursor: pointer;
}
.post p {
margin-bottom: 0;
}
.comment-form {
display: none;
margin-top: 10px;
}
.comment-form textarea {
width: 100%;
resize: vertical;
}
.comment-list {
display: none;
margin-top: 10px;
}
.comment {
margin-bottom: 5px;
padding: 5px;
background-color: #dcdcdc;
border-radius: 4px;
}
h1 {
padding: 10px;
background-color: #044607;
color: #ffffff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
text-align: center;
align-items:center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align: center;">게시판</h1>
<form id="searchForm">
<div class="form-group">
<label for="search"></label>
<input type="text" id="search" name="search" placeholder="제목 또는 내용 검색">
<button class="btn" id="searchBtn" type="button">검색</button>
</div>
</form>
<form id="postForm">
<div class="form-group">
<label for="title">제목:</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="content">내용:</label>
<textarea id="content" name="content" rows="5" required></textarea>
</div>
<button class="btn" type="submit">글쓰기</button>
</form>
<div class="post-list" id="postList"></div>
</div>
<script>
// 글 목록을 저장할 배열
let posts = [];
// 글쓰기 폼 제출 이벤트 처리
document.getElementById('postForm').addEventListener('submit', function(event) {
event.preventDefault(); // 폼 제출 기본 동작 막기
// 입력된 제목과 내용 가져오기
const title = document.getElementById('title').value;
const content = document.getElementById('content').value;
// 새로운 글 객체 생성
const newPost = {
title: title,
content: content,
comments: []
};
// 글 객체를 글 목록에 추가
posts.push(newPost);
// 글 목록 업데이트
updatePostList();
// 입력 필드 초기화
document.getElementById('title').value = '';
document.getElementById('content').value = '';
});
// 검색 버튼 클릭 이벤트 처리
document.getElementById('searchBtn').addEventListener('click', function() {
const searchTerm = document.getElementById('search').value;
searchPosts(searchTerm);
});
// 글 목록 업데이트 함수
function updatePostList() {
const postList = document.getElementById('postList');
postList.innerHTML = ''; // 목록 초기화
// 각 글에 대해 HTML 요소 생성하여 목록에 추가
posts.forEach(function(post, index) {
const postDiv = document.createElement('div');
postDiv.classList.add('post');
const titleHeading = document.createElement('h2');
titleHeading.textContent = post.title;
titleHeading.addEventListener('click', function() {
toggleComments(postDiv, index);
});
const contentParagraph = document.createElement('p');
contentParagraph.textContent = post.content;
postDiv.appendChild(titleHeading);
postDiv.appendChild(contentParagraph);
// 댓글 목록 생성
const commentList = document.createElement('div');
commentList.classList.add('comment-list');
updateCommentList(commentList, post);
postDiv.appendChild(commentList);
postList.appendChild(postDiv);
});
}
// 댓글 작성 폼 생성
function createCommentForm() {
const form = document.createElement('form');
form.classList.add('comment-form');
const textarea = document.createElement('textarea');
textarea.setAttribute('placeholder', '댓글을 입력하세요');
textarea.setAttribute('rows', '3');
const button = document.createElement('button');
button.classList.add('btn');
button.textContent = '댓글 달기';
form.appendChild(textarea);
form.appendChild(button);
return form;
}
// 댓글 목록 업데이트 함수
function updateCommentList(commentList, post) {
commentList.innerHTML = ''; // 목록 초기화
post.comments.forEach(function(comment) {
const commentDiv = document.createElement('div');
commentDiv.classList.add('comment');
commentDiv.textContent = comment.content;
commentList.appendChild(commentDiv);
});
// 댓글 작성 폼 추가
const commentForm = createCommentForm();
commentList.appendChild(commentForm);
// 댓글 작성 폼 제출 이벤트 처리
commentForm.addEventListener('submit', function(event) {
event.preventDefault();
const textarea = commentForm.querySelector('textarea');
const content = textarea.value;
if (content) {
const newComment = {
content: content
};
post.comments.push(newComment);
updateCommentList(commentList, post);
textarea.value = '';
}
});
}
// 글 목록에서 특정 키워드로 검색하는 함수
function searchPosts(searchTerm) {
const filteredPosts = posts.filter(function(post) {
return post.title.includes(searchTerm) || post.content.includes(searchTerm);
});
// 검색 결과를 업데이트하여 보여줌
const postList = document.getElementById('postList');
postList.innerHTML = '';
filteredPosts.forEach(function(post, index) {
const postDiv = document.createElement('div');
postDiv.classList.add('post');
const titleHeading = document.createElement('h2');
titleHeading.textContent = post.title;
titleHeading.addEventListener('click', function() {
toggleComments(postDiv, index);
});
const contentParagraph = document.createElement('p');
contentParagraph.textContent = post.content;
postDiv.appendChild(titleHeading);
postDiv.appendChild(contentParagraph);
// 댓글 목록 생성
const commentList = document.createElement('div');
commentList.classList.add('comment-list');
updateCommentList(commentList, post);
postDiv.appendChild(commentList);
postList.appendChild(postDiv);
});
}
// 댓글 목록 토글 함수
function toggleComments(postDiv, index) {
const commentList = postDiv.querySelector('.comment-list');
const commentForm = commentList.querySelector('.comment-form');
if (commentList.style.display === 'none') {
commentList.style.display = 'block';
commentForm.style.display = 'block';
} else {
commentList.style.display = 'none';
commentForm.style.display = 'none';
}
}
</script>
</body>
</html>