Socket Client UI 기본 골격 작성

src/main/resources/static/css/custom.css

@@ -2030,3 +2030,16 @@ footer div.foot_info span {
 .query_params .prop-table {
     width: calc(100vw - 240px);
 }
+
+
+.layout_table {
+    width: 1500px;
+}
+
+.api_request_info .show {
+    display: block;
+}
+
+.api_request_info .hide {
+    display: none;
+}

src/main/resources/templates/page/servers/serverEdit.html

@@ -27,6 +27,7 @@
                             <select class="form-select" th:field="*{scheme}" style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
                                 <option value="http" th:selected="${server.scheme =='http'}">http</option>
                                 <option value="https" th:selected="${server.scheme =='https'}">https</option>
+                                <option value="tcp" th:selected="${server.scheme =='tcp'}">tcp</option>
                             </select>
                             <label for="scheme">Scheme</label>
                         </div>
@@ -54,6 +55,37 @@
                             </th:block>
                         </div>
                     </div>
+                    <!-- TCP-specific fields -->
+                    <div id="tcpFields" style="display: none;">
+                        <div class="input-group">
+                            <div class="form-floating mt-2 me-2">
+                                <input type="text" class="form-control" th:field="*{lengthFieldOffset}" placeholder="Length Field Offset">
+                                <label for="lengthFieldOffset">길이 필드 시작 위치</label>
+                            </div>
+                            <div class="form-floating mt-2 me-2">
+                                <input type="text" class="form-control" th:field="*{lengthFieldLength}" placeholder="Length Field Length">
+                                <label for="lengthFieldLength">길이 필드 길이</label>
+                            </div>
+                            <div class="form-check mt-2">
+                                <input class="form-check-input" type="checkbox" th:field="*{lengthFieldInclude}" id="lengthFieldInclude">
+                                <label class="form-check-label" for="lengthFieldInclude">길이 필드 포함</label>
+                            </div>
+                        </div>
+                        <div class="input-group">
+                            <div class="form-floating mt-2 me-2">
+                                <input type="text" class="form-control" th:field="*{messageKeyOffset}" placeholder="Message Key Offset">
+                                <label for="messageKeyOffset">메시지 키 시작 위치</label>
+                            </div>
+                            <div class="form-floating mt-2 me-2">
+                                <input type="text" class="form-control" th:field="*{messageKeyLength}" placeholder="Message Key Length">
+                                <label for="messageKeyLength">메시지 키 길이</label>
+                            </div>
+                            <div class="form-check mt-2">
+                                <input class="form-check-input" type="checkbox" th:field="*{messageKeyInclude}" id="messageKeyInclude">
+                                <label class="form-check-label" for="messageKeyInclude">메시지 키 포함</label>
+                            </div>
+                        </div>
+                    </div>
                     <div class="form-check mt-2">
                         <input type="checkbox" class="form-check-input" th:field="*{enabled}" placeholder="사용 여부">
                         <label class="form-check-label" for="enabled">사용?</label>
@@ -71,6 +103,25 @@
 <th:block layout:fragment="contentScript">
     <script>
         $(function () {
+
+            function toggleTcpFields() {
+                let scheme = document.querySelector('select[name="scheme"]').value;
+                console.log(scheme)
+                let tcpFields = document.getElementById('tcpFields');
+                if (scheme === 'tcp') {
+                    tcpFields.style.display = 'block';
+                } else {
+                    tcpFields.style.display = 'none';
+                }
+            }
+
+            // Run on page load
+            toggleTcpFields();
+
+            // Attach event listener to scheme select element
+            document.querySelector('select[name="scheme"]').addEventListener('change', toggleTcpFields);
+
+
             let fnRegister = document.querySelector(".btn_register");
             fnRegister.addEventListener("click", function (event) {
                 let form = document.getElementById("serverForm");
@@ -91,4 +142,4 @@
         });
     </script>
 </th:block>
-</html>
+</html>

src/main/resources/templates/page/servers/serverList.html

@@ -49,9 +49,10 @@
                         <colgroup>
                             <col style="width: 5%;">
                             <col style="width: 5%;">
+                            <col>
+                            <col>
                             <col style="width: 7%;">
-                            <col>
-                            <col>
+                            <col style="width: 15%;">
                         </colgroup>
                         <thead>
                         <tr>