refactoring: API 문서 디자인 변경

JangHwanPark · Jul 9, 2024 · 5eddb5a · 5eddb5a
1 parent 40dc637
commit 5eddb5a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 51 deletions.
diff --git a/src/controllers/viewController.js b/src/controllers/viewController.js
@@ -36,6 +36,9 @@ export const renderCoupangPage = (req, res) => {
  const data = {
  message: "MOCK",
  hero: 'Documentation',
+ resourceFetch: `fetch('http://34.236.41.203:5000/products/v1/get/all')
+ .then((response) => response.json())
+ .then((json) => console.log(json));`,
  mock: {
  "pid": "6001",
  "category": "Electronics",
@@ -57,6 +60,13 @@ export const renderBookPage = (req, res) => {
  const data = {
  message: "MOCK",
  hero: 'Books',
+ getTitle: 'EndPoint - GET books/v1/get/all',
+ getTitleId: 'EndPoint - GET books/v1/get/:id',
+ resourceFetch: `fetch('http://34.236.41.203:5000/books/v1/get/all')
+ .then((response) => response.json())
+ .then((json) => console.log(json));`,
+ descriptionAll: '도서 조회 API 는 데이터베이스에 등록된 모든 도서 정보를 JSON 형식으로 반환하는 API 입니다.',
+ descriptionId: '이 API 는 도서의 고유 식별번호를 사용하여 특정 도서를 JSON 형식으로 반환하는 API 입니다.',
  mock: {
  "book_id": 2,
  "name": "예약판매 최고의 프로덕트는 무엇이 다른가",
@@ -80,7 +90,13 @@ export const renderUserPage = (req, res) => {
  const data = {
  message: "MOCK",
  hero: 'Users',
- guideTitle: 'EndPoint - GET users/v1/get/all',
+ getTitle: 'EndPoint - GET users/v1/get/all',
+ getTitleId: 'EndPoint - GET users/v1/get/:id',
+ resourceFetch: `fetch('http://34.236.41.203:5000/users/v1/get/all')
+ .then((response) => response.json())
+ .then((json) => console.log(json));`,
+ descriptionAll: '사용자 조회 API는 등록된 모든 사용자를 조회하여 JSON 형식으로 반환하는 API 입니다.',
+ descriptionId: 'users/user/{uid} 는 사용자의 고유 식별번호를 사용하여 특정 사용자를 조회하여 JSON 형식으로 반환하는 API 입니다.',
  mock: {
  "uid": "123456",
  "name": "홍길동",

diff --git a/src/public/guide-detail.css b/src/public/guide-detail.css
@@ -2,4 +2,12 @@
  margin: 2rem 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eaebed;
+}
+
+.guide-sub-title {
+ margin-top: 5rem;
+}
+
+.error-title {
+ margin-top: 5rem;
 }
diff --git a/src/views/components/documentation.ejs b/src/views/components/documentation.ejs
@@ -0,0 +1,32 @@
+<section class="guide">
+ <div class="get-books">
+ <h2 class="guide-title"><%= getTitle %>></h2>
+ <p><%= descriptionAll %></p>
+ <p>아래는 Fetch API 를 사용한 예시지만 다른 언어에서도 API를 사용할 수 있습니다.</p>
+
+ <h4 class="guide-sub-title">리소스 요청</h4>
+ <pre><code><%= resourceFetch %></code></pre>
+
+ <h4 class="guide-sub-title">응답 예시 (성공)</h4>
+ <pre><code><%= JSON.stringify(mock, null, 2) %></code></pre>
+
+ <h4 class="guide-sub-title">응답 예시 (실패)</h4>
+ <pre><code><%= JSON.stringify(errorMessage, null, 2) %></code></pre>
+ </div>
+</section>
+<section class="guide">
+ <div class="get-book-by-id">
+ <h2 class="guide-title"><%= getTitleId %></h2>
+ <p><%= descriptionId %></p>
+ <p>아래는 Fetch API 를 사용한 예시지만 다른 언어에서도 API를 사용할 수 있습니다.</p>
+
+ <h4 class="guide-sub-title">리소스 요청</h4>
+ <pre><code><%= resourceFetch %></code></pre>
+
+ <h4 class="guide-sub-title">응답 예시 (성공)</h4>
+ <pre><code><%= JSON.stringify(mock, null, 2) %></code></pre>
+
+ <h4 class="guide-sub-title">응답 예시 (실패)</h4>
+ <pre><code><%= JSON.stringify(errorMessage, null, 2) %></code></pre>
+ </div>
+</section>
diff --git a/src/views/guide/books.ejs b/src/views/guide/books.ejs
@@ -7,6 +7,7 @@
  <link rel="stylesheet" href="../../styles.css">
  <link rel="stylesheet" href="../../header.css">
  <link rel="stylesheet" href="../../hero.css">
+ <link rel="stylesheet" href="../../guide-detail.css">
 </head>
 <body>
 <!-- import header -->
@@ -15,32 +16,8 @@
 <%- include('../components/hero', { hero: hero }) %>
 <!-- main -->
 <main class="container">
- <section class="guide">
- <div class="get-books">
- <h2 class="guide-title">EndPoint - GET /books/v1/get/all</h2>
- <p>도서 조회 API 는 데이터베이스에 등록된 모든 도서 정보를 JSON 형식으로 반환하는 API 입니다.</p>
- <p>아래는 Fetch API 를 사용한 예시지만 다른 언어에서도 API를 사용할 수 있습니다.</p>
-
- <h4>응답 예시 (성공)</h4>
- <pre><code><%= JSON.stringify(mock, null, 2) %></code></pre>
-
- <h4>응답 예시 (실패)</h4>
- <pre><code><%= JSON.stringify(errorMessage, null, 2) %></code></pre>
- </div>
- </section>
- <section class="guide">
- <div class="get-book-by-id">
- <h2>EndPoint</h2>
- <h3>GET books/info/{id}</h3>
- <p>이 API 는 도서의 고유 식별번호를 사용하여 특정 도서를 JSON 형식으로 반환하는 API 입니다.</p>
- <p>아래는 Fetch API 를 사용한 예시지만 다른 언어에서도 API를 사용할 수 있습니다.</p>
-
- <h4>응답 예시 (성공)</h4>
- <pre><code><%= JSON.stringify(mock, null, 2) %></code></pre>
- <h4>응답 예시 (실패)</h4>
- <pre><code><%= JSON.stringify(errorMessage, null, 2) %></code></pre>
- </div>
- </section>
+ <!-- import content -->
+ <%- include('../components/documentation') %>
  <!-- import Error -->
  <%- include('../components/error') %>
 </main>

diff --git a/src/views/guide/coupang.ejs b/src/views/guide/coupang.ejs
@@ -8,6 +8,7 @@
  <link rel="stylesheet" href="../../header.css">
  <link rel="stylesheet" href="../../error.css">
  <link rel="stylesheet" href="../../hero.css">
+ <link rel="stylesheet" href="../../guide-detail.css">
 </head>
 <body>
 <!-- import header -->
@@ -21,9 +22,13 @@
  <p>상품 조회 API 는 데이터베이스에 등록된 모든 상품정보를 JSON 형식으로 반환하는 API 입니다.</p>
  <p>아래는 Fetch API 를 사용한 예시지만 다른 언어에서도 API를 사용할 수 있습니다.</p>
 
- <h4>응답 예시 (성공)</h4>
+ <h4 class="guide-sub-title">리소스 요청</h4>
+ <pre><code><%= resourceFetch %></code></pre>
+
+ <h4 class="guide-sub-title">응답 예시 (성공)</h4>
  <pre><code><%= JSON.stringify(mock, null, 2) %></code></pre>
- <h4>응답 예시 (실패)</h4>
+
+ <h4 class="guide-sub-title">응답 예시 (실패)</h4>
  <pre><code><%= JSON.stringify(errorMessage, null, 2) %></code></pre>
  </div>
  </section>

diff --git a/src/views/guide/users.ejs b/src/views/guide/users.ejs
@@ -16,28 +16,8 @@
 <%- include('../components/hero', { hero: hero }) %>
 <!-- main -->
 <main class="container">
- <section class="guide">
- <div class="get-all">
- <h2 class="guide-title"><%= guideTitle %></h2>
- <p>사용자 조회 API는 등록된 모든 사용자를 조회하여 JSON 형식으로 반환하는 API 입니다.</p>
- <p>아래는 Fetch API 를 사용한 예시지만 다른 언어에서도 API를 사용할 수 있습니다.</p>
-
- <h4>응답 예시 (성공)</h4>
- <pre><code><%= JSON.stringify(mock, null, 2) %></code></pre>
- <h4>응답 예시 (실패)</h4>
- <pre><code><%= JSON.stringify(errorMessage, null, 2) %></code></pre>
- </div>
- </section>
- <section class="guide">
- <h2 class="guide-title">EndPoint - GET users/user/{uid}</h2>
- <p>users/user/{uid} 는 사용자의 고유 식별번호를 사용하여 특정 사용자를 조회하여 JSON 형식으로 반환하는 API 입니다.</p>
- <p>아래는 Fetch API 를 사용한 예시지만 다른 언어에서도 API를 사용할 수 있습니다.</p>
-
- <h4>응답 예시 (성공)</h4>
- <pre><code><%= JSON.stringify(mock, null, 2) %></code></pre>
- <h4>응답 예시 (실패)</h4>
- <pre><code><%= JSON.stringify(errorMessage, null, 2) %></code></pre>
- </section>
+ <!-- import content -->
+ <%- include('../components/documentation') %>
  <!-- import error -->
  <%- include('../components/error') %>
 </main>