Merge pull request #67 from Palbahngmiyine/master

Update next.js examples

Author: Palbahngmiyine

examples/nextjs/README.md

@@ -40,4 +40,5 @@ bun dev
 ```
 ## 주의사항
 
-반드시 .env 파일에 등록 및 활성화하신 API Key, API Secret Key를 설정하셔야 합니다!
+* 반드시 .env 파일에 등록 및 활성화하신 API Key, API Secret Key를 설정하셔야 합니다!
+* 본 예제는 Node.js 18.18 버전 이상을 호환하는 [Next.js 15.2.1](https://nextjs.org/docs/app/getting-started/installation) 버전으로 만들어졌습니다. 반드시 Node.js 18.18 이상의 버전으로 진행해주세요!  

examples/nextjs/package.json

@@ -10,10 +10,13 @@
   },
   "dependencies": {
     "@next/env": "^15.2.1",
-    "next": "15.2.1",
+    "jotai": "^2.12.1",
+    "motion": "^12.4.10",
+    "next": "^15.2.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "solapi": "latest"
+    "solapi": "^5",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

examples/nextjs/src/app/actions.ts

@@ -1,29 +1,91 @@
 'use server';
 
 import '../../envConfig';
-import {BadRequestError, SolapiMessageService} from 'solapi';
+import {SolapiMessageService} from 'solapi';
 import {redirect} from 'next/navigation';
+import {
+  alimtalkFormSchema,
+  AlimtalkFormType,
+  ApiKeysType,
+  messageFormSchema,
+  MessageFormType,
+} from '@/types/types';
+import {extractVariablesFields, formDataToObject} from '@/lib/formData';
+
+// 주의!! 실제 발송 연동시에는 오로지 서버에서 api key를 관리해서 MessageService를 호출 하도록 해주세요.
+// 본인의 Api Key가 유출되어 발생하는 피해는 오로지 개인에게 있습니다!
+export async function getApiKeys(): Promise<Array<string | undefined>> {
+  return [process.env.SOLAPI_API_KEY, process.env.SOLAPI_API_SECRET];
+}
 
 export async function sendMessage(formData: FormData) {
-  if (!formData.has('from') || !formData.has('to') || !formData.has('text')) {
-    throw new BadRequestError(
-      '반드시 발신번호, 수신번호, 메시지 내용을 입력해주세요!',
-    );
-  }
-  const from = formData.get('from') as string;
-  const to = formData.get('to') as string;
-  const text = formData.get('text') as string;
-
-  const messageService = new SolapiMessageService(
-    process.env.SOLAPI_API_KEY!,
-    process.env.SOLAPI_API_SECRET!,
-  );
+  const rawFormData = {
+    apiKey: formData.get('apiKey'),
+    apiSecret: formData.get('apiSecret'),
+    from: formData.get('from'),
+    to: formData.get('to'),
+    text: formData.get('text'),
+  };
+
+  const {from, to, text, apiKey, apiSecret}: MessageFormType =
+    messageFormSchema.parse(rawFormData);
+
+  // 주의!! 실제 발송 연동시에는 오로지 서버에서 api key를 관리해서 MessageService를 호출 하도록 해주세요.
+  // 본인의 Api Key가 유출되어 발생하는 피해는 오로지 개인에게 있습니다!
+  const messageService = new SolapiMessageService(apiKey, apiSecret);
+  await messageService.send({from, to, text}).then(console.log);
+
+  redirect('/?success=true');
+}
+
+export async function getKakaoChannels({apiKey, apiSecret}: ApiKeysType) {
+  const messageService = new SolapiMessageService(apiKey, apiSecret);
+  return await messageService
+    .getKakaoChannels()
+    .then(res => JSON.parse(JSON.stringify(res.channelList)));
+}
+
+export async function getKakaoAlimtalkTemplates(
+  {apiKey, apiSecret}: ApiKeysType,
+  channelId: string,
+) {
+  const messageService = new SolapiMessageService(apiKey, apiSecret);
+  return await messageService
+    .getKakaoAlimtalkTemplates({
+      channelId,
+      status: 'APPROVED',
+    })
+    .then(res => JSON.parse(JSON.stringify(res.templateList)));
+}
+
+export async function getKakaoAlimtalkTemplate(
+  {apiKey, apiSecret}: ApiKeysType,
+  templateId: string,
+) {
+  const messageService = new SolapiMessageService(apiKey, apiSecret);
+  return await messageService
+    .getKakaoAlimtalkTemplate(templateId)
+    .then(res => JSON.parse(JSON.stringify(res)));
+}
+
+export async function sendAlimtalk(formData: FormData) {
+  const data: AlimtalkFormType = formDataToObject(formData);
+  alimtalkFormSchema.parse(data);
+
+  const variables = extractVariablesFields(data);
 
+  const messageService = new SolapiMessageService(data.apiKey, data.apiSecret);
   await messageService
     .send({
-      from,
-      to,
-      text,
+      from: data.from,
+      to: data.to,
+      kakaoOptions: {
+        pfId: data.channelId,
+        templateId: data.templateId,
+        variables: {
+          ...variables,
+        },
+      },
     })
     .then(console.log);
 

examples/nextjs/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type {Metadata} from 'next';
 import localFont from 'next/font/local';
 import './globals.css';
+import type React from 'react';
 
 const pretendard = localFont({
   src: '../fonts/PretendardVariable.woff2',
@@ -20,9 +21,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko">
-      <body className={`${pretendard.className}`}>
-        {children}
-      </body>
+      <body className={`${pretendard.className}`}>{children}</body>
     </html>
   );
 }

examples/nextjs/src/app/page.tsx

@@ -1,152 +1,45 @@
 'use client';
 
-import Form from 'next/form';
-import {sendMessage} from '@/app/actions';
 import {useSearchParams} from 'next/navigation';
-import {useRouter} from 'next/navigation';
+import SMSForm from '@/components/SMSForm';
+import Toast from '@/components/Toast';
+import Tabs from '@/components/Tabs';
+import {useAtom, useStore, Provider} from 'jotai';
+import {apiKeyAtom, apiSecretAtom, tabAtom} from '@/atoms/CommonAtom';
+import AlimtalkForm from '@/components/AlimtalkForm';
+import {useEffect} from 'react';
+import {getApiKeys} from '@/app/actions';
 
 export default function Home() {
-  const router = useRouter();
   const searchParams = useSearchParams();
   const isSuccess = !!searchParams.get('success');
+  const [activeTab] = useAtom(tabAtom);
+  const store = useStore();
+  const [, setApiKey] = useAtom(apiKeyAtom);
+  const [, setApiSecret] = useAtom(apiSecretAtom);
 
-  const handleCloseEvent = async () => {
-    router.replace('/');
-  };
+  useEffect(() => {
+    getApiKeys().then(keys => {
+      setApiKey(keys[0] ?? '');
+      setApiSecret(keys[1] ?? '');
+    });
+  }, []);
 
   return (
-    <>
-      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+    <Provider store={store}>
+      <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
+        <Tabs />
         <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-          <Form
-            action={sendMessage}
-            formMethod="POST"
-            className="flex flex-col gap-6 row-start-2 items-center sm:items-start">
-            <div className="flex justify-center flex-auto w-full">
-              <h1 className="text-4xl font-black text-center">
-                Next.js + SOLAPI 발송 예제
-              </h1>
-            </div>
-            <p className="flex flex-auto justify-center w-full">
-              발신번호, 수신번호, 텍스트만 입력해서 문자 발송 테스트를
-              진행해보실 수 있습니다!
-            </p>
-            <div className="w-full">
-              <label
-                className="block text-gray-700 text-sm mb-2"
-                htmlFor="from">
-                발신번호 /{' '}
-                <b>
-                  반드시 사용할 API Key 계정 내 등록된 발신번호를 입력해주세요!
-                  예) 15771603
-                </b>
-              </label>
-              <input
-                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                id="from"
-                type="text"
-                name="from"
-                placeholder="발신번호"
-                required={true}
-              />
-            </div>
-            <div className="w-full">
-              <label className="block text-gray-700 text-sm mb-2" htmlFor="to">
-                수신번호 /{' '}
-                <b>
-                  실제 발송 테스트 시, 반드시 올바른 수신번호를 입력해주세요!
-                  예) 01012345678
-                </b>
-              </label>
-              <input
-                className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                id="to"
-                type="text"
-                name="to"
-                placeholder="수신번호"
-                required={true}
-              />
-            </div>
-            <div className="w-full">
-              <label className="block text-gray-700 text-sm mb-2" htmlFor="to">
-                발송내용 /{' '}
-                <b>
-                  한글 45자, 영자 90자 이하 입력되면 자동으로 SMS 타입의
-                  메시지가 발송됩니다, 그 이상을 입력하면 LMS 타입의 메시지가
-                  발송됩니다!
-                </b>
-              </label>
-              <textarea
-                className="resize-none shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
-                id="text"
-                name="text"
-                draggable={false}
-                rows={8}
-                inputMode="text"
-                placeholder="발송할 문자내용 입력"
-                required={true}
-              />
-            </div>
-            <div className="flex flex-auto w-full gap-4 items-center justify-center flex-col sm:flex-row">
-              <button
-                type="submit"
-                className="w-40 rounded-full border cursor-pointer border-solid border-transparent transition-colors flex items-center justify-center bg-[#4541FF] hover:bg-[#0035ef] text-background gap-2 dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5">
-                발송하기
-              </button>
-            </div>
-          </Form>
+          <div className="flex justify-center flex-auto w-full">
+            <h1 className="text-4xl font-black text-center">
+              Next.js + SOLAPI {activeTab === 'sms' ? '문자' : '알림톡'} 발송
+              예제
+            </h1>
+          </div>
+          {activeTab === 'sms' ? <SMSForm /> : <AlimtalkForm />}
         </main>
+        <Toast isSuccess={isSuccess} />
       </div>
-      <div
-        id="toast-default"
-        className={`flex items-center w-full max-w-xs p-4 text-gray-500 bg-white rounded-lg shadow-sm dark:text-gray-400 dark:bg-gray-800 fixed top-5 inset-x-0 max-w mx-auto transition-opacity duration-500 ${isSuccess ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
-        role="alert">
-        <div className="inline-flex items-center justify-center shrink-0 w-8 h-8 text-blue-500 bg-blue-100 rounded-lg dark:bg-blue-800 dark:text-blue-200">
-          <svg
-            className="w-5 h-5"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="currentColor"
-            viewBox="0 0 20 20">
-            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z" />
-          </svg>
-          <span className="sr-only">Check icon</span>
-        </div>
-        <div className="ms-3 text-sm font-normal">
-          발송 완료되었습니다!
-          <br />
-          <a
-            href="https://console.solapi.com/message-log"
-            className="text-sky-500"
-            target="_blank"
-            rel="noreferrer noopener">
-            콘솔
-          </a>
-          에서 확인해보세요!
-        </div>
-        <button
-          type="button"
-          className="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700 cursor-pointer"
-          data-dismiss-target="#toast-default"
-          aria-label="Close"
-          onClick={handleCloseEvent}>
-          <span className="sr-only">Close</span>
-          <svg
-            className="w-3 h-3"
-            aria-hidden="true"
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 14 14">
-            <path
-              stroke="currentColor"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
-            />
-          </svg>
-        </button>
-      </div>
-    </>
+    </Provider>
   );
 }

examples/nextjs/src/atoms/CommonAtom.ts

@@ -0,0 +1,7 @@
+import {atom} from 'jotai';
+
+export const tabAtom = atom<string>('sms');
+
+export const apiKeyAtom = atom<string>('');
+
+export const apiSecretAtom = atom<string>('');