✨Feature - AI 블록을 사용한 프롬프트 저장

src/api/prompt/prompt.js

@@ -266,6 +266,7 @@ export const usePromptHook = () => {
         promptCategory,
         promptMethod,
         listPromptAtom,
+        aiListPromptAtom,
     ) => {
         await sendRequest(promptInstance, "post", ``, {
             promptTitle,
@@ -274,6 +275,7 @@ export const usePromptHook = () => {
             promptCategory,
             promptMethod,
             listPromptAtom,
+            aiListPromptAtom,
         });
         //TODO- ㅡ프롬프트 생성 후에, 프롬프트 리스트를 다시 불러오는 것
         // await fetchPromptList();

src/components/PromptMaking/CombinationArea/SavePromptModal.jsx

@@ -8,6 +8,7 @@ import {
     promptListState,
     blockDetailsState,
     userHistoryState,
+    aiListPromptState,
 } from "../../../recoil/prompt/promptRecoilState";
 import { useRecoilValue } from "recoil";
 import RefinedPromptText from "../FinalPromptArea/RefinedPromptText";
@@ -36,6 +37,7 @@ const SavePromptModal = ({
     const [promptCategory, setPromptCategory] = useState(localPromptCategory);
     const promptMethod = useRecoilValue(promptMethodState);
     const userHistoryValue = useRecoilValue(userHistoryState);
+    const aiListPromptValue = useRecoilValue(aiListPromptState);
 
     const { savePrompt, userHistory } = usePromptHook();
     const { fetchPromptList, patchPromptBlock, patchPromptInfo } =
@@ -78,17 +80,32 @@ const SavePromptModal = ({
             );
         } else {
             const promptPreview = Object.values(refinedPromptParts).join(" ");
+            const aiListPromptBlockIds = Object.values(aiListPromptValue).map(
+                (item) => item.blockId,
+            );
+
             const listPromptAtom = Object.values(combinations)
                 .filter(Boolean)
+                .filter(
+                    (value) => !aiListPromptBlockIds.includes(Number(value)),
+                )
                 .map((value, index) => ({ blockId: value }));
 
+            const aiListPromptAtom = Object.values(aiListPromptValue).map(
+                (item) => {
+                    const { blockId, ...rest } = item;
+                    return rest;
+                },
+            );
+
             savePrompt(
                 promptTitle,
                 promptDescription,
                 promptPreview,
                 promptCategory,
                 promptMethod,
                 listPromptAtom,
+                aiListPromptAtom,
             );
 
             userHistory(userHistoryValue, promptMethod, promptCategory);
@@ -106,6 +123,7 @@ const SavePromptModal = ({
                 promptCategory,
                 promptMethod,
                 listPromptAtom,
+                aiListPromptAtom,
             });
             // 여기서 일반적으로 이 데이터를 백엔드로 보내거나 상태 관리 시스템에 저장합니다
         }

src/hooks/promptHook/usePromptMaking.jsx

@@ -7,6 +7,7 @@ import {
     activeCategoryState,
     activeAiBlocksState,
     userHistoryState,
+    aiListPromptState,
 } from "../../recoil/prompt/promptRecoilState";
 import { useEffect } from "react";
 import { t } from "i18next";
@@ -17,6 +18,7 @@ export const usePromptMaking = () => {
     const [activeBlocks, setActiveBlocks] = useRecoilState(activeBlocksState);
     const [activeAiBlocks, setActiveAiBlocks] =
         useRecoilState(activeAiBlocksState);
+    const [aiListPrompt, setAiListPrompt] = useRecoilState(aiListPromptState);
     const [userHistory, setUserHistoryState] = useRecoilState(userHistoryState);
     const blockDetails = useRecoilValue(blockDetailsState);
     const activeCategory = useRecoilValue(activeCategoryState);
@@ -207,6 +209,13 @@ export const usePromptMaking = () => {
                 ...prev,
                 [category]: prev[category].filter((id) => id !== blockId),
             }));
+
+            setAiListPrompt((prev) => ({
+                ...prev,
+                [category]: blockDetails[blockId],
+            }));
+
+            console.log("aiList", aiListPrompt);
         }
 
         handleCombinationChange({

src/recoil/prompt/promptRecoilState.js

@@ -240,6 +240,11 @@ export const userHistoryState = atom({
     default: "",
 });
 
+export const aiListPromptState = atom({
+    key: "aiListPromptState",
+    default: {},
+});
+
 // // 각종 상태 초기화 함수
 // export const useResetCategoriesOnTypeChange = () => {
 //   return useRecoilCallback(({ snapshot, set }) => async () => {