ClickUp에서는 Webhooks를 위한 API를 제공하고 있습니다.
이 가이드에서는 ClickUp API를 사용하여 Webhooks를 생성, 수정, 삭제하는 방법을 찾아봤습니다
클릭업 API 가져다 쓰기
Step 1: ClickUp API 설정
Postman에서 API 가져오기
ClickUp은 공개된 API를 제공해요. Postman에서 ClickUp API를 검색하고 Fork하여 사용해 볼 수 있습니다. 이때, 인증을 위해 API Key를 입력해야 해요.
API Key 얻기
ClickUp 메뉴에서 사용자 설정으로 이동한 후, Apps 섹션에서 API Token을 찾을 수 있습니다. 해당 값을 복사하여 Postman에 등록하면 모든 API를 사용할 수 있어요.
Step 2: Webhook 생성
Webhook을 생성하려면 아래의 API 요청을 사용합니다. team_id와 endpoint를 적절히 대체하여 사용하세요.
{
"endpoint": "{webhook생성할_server_URL}",
"events": [
"taskCreated",
"taskUpdated",
"taskDeleted",
"taskPriorityUpdated",
"taskStatusUpdated",
"taskAssigneeUpdated",
"taskDueDateUpdated",
"taskTagUpdated",
"taskMoved",
"taskCommentPosted",
"taskCommentUpdated",
"taskTimeEstimateUpdated",
"taskTimeTrackedUpdated"
]
}이 Webhook은 배열에 명시된 이벤트가 발생할 때마다 응답을 보냅니다.
Step 3: 중개 서버 구현
Clickup 의 webhook 데이터의 경우 jandi 에서 인식을 하지 못하는데요. 그 이유는 jandi에서 받는 데이터의 형식과 맞지 않기 때문입니다.
그러면 해당 데이터를 형식을 맞춰줘야겠죠? 이를 위해서 중개 서버가 필요합니다.
ClickUp Webhook 데이터를 JANDI로 보내기 위해 중개 서버를 구현할 수 있습니다. 아래는 기본적인 예시 코드입니다.
const express = require('express');
const axios = require('axios');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 5001;
app.use(bodyParser.json());
const JANDI_WEBHOOK_URL = 'JANDI_WEBHOOK_URL';
const CLICKUP_API_URL = 'https://api.clickup.com/api/v2/task/';
const CLICKUP_API_KEY = 'YOUR_CLICKUP_API_KEY';
const formatUserList = (users) => users.map((user) => user.username).join(', ');
const eventHandlers = {
status: (historyItem) => ({
bodyText: `상태가 '${historyItem.before?.status || '없음'}'에서 '${historyItem.after?.status || '없음'}'(으)로 변경되었습니다.`,
connectInfo: [
{ title: '이전 상태', description: historyItem.before?.status || '없음' },
{ title: '현재 상태', description: historyItem.after?.status || '없음' },
],
}),
// 다른 이벤트 핸들러 추가...
};
const createJandiPayload = async (data) => {
const event = data.event;
const task = data.task || { id: data.task_id, name: '알 수 없음', status: { status: '알 수 없음' } };
const historyItem = data.history_items ? data.history_items[0] : null;
let bodyText = `[[ClickUp Task]] 이벤트: ${event}, 작업: ${task.name || task.id}`;
let connectInfo = [
{ title: '작업 ID', description: task.id },
{ title: '상태', description: task.status.status },
];
if (historyItem && eventHandlers[historyItem.field]) {
const handler = eventHandlers[historyItem.field];
const { bodyText: additionalText, connectInfo: additionalInfo } = await handler(historyItem, task);
bodyText += `, ${additionalText}`;
connectInfo = connectInfo.concat(additionalInfo);
}
return {
body: bodyText,
connectColor: '#FAC11B',
connectInfo: connectInfo,
};
};
app.post('/', async (req, res) => {
const data = req.body;
console.log('Received data:', JSON.stringify(data, null, 2));
if (!data || !data.event || !data.task_id) {
return res.status(400).json({ status: 'error', message: 'Invalid data format' });
}
const jandiPayload = await createJandiPayload(data);
try {
const response = await axios.post(JANDI_WEBHOOK_URL, jandiPayload, {
headers: {
Accept: 'application/vnd.tosslab.jandi-v2+json',
'Content-Type': 'application/json',
},
});
if (response.status === 200) {
res.status(200).json({ status: 'success' });
} else {
res.status(response.status).json({ status: 'failure' });
}
} catch (error) {
console.error('Error sending to JANDI:', error);
res.status(500).json({ status: 'error', error: error });
}
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});이 서버는 Webhook 데이터를 받아 JANDI에 맞게 변환하여 전송합니다.
예시 화면 )
외부 서비스(Zapier)를 이용한 구현
ClickUp과 JANDI를 연동하는 또 다른 방법은 Zapier를 이용하는 것입니다. Zapier는 다양한 서비스를 연결하고, 트리거와 이벤트를 설정하여 자동화할 수 있습니다.
Zapier 계정 생성 및 로그인을 진행하면 기본으로 파이프라인을 작성 가능합니다.
Zapier에서 ClickUp과 JANDI 연동 설정을 해볼게요
Copilot 을 이용한 생성도 가능합니다만.... 정확하게 프롬포팅이 어렵습니다
트리거 및 액션 설정
첫단계로 APP과 이벤트를 지정해주고, Account 를 지정 후 Trigger 를 지정해주면 됩니다.
여기에서는 Task생성을 기본으로 해봤어요.
두번째 단계에서는 해당 값을 받아서 어떻게 처리할지에 대한 부분입니다.
잔디로 받을거기 때문에 Incoming Webhook 을 선택했어요
형식 예시입니다.
이런식으로 테스트를 하면 나오게 되네요!
총 4개의 클릭업 이벤트를 지원하는데,
Changes 를 통하면 status 의 변경 혹은 맨션에 따른 알림도 가능해집니다.
다만 기본 요금제로 사용할때는 조심해야 합니다.
Zapier는 기본 요금제로 한 달에 100개의 작업(Zaps)을 실행할 수 있으며, 15분마다 트리거를 확인합니다. 더 많은 작업이나 더 빠른 트리거 확인이 필요한 경우 상위 요금제를 고려해야 합니다.
결론 : 다양한 커스텀이 필요하다면 API 를 통한 직접 커스텀 그게 아니라면 Zap을 사용해보자
참조 레퍼런스
https://clickup.com/api/clickupreference/operation/CreateWebhook/
