Merge pull request #68 from Palbahngmiyine/master

Update Next.js example

Author: Palbahngmiyine

.travis.yml

@@ -41,6 +41,9 @@ node ${실행 할 자바스크립트 파일}
 
 ```text
 ./nextjs/* Next.js + SOLAPI SDK 연동 예제(UI)
+
+# Next.js 예제만 확인해보고 싶다면 아래의 명령어를 입력해주세요!(npm 설치 필수)
+npx degit solapi/solapi-nodejs/examples/nextjs#main sdk-test-app
 ```
 
 ```text

examples/README.md

@@ -13,7 +13,7 @@ import {
 import {extractVariablesFields, formDataToObject} from '@/lib/formData';
 
 // 주의!! 실제 발송 연동시에는 오로지 서버에서 api key를 관리해서 MessageService를 호출 하도록 해주세요.
-// 본인의 Api Key가 유출되어 발생하는 피해는 오로지 개인에게 있습니다!
+// 본인의 부주의로 인해 Api Key가 유출되어 발생하는 피해는 오로지 개인에게 있습니다!
 export async function getApiKeys(): Promise<Array<string | undefined>> {
   return [process.env.SOLAPI_API_KEY, process.env.SOLAPI_API_SECRET];
 }
@@ -31,7 +31,7 @@ export async function sendMessage(formData: FormData) {
     messageFormSchema.parse(rawFormData);
 
   // 주의!! 실제 발송 연동시에는 오로지 서버에서 api key를 관리해서 MessageService를 호출 하도록 해주세요.
-  // 본인의 Api Key가 유출되어 발생하는 피해는 오로지 개인에게 있습니다!
+  // 본인의 부주의로 인해 Api Key가 유출되어 발생하는 피해는 오로지 개인에게 있습니다!
   const messageService = new SolapiMessageService(apiKey, apiSecret);
   await messageService.send({from, to, text}).then(console.log);
 
@@ -74,6 +74,8 @@ export async function sendAlimtalk(formData: FormData) {
 
   const variables = extractVariablesFields(data);
 
+  // 주의!! 실제 발송 연동시에는 오로지 서버에서 api key를 관리해서 MessageService를 호출 하도록 해주세요.
+  // 본인의 부주의로 인해 Api Key가 유출되어 발생하는 피해는 오로지 개인에게 있습니다!
   const messageService = new SolapiMessageService(data.apiKey, data.apiSecret);
   await messageService
     .send({

examples/nextjs/src/app/actions.ts

@@ -59,15 +59,14 @@ export default function AlimtalkForm() {
 
   useEffect(() => {
     if (template != null) {
-      setVariables(
-        getKakaoTemplateVariables(
-          template.content +
-            ' ' +
-            template.emphasizeTitle +
-            ' ' +
-            template.emphasizeSubtitle,
-        ),
-      );
+      let tempContent: string;
+      tempContent = `${template.content} ${template.emphasizeTitle} ${template.emphasizeSubtitle}`;
+      template.buttons?.forEach(btn => {
+        tempContent += ` ${btn.linkAnd} ${btn.linkIos} ${btn.linkMo} ${btn.linkPc}`;
+      });
+
+      const parsedContent = getKakaoTemplateVariables(tempContent);
+      setVariables(parsedContent);
     }
   }, [template]);
 
@@ -169,6 +168,43 @@ export default function AlimtalkForm() {
       {variables.length > 0 && (
         <>
           <h3 className="text-2xl">템플릿에 등록된 치환문구 목록</h3>
+          <p className="">
+            <b className="font-extrabold text-2xl"># 주의사항 #</b>
+            <br />
+            등록된 템플릿의 변수 중 링크를 변수화 시켰다면, 템플릿 내용을
+            확인해주세요.
+            <br />
+            http:// 나 https:// 를 변수의 앞에 미리 입력해두었다면, 실제
+            치환문구 입력시에는 http:// 혹은 https:// 는 제거되어야 합니다!
+          </p>
+          <div>
+            <h4 className="mb-2 text-xl font-bold">
+              템플릿 치환문구 확인용 내용
+            </h4>
+            <ul>
+              {template?.emphasizeTitle && template.emphasizeTitle != '' && (
+                <li>강조표기 제목: {template?.emphasizeTitle}</li>
+              )}
+              {template?.emphasizeSubtitle &&
+                template.emphasizeSubtitle != '' && (
+                  <li>강조표기 부제목: {template?.emphasizeSubtitle}</li>
+                )}
+              <li>템플릿 내용: {template?.content}</li>
+              {template?.buttons?.map((btn, idx) => (
+                <div key={idx}>
+                  <h4 className="text-lg font-bold mt-1.5">
+                    {btn.buttonName} 버튼의 링크 목록:
+                  </h4>
+                  <ul>
+                    {btn.linkMo && <li>모바일 링크: {btn.linkMo}</li>}
+                    {btn.linkPc && <li>PC 링크: {btn.linkPc}</li>}
+                    {btn.linkAnd && <li>{btn.linkAnd}</li>}
+                    {btn.linkIos && <li>{btn.linkIos}</li>}
+                  </ul>
+                </div>
+              ))}
+            </ul>
+          </div>
           {variables.map((variable, key) => (
             <div className="w-full" key={key}>
               <div>

examples/nextjs/src/components/AlimtalkForm.tsx

@@ -46,27 +46,27 @@
     "qs": "^6.14.0"
   },
   "devDependencies": {
-    "@eslint/eslintrc": "^3.3.0",
-    "@eslint/js": "^9.21.0",
+    "@eslint/eslintrc": "^3",
+    "@eslint/js": "^9",
     "@parcel/packager-ts": "^2.13.3",
     "@parcel/transformer-typescript-tsc": "^2.13.3",
     "@parcel/transformer-typescript-types": "^2.13.3",
     "@parcel/validator-typescript": "^2.13.3",
     "@types/crypto-js": "^4.2.2",
     "@types/image-to-base64": "^2.1.2",
-    "@types/node": "^22.13.5",
+    "@types/node": "^18",
     "@types/qs": "^6.9.18",
-    "@typescript-eslint/eslint-plugin": "^8.25.0",
-    "@typescript-eslint/parser": "^8.25.0",
-    "eslint": "^9.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.26.0",
+    "@typescript-eslint/parser": "^8.26.0",
+    "eslint": "^9",
     "eslint-plugin-tsdoc": "^0.4.0",
     "eslint-plugin-unused-imports": "^4.1.4",
     "globals": "^16.0.0",
     "parcel": "^2.13.3",
-    "prettier": "^3.5.2",
+    "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
     "typedoc": "^0.27.9",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   },
   "packageManager": "yarn@4.6.0",
   "engines": {