style: 스타일 수정

Author: hyuke81

src/api/notionAPI.js

@@ -0,0 +1,42 @@
+import axios from 'axios';
+
+// ✅ Notion OAuth 연결 API
+export const connectNotionOAuth = async ({ userEmail, assistantName }) => {
+    try {
+        const response = await axios.get(
+            'https://www.branchify.site/api/oauth/notion/connect',
+            {
+                params: { userEmail, assistantName }, // ✅ Query Params로 추가
+                headers: {
+                    Authorization: `Bearer ${localStorage.getItem(
+                        'access_token'
+                    )}`,
+                }, // ✅ 토큰이 필요한 경우 추가
+            }
+        );
+        return response.data;
+    } catch (error) {
+        console.error('❌ Notion OAuth API 요청 실패:', error);
+        throw error;
+    }
+};
+
+export const fetchNotionPages = async (assistantName) => {
+    const token = localStorage.getItem('access_token');
+
+    if (!token) {
+        throw new Error('인증 토큰이 없습니다.');
+    }
+
+    const response = await axios.get(
+        'https://www.branchify.site/api/assistantlist/notionPages',
+        {
+            headers: {
+                Authorization: `Bearer ${token}`,
+            },
+            params: { assistantName }, // Params 추가
+        }
+    );
+
+    return response.data;
+};

src/components/BotAi/BotStep1.styles.js

@@ -6,7 +6,7 @@ export const pageStyle = css`
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-top: 50px;
+    margin-top: 51px;
 
     @media (max-width: 768px) {
         margin-top: 30px;
@@ -189,7 +189,7 @@ export const nextButtonStyle = css`
     width: 120px;
     height: 36px;
     border-radius: 30px;
-    background: #F1502F;
+    background: #f1502f;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -210,7 +210,7 @@ export const nextButtonStyle = css`
 `;
 
 export const buttonTextStyle = css`
-    color: #FFF;
+    color: #fff;
     font-size: 14px;
     font-weight: 600;
 

src/components/BotAi/modal/BotStepNotion.jsx

@@ -134,7 +134,7 @@ const notionData = [
                 ],
             },
             { id: 5, title: '목표', children: [] },
-            { id: 6, title: '독서 리스트', children: [] },
+            { id: 6, title: '독서리스트', children: [] },
             { id: 7, title: '나의 공간', children: [] },
         ],
     },
@@ -147,7 +147,9 @@ const BotStepNotion = ({ onClose }) => {
 
     const toggleOpen = (id) => {
         setOpenNodes((prev) =>
-            prev.includes(id) ? prev.filter((nodeId) => nodeId !== id) : [...prev, id]
+            prev.includes(id)
+                ? prev.filter((nodeId) => nodeId !== id)
+                : [...prev, id]
         );
     };
 
@@ -166,7 +168,9 @@ const BotStepNotion = ({ onClose }) => {
         const childIds = getAllChildIds(children);
         setSelectedPages((prev) => {
             if (prev.includes(id)) {
-                return prev.filter((pageId) => ![id, ...childIds].includes(pageId));
+                return prev.filter(
+                    (pageId) => ![id, ...childIds].includes(pageId)
+                );
             } else {
                 return [...prev, id, ...childIds];
             }
@@ -191,33 +195,50 @@ const BotStepNotion = ({ onClose }) => {
                             onClick={() => toggleSelect(node.id, node.children)}
                         >
                             <img
-                                src={selectedPages.includes(node.id) ? checkWhite : checkBlack}
+                                src={
+                                    selectedPages.includes(node.id)
+                                        ? checkWhite
+                                        : checkBlack
+                                }
                                 alt="Check"
                             />
                         </div>
                         <span
                             style={{
-                                fontWeight: selectedPages.includes(node.id) ? 'bold' : 'normal',
+                                fontWeight: selectedPages.includes(node.id)
+                                    ? 'bold'
+                                    : 'normal',
                             }}
                         >
                             {node.title}
                         </span>
                     </div>
-                    {openNodes.includes(node.id) && <div style={{ marginLeft: 20 }}>{renderTree(node.children, depth + 1)}</div>}
+                    {openNodes.includes(node.id) && (
+                        <div style={{ marginLeft: 20 }}>
+                            {renderTree(node.children, depth + 1)}
+                        </div>
+                    )}
                 </li>
             ))}
         </ul>
     );
 
     return (
         <div css={modalStyle}>
-            <span css={closeButton} onClick={onClose}>❌</span>
+            <span css={closeButton} onClick={onClose}>
+                ❌
+            </span>
             <div>
-                <h3 css={titleText}>추가하고 싶은 <b>Notion</b> 페이지를 넣어주세요.</h3>
+                <h3 css={titleText}>
+                    추가하고 싶은 <b>Notion</b> 페이지를 넣어주세요.
+                </h3>
                 {renderTree(notionData)}
             </div>
             <div css={buttonContainer}>
-                <button css={buttonStyle(selectedPages.length > 0)} onClick={() => navigate('/bot/list')}>
+                <button
+                    css={buttonStyle(selectedPages.length > 0)}
+                    onClick={() => navigate('/bot/list')}
+                >
                     <img src={arrowIcon} alt="Next" css={arrowIconStyle} />
                     생성하기
                 </button>