Refactoring converse handler

packages/standard-action-handler/src/converse.tsx

@@ -8,12 +8,9 @@ export default async function converse({
   url: { path, query } = {},
 }: WebActionParams) {
   if (path === '/web-action/converse' && query) {
-    const { path: url } = qs.parse(query) as { path: string }
+    const { path: pathFromQuery } = qs.parse(query) as { path: string }
 
-    // 예시 코드
-    const { title, body: description } = (await fetch(url).then((response) => {
-      return response.json()
-    })) as { title: string; body: string }
+    const { title, description } = await fetchApi(pathFromQuery)
 
     if (title && description) {
       const container = document.createElement('div')
@@ -25,6 +22,8 @@ export default async function converse({
 
       return true
     }
+
+    return false
   }
 
   return false
@@ -41,8 +40,10 @@ function OpenModal({
 }) {
   return (
     <Modal open onClose={onClose}>
-      <Modal.Title>{title}</Modal.Title>
-      <Modal.Description>{description}</Modal.Description>
+      <Modal.Body>
+        <Modal.Title>{title}</Modal.Title>
+        <Modal.Description>{description}</Modal.Description>
+      </Modal.Body>
       <Modal.Actions>
         <Modal.Action color="blue" onClick={onClose}>
           확인
@@ -51,3 +52,29 @@ function OpenModal({
     </Modal>
   )
 }
+
+async function fetchApi(
+  url: string,
+): Promise<{ title: string; description: string }> {
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  })
+
+  if (!response.ok) {
+    return {
+      title: '안내',
+      description:
+        '서비스 이용이 원활하지 않습니다.\n잠시후 다시 이용해주세요.',
+    }
+  } else {
+    const { title, description } = (await response.json()) as {
+      title: string
+      description: string
+    }
+
+    return { title, description }
+  }
+}