hjh010501 · hjh010501 · Jul 26, 2022 · Jul 21, 2022 · Jul 21, 2022 · Jul 23, 2022
diff --git a/index.html b/index.html
@@ -30,11 +30,14 @@
     </head>
     <body>
         <div class="center">
-            <div class="title">🌊나이스(NEIS) 글자수 계산기</div>
+            <header>
+              <div class="title">🌊나이스(NEIS) 글자수 계산기</div>
+              <button id="spellcheck_button">맞춤법 검사하기</button>
+            </header>
             <div class="title_underbar_wrapper">
             <div class="title_underbar"></div>
             </div>
-            <textarea oninput="counter(document.getElementById('counter').value)" id="counter" class="counter" cols="40" rows="5"></textarea>
+            <spell-check-input id="counter" class="counter"></spell-check-input>
             <table>
                     <tr>
                         <th>항목</td>
@@ -62,17 +65,30 @@
             <span style="float: right;"><a class="github-button" href="https://github.com/hjh010501/neis-counter" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star hjh010501/neis-counter on GitHub">Star</a></span>
         </div>
         </div>
+        <script type="module" src="./spellchecker/index.js"></script>
         <script>
+        const textarea = document.getElementById("counter");
+        const spellCheckButton = document.getElementById("spellcheck_button")
+
         function init() {
             let content = localStorage.getItem("save");
+
             if(content) {
                 counter(content);
-                document.getElementById('counter').value = content;
+                textarea.setContent(content);
             }
+
+            textarea.addEventListener("content-change", function(e) {
+                counter(e.detail.content);
+            });
+
+            spellCheckButton.addEventListener("click", function() {
+                spellCheckButton.classList.add("pending")
+                textarea.spellCheck().finally(() => spellCheckButton.classList.remove("pending"));
+            });
         }
 
         function counter(content) {
-            console.log(content);
             localStorage.setItem("save", content);
             var english = content.replace(/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/gi, "").replace(/[0-9]/gi, "").replace(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi, "").replace(/\s/gi, "").replace(/\s/gi, "").replace(/(\r\n\t|\n|\r\t)/gm,"");;
             var korean = content.replace(/[a-zA-Z]/gi, "").replace(/[0-9]/gi, "").replace(/[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi, "").replace(/\s/gi, "").replace(/(\r\n\t|\n|\r\t)/gm,"");
@@ -87,4 +103,4 @@
         window.onload = init;
         </script>
     </body>
-</html>
+</html>
diff --git a/main.css b/main.css
@@ -56,6 +56,14 @@ body {
   width: 100%;
 }
 
+header {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
 .title {
   font-family: "Noto Sans KR Bold";
   font-size: 20pt;
@@ -82,6 +90,7 @@ body {
   outline: 0;
   padding: 25px;
   line-height: 25px;
+  box-sizing: border-box;
 }
 
 .result {
@@ -93,6 +102,19 @@ body {
   margin-top: 20px;
 }
 
+button {
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-family: "Noto Sans KR";
+  background-color: #1d1d1d;
+  color: #fff;
+}
+
+button.pending {
+  opacity: 0.5;
+}
+
 table {
   width: 100%;
   text-align: center;

diff --git a/spellchecker/agreement.js b/spellchecker/agreement.js
@@ -0,0 +1,63 @@
+import * as Lit from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+import { button } from "./button.js";
+
+const { html, LitElement, css } = Lit;
+
+class Agreement extends LitElement {
+  static styles = [
+    button,
+    css`
+      dialog {
+        margin: 24px;
+        border-radius: 4px;
+        width: 480px;
+        margin-left: auto;
+        margin-top: 60px;
+        border-width: 2px;
+      }
+      h1 {
+        font-size: 16px;
+      }
+    `,
+  ];
+
+  open() {
+    this.shadowRoot.querySelector("dialog").showModal();
+  }
+
+  render() {
+    return html`
+      <dialog>
+        <h1>맞춤법 검사기 사용에 대한 안내</h1>
+        <p>
+          글을 더 편하게 작성할 수 있도록 맞춤법 검사 기능을 제공하고 있습니다.
+        </p>
+        <p>
+          맞춤법 검사를 수행하기 위해서는 입력한 글을 맞춤법 검사를 중계하는
+          서버로 전송해야 합니다. 서버에서는 글의 내용을 포함하여 그 어떤 정보도
+          저장하거나 수집하지 않습니다.
+        </p>
+
+        <button
+          @click=${() => {
+            this.dispatchEvent(new CustomEvent("canceled"));
+            this.shadowRoot.querySelector("dialog").close();
+          }}
+        >
+          사용하지 않기
+        </button>
+        <button
+          class="primary"
+          @click=${() => {
+            this.dispatchEvent(new CustomEvent("agree"));
+            this.shadowRoot.querySelector("dialog").close();
+          }}
+        >
+          맞춤법 검사 기능을 사용하겠습니다.
+        </button>
+      </dialog>
+    `;
+  }
+}
+
+customElements.define("agreement-modal", Agreement);
diff --git a/spellchecker/button.js b/spellchecker/button.js
@@ -0,0 +1,16 @@
+import * as Lit from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+const { css } = Lit;
+
+export const button = css`
+  button {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-family: "Noto Sans KR";
+  }
+
+  button.primary {
+    background-color: #1d1d1d;
+    color: #fff;
+  }
+`;
diff --git a/spellchecker/index.js b/spellchecker/index.js
@@ -0,0 +1 @@
+import "./textarea.js";
diff --git a/spellchecker/modal.js b/spellchecker/modal.js
@@ -0,0 +1,144 @@
+import * as Lit from "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js";
+import { button } from "./button.js";
+const { html, LitElement, css } = Lit;
+
+class TypoModal extends LitElement {
+  static styles = [
+    button,
+    css`
+      #dialog {
+        border-radius: 4px;
+        position: fixed;
+        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
+        background-color: white;
+        gap: 12px;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        margin: 0px;
+      }
+
+      #dialog p {
+        margin: 0px;
+        max-width: 160px;
+        word-break: keep-all;
+        font-size: 14px;
+      }
+
+      .dialog_control {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      #candidates {
+        display: flex;
+        gap: 8px;
+      }
+    `,
+  ];
+
+  static properties = {
+    typo: { type: Object },
+    currentIndex: { type: Number },
+    wholeLength: { type: Number },
+    positionX: { type: Number },
+    positionY: { type: Number },
+  };
+
+  firstUpdated() {
+    super.firstUpdated();
+
+    document.addEventListener("click", () =>
+      this.dispatchEvent(new CustomEvent("close"))
+    );
+
+    document.body.addEventListener("keypress", (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const selected = isNaN(+e.key) ? e.key : +e.key;
+
+      if (this.typo.suggestions[selected - 1]) {
+        this.dispatchEvent(
+          new CustomEvent("replace", {
+            detail: {
+              suggestion: this.typo.suggestions[selected - 1],
+            },
+          })
+        );
+      } else if (selected === "Enter") {
+        this.dispatchEvent(
+          new CustomEvent("move", {
+            detail: {
+              delta: e.shiftKey ? -1 : 1,
+            },
+          })
+        );
+      }
+    });
+  }
+
+  render() {
+    return html`
+      <div
+        id="dialog"
+        style=${`left: ${this.positionX}px; top: ${this.positionY + 30}px`}
+        @click=${(e) => e.stopPropagation()}
+      >
+        <div class="dialog_control">
+          <p>${this.currentIndex + 1} / ${this.wholeLength}</p>
+          <p>
+            <span
+              @click=${() =>
+                this.dispatchEvent(
+                  new CustomEvent("move", {
+                    detail: {
+                      delta: -1,
+                    },
+                  })
+                )}
+            >
+              &lt;
+            </span>
+            &nbsp;
+            <span
+              @click=${() =>
+                this.dispatchEvent(
+                  new CustomEvent("move", {
+                    detail: {
+                      delta: 1,
+                    },
+                  })
+                )}
+            >
+              &gt;
+            </span>
+          </p>
+        </div>
+        <div id="candidates">
+          ${this.typo.suggestions.map(
+            (suggestion) =>
+              html`
+                <button
+                  @click=${() => {
+                    this.dispatchEvent(
+                      new CustomEvent("replace", {
+                        detail: {
+                          suggestion,
+                        },
+                      })
+                    );
+                  }}
+                >
+                  ${suggestion}
+                </button>
+              `
+          )}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("typo-modal", TypoModal);