-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (169 loc) · 10.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>ShoppingNogi</title>
<link rel="icon" type="image/png" href="./public/icon.ico">
<script src="./public/lib/js/jquery-3.7.1.min.js"></script>
<script src="./public/lib/js/popper.min.js"></script>
<script src="./public/lib/js/bootstrap.js"></script>
<script src="./public/lib/js/chart.js"></script>
<script type="module" src="./public/main/js/main.js"></script>
<script src="./public/main/js/theme.js"></script>
<link rel="stylesheet" type="text/css" href="./public/lib/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./public/main/css/style.css">
</head>
<body>
<!-- 헤더 -->
<header>
<div id="header">
<div id="header-container">
<div id="header-left">
<span id="header-left-title" class="submenu header-submenu"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart" viewBox="0 0 16 16">
<path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5M3.102 4l1.313 7h8.17l1.313-7zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4m7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4m-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2m7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2"/>
</svg> ShoppingNogi</span>
</div>
<div id="header-right">
<span id="header-right-menu" class="submenu header-submenu">Right Menu</span>
</div>
</div>
</div>
</header>
<!-- 왼쪽 내비게이터 -->
<nav>
<div id="navigator">
<div id="navigator-top">
<!-- 카테고리 시작 -->
<div id="navigator-category">
<div id="navigator-category-wrapper">
<div class="navigator-category-upper">근거리 장비</div>
<div class="navigator-category-upper">원거리 장비</div>
<div class="navigator-category-upper">마법 장비</div>
<div class="navigator-category-upper">갑옷 장비</div>
<div class="navigator-category-upper">액세서리</div>
<div class="navigator-category-upper">특수 장비</div>
<div class="navigator-category-upper">인챈트 용품</div>
<div class="navigator-category-upper">기타</div>
</div>
</div>
<!-- 카테고리 종료-->
<!-- 검색 시작-->
<div class="submenu navigator-submenu">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
<span class="navigator-submenu-text">
<form id="inputForm">
<input type="text" id="search" name="search" placeholder="검색">
</form>
</span>
</div>
<!-- 검색 종료 -->
<!-- 테마 변경 시작 -->
<div id="navigator-theme" class="submenu navigator-submenu">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"/>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"/>
</svg><span id="navigator-theme-text" class="navigator-submenu-text"></span>
</div>
<!-- 테마 변경 종료 -->
</div>
<div id="navigator-bottom">
<span class="submenu navigator-submenu">B</span>
</div>
</div>
</nav>
<!-- 왼쪽 네비게이터 종료 -->
<!-- 본문 -->
<div id="container">
<div id="content">
<!-- result table -->
<div id="item-list-title-container">
<span id="item-list-title">ShoppingNogi에 오신 것을 환영합니다!</span>
</div>
<div id="content-article">
<img src="https://i.postimg.cc/brLb6B2C/img-03.png">
<h2>ShoppingNogi 란?</h2>
<p>ShoppingNogi는 (주)넥슨에서 2003년부터 서비스되고 있는 MMORPG 장르 온라인 게임 '마비노기'의 아이템 거래 시스템, '경매장'에 현재 등록되어 있는 아이템을 검색할 수 있는 서비스입니다.</p>
<p>단순히 현재 등록된 아이템 목록을 열람하는 것 외에도, 최근 1일 안에 판매된 아이템의 목록을 열람할 수 있습니다.</p>
<p class="indent">단, 목록은 API 호출 한계 때문에 3시간에 한 번 업데이트됩니다.</p>
<p>또한 타 유사 서비스와 다르게, 아이템의 툴팁을 실제 인게임 구조와 비슷하게 구현하여 게임 내에서 경매장을 열람하는 것과 크게 다르지 않은 경험을 할 수 있도록 구현하였습니다.</p>
<h2>ShoppingNogi 사용법</h2>
<ol>
<li>
카테고리를 클릭하면 하위 카테고리가 나타나며 해당 카테고리에 속한 아이템들을 확인할 수 있습니다.
<ul>
<li>최대 1500개까지 출력됩니다.</li>
</ul>
</li>
<li>
검색창에 아이템 이름을 입력하여 등록 정보를 검색할 수 있습니다.
<ul>
<li>단, 부분검색은 지원하지 않으며 전체 검색어를 정확히 입력해야 합니다.</li>
<li style="color: #0098FD">예시: '부러진 통나무', '블루 에코스톤', '페른의 의상(여성용)'</li>
<li>최대 1500개까지 출력됩니다.</li>
</ul>
</li>
<li>표의 맨 위 '시간'과 '가격'을 누르면 내림차순 혹은 오름차순으로 데이터를 정렬하여 볼 수 있습니다.</li>
<ul>
<li>
<img src="https://i.postimg.cc/Wb02jvHk/img-01.png">
</li>
<li>
초기 정렬 방법은 경매장에 등록된 아이템 순입니다. 가장 최근에 등록되었을수록 가장 앞에 출력되고, 가장 나중에 등록되었을수록 가장 뒤에 출력됩니다.
</li>
<li>
'시간'은 경매장에서 등록 해제되기까지의 시간을 말합니다.
</li>
<li>
이 '시간'은 경매장에 아이템을 등록하는 유저가 자유로이 정할 수 있으므로 초기 정렬 방법은 '시간'순으로 정렬된 것이 아닙니다.
</li>
</ul>
<li>
아이템명을 클릭 시 해당 아이템의 속성이 툴팁 형태로 표시됩니다. 표시 형태는 인게임 UI에 최대한 가깝도록 구현되었습니다.
</li>
<ul>
<li>
<img src="https://i.postimg.cc/QN0zTnKy/img-02.png">
</li>
<li>
그러나 openAPI에서 세공 옵션 목록이 세공 랭크보다 미리 주어질 경우, 순서가 바뀌는 버그가 있습니다.
</li>
</ul>
<li>
각 아이템의 가격을 클릭하면 해당 아이템의 최근 1일간의 거래 내역을 확인할 수 있습니다.
</li>
<ul>
<li>
<img src="https://i.postimg.cc/pTSMD2sq/img-04.png">
</li>
</ul>
</ol>
</div>
<div id="item-list-chart">
<canvas id="chart"></canvas>
</div>
<table id="item-list">
<tr>
<th>번호</th>
<th>이름</th>
<th>가격</th>
</tr>
</table>
<div id="message"></div>
<!-- paging -->
<div id="paging">
</div>
</div>
</div>
<!-- 푸터 -->
<footer>
<div id="footer">
<div id="footer-content">
<p>본 페이지는 NEXON OPENAPI의 데이터를 이용하여 제작되었습니다.</p>
</div>
</div>
</footer>
<!-- 푸터 종료 -->
</body>
</html>