Spaces:
Running
Running
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SDV Data Model & Message Definition</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Source+Code+Pro:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Noto Sans KR', sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background-color: #f0f2f5; | |
| } | |
| .slide { | |
| width: 1280px; | |
| height: 720px; | |
| background: linear-gradient(135deg, #3a0ca3, #7209b7); | |
| color: white; | |
| display: flex; | |
| flex-direction: column; | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| border-radius: 1rem; | |
| padding: 48px; | |
| } | |
| .code-block { | |
| font-family: 'Source Code Pro', monospace; | |
| } | |
| .code-block .key { color: #93c5fd; } /* blue-300 */ | |
| .code-block .string { color: #a7f3d0; } /* emerald-200 */ | |
| .code-block .number { color: #fde047; } /* yellow-300 */ | |
| .code-block .comment { color: #9ca3af; } /* gray-400 */ | |
| </style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <!-- Slide Header --> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-5xl font-bold">Device API ๋ฐ์ดํฐ ๋ชจ๋ธ ๋ฐ ๋ฉ์์ง ์ ์</h1> | |
| <p class="text-2xl mt-3 text-purple-200">ํ์คํ๋ JSON ๊ธฐ๋ฐ ํต์ ํ๋กํ ์ฝ</p> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="flex-grow grid grid-cols-2 gap-12"> | |
| <!-- Left Column: Details --> | |
| <div class="flex flex-col justify-center space-y-8"> | |
| <div> | |
| <h3 class="text-3xl font-semibold mb-3 text-fuchsia-300"><i class="fas fa-envelope-open-text mr-3"></i>๋ฉ์์ง ๊ตฌ์กฐ</h3> | |
| <ul class="space-y-3 pl-5 list-disc list-inside text-xl"> | |
| <li><strong class="font-bold text-white">JSON ๊ธฐ๋ฐ Key-Value:</strong> ๊ฐ๋ ์ฑ ๋๊ณ ์ ์ฐํ ๋ฐ์ดํฐ ๊ตํ ํ์</li> | |
| <li><strong class="font-bold text-white">deviceId:</strong> ์ ์ดํ ํ๋์จ์ด ์ฅ์น์ ๊ณ ์ ์๋ณ์</li> | |
| <li><strong class="font-bold text-white">interface:</strong> `setOper`, `ntfCurr` ๋ฑ ์ถ์ํ๋ ๊ธฐ๋ฅ</li> | |
| <li><strong class="font-bold text-white">params / result:</strong> ์ ์ถ๋ ฅ ํ๋ผ๋ฏธํฐ ๋ฐ ์ํ ๊ฒฐ๊ณผ</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-3xl font-semibold mb-3 text-fuchsia-300"><i class="fas fa-exchange-alt mr-3"></i>ํธ์ถ ๋ฐฉ์ ๋ฐ ํน์ง</h3> | |
| <ul class="space-y-3 pl-5 list-disc list-inside text-xl"> | |
| <li>Request/Response ๋ฐ Event-driven ํต์ ์ง์</li> | |
| <li>์๋น์ค ํ์ง(QoS), ํ์์์(Timeout) ๋ฑ ์ ์ฝ ์กฐ๊ฑด ํฌํจ ๊ฐ๋ฅ</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Right Column: JSON Example --> | |
| <div class="flex flex-col items-center justify-center bg-black/20 p-8 rounded-xl backdrop-blur-sm border border-white/20"> | |
| <h3 class="text-3xl font-bold mb-4">JSON ๋ฉ์์ง ์์</h3> | |
| <div class="w-full space-y-4"> | |
| <!-- Request Block --> | |
| <div> | |
| <p class="font-semibold text-lg mb-1">โบ Request: ์ฐฝ๋ฌธ ๋ชจํฐ ๊ตฌ๋ ์์ฒญ</p> | |
| <div class="bg-gray-900/70 rounded-lg p-4 code-block text-base"> | |
| <pre><code>{ | |
| <span class="key">"deviceId"</span>: <span class="string">"WindowMotor_FL"</span>, | |
| <span class="key">"interface"</span>: <span class="string">"setOper"</span>, | |
| <span class="key">"params"</span>: { | |
| <span class="key">"dir"</span>: <span class="number">1</span>, <span class="comment">// 1: Upward</span> | |
| <span class="key">"dutyRat"</span>: <span class="number">10000</span> <span class="comment">// 100.00%</span> | |
| } | |
| }</code></pre> | |
| </div> | |
| </div> | |
| <!-- Response Block --> | |
| <div> | |
| <p class="font-semibold text-lg mb-1">โ Response: ์์ฒญ ๊ฒฐ๊ณผ ์๋ต</p> | |
| <div class="bg-gray-900/70 rounded-lg p-4 code-block text-base"> | |
| <pre><code>{ | |
| <span class="key">"deviceId"</span>: <span class="string">"WindowMotor_FL"</span>, | |
| <span class="key">"interface"</span>: <span class="string">"setOper"</span>, | |
| <span class="key">"result"</span>: { | |
| <span class="key">"status"</span>: <span class="number">0</span> <span class="comment">// 0: OK</span> | |
| } | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |