Skip to content

Commit

Permalink
view 최신화 (#13)
Browse files Browse the repository at this point in the history
* html파일 생성

* view 파일

* view 최신화
  • Loading branch information
kws07042 authored Jun 21, 2024
1 parent ac31911 commit 07b4798
Show file tree
Hide file tree
Showing 3 changed files with 172 additions and 42 deletions.
63 changes: 44 additions & 19 deletions src/view/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</head>
<body>
<header class="main_header">
<h1>MOOK</h1>
<h1>MOCK</h1>
<nav class="main_nav">
<button class="modal-button" onclick="guide()">Guide</button>
</nav>
Expand All @@ -21,51 +21,76 @@ <h1>API란?</h1>

<section class="guide">
<h1>어떨때 사용하나요?</h1>
<div>MOOK은 가짜 데이터가 필요할 때마다 사용할 수 있는 안산대학교 컴퓨터 공학과의 무료 REST API입니다.</div>
<div>MOCK은 가짜 데이터가 필요할 때마다 사용할 수 있는 안산대학교 컴퓨터 공학과의 무료 REST API입니다.</div>
</section>

<section class="endpoint">
<h1>데이터 전체 조회 API</h1>
<div class="data_container">
<div>
<p>GET</p><a href="http://localhost:5000/admin/users">/admin/users</a>
<span id="user-count">유저 n명</span>
<p>GET</p><a href="http://34.197.44.20/admin/users" target="_blank">/admin/users</a>
<span id="user-count"></span>
</div>
<div>
<p>GET</p><a href="http://localhost:5000/books/books">/books/books</a>
<span id="book-count">책 n권</span>
<p>GET</p><a href="http://34.197.44.20/books/books" target="_blank">/books/books</a>
<span id="book-count"></span>
</div>
<div>
<p>GET</p><a href="http://localhost:5000/coupang_products/food">/coupang_products/foods</a>
<span id="coupang-count">쿠팡 음식 n개</span>
<p>GET</p><a href="http://34.197.44.20/coupang_products/all" target="_blank">/coupang_products/all</a>
<span id="coupang-count"></span>
</div>
</div>
</section>

<section class="endpoint">
<h1>특정 ID의 데이터 조회 API</h1>
<h1>특정 조건의 데이터 조회 API</h1>
<div class="data_container">
<div>
<p>GET</p><a href="http://localhost:5000/admin/user/000043c2-b919-4281-9dab-f2a5b446973b">/admin/users/:uid</a>
<p>GET</p><a href="http://34.197.44.20/admin/user/000043c2-b919-4281-9dab-f2a5b446973b" target="_blank">/admin/users/1</a>
<span>유저 아이디 1</span>
</div>
<div>
<p>GET</p><a href="http://localhost:5000/books/info/1">/books/info/1</a>
<p>GET</p><a href="http://34.197.44.20/books/info/1" target="_blank">/books/info/1</a>
<span id="book-count-2">책 아이디 1</span>
</div>
<div>
<p>GET</p><a href="http://localhost:5000/coupang_products/food">/coupang_products/foods</a>
<span id="coupang-count-2">쿠팡 음식 아이디 1</span>
<p>GET</p><a href="http://34.197.44.20/coupang_products/product/1" target="_blank">/coupang_products/product/1</a>
<span id="coupang-count-2">쿠팡 제품 아이디 1</span>
</div>
<div>
<p>GET</p><a href="http://34.197.44.20/coupang_products/food" target="_blank">/coupang_products/food</a>
<span>쿠팡 제품 카테고리:음식</span>
</div>
</div>
</section>

<section class="endpoint">
<h1>API 체험</h1>
<h3>특정 아이디의 책 조회</h3>
<div>
<label for="input-id">/books/info/</label>
<input type="text" id="input-id" placeholder="책의 ID를 입력하세요">
<button class="run-button" onclick="fetchSpecificData()">Run</button>
<h1>API TEST (GET)</h1>
<nav class="sub_nav">
<ul>
<li><a href="#" onclick="showInput('users'); return false;">특정 유저 조회</a></li>
<li><a href="#" onclick="showInput('books'); return false;">특정 책 조회</a></li>
<li><a href="#" onclick="showInput('products'); return false;">특정 제품 조회</a></li>
</ul>
</nav>
<div id="input-container">
<div class="input-section users active">
<label for="input-id-users">/admin/user/</label>
<input type="text" id="input-id-users" placeholder="유저의 ID를 입력하세요">
<button class="run-button" onclick="fetchSpecificDatausers()">Run</button>
</div>
<div class="input-section books">
<label for="input-id-books">/books/info/</label>
<input type="text" id="input-id-books" placeholder="책의 ID를 입력하세요">
<button class="run-button" onclick="fetchSpecificDatabooks()">Run</button>
</div>
<div class="input-section products">
<label for="input-id-products">/coupang_products/product/</label>
<input type="text" id="input-id-products" placeholder="제품의 ID를 입력하세요">
<button class="run-button" onclick="fetchSpecificDataproducts()">Run</button>
</div>
</div>

<pre id="result">{}</pre>
</section>

Expand Down
88 changes: 66 additions & 22 deletions src/view/script.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,91 @@
// 모달 열기 함수
function guide() {
var modal = document.getElementById('myModal');
const modal = document.getElementById('myModal');
modal.style.display = 'block';
}

// 모달 닫기 함수
function closeModal() {
var modal = document.getElementById('myModal');
const modal = document.getElementById('myModal');
modal.style.display = 'none';
}


async function fetchData() {
try {
const userResponse = await fetch('http://localhost:5000/admin/count');
const userData = await userResponse.json();
document.getElementById('user-count').textContent = `유저 ${userData.count}명`;
const userResponse = await fetch('http://34.197.44.20/admin/count');
const userData = await userResponse.json();
document.getElementById('user-count').textContent = `전체 유저 ${userData.count} 조회`;

const bookResponse = await fetch('http://localhost:5000/books/count');
const bookData = await bookResponse.json();
document.getElementById('book-count').textContent = `책 ${bookData.count}권`;
const bookResponse = await fetch('http://34.197.44.20/books/count');
const bookData = await bookResponse.json();
document.getElementById('book-count').textContent = `전체 ${bookData.count} 조회`;

const coupangResponse = await fetch('http://localhost:5000/coupang_products/food_count');
const coupangData = await coupangResponse.json();
document.getElementById('coupang-count').textContent = `쿠팡 음식 ${coupangData.count}개`;
const coupangResponse = await fetch('http://34.197.44.20/coupang_products/count');
const coupangData = await coupangResponse.json();
document.getElementById('coupang-count').textContent = `전체 쿠팡 제품 ${coupangData.count} 조회`;

} catch (error) {
console.error('데이터 가져오기 실패:', error);
} catch (error) {
console.error('데이터 가져오기 실패:', error);
}
}

async function fetchSpecificDatausers() {
const input = document.getElementById('input-id-users').value;
try {
const response = await fetch(`http://34.197.44.20/admin/user/${input}`);
const data = await response.json();
document.getElementById('result').textContent = JSON.stringify(data, null, 2);
} catch (error) {
console.error('데이터 가져오기 실패:', error);
}
}

async function fetchSpecificData() {
const input = document.getElementById('input-id').value;
async function fetchSpecificDatabooks() {
const input = document.getElementById('input-id-books').value;
try {
const response = await fetch(`http://localhost:5000/books/info/${input}`);
const data = await response.json();
document.getElementById('result').textContent = JSON.stringify(data, null, 2);
} catch (error) {
console.error('데이터 가져오기 실패:', error);
const response = await fetch(`http://34.197.44.20/books/info/${input}`);
const data = await response.json();
document.getElementById('result').textContent = JSON.stringify(data, null, 2);
} catch (error) {
console.error('데이터 가져오기 실패:', error);
}
}

async function fetchSpecificDataproducts() {
const input = document.getElementById('input-id-products').value;
try {
const response = await fetch(`http://34.197.44.20/coupang_products/product/${input}`);
const data = await response.json();
document.getElementById('result').textContent = JSON.stringify(data, null, 2);
} catch (error) {
console.error('데이터 가져오기 실패:', error);
}
}

window.onload = fetchData;
function showInput(section) {
// 모든 입력 섹션을 숨김
const inputSections = document.querySelectorAll('.input-section');
inputSections.forEach(section => {
section.style.display = 'none';
});

// 선택한 섹션만 보이도록 함
const selectedInput = document.querySelector(`.input-section.${section}`);
if (selectedInput) {
selectedInput.style.display = 'flex'; // 또는 'block' 등으로 설정
}
}

document.addEventListener('DOMContentLoaded', function() {
// 기본적으로 특정 유저 조회 입력 창만 보이도록 설정
const inputSections = document.querySelectorAll('.input-section');
inputSections.forEach(section => {
if (section.classList.contains('users')) {
section.style.display = 'flex'; // 또는 'block' 등으로 설정
} else {
section.style.display = 'none';
}
});
});

window.onload = fetchData;
63 changes: 62 additions & 1 deletion src/view/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ span {
color: #ffffff;
border: none;
margin-right: 25px;
cursor: pointer;
}


Expand Down Expand Up @@ -149,4 +150,64 @@ pre {
color: #000;
text-decoration: none;
cursor: pointer;
}
}

#result {
max-width: 300px; /* 최대 가로폭 설정 */
overflow-x: auto; /* 가로 스크롤 나타나게 설정 */

}
.sub_nav ul {
display: flex;
list-style: none; /* 기본 리스트 스타일 제거 */
padding: 0; /* 패딩 제거 */
margin: 0; /* 마진 제거 */
}

.sub_nav li {
margin-right: 1rem; /* 항목 간의 간격 설정 */
}

.sub_nav li:last-child {
margin-right: 0; /* 마지막 항목의 오른쪽 마진 제거 */
}

.sub_nav a {
text-decoration: none; /* 링크의 기본 밑줄 제거 */
color: #007bff; /* 링크 색상 설정 */
}

.sub_nav a:hover {
text-decoration: underline; /* 링크에 마우스 올렸을 때 밑줄 표시 */
}
/* input-section 요소를 감싸는 div들의 스타일 */
.input-section {
display: none; /* 기본적으로 숨김 */
align-items: center;
margin-top: 10px; /* 각 입력 섹션 사이의 간격 설정 */
}

.input-section label {
margin-right: 10px; /* 라벨과 입력 필드 사이의 간격 설정 */
}

.input-section input {
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 5px;
margin-right: 10px;
}

.input-section button {
background-color: #007bff;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.input-section button:hover {
background-color: #0056b3;
}

0 comments on commit 07b4798

Please sign in to comment.