feat: test

.github/workflows/deploy.yaml

@@ -3,7 +3,7 @@ name: Create and publish a Docker image to AWS ECR ans deploy to EC2
 on:
   push:
     branches:
-      - main
+      - feature/test-spell
 
 env:
   REGISTRY: ${{ secrets.AWS_ECR_REGISTRY }}

package.json

@@ -20,9 +20,11 @@
     "@vanilla-extract/sprinkles": "^1.6.1",
     "axios": "^1.6.2",
     "clsx": "^2.0.0",
+    "hanspell": "^0.9.7",
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
+    "react-json-pretty": "^2.2.0",
     "zustand": "^4.4.7"
   },
   "devDependencies": {

pages/api/spellingCheck.js

@@ -0,0 +1,16 @@
+import { spellCheckByDAUM } from 'hanspell';
+
+export default async function handler(req, res) {
+  let data = [];
+  const check = function (json) {
+    data = data.concat(json);
+  };
+  const end = function () {
+    res.json(data);
+  };
+  const error = function (err) {
+    console.error('// error: ' + err);
+  };
+
+  spellCheckByDAUM(req.body.text, 6000, check, end, error);
+}

pages/api/spellingCheck2.js

@@ -0,0 +1,16 @@
+import { spellCheckByPNU } from 'hanspell';
+
+export default async function handler(req, res) {
+  let data = [];
+  const check = function (json) {
+    data = data.concat(json);
+  };
+  const end = function () {
+    res.json(data);
+  };
+  const error = function (err) {
+    console.error('// error: ' + err);
+  };
+
+  spellCheckByPNU(req.body.text, 6000, check, end, error);
+}

pages/index.tsx

@@ -1,7 +1,70 @@
-import type { NextPage } from 'next';
+import axios from 'axios';
+import { useState } from 'react';
+import JSONPretty from 'react-json-pretty';
 
-const HomePage: NextPage = () => {
-  return <>바로</>;
+const HomePage = () => {
+  const [text, setText] = useState('');
+  const [result, setResult] = useState(null);
+  const [result2, setResult2] = useState(null);
+
+  const checkSpelling = async () => {
+    try {
+      const response = await axios.post('/api/spellingCheck', { text });
+      setResult(response.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const checkSpelling2 = async () => {
+    try {
+      const response2 = await axios.post('/api/spellingCheck2', { text });
+      setResult2(response2.data);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div style={{ padding: '30px' }}>
+      <input
+        style={{ border: '1px solid black', width: '500px', padding: '5px' }}
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+      />
+      <button
+        onClick={() => {
+          checkSpelling();
+          checkSpelling2();
+        }}
+      >
+        Check
+      </button>
+
+      {result && (
+        <div style={{ marginTop: '20px' }}>
+          <h3>맞춤법 검사 결과(DAUM):</h3>
+          <JSONPretty
+            style={{ marginTop: '10px' }}
+            id="json-pretty"
+            data={result}
+          ></JSONPretty>
+        </div>
+      )}
+
+      {result2 && (
+        <div style={{ marginTop: '20px' }}>
+          <h3>맞춤법 검사 결과(부산대):</h3>
+          <JSONPretty
+            style={{ marginTop: '10px' }}
+            id="json-pretty"
+            data={result2}
+          ></JSONPretty>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default HomePage;