From 10ea36b63f0bb5c8ac0f3f8b6f35e40571377f8b Mon Sep 17 00:00:00 2001 From: geonyoungKO Date: Thu, 13 Jun 2024 13:32:31 +0900 Subject: [PATCH 1/4] =?UTF-8?q?html=ED=8C=8C=EC=9D=BC=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/index.html | 92 +++++++++++++-------------------------------- 1 file changed, 27 insertions(+), 65 deletions(-) diff --git a/src/view/index.html b/src/view/index.html index d350b72..665342b 100644 --- a/src/view/index.html +++ b/src/view/index.html @@ -3,78 +3,40 @@ 학술 - +
-

MOOK

+

제목

+
+

User 관리

+ /유저 생성 + /유저 업데이트 + /유저 조회 + /유저 삭제 -
-

API란?

-
API(Application Programming Interface)는 응용 프로그램이 서로 통신하고 데이터를 주고받을 수 있도록 하는 인터페이스입니다.
-
+

Book 관리

+ /책 추가 + /책 정보 업데이트 + /책 조회 + /책 삭제 -
-

어떨때 사용하나요?

-
MOOK은 가짜 데이터가 필요할 때마다 사용할 수 있는 안산대학교 컴퓨터 공학과의 무료 REST API입니다.
-
- -
-

데이터 전체 조회 API

-
-
-

GET

/admin/users - 유저 n명 -
-
-

GET

/books/books - 책 n권 -
-
-

GET

/coupang_products/foods - 쿠팡 음식 n개 -
-
+

쿠팡 제품 관리

+ 음식 카테고리 조회 + /제품 추가 + /제품 정보 업데이트 + /제품 조회 + /제품 삭제
-
-

특정 ID의 데이터 조회 API

-
-
-

GET

/admin/users/:uid - 유저 아이디 1 -
-
-

GET

/books/info/1 - 책 아이디 1 -
-
-

GET

/coupang_products/foods - 쿠팡 음식 아이디 1 -
-
-
-
-

API 체험

-

특정 아이디의 책 조회

-
- - - -
- 
{}
-
- - - - \ No newline at end of file + From 1ce7457a988a1ed6abc09664c5e33c4dee6b7e66 Mon Sep 17 00:00:00 2001 From: geonyoungKO Date: Wed, 19 Jun 2024 18:15:19 +0900 Subject: [PATCH 2/4] =?UTF-8?q?view=20=ED=8C=8C=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/routes/users.js | 5 +-- src/view/index.html | 90 ++++++++++++++++++++++++++++++++------------- src/view/styles.css | 1 + 3 files changed, 67 insertions(+), 29 deletions(-) diff --git a/src/routes/users.js b/src/routes/users.js index 5d4fa99..a740c85 100644 --- a/src/routes/users.js +++ b/src/routes/users.js @@ -55,14 +55,13 @@ router.get("/user/:uid", async (req, res) => { res.status(500).json({ error: `유저 조회 실패: ${error.message}` }); } }); - //유저 수 조회 router.get('/count', async (req, res) => { try { const count = await prisma.users.count(); res.status(200).json({ count }); } catch (error) { - res.status(500).json({ error: `조회 실패 ${error.message}` }); + res.status(500).json({ error: '책 개수 가져오기 실패' }); } }); @@ -110,4 +109,4 @@ router.delete("/user/:uid", async (req, res) => { }); -export default router; \ No newline at end of file +export default router; diff --git a/src/view/index.html b/src/view/index.html index 665342b..30cc20c 100644 --- a/src/view/index.html +++ b/src/view/index.html @@ -3,40 +3,78 @@ 학술 - + +
-

제목

+

MOOK

-
-

User 관리

- /유저 생성 - /유저 업데이트 - /유저 조회 - /유저 삭제 -

Book 관리

- /책 추가 - /책 정보 업데이트 - /책 조회 - /책 삭제 +
+

API란?

+
API(Application Programming Interface)는 응용 프로그램이 서로 통신하고 데이터를 주고받을 수 있도록 하는 인터페이스입니다.
+
-

쿠팡 제품 관리

- 음식 카테고리 조회 - /제품 추가 - /제품 정보 업데이트 - /제품 조회 - /제품 삭제 +
+

어떨때 사용하나요?

+
MOOK은 가짜 데이터가 필요할 때마다 사용할 수 있는 안산대학교 컴퓨터 공학과의 무료 REST API입니다.
+
+ +
+

데이터 전체 조회 API

+
+
+

GET

/admin/users + 유저 n명 +
+
+

GET

/books/books + 책 n권 +
+
+

GET

/coupang_products/foods + 쿠팡 음식 n개 +
+
+
+

특정 ID의 데이터 조회 API

+
+
+

GET

/admin/users/:uid + 유저 아이디 1 +
+
+

GET

/books/info/1 + 책 아이디 1 +
+
+

GET

/coupang_products/foods + 쿠팡 음식 아이디 1 +
+
+
+
+

API 체험

+

특정 아이디의 책 조회

