feat: notion api 연동 구현 완료

Author: hyuke81

src/api/notionAPI.js

@@ -2,11 +2,6 @@ import axios from 'axios';
 
 const API_BASE_URL = 'https://www.branchify.site/api';
 
-/**
- * @param {string} userEmail - 사용자 이메일
- * @param {string} assistantName - 어시스턴트 이름
- * @returns {Promise<Object>} Notion OAuth 연결 응답 데이터
- */
 export const connectNotionOAuth = async ({ userEmail, assistantName }) => {
     try {
         const response = await axios.get(
@@ -33,10 +28,6 @@ export const connectNotionOAuth = async ({ userEmail, assistantName }) => {
     }
 };
 
-/**
- * @param {string} assistantName - 어시스턴트 이름
- * @returns {Promise<Object[]>} Notion 페이지 데이터 배열
- */
 export const fetchNotionPages = async (assistantName) => {
     const token = localStorage.getItem('access_token');
 
@@ -65,3 +56,29 @@ export const fetchNotionPages = async (assistantName) => {
         throw error;
     }
 };
+
+export const saveNotionPages = async (assistantName, selectedPages) => {
+    const token = localStorage.getItem('access_token');
+    if (!token) throw new Error('인증 토큰이 없습니다.');
+    if (!assistantName) throw new Error('assistantName이 필요합니다.');
+
+    const updatedPages = [...selectedPages].map((page) => ({
+        id: page.id,
+        isChecked: true,
+    }));
+
+    try {
+        const response = await axios.post(
+            `${API_BASE_URL}/assistantlist/notionPages`,
+            updatedPages,
+            {
+                headers: { Authorization: `Bearer ${token}` },
+                params: { assistantName },
+            }
+        );
+        return response.data;
+    } catch (error) {
+        console.error(error.response?.data || error.message);
+        throw error;
+    }
+};

src/components/BotAi/BotStep3.jsx

@@ -39,22 +39,18 @@ const BotStep3 = ({ onPrev, assistantData, setAssistantData }) => {
     const [selectedActions, setSelectedActions] = useState([]);
     const navigate = useNavigate();
 
-    const { data: updatedAssistant, refetch } = useQuery({
-        queryKey: ['assistant', assistantData.assistantName],
+    const {
+        data: notionPages,
+        refetch,
+        isLoading,
+        error,
+    } = useQuery({
+        queryKey: ['notionPages', assistantData.assistantName],
         queryFn: () => fetchNotionPages(assistantData.assistantName),
-        enabled: !!assistantData.assistantName,
+        enabled: !!assistantData.assistantName && assistantData.isConnect === 1,
     });
 
-    useEffect(() => {
-        if (updatedAssistant && updatedAssistant.isConnect === 1) {
-            console.log('Notion 연결됨', updatedAssistant);
-            setAssistantData((prev) => ({
-                ...prev,
-                isConnect: 1,
-            }));
-            setSelectedKnowledge('Notion');
-        }
-    }, [updatedAssistant]);
+    useEffect(() => {}, [notionPages]);
 
     const handlePDFClick = () => {
         setSelectedKnowledge('PDF');
@@ -78,14 +74,39 @@ const BotStep3 = ({ onPrev, assistantData, setAssistantData }) => {
             const notionWindow = window.open(
                 notionAuthURL,
                 '_blank',
-                'width=600,height=700'
+                'width=600,height=700,top=100,left=500'
             );
             if (!notionWindow) {
                 alert('팝업을 허용해주세요.');
             }
+
+            // 팝업창이 닫히면 OAuth 연결 상태 갱신
+            const checkPopupClosed = setInterval(() => {
+                if (notionWindow.closed) {
+                    clearInterval(checkPopupClosed);
+                    setAssistantData((prev) => ({ ...prev, isConnect: 1 }));
+                    refetch(); // Notion 페이지 다시 불러오기
+                }
+            }, 1000);
         }
     };
 
+    useEffect(() => {
+        const handleNotionAuthComplete = (event) => {
+            if (event.data === 'notion_auth_success') {
+                if (typeof setAssistantData === 'function') {
+                    setAssistantData((prev) => ({ ...prev, isConnect: 1 }));
+                }
+            }
+        };
+
+        window.addEventListener('message', handleNotionAuthComplete);
+
+        return () => {
+            window.removeEventListener('message', handleNotionAuthComplete);
+        };
+    }, [setAssistantData]);
+
     const toggleAction = (action) => {
         setSelectedActions((prev) =>
             prev.includes(action)
@@ -221,7 +242,10 @@ const BotStep3 = ({ onPrev, assistantData, setAssistantData }) => {
             )}
 
             {selectedKnowledge === 'Notion' && (
-                <BotStepNotion onClose={() => setSelectedKnowledge(null)} />
+                <BotStepNotion
+                    onClose={() => setSelectedKnowledge(null)}
+                    assistantName={assistantData.assistantName}
+                />
             )}
 
             {selectedKnowledge === 'Drive' && (

src/components/BotAi/modal/BotStepDrive.jsx

@@ -58,7 +58,7 @@ const buttonStyle = css`
     height: 38px;
     width: 120px;
     border-radius: 30px;
-    background: #F1502F;
+    background: #f1502f;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -86,10 +86,14 @@ const BotStepDrive = ({ onClose }) => {
 
     return (
         <div css={modalStyle}>
-            <span css={closeButton} onClick={onClose}>❌</span>
+            <span css={closeButton} onClick={onClose}>
+                ❌
+            </span>
             <div>
-                <h3 css={titleText}>추가하고 싶은 <b>Drive</b>를 넣어주세요.</h3>
-            {/* 생성하기 버튼 */}
+                <h3 css={titleText}>
+                    추가하고 싶은 <b>Drive</b>를 넣어주세요.
+                </h3>
+                {/* 생성하기 버튼 */}
             </div>
             <div css={buttonContainer}>
                 <button css={buttonStyle} onClick={() => navigate('/bot/list')}>