✨Feature - AI 블록 추천기능 추가, 히스토리 저장기능 추가

src/api/prompt/prompt.js

@@ -2,6 +2,7 @@ import { sendRequest } from "../request";
 import { aiChatInstance, blockInstance, promptInstance } from "../instance";
 import {
     activeBlocksState,
+    activeAiBlocksState,
     // activeCategoryState,
     availableCategoriesState,
     blockDetailsState,
@@ -10,7 +11,7 @@ import {
     categoryBlockShapesState,
     activeCategoryState,
     promptEvaluationState,
-    promptEvaluationErrorState,
+    promptEvaluationErrorState, fetchAiBlocksState,
 } from "../../recoil/prompt/promptRecoilState";
 import { useRecoilState, useSetRecoilState } from "recoil";
 
@@ -19,12 +20,14 @@ export const usePromptHook = () => {
     const [activeCategory, setActiveCategory] =
         useRecoilState(activeCategoryState);
     const setActiveBlocks = useSetRecoilState(activeBlocksState);
+    const setActiveAiBlocks = useSetRecoilState(activeAiBlocksState);
     const setCombinations = useSetRecoilState(combinationsState);
     const setCategoryColors = useSetRecoilState(categoryColorsState);
     const setBlockDetails = useSetRecoilState(blockDetailsState);
     const setCategoryBlockShapes = useSetRecoilState(categoryBlockShapesState);
     const setEvaluation = useSetRecoilState(promptEvaluationState);
     const setEvaluationError = useSetRecoilState(promptEvaluationErrorState);
+    const setFetchAiBlocksState = useSetRecoilState(fetchAiBlocksState);
     // 새로운 함수: API 데이터로부터 프롬프트 구조 갱신
     const updatePromptStructureFromApiData = (apiData) => {
         if (
@@ -128,6 +131,106 @@ export const usePromptHook = () => {
         await updatePromptStructureFromApiData(response.data);
     };
 
+    const updateAiPromptStructureFromApiData = (apiData) => {
+        if (
+            !apiData.responseDto ||
+            !Array.isArray(apiData.responseDto.selectBlock)
+        ) {
+            console.error("Unexpected API response structure:", apiData);
+            return;
+        }
+
+        const blocks = apiData.responseDto.selectBlock;
+        blocks.forEach((block, index) => {
+            if (!block.blockValue) {
+                console.warn("Block missing blockValue:", block);
+            }
+            if (!block.blockId) {
+                block.blockId = 10000+index;
+                console.warn(`Generated blockId for block:`, block);
+            }
+        });
+
+        console.log("blocks: ", blocks);
+        // 카테고리 추출 및 중복 제거
+        const categories = [
+            ...new Set(blocks.map((block) => block.blockCategory)),
+        ];
+        console.log("categories: ", categories);
+
+        // 블록을 카테고리별로 그룹화
+        const groupedBlocks = categories.reduce((acc, category) => {
+            acc[category] = blocks.filter(
+                (block) => block.blockCategory === category,
+            );
+            return acc;
+        }, {});
+        console.log("groupedBlocks: ", groupedBlocks);
+
+        // 색상 생성 (간단한 예시, 실제로는 더 복잡한 로직이 필요할 수 있습니다)
+        const colors = categories.reduce((acc, category, index) => {
+            const predefinedColors = [
+                "var(--block-main-color)",
+                "var(--block-purple)",
+                "var(--block-pink)",
+                "var(--block-red)",
+                "var(--block-orange)",
+                "var(--block-green)",
+                "var(--block-blue)",
+            ];
+            acc[category] = predefinedColors[index % predefinedColors.length];
+            return acc;
+        }, {});
+        console.log("colors: ", colors);
+        // 블록 모양 정의
+        //const predefinedShapes = [1, 2, 3, 4, 5, 6, 7];
+
+        // 블록 모양 정의
+        // const shapes = categories.reduce((acc, category, index) => {
+        //     acc[category] = predefinedShapes[index % predefinedShapes.length];
+        //     return acc;
+        // }, {});
+        // 상태 업데이트
+        // 1. 카테고리 설정
+        //setAiAvailableCategories(categories);
+        // 2. 카테고리 중 첫번째로 active되게끔 설정
+        //TODO- 에러나면 무조건 여기임 -QA 이후 확인
+        // 2. activeCategory가 없거나 categories에 없는 경우에만 새로 설정
+        // if (!aiActiveCategory || !categories.includes(aiActiveCategory)) {
+        //     setAiActiveCategory(categories[0] || null);
+        // }
+
+        // 3. 모든 카테고리들에 해당하는 블록들을 설정
+        const activeBlocksData = Object.fromEntries(
+            categories.map((category) => [
+                category,
+                (groupedBlocks[category] || []).map((block) => block.blockId),
+            ]),
+        );
+        console.log(activeBlocksData);
+        // 3.5 active된 block들을 setting해준다.
+        setActiveAiBlocks(activeBlocksData);
+
+        // 7. 블럭들의 detail들을 추가 할당한다.
+        setBlockDetails((prevBlockDetails) => {
+            const newBlocks = Object.fromEntries(blocks.map((block) => [block.blockId, block]));
+            return { ...prevBlockDetails, ...newBlocks };
+        });
+    };
+
+    const fetchAiBlocks = async (promptMethod, promptCategory) => {
+        const params = {
+            promptMethod: promptMethod,
+            promptCategory: promptCategory,
+        };
+
+        const response = await sendRequest(aiChatInstance, "get", `/recommend`, {
+            params,
+        });
+        await updateAiPromptStructureFromApiData(response.data);
+        setFetchAiBlocksState(true);
+    };
+
     const makeBlock = async (
         blockValue,
         blockDescription,
@@ -187,11 +290,27 @@ export const usePromptHook = () => {
         return response;
     };
 
+    const userHistory = async (userHistory, promptMethod, promptCategory) => {
+        const response = await sendRequest(
+            promptInstance,
+            "post",
+            `/history`,
+            {
+                promptHistory: userHistory,
+                promptMethod: promptMethod,
+                promptCategory: promptCategory
+            }
+        );
+        return response;
+    }
+
     return {
         fetchBlocks,
         makeBlock,
         savePrompt,
         deleteBlock,
         evaluatePrompt,
+        fetchAiBlocks,
+        userHistory,
     };
 };

src/components/Chatting/components/ChattingMain.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, {useEffect, useState} from "react";
 import { useNavigate } from "react-router-dom";
 import { H1 } from "../../../styles/font-styles";
 import styles from "./ChattingMain.module.css";
@@ -11,16 +11,22 @@ import { useSetRecoilState } from "recoil";
 import { useChattingRoomHooks } from "../../../api/chatting/chatting";
 import { setLocalPromptMethod } from "../../../util/localStorage";
 import { t } from "i18next";
+import CreatePromptModal from "../../SideBar/components/Prompt/Modal/CreatePromptModal";
 
 function ChattingMain() {
     const navigate = useNavigate();
     const setPromptMethod = useSetRecoilState(promptMethodState);
     const { getChattingRoomList } = useChattingRoomHooks();
     const userName = localStorage.getItem("userName");
+    const [isPromptModalOpen, setIsPromptModalOpen] = useState(false);
     const handlePromptCreateClick = (type) => {
+        setIsPromptModalOpen(true);
         setPromptMethod(type);
         setLocalPromptMethod(type);
-        navigate(`/promptMaking/`);
+    };
+
+    const closePromptModal = () => {
+        setIsPromptModalOpen(false);
     };
 
     useEffect(() => {
@@ -54,6 +60,10 @@ function ChattingMain() {
                     onClick={() => handlePromptCreateClick("Free")}
                 />
             </div>
+            <CreatePromptModal
+                isOpen={isPromptModalOpen}
+                onClose={closePromptModal}
+            />
         </div>
     );
 }

src/components/PromptMaking/CombinationArea/SavePromptModal.jsx

@@ -6,14 +6,15 @@ import ModalButton from "../../common/ModalButton";
 import {
     promptMethodState,
     promptListState,
-    blockDetailsState,
+    blockDetailsState, userHistoryState,
 } from "../../../recoil/prompt/promptRecoilState";
 import { useRecoilValue } from "recoil";
 import RefinedPromptText from "../FinalPromptArea/RefinedPromptText";
 import { usePromptHook } from "../../../api/prompt/prompt";
 import { useChattingRoomHooks } from "../../../api/chatting/chatting";
 import ModalContainer from "../../common/ModalContainer";
 import { t } from "i18next";
+import {getLocalPromptCategory} from "../../../util/localStorage";
 
 const allCategories = ["IT", "게임", "글쓰기", "건강", "교육", "예술", "기타"];
 
@@ -30,10 +31,12 @@ const SavePromptModal = ({
     const prompt = promptList.find((p) => p.promptId === promptId);
     const [promptTitle, setPromptTitle] = useState("");
     const [promptDescription, setPromptDescription] = useState("");
-    const [promptCategory, setPromptCategory] = useState("IT");
+    const localPromptCategory = getLocalPromptCategory();
+    const [promptCategory, setPromptCategory] = useState(localPromptCategory);
     const promptMethod = useRecoilValue(promptMethodState);
+    const userHistoryValue = useRecoilValue(userHistoryState);
 
-    const { savePrompt } = usePromptHook();
+    const { savePrompt, userHistory } = usePromptHook();
     const { fetchPromptList, patchPromptBlock, patchPromptInfo } =
         useChattingRoomHooks();
 
@@ -46,7 +49,7 @@ const SavePromptModal = ({
             // Reset state if no prompt is found
             setPromptTitle("");
             setPromptDescription("");
-            setPromptCategory("IT");
+            setPromptCategory(localPromptCategory);
         }
     }, [prompt]);
 
@@ -65,7 +68,7 @@ const SavePromptModal = ({
             console.log("listPromptAtom:", listPromptAtom);
             console.log("promptPreview", promptPreview);
             patchPromptBlock(
-                promptId, 
+                promptId,
                 listPromptAtom,
                 promptPreview,
             );
@@ -90,6 +93,18 @@ const SavePromptModal = ({
                 listPromptAtom,
             );
 
+            userHistory(
+                userHistoryValue,
+                promptMethod,
+                promptCategory
+            );
+
+            console.log({
+                userHistoryValue,
+                promptMethod,
+                promptCategory
+            });
+
             console.log({
                 promptTitle,
                 promptDescription,
@@ -155,7 +170,7 @@ const SavePromptModal = ({
                         {allCategories.map((category) => (
                             <li
                                 key={category}
-                                onClick={(e) => setPromptCategory(category)} 
+                                onClick={(e) => setPromptCategory(category)}
                                 className={`${styles.option} ${
                                     category === promptCategory
                                         ? styles.active