\n \n {isOpenModal && (\n \n
\n );\n};\n\nModalConfirmImg.defaultProps = {\n // bla: 'test',\n};\n\nexport default ModalConfirmImg;\n","import React, { useRef, useState, useEffect } from 'react';\n// components\nimport ImgUpload from './ImgUpload';\nimport ModalConfirmImg from './ModalConfirmImg';\n// ui\nimport Icon from '@material-ui/core/Icon';\n\nconst SimpleImage = ({ el, outputsEl, index, callbackFromParent }) => {\n // state\n const [isOpenModal, setIsOpenModal] = useState(false);\n\n // 이미지 업로드 모달 위치 잡으려고 넘겨줌\n const imgNode = useRef();\n\n // 모달\n const modalNode = useRef();\n // 모달 닫기\n const closeSet = e => {\n if (modalNode.current.contains(e.target)) {\n // inside click\n return;\n }\n setIsOpenModal(false);\n };\n // 모달 닫기\n useEffect(() => {\n // add when mounted\n document.addEventListener('mousedown', closeSet);\n // return function to be called when unmounted\n return () => {\n document.removeEventListener('mousedown', closeSet);\n };\n }, []);\n\n // 아이템 추가시 확인 모달\n const onClickAdd = e => {\n setIsOpenModal(true);\n };\n const callBackConfirmAction = action => {\n if (action === 'submit') {\n // 아이템 추가\n // change carousel\n let imgCardObj = {\n carousel: {\n type: 'imageCard',\n items: [\n {\n thumbnail: {\n imageUrl: outputsEl.simpleImage.imageUrl\n }\n },\n {\n thumbnail: {\n imageUrl: ''\n }\n }\n ]\n },\n index: index\n };\n callbackFromParent(imgCardObj);\n } else {\n setIsOpenModal(false);\n }\n };\n\n return (\n <>\n 응답 설정 변경
\n\n 이미지를 케로셀로 변경할 경우\n
\n 모든 이미지 비율이 2:1로 변경됩니다.\n
\n 정사각형 이미지는 카드를 이용해주세요.\n
\n
\n 설정을 변경하시겠습니까?\n
\n \n 확인\n \n \n 취소\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n {isOpenModal && (\n
\n \n );\n};\n\nexport default SimpleImage;\n","import React from 'react';\n// ui\nimport Icon from '@material-ui/core/Icon';\n\nconst ItemHeader = ({ itemsIdx, callBackhandleItem, hasItem }) => {\n // 아이템 정렬, 복사, 삭제\n const handleItem = e => {\n const action = e.target.name;\n callBackhandleItem(action, itemsIdx);\n };\n\n return (\n \n
\n );\n};\n\nexport default ItemHeader;\n","import React, { useState } from 'react';\n// ui\nimport Icon from '@material-ui/core/Icon';\n\nconst ModalSetButton = ({\n button,\n changeBtn,\n buttonIdx,\n isOverflowModal,\n isBottomModal,\n isQuick,\n delBtn,\n delAfterClose,\n fixedRatio,\n buttonsLength,\n}) => {\n // state\n const [selectType, SetSelectType] = useState(button.action);\n\n // 버튼 obj\n let buttonObj = button;\n // 버튼명 maxLength\n const buttonLabelMax = fixedRatio && buttonsLength > 1 ? 8 : 14;\n // 버튼명 글자수\n const changedLabelValue = buttonObj.label\n ? buttonObj.label.substring(0, buttonLabelMax)\n : '';\n // 메세지 글자수\n const changedMsgValue = buttonObj.messageText\n ? buttonObj.messageText.substring(0, 14)\n : '';\n // 폰번호 글자수\n const changedPhoneValue = buttonObj.phoneNumber\n ? buttonObj.phoneNumber.substring(0, 20)\n : '';\n\n // 버튼명 전체 선택\n const handleFocusInp = (e) => {\n e.target.select();\n };\n\n // 버튼명 변경\n const handleChangeName = (e) => {\n let value = e.target.value;\n const valueLength = e.target.value.length;\n const maxlength = e.target.getAttribute('maxlength');\n if (valueLength > maxlength) {\n value = value.substr(0, maxlength);\n }\n\n buttonObj.label = value;\n\n buttonObj.label =\n buttonObj.label === '' ? '버튼 설정' : buttonObj.label;\n\n changeBtn(buttonObj, buttonIdx);\n };\n\n // 버튼 액션 변경\n const handleChangeInp = (e) => {\n let actionValue = e.target.name;\n let currentValue = e.target.value;\n\n if (actionValue === 'phoneNumber' || actionValue === 'messageText') {\n if (currentValue.length > e.target.maxLength) {\n currentValue = currentValue.slice(0, e.target.maxLength);\n }\n }\n\n // 전화번호 숫자만 받음\n if (actionValue === 'phoneNumber') {\n currentValue = currentValue.replace(/[^0-9]/g, '');\n }\n\n buttonObj = {\n label: buttonObj.label,\n action: selectType,\n [actionValue]: currentValue,\n };\n changeBtn(buttonObj, buttonIdx);\n };\n\n // 버튼 삭제\n const handleDelBtn = () => {\n delBtn(buttonIdx);\n delAfterClose(false);\n };\n\n // select 변경 이벤트\n const changeSelect = (e) => {\n let selectedType = e.target.value;\n SetSelectType(selectedType);\n buttonObj = {\n label: buttonObj.label,\n action: e.target.value,\n };\n switch (selectedType) {\n case 'webLink':\n buttonObj.webLinkUrl = '';\n break;\n case 'osLink':\n buttonObj.osLink = {};\n break;\n case 'message':\n buttonObj.messageText = '';\n break;\n case 'phone':\n buttonObj.phoneNumber = '';\n break;\n case 'block':\n buttonObj.blockId = '';\n //buttonObj.messageText = '';\n break;\n default:\n console.log('no select!');\n }\n changeBtn(buttonObj, buttonIdx);\n };\n\n // OsLink 설정\n const handleChangeOsInp = (e) => {\n let osLinkType = e.target.name;\n let osLinkValue = e.target.value;\n let newOsLink = {\n ...buttonObj.osLink,\n [osLinkType]: osLinkValue,\n };\n buttonObj = {\n label: buttonObj.label,\n action: 'osLink',\n osLink: newOsLink,\n };\n changeBtn(buttonObj, buttonIdx);\n };\n\n return (\n \n \n \n
\n \n \n {hasItem !== 1 && (\n \n delete_outline \n \n )}\n
\n 버튼 설정
\n \n \n \n );\n};\n\nexport default ModalSetButton;\n","import React, { useState, useEffect, useRef } from 'react';\n// components\nimport ModalSetButton from './ModalSetButton';\n\nconst ItemButtonListItem = ({\n button,\n changeBtn,\n buttonIdx,\n delBtn,\n fixedRatio,\n buttonsLength\n}) => {\n // state\n const [isOpenModal, setIsOpenModal] = useState(false);\n const [isOverflowModal, setOverflowModal] = useState(false);\n // 버튼명 maxLength: 정사각형 단일 버튼 14자, 정사각형 다중 버튼 8자, 와이드 14자\n const buttonLabelMax = fixedRatio && buttonsLength > 1 ? 8 : 14;\n // 버튼명 maxLength 맞춰서 끊음\n const changedLabelValue = button.label\n ? button.label.substring(0, buttonLabelMax)\n : '';\n\n // 모달\n const modalNode = useRef();\n // 모달 열기\n const openModal = () => {\n let ItemSetButtonPos = modalNode.current.getBoundingClientRect();\n let contentsWrap = modalNode.current.offsetParent.offsetParent.getBoundingClientRect();\n if (contentsWrap.right - ItemSetButtonPos.right < 241) {\n setOverflowModal(true);\n }\n setIsOpenModal(!isOpenModal);\n };\n // 모달 닫기\n const closeSet = e => {\n if (modalNode.current.contains(e.target)) {\n // inside click\n return;\n }\n setIsOpenModal(false);\n };\n // 모달 닫기\n useEffect(() => {\n // add when mounted\n document.addEventListener('mousedown', closeSet);\n // return function to be called when unmounted\n return () => {\n document.removeEventListener('mousedown', closeSet);\n };\n }, []);\n // 버튼 삭제 후 모달 닫기 콜백\n const delAfterClose = childDate => {\n setIsOpenModal(childDate);\n };\n\n return (\n- \n {el.buttons &&\n el.buttons.map((button, i) => (\n
\n
\n );\n};\n\nexport default BasicCard;\n","import React from 'react';\n// components\nimport ItemHeader from './ItemHeader';\nimport ItemButtonList from './ItemButtonList';\nimport TextareaAutosize from '@material-ui/core/TextareaAutosize';\n\nconst TextCard = ({\n el,\n itemsIdx,\n onChangeTxt,\n changeBtnList,\n outputsEl,\n callBackhandleItem,\n maxLengthValue,\n hasItem,\n}) => {\n let changedValue = el.description\n ? el.description.substring(0, maxLengthValue)\n : '';\n\n // maxLength keyup\n const checkMaxLength = (e) => {\n const valueLength = e.target.value.length;\n if (valueLength > maxLengthValue) {\n changedValue = e.target.value.substr(0, maxLengthValue);\n }\n };\n\n return (\n \n
\n \n \n {!bgImgUrl ? (\n '+ 이미지 등록 '\n ) : (\n \n )}\n {!bgImgUrl && *}\n \n {isOpenModal && (\n
\n \n )}\n {!bgImgUrl && *}\n \n {isOpenModal && (\n \n
\n \n
\n \n {/*
\n \n
\n );\n};\n\nexport default TextCard;\n","import React, { useRef, useEffect, useState } from 'react';\n// components\nimport ItemHeader from './ItemHeader';\nimport ModalSetImg from './ModalSetImg';\n\nconst ImageCard = ({\n el,\n itemsIdx,\n outputsEl,\n callbackFromParent,\n callBackhandleItem,\n hasItem,\n}) => {\n // state\n const [isOpenModal, setIsOpenModal] = useState(false);\n const [isOverflowModal, setOverflowModal] = useState(false);\n\n // 모달\n const modalNode = useRef();\n // 모달 열기\n const openModal = () => {\n let ItemSetButtonPos = modalNode.current.getBoundingClientRect();\n let contentsWrap = modalNode.current.offsetParent.getBoundingClientRect();\n if (contentsWrap.right - ItemSetButtonPos.right < 241) {\n setOverflowModal(true);\n }\n setIsOpenModal(!isOpenModal);\n };\n // 모달 닫기\n const closeSet = (e) => {\n if (modalNode.current.contains(e.target)) {\n // inside click\n return;\n }\n setIsOpenModal(false);\n };\n // 모달 닫기\n useEffect(() => {\n // add when mounted\n document.addEventListener('mousedown', closeSet);\n // return function to be called when unmounted\n return () => {\n document.removeEventListener('mousedown', closeSet);\n };\n }, []);\n\n // 이미지 url\n let bgImgUrl = '';\n if (el.thumbnail) {\n bgImgUrl = el.thumbnail.imageUrl;\n }\n // 이미지 url 콜백\n const changeImgUrl = (imgUrl) => {\n bgImgUrl = imgUrl;\n if (!el.thumbnail) {\n el.thumbnail = {};\n }\n el.thumbnail.imageUrl = bgImgUrl;\n callbackFromParent(bgImgUrl);\n };\n // 버튼 백그라운드 이미지\n const btnBgStyle = {\n backgroundImage: 'url(' + bgImgUrl + ')',\n };\n\n return (\n \n
\n \n {/* */}\n
\n \n
\n );\n};\n\nexport default ImageCard;\n","import React, { useState, useEffect, useRef } from 'react';\n// components\nimport BasicCard from './BasicCard';\nimport TextCard from './TextCard';\nimport ImageCard from './ImageCard';\nimport ModalConfirm from './ModalConfirm';\n// ui\nimport Icon from '@material-ui/core/Icon';\n\nconst Carousel = ({ outputsEl, index, callbackFromParent, fixedRatio }) => {\n // state\n const [isOpenModal, setIsOpenModal] = useState(false);\n const [checkedType, setCheckedType] = useState(true);\n\n // 케로셀 아이템 array\n let carouselItems = outputsEl.carousel.items\n ? outputsEl.carousel.items\n : null;\n const carouselType = outputsEl.carousel.type\n ? outputsEl.carousel.type\n : null;\n\n // 없는 타입일 경우 에러 표시\n useEffect(() => {\n if (\n !(\n carouselType === 'textCard' ||\n carouselType === 'basicCard' ||\n carouselType === 'imageCard'\n )\n ) {\n setCheckedType(false);\n } else {\n setCheckedType(true);\n }\n }, [carouselType]);\n\n // description maxLength\n // 카드 갯수 체크\n let hasItem =\n outputsEl.carousel.items && outputsEl.carousel.items.length\n ? outputsEl.carousel.items.length\n : null;\n // 텍스트 카드: 단일 400자, 다중 128자\n let maxLengthValue = 128;\n // 베이직 카드: 단일 230자, 다중 76자\n let maxLengthValueB = 76;\n // maxLength change\n if (hasItem === 1 && carouselType === 'textCard') {\n maxLengthValue = 400;\n } else if (hasItem === 1 && carouselType === 'basicCard') {\n maxLengthValueB = 230;\n }\n\n // title, description 콜백\n const onChangeTxt = (e) => {\n const updatedItems = [...carouselItems];\n updatedItems[e.target.dataset.idx][e.target.className] = e.target.value;\n\n const carouselObj = {\n carousel: {\n type: carouselType,\n random: outputsEl.carousel.random,\n items: updatedItems,\n },\n index: index,\n };\n callbackFromParent(carouselObj);\n };\n\n // 버튼 리스트 콜백\n const changeBtnList = (buttonsList, carouselItemIdx) => {\n carouselItems[carouselItemIdx].buttons = buttonsList;\n if (!buttonsList.length) {\n delete carouselItems[carouselItemIdx].buttons;\n }\n const carouselObj = {\n carousel: {\n type: carouselType,\n random: outputsEl.carousel.random,\n items: carouselItems,\n },\n index: index,\n };\n callbackFromParent(carouselObj);\n };\n\n // 카드 아이템 추가\n let newData = {};\n const onClickAddItem = () => {\n if (carouselType === 'basicCard') {\n if (!fixedRatio) {\n newData = {\n title: '',\n description: '',\n };\n } else {\n newData = {\n title: '',\n description: '',\n thumbnail: {\n fixedRatio: true,\n },\n };\n }\n } else if (carouselType === 'textCard') {\n if (hasItem === 1) {\n setIsOpenModal(true);\n } else {\n newData = {\n description: '',\n };\n }\n } else if (carouselType === 'imageCard') {\n newData = {\n thumbnail: {\n imageUrl: '',\n },\n };\n } else {\n alert('잘못된 응답 타입입니다.');\n return false;\n }\n\n // 빈 객체가 아닐때! (랜덤 걸어야하나)\n if (Object.keys(newData).length !== 0) {\n let carouselObj = {};\n if (carouselType !== 'textCard') {\n carouselObj = {\n carousel: {\n type: carouselType,\n items: [...carouselItems, newData],\n },\n index: index,\n };\n } else {\n carouselObj = {\n carousel: {\n type: carouselType,\n random: outputsEl.carousel.random,\n items: [...carouselItems, newData],\n },\n index: index,\n };\n }\n\n callbackFromParent(carouselObj);\n }\n };\n\n // 아이템 추가 확인, 모달에서 콜백\n const callBackConfirmAction = (action, type) => {\n if (action === 'submit') {\n let newData = {\n description: '',\n };\n const carouselObj = {\n carousel: {\n type: carouselType,\n random: outputsEl.carousel.random,\n items: [...carouselItems, newData],\n },\n index: index,\n };\n\n callbackFromParent(carouselObj);\n setIsOpenModal(false);\n } else {\n setIsOpenModal(false);\n }\n };\n\n // 순서 변경 및 제거\n const callBackhandleItem = (action, itemsIdx) => {\n // 순서 변경\n if (action) {\n // 해당 아이템 뽑음\n let selectedItem = carouselItems.filter(\n (num) => num === carouselItems[itemsIdx]\n );\n //selectedItem = [Object.assign({}, selectedItem[0])];\n\n selectedItem = JSON.parse(JSON.stringify(selectedItem[0]));\n\n // 핸들러\n if (action === 'up' && itemsIdx > 0) {\n carouselItems.splice(itemsIdx, 1);\n carouselItems.splice(itemsIdx - 1, 0, selectedItem);\n } else if (\n action === 'down' &&\n itemsIdx < carouselItems.length - 1\n ) {\n carouselItems.splice(itemsIdx, 1);\n carouselItems.splice(itemsIdx + 1, 0, selectedItem);\n } else if (action === 'copy') {\n if (hasItem < 10) {\n carouselItems.splice(itemsIdx + 1, 0, selectedItem);\n }\n } else if (action === 'del') {\n carouselItems = carouselItems.filter(\n (num) => num !== carouselItems[itemsIdx]\n );\n } else {\n console.log('no case');\n }\n }\n\n // 변경된 데이터 넣음\n let resultObj = {\n carousel: {\n type: carouselType,\n random: outputsEl.carousel.random,\n items: carouselItems,\n },\n index: index,\n };\n\n // 부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 텍스트 카드 > 심플 텍스트\n const cardtoText = () => {\n let resultObj;\n if (carouselType === 'textCard') {\n if (hasItem === 0) {\n resultObj = {\n simpleText: {},\n index: index,\n };\n // 부모한테 전달\n callbackFromParent(resultObj);\n } else if (hasItem === 1 && !outputsEl.carousel.items[0].buttons) {\n resultObj = {\n simpleText: {\n text: outputsEl.carousel.items[0].description,\n },\n index: index,\n };\n // 부모한테 전달\n callbackFromParent(resultObj);\n }\n }\n };\n\n // 이미지 카드 > 심플 이미지\n const cardtoImg = () => {\n let resultObj;\n if (carouselType === 'imageCard') {\n if (hasItem === 0) {\n resultObj = {\n simpleImage: {\n imageUrl: '',\n altText: '',\n },\n index: index,\n };\n // 부모한테 전달\n callbackFromParent(resultObj);\n } else if (hasItem === 1) {\n resultObj = {\n simpleImage: {\n imageUrl:\n outputsEl.carousel.items[0].thumbnail.imageUrl,\n altText: '',\n },\n index: index,\n };\n // 부모한테 전달\n callbackFromParent(resultObj);\n }\n }\n };\n\n // 일단.. 카드 > 심플 (여기서 자꾸 경고 뜸)\n useEffect(() => {\n cardtoText();\n cardtoImg();\n }, [outputsEl]);\n\n // 모달 위치\n const modalNode = useRef();\n // 모달 닫기\n const closeSet = (e) => {\n if (modalNode.current.contains(e.target)) {\n // inside click\n return;\n }\n setIsOpenModal(false);\n };\n // 모달 닫기\n useEffect(() => {\n // add when mounted\n document.addEventListener('mousedown', closeSet);\n // return function to be called when unmounted\n return () => {\n document.removeEventListener('mousedown', closeSet);\n };\n }, []);\n\n // 아이템 리스트\n let list;\n if (carouselItems) {\n list = carouselItems.map(function (el, itemsIdx) {\n if (carouselType === 'basicCard') {\n return (\n \n \n {isOpenModal && (\n
\n 잘못된 응답 타입입니다.
;\n }\n\n return (\n <>\n {checkedType ? (\n list\n ) : (\n 잘못된 응답 타입입니다.
\n )}\n {checkedType && carouselItems.length < 10 && (\n \n
\n )}\n \n \n
\n \n {isOpenModal && (\n
\n \n );\n};\n\nCarousel.defaultProps = {\n // bla: 'test',\n};\n\nexport default Carousel;\n","import React, { useState } from 'react';\n// components\nimport SimpleText from '../components/SimpleText';\nimport SimpleImage from '../components/SimpleImage';\nimport Carousel from '../components/Carousel';\n// ui\nimport Icon from '@material-ui/core/Icon';\n\nconst ResWrapper = ({\n obj,\n outputsEl,\n index,\n callbackFromParent,\n itemWrapperCallback\n}) => {\n // state\n const [fixedRatio, setFixedRatio] = useState(false);\n\n // obj 콜백\n const parentCallback = dataFromChild => {\n // 기존값 넣어서 업데이트!\n let updatedData = obj.template.outputs;\n\n updatedData[dataFromChild.index] = dataFromChild;\n delete dataFromChild.index;\n\n //변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: updatedData,\n quickReplies: obj.template.quickReplies\n }\n };\n //부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 순서 변경 및 제거\n const handleItemWrapper = e => {\n const action = e.target.name;\n itemWrapperCallback(index, action);\n };\n\n // 응답 넘버링\n let resNum = index;\n (() => {\n if (resNum === 0) resNum = '첫번째';\n if (resNum === 1) resNum = '두번째';\n if (resNum === 2) resNum = '세번째';\n })();\n\n // 응답 타입\n let resType = '';\n (() => {\n if (outputsEl.simpleText) resType = '텍스트';\n if (outputsEl.simpleImage) resType = '이미지';\n if (outputsEl.carousel) {\n if (outputsEl.carousel.type === 'basicCard') resType = '카드';\n if (outputsEl.carousel.type === 'textCard') resType = '텍스트 카드';\n if (outputsEl.carousel.type === 'imageCard')\n resType = '이미지 카드';\n }\n })();\n\n // 램덤 답변\n const randomCheck = e => {\n let data = outputsEl;\n data.carousel.random = !data.carousel.random;\n\n // 기존값 넣어서 업데이트!\n let updatedData = obj.template.outputs;\n\n updatedData[index] = data;\n\n //변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: updatedData,\n quickReplies: obj.template.quickReplies\n }\n };\n //부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 카드 이미지 사이즈 조절\n const handleImgSize = e => {\n let data = outputsEl;\n if (e.target.name === 'square') {\n setFixedRatio(true);\n\n data.carousel.items.forEach(item => {\n item.thumbnail = { ...item.thumbnail, fixedRatio: true };\n if (item.buttons) {\n const buttonsList = item.buttons.filter(\n (btn, idx) => idx !== 2\n );\n\n buttonsList.forEach((button, idx) => {\n item.buttons[idx].label = button.label.substr(0, 8);\n });\n\n item.buttons = buttonsList;\n }\n });\n } else {\n setFixedRatio(false);\n data.carousel.items.forEach(item => {\n delete item.thumbnail.fixedRatio;\n });\n }\n\n // 기존값 넣어서 업데이트!\n let updatedData = obj.template.outputs;\n\n updatedData[index] = data;\n\n //변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: updatedData,\n quickReplies: obj.template.quickReplies\n }\n };\n\n //부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // list\n let list;\n if (Object.keys(outputsEl)[0] === 'simpleText') {\n list = (\n 잘못된 응답 타입입니다.
;\n }\n\n return (\n \n {/* 왼쪽 숫자 */}\n
\n );\n};\n\nexport default ResWrapper;\n","import React, { useState, useEffect, useRef } from 'react';\n// components\nimport ModalSetButton from './ModalSetButton';\n\nconst QuickRepliesItem = ({ button, changeBtn, buttonIdx, delBtn }) => {\n // state\n const [isOpenModal, setIsOpenModal] = useState(false);\n const [isOverflowModal, setOverflowModal] = useState(false);\n const [isBottomModal, setIsBottomModal] = useState(false);\n\n // 버튼명\n const changedValue = button.label ? button.label.substring(0, 14) : '';\n\n // 모달\n const modalNode = useRef();\n // 모달 열기\n const openModal = () => {\n let ItemSetButtonPos = modalNode.current.getBoundingClientRect();\n let contentsWrap = modalNode.current.offsetParent.getBoundingClientRect();\n let bodyHeight = document.body.clientHeight;\n if (contentsWrap.right - ItemSetButtonPos.right < 241) {\n setOverflowModal(true);\n }\n setIsOpenModal(!isOpenModal);\n if (bodyHeight - contentsWrap.top < 300) {\n setIsBottomModal(true);\n }\n };\n // 모달 닫기\n const closeSet = e => {\n if (modalNode.current.contains(e.target)) {\n // inside click\n return;\n }\n setIsOpenModal(false);\n };\n // 모달 닫기\n useEffect(() => {\n // add when mounted\n document.addEventListener('mousedown', closeSet);\n // return function to be called when unmounted\n return () => {\n document.removeEventListener('mousedown', closeSet);\n };\n }, []);\n\n // 삭제 후 모달 닫기 콜백\n const delAfterClose = childDate => {\n setIsOpenModal(childDate);\n };\n\n return (\n \n {index + 1}\n {index !== 0 && (\n \n keyboard_arrow_up \n \n )}\n\n {obj.template.outputs.length !== 1 && (\n \n keyboard_arrow_down \n \n )}\n\n {obj.template.outputs.length !== 1 && (\n \n delete_outline \n \n )}\n
\n {/* 타이틀 */}\n \n {resNum} 응답 - {resType}\n
\n {outputsEl.carousel && outputsEl.carousel.type === 'textCard' && (\n\n \n
\n )}\n\n {outputsEl.carousel && outputsEl.carousel.type === 'basicCard' && (\n \n \n 2:1\n \n \n 1:1\n \n
\n )}\n\n {/* 아이템 감싸는 영역 */}\n \n 이미지 비율을 2:1로 설정할 경우\n
\n 버튼 배열이 세로형으로 변경되며 버튼의\n
\n 최대 갯수는 3개로 변경됩니다.\n
\n \n 버튼 배열이 세로형으로 변경되며 버튼의\n
\n 최대 갯수는 3개로 변경됩니다.\n
\n 이미지 비율을 1:1로 설정할 경우\n
\n 버튼 배열이 가로형으로 변경되며 버튼의\n
\n 최대 갯수는 2개, 글자수는 8자로 변경됩니다.\n
\n \n 버튼 배열이 가로형으로 변경되며 버튼의\n
\n 최대 갯수는 2개, 글자수는 8자로 변경됩니다.\n
{list}
\n \n \n {changedValue}\n \n {isOpenModal && (\n
\n );\n};\n\nexport default QuickRepliesItem;\n","import React from 'react';\n// components\nimport ItemHeader from './ItemHeader';\nimport QuickRepliesItem from './QuickRepliesItem';\n// ui\nimport Icon from '@material-ui/core/Icon';\n\nconst QuickReplies = ({ obj, quickRepliesList, callbackFromParent }) => {\n // 아이템 갯수\n let hasItem = quickRepliesList.length;\n\n // 아이템 순서 변경 및 제거\n const callBackhandleItem = (action, itemsIdx) => {\n // 순서 변경\n if (action) {\n // 해당 아이템 뽑음\n let selectedItem = quickRepliesList.filter(\n num => num === quickRepliesList[itemsIdx]\n );\n selectedItem = [Object.assign({}, selectedItem[0])];\n\n // 핸들러\n if (action === 'up' && itemsIdx > 0) {\n quickRepliesList.splice(itemsIdx, 1);\n quickRepliesList.splice(itemsIdx - 1, 0, ...selectedItem);\n } else if (\n action === 'down' &&\n itemsIdx < quickRepliesList.length - 1\n ) {\n quickRepliesList.splice(itemsIdx, 1);\n quickRepliesList.splice(itemsIdx + 1, 0, ...selectedItem);\n } else if (action === 'copy') {\n if (hasItem < 10) {\n quickRepliesList.splice(itemsIdx + 1, 0, ...selectedItem);\n }\n } else if (action === 'del') {\n quickRepliesList = quickRepliesList.filter(\n num => num !== quickRepliesList[itemsIdx]\n );\n } else {\n console.log('no case');\n }\n }\n\n //변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: obj.template.outputs,\n quickReplies: quickRepliesList\n }\n };\n\n //부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 아이템 삭제\n const handleDelQuick = e => {\n //변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: obj.template.outputs\n }\n };\n //부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 아이템 버튼 변경\n let buttonsList = quickRepliesList ? [...quickRepliesList] : [];\n const changeBtn = (buttonObj, buttonIdx) => {\n buttonsList[buttonIdx] = buttonObj;\n\n //변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: obj.template.outputs,\n quickReplies: buttonsList\n }\n };\n //부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 아이템 버튼 삭제\n const delBtn = buttonIdx => {\n buttonsList = buttonsList.filter(num => num !== buttonsList[buttonIdx]);\n\n //변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: obj.template.outputs,\n quickReplies: buttonsList\n }\n };\n //부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 아이템 버튼 추가\n const handleAddQuickItem = e => {\n let newDate = {\n action: 'message',\n label: '버튼 설정',\n messageText: ''\n };\n //변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: obj.template.outputs,\n quickReplies: [...buttonsList, newDate]\n }\n };\n //부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 아이템 리스트\n let list;\n if (quickRepliesList) {\n list = quickRepliesList.map(function(el, itemsIdx) {\n return (\n \n
\n );\n });\n }\n\n return (\n \n {/* 왼쪽 숫자 */}\n
\n );\n};\n\nexport default QuickReplies;\n","const sampleText = {\n version: '2.0',\n template: {\n outputs: [\n {\n simpleText: {\n text:\n '텍스트형 답변입니다.\\n\\n텍스트형 답변은 최대 1000자까지 가능하며, 500자가 넘어가면 이후의 글자는 생략되고 전체 보기 버튼을 통해서 전체 내용을 확인할 수 있습니다.'\n }\n },\n {\n simpleImage: {\n imageUrl:\n 'https://file3.cloudturing.com/upload/sample/aa0a3cbc7e8599041585127125996.jpg',\n altText: 'sample600'\n }\n }\n ],\n quickReplies: [\n {\n action: 'message',\n label: '뒤로가기',\n messageText: '발화를 입력해주세요.'\n },\n {\n action: 'message',\n label: '처음으로',\n messageText: '발화를 입력해주세요.'\n }\n ]\n }\n};\n\nconst sampleCarousel = {\n version: '2.0',\n template: {\n outputs: [\n {\n simpleText: {\n text: '아래는 케로셀 카드 답변입니다. '\n }\n },\n {\n carousel: {\n type: 'basicCard',\n items: [\n {\n title: '첫 번째 카드 제목입니다. ',\n description: '첫 번째 카드 설명입니다. ',\n thumbnail: {\n imageUrl:\n 'https://file3.cloudturing.com/upload/sample/3e7e56ec4d8b4a021585127125955.jpg'\n },\n buttons: [\n {\n label: '버튼 1입니다.',\n action: 'message',\n messageText: '발화를 입력해주세요.'\n },\n {\n label: '버튼 2입니다.',\n action: 'message',\n messageText: '발화를 입력해주세요.'\n },\n {\n label: '버튼 3입니다.',\n action: 'message',\n messageText: '발화를 입력해주세요.'\n }\n ]\n },\n {\n title: '두 번째 카드 제목입니다. ',\n description: '두 번째 카드 설명입니다.',\n thumbnail: {\n imageUrl:\n 'https://file3.cloudturing.com/upload/sample/3e7e56ec4d8b4a021585127125955.jpg'\n },\n buttons: [\n {\n label: '버튼 1입니다.',\n action: 'message',\n messageText: '발화를 입력해주세요.'\n },\n {\n label: '버튼 2입니다.',\n action: 'message',\n messageText: '발화를 입력해주세요.'\n },\n {\n label: '버튼 3입니다.',\n action: 'message',\n messageText: '발화를 입력해주세요.'\n }\n ]\n }\n ]\n }\n }\n ],\n quickReplies: [\n {\n action: 'message',\n label: '뒤로가기',\n messageText: '발화를 입력해주세요.'\n },\n {\n action: 'message',\n label: '처음으로',\n messageText: '발화를 입력해주세요.'\n }\n ]\n }\n};\n\nexport { sampleText, sampleCarousel };\n","import React from 'react';\nimport PropTypes from 'prop-types';\n// components\nimport ResWrapper from '../components/ResWrapper';\nimport QuickReplies from '../components/QuickReplies';\n// data\nimport { sampleText, sampleCarousel } from '../store/jsonData';\n// ui\nimport Icon from '@material-ui/core/Icon';\n\nconst UiContents = ({ obj, callbackFromParent }) => {\n if (!obj || !obj.template || !obj.template.outputs) {\n alert('잘못된 응답 타입입니다.');\n return null;\n }\n\n // response wrapper 에서 받은 데이타\n const parentCallback = (dataFromChild) => {\n //아이템 컴포넌트 변경 시 부모한테 전달\n callbackFromParent(dataFromChild);\n };\n\n // 응답 추가\n let newData = {};\n const onClickAddData = (e) => {\n if (obj.template.outputs.length < 3) {\n let type = e.target.name;\n if (type === 'simpleImage') {\n newData = {\n simpleImage: {\n imageUrl: '',\n altText: '',\n },\n };\n } else if (type === 'simpleText') {\n newData = {\n simpleText: {\n text: '',\n },\n };\n } else {\n newData = {\n carousel: {\n type: 'basicCard',\n items: [\n {\n title: '',\n description: '',\n },\n ],\n },\n };\n }\n\n let resultOutputs = obj.template.outputs.concat(newData);\n\n let resultObj = {\n version: '2.0',\n template: {\n outputs: resultOutputs,\n quickReplies: obj.template.quickReplies,\n },\n };\n\n //부모한테 전달\n callbackFromParent(resultObj);\n } else {\n alert('응답은 3개까지 가능합니다.');\n }\n };\n\n // 순서 변경 및 제거\n const itemWrapperCallback = (index, action) => {\n // copy\n let outputsObj = obj.template.outputs;\n\n // 순서 변경\n if (action) {\n // 해당 아이템 뽑음\n const moveItem = outputsObj.filter(\n (num) => num === outputsObj[index]\n );\n //\n if (action === 'up' && index > 0) {\n outputsObj.splice(index, 1);\n outputsObj.splice(index - 1, 0, ...moveItem);\n } else if (action === 'down' && index < outputsObj.length - 1) {\n outputsObj.splice(index, 1);\n outputsObj.splice(index + 1, 0, ...moveItem);\n } else if (action === 'del') {\n outputsObj = obj.template.outputs.filter(\n (num) => num !== outputsObj[index]\n );\n } else {\n return alert('끝');\n }\n // 아니면 삭제 (인데 언디파인드로 받고 있는데 정확히 받을까여??!!!)\n } else {\n console.log('no action');\n }\n\n // 변경된 데이터 넣음\n let resultObj = {\n version: '2.0',\n template: {\n outputs: outputsObj,\n quickReplies: obj.template.quickReplies,\n },\n };\n\n // 부모한테 전달\n callbackFromParent(resultObj);\n };\n\n // 응답 리스트\n let resList = obj.template.outputs.map(function (outputsEl, index) {\n return (\n \n \n swap_calls \n \n \n
\n {/* 타이틀 */}\n 바로 연결
\n {/* 아이템 감싸는 영역 */}\n\n {list}\n {/* 바로연결 추가 */}\n {hasItem < 10 && (\n
\n \n \n add_circle_outline \n \n
\n )}\n \n {/* 상단 */}\n \n {/* 로고, 응답 갯수*/}\n \n {/* 하단 */}\n \n {resList}\n {obj.template.quickReplies && (\n \n
\n );\n};\n\nUiContents.propTypes = {\n obj: PropTypes.object,\n callbackFromParent: PropTypes.func,\n};\n\nUiContents.defaultProps = {\n // bla: 'test',\n};\n\nexport default UiContents;\n","import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\n\nconst JsonContents = ({ obj, callbackFromParent }) => {\n // state\n const [objJson, setObjJson] = useState('');\n const [isDf, setIsDf] = useState(true);\n\n // DialogFlow\n const dfValue = {\n type: 'kakao',\n data: obj,\n };\n\n // 웹챗봇\n const trValue = {\n type: 'turingbot',\n data: obj,\n };\n\n // obj > json text\n let jsonTxt = JSON.stringify(obj, undefined, 4);\n let dfJsonTxt = JSON.stringify(dfValue, undefined, 4);\n let trJsonTxt = JSON.stringify(trValue, undefined, 4);\n\n useEffect(() => {\n setObjJson(jsonTxt);\n }, [jsonTxt]);\n\n // textarea event\n const onChangeValue = (e) => {\n setObjJson(e.target.value);\n let jsonObj = JSON.parse(e.target.value);\n // DialogFlow\n // if (isDf) {\n // jsonObj = jsonObj.data;\n // }\n // data만 가져옴\n jsonObj = jsonObj.data;\n // 해당 프로퍼티 없을 때\n if (!jsonObj || !jsonObj.template || !jsonObj.template.outputs) {\n // 기존 props로 변경\n jsonObj = obj;\n setObjJson(obj);\n }\n // 부모 전달\n callbackFromParent(jsonObj);\n };\n\n // tab toggle\n const handleToggleJson = () => {\n setIsDf(!isDf);\n };\n\n // textarea copy\n const textAreaRef = useRef();\n const copyJson = (e) => {\n textAreaRef.current.select();\n document.execCommand('copy');\n e.target.focus();\n window.getSelection().removeAllRanges();\n alert('복사되었습니다.');\n\n // let copyText = document.createElement('textarea');\n // copyText.className = 'copy-text-textarea';\n // document.body.appendChild(copyText);\n // copyText.value = textAreaRef.current.textContent.replace(/\\s+/g, '');\n // copyText.select();\n // document.execCommand('copy');\n // document.body.removeChild(copyText);\n // e.target.focus();\n // alert('복사되었습니다.');\n };\n\n return (\n \n
\n {/* 응답 추가 버튼 */}\n JSON2Bot
\n \n 봇 응답 추가{obj.template.outputs.length} /\n 3\n \n\n \n help_outline 도움말\n \n
\n \n \n \n \n \n
\n \n
\n SAMPLE
\n\n \n \n
\n \n {/* tab title */}\n
\n );\n};\n\nJsonContents.propTypes = {\n obj: PropTypes.object,\n callbackFromParent: PropTypes.func,\n};\n\nJsonContents.defaultProps = {\n // bla: 'test',\n};\n\nexport default JsonContents;\n","import React, { Component } from 'react';\n\nclass ErrorBoundary extends Component {\n state = {\n error: false\n };\n\n componentDidCatch(error, info) {\n console.log('에러가 발생했습니다.');\n console.log({\n error,\n info\n });\n this.setState({\n error: true\n });\n }\n\n render() {\n if (this.state.error) {\n return (\n <>\n \n \n 카카오톡\n \n \n 웹챗봇\n \n
\n {/* tab cont */}\n \n
\n 다시 시도해주세요.
\n \n );\n }\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n","import React, { useState } from 'react';\nimport './App.css';\nimport './styles/normalize.custom.css';\nimport './styles/styles.css';\nimport UiContents from './components/UiContents';\nimport JsonContents from './components/JsonContents';\nimport ErrorBoundary from './ErrorBoundary';\nimport kakaoBtn from './assets/images/kakaochatead@x4.png';\n\nconst defaultValue = {\n version: '2.0',\n template: {\n outputs: [\n {\n simpleText: {\n text: '꿈청 챗봇 JSON 생성기',\n },\n },\n ],\n },\n};\n\nfunction App() {\n const [obj, setObj] = useState(defaultValue);\n // 콜백\n const parentCallback = (dataFromChild) => {\n // 자식 컴포넌트에서 받은 값을 이용한 로직 처리\n setObj(dataFromChild);\n };\n\n return (\n <>\n\n \n 
\n */}\n
\n