+
+ + + +
+ 
{}
+
+ + diff --git a/src/view/styles.css b/src/view/styles.css index 723dfdb..de7b0ae 100644 --- a/src/view/styles.css +++ b/src/view/styles.css @@ -1,4 +1,5 @@ body { + font-family: Tahoma; margin: 0; padding: 0; background-color: #f4f4f9; From 5c5c7fc0b8a7e9b7f22f48bfedb6ff9797aa7ae8 Mon Sep 17 00:00:00 2001 From: geonKO Date: Fri, 21 Jun 2024 15:15:16 +0900 Subject: [PATCH 3/4] =?UTF-8?q?view=20=EC=B5=9C=EC=8B=A0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/index.html | 63 ++++++++++++++++++++++---------- src/view/script.js | 88 +++++++++++++++++++++++++++++++++------------ src/view/styles.css | 63 +++++++++++++++++++++++++++++++- 3 files changed, 172 insertions(+), 42 deletions(-) diff --git a/src/view/index.html b/src/view/index.html index 30cc20c..83ee600 100644 --- a/src/view/index.html +++ b/src/view/index.html @@ -8,7 +8,7 @@
-

MOOK

+

MOCK

@@ -21,51 +21,76 @@

API란?

어떨때 사용하나요?

-
MOOK은 가짜 데이터가 필요할 때마다 사용할 수 있는 안산대학교 컴퓨터 공학과의 무료 REST API입니다.
+
MOCK은 가짜 데이터가 필요할 때마다 사용할 수 있는 안산대학교 컴퓨터 공학과의 무료 REST API입니다.

데이터 전체 조회 API

-

GET

/admin/users - 유저 n명 +

GET

/admin/users +
-

GET

/books/books - 책 n권 +

GET

/books/books +
-

GET

/coupang_products/foods - 쿠팡 음식 n개 +

GET

/coupang_products/all +
+
-

특정 ID의 데이터 조회 API

+

특정 조건의 데이터 조회 API

-

GET

/admin/users/:uid +

GET

/admin/users/1 유저 아이디 1
-

GET

/books/info/1 +

GET

/books/info/1 책 아이디 1
-

GET

/coupang_products/foods - 쿠팡 음식 아이디 1 +

GET

/coupang_products/product/1 + 쿠팡 제품 아이디 1 +
+
+

GET

/coupang_products/food + 쿠팡 제품 카테고리:음식
+
-

API 체험

-

특정 아이디의 책 조회

-
- - - +

API TEST (GET)

+ +
+
+ + + +
+
+ + + +
+
+ + + +
+ 
{}
diff --git a/src/view/script.js b/src/view/script.js index 41a87f7..bc0f66a 100644 --- a/src/view/script.js +++ b/src/view/script.js @@ -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; diff --git a/src/view/styles.css b/src/view/styles.css index de7b0ae..f1f2766 100644 --- a/src/view/styles.css +++ b/src/view/styles.css @@ -34,6 +34,7 @@ span { color: #ffffff; border: none; margin-right: 25px; + cursor: pointer; } @@ -149,4 +150,64 @@ pre { color: #000; text-decoration: none; cursor: pointer; -} \ No newline at end of file +} + +#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; +} From c6dee8a0ae084cdce703dbe9fcacfd60219d34ec Mon Sep 17 00:00:00 2001 From: geonKO Date: Fri, 21 Jun 2024 18:07:07 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/index.html | 34 +++++++++++++++------------------- src/view/script.js | 24 +++--------------------- 2 files changed, 18 insertions(+), 40 deletions(-) diff --git a/src/view/index.html b/src/view/index.html index 83ee600..a7bc935 100644 --- a/src/view/index.html +++ b/src/view/index.html @@ -28,16 +28,16 @@

어떨때 사용하나요?

데이터 전체 조회 API

-

GET

/admin/users - +

GET

users/get/all + 전체 유저 조회
-

GET

/books/books - +

GET

/books/books + 전체 책 조회
-

GET

/coupang_products/all - +

GET

coupang-products/get/all + 전체 제품 조회
@@ -46,19 +46,15 @@

데이터 전체 조회 API

특정 조건의 데이터 조회 API

-

GET

/admin/users/1 - 유저 아이디 1 +

GET

/users/1 + 유저 이름 user8613
-

GET

/books/info/1 +

GET

/books/info/1 책 아이디 1
-

GET

/coupang_products/product/1 - 쿠팡 제품 아이디 1 -
-
-

GET

/coupang_products/food +

GET

/coupang_products/food 쿠팡 제품 카테고리:음식
@@ -70,13 +66,13 @@

API TEST (GET)

- - + +
@@ -85,8 +81,8 @@

API TEST (GET)

- - + +
diff --git a/src/view/script.js b/src/view/script.js index bc0f66a..83c122c 100644 --- a/src/view/script.js +++ b/src/view/script.js @@ -10,29 +10,11 @@ function closeModal() { modal.style.display = 'none'; } -async function fetchData() { - try { - 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://34.197.44.20/books/count'); - const bookData = await bookResponse.json(); - document.getElementById('book-count').textContent = `전체 책 ${bookData.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); - } -} 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 response = await fetch(`http://34.236.41.203:5000/users/user/${input}`); const data = await response.json(); document.getElementById('result').textContent = JSON.stringify(data, null, 2); } catch (error) { @@ -43,7 +25,7 @@ async function fetchSpecificDatausers() { async function fetchSpecificDatabooks() { const input = document.getElementById('input-id-books').value; try { - const response = await fetch(`http://34.197.44.20/books/info/${input}`); + const response = await fetch(`http://34.236.41.203:5000/books/info/${input}`); const data = await response.json(); document.getElementById('result').textContent = JSON.stringify(data, null, 2); } catch (error) { @@ -54,7 +36,7 @@ async function fetchSpecificDatabooks() { 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 response = await fetch(`http://34.236.41.203:5000/coupang_products/get/${input}`); const data = await response.json(); document.getElementById('result').textContent = JSON.stringify(data, null, 2); } catch (error) {