diff --git a/src/api/prompt/prompt.js b/src/api/prompt/prompt.js
index 2282ba5..81d4e21 100644
--- a/src/api/prompt/prompt.js
+++ b/src/api/prompt/prompt.js
@@ -11,7 +11,8 @@ import {
categoryBlockShapesState,
activeCategoryState,
promptEvaluationState,
- promptEvaluationErrorState, fetchAiBlocksState,
+ promptEvaluationErrorState,
+ fetchAiBlocksState,
} from "../../recoil/prompt/promptRecoilState";
import { useRecoilState, useSetRecoilState } from "recoil";
@@ -146,7 +147,7 @@ export const usePromptHook = () => {
console.warn("Block missing blockValue:", block);
}
if (!block.blockId) {
- block.blockId = 10000+index;
+ block.blockId = 10000 + index;
console.warn(`Generated blockId for block:`, block);
}
});
@@ -213,7 +214,9 @@ export const usePromptHook = () => {
// 7. 블럭들의 detail들을 추가 할당한다.
setBlockDetails((prevBlockDetails) => {
- const newBlocks = Object.fromEntries(blocks.map((block) => [block.blockId, block]));
+ const newBlocks = Object.fromEntries(
+ blocks.map((block) => [block.blockId, block]),
+ );
return { ...prevBlockDetails, ...newBlocks };
});
};
@@ -224,9 +227,14 @@ export const usePromptHook = () => {
promptCategory: promptCategory,
};
- const response = await sendRequest(aiChatInstance, "get", `/recommend`, {
- params,
- });
+ const response = await sendRequest(
+ aiChatInstance,
+ "get",
+ `/recommend`,
+ {
+ params,
+ },
+ );
await updateAiPromptStructureFromApiData(response.data);
setFetchAiBlocksState(true);
};
@@ -291,18 +299,13 @@ export const usePromptHook = () => {
};
const userHistory = async (userHistory, promptMethod, promptCategory) => {
- const response = await sendRequest(
- promptInstance,
- "post",
- `/history`,
- {
- promptHistory: userHistory,
- promptMethod: promptMethod,
- promptCategory: promptCategory
- }
- );
+ const response = await sendRequest(promptInstance, "post", `/history`, {
+ promptHistory: userHistory,
+ promptMethod: promptMethod,
+ promptCategory: promptCategory,
+ });
return response;
- }
+ };
return {
fetchBlocks,
diff --git a/src/components/Chatting/components/ChattingMain.jsx b/src/components/Chatting/components/ChattingMain.jsx
index a13a4f8..75cf6ae 100644
--- a/src/components/Chatting/components/ChattingMain.jsx
+++ b/src/components/Chatting/components/ChattingMain.jsx
@@ -1,5 +1,4 @@
-import React, {useEffect, useState} from "react";
-import { useNavigate } from "react-router-dom";
+import React, { useEffect, useState } from "react";
import { H1 } from "../../../styles/font-styles";
import styles from "./ChattingMain.module.css";
import PromptCreateButton from "./Prompt/PromptCreateButton";
@@ -14,7 +13,6 @@ 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");
diff --git a/src/components/PromptMaking/CombinationArea/SavePromptModal.jsx b/src/components/PromptMaking/CombinationArea/SavePromptModal.jsx
index b2e1773..f64a01f 100644
--- a/src/components/PromptMaking/CombinationArea/SavePromptModal.jsx
+++ b/src/components/PromptMaking/CombinationArea/SavePromptModal.jsx
@@ -6,7 +6,8 @@ import ModalButton from "../../common/ModalButton";
import {
promptMethodState,
promptListState,
- blockDetailsState, userHistoryState,
+ blockDetailsState,
+ userHistoryState,
} from "../../../recoil/prompt/promptRecoilState";
import { useRecoilValue } from "recoil";
import RefinedPromptText from "../FinalPromptArea/RefinedPromptText";
@@ -14,7 +15,7 @@ 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";
+import { getLocalPromptCategory } from "../../../util/localStorage";
const allCategories = ["IT", "게임", "글쓰기", "건강", "교육", "예술", "기타"];
@@ -51,6 +52,7 @@ const SavePromptModal = ({
setPromptDescription("");
setPromptCategory(localPromptCategory);
}
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [prompt]);
if (!isOpen) return null;
@@ -67,11 +69,7 @@ const SavePromptModal = ({
const promptPreview = Object.values(refinedPromptParts).join(" ");
console.log("listPromptAtom:", listPromptAtom);
console.log("promptPreview", promptPreview);
- patchPromptBlock(
- promptId,
- listPromptAtom,
- promptPreview,
- );
+ patchPromptBlock(promptId, listPromptAtom, promptPreview);
patchPromptInfo(
promptId,
promptTitle,
@@ -93,16 +91,12 @@ const SavePromptModal = ({
listPromptAtom,
);
- userHistory(
- userHistoryValue,
- promptMethod,
- promptCategory
- );
+ userHistory(userHistoryValue, promptMethod, promptCategory);
console.log({
userHistoryValue,
promptMethod,
- promptCategory
+ promptCategory,
});
console.log({
@@ -135,9 +129,9 @@ const SavePromptModal = ({
onSubmit={handleSave}
children
>
-
-
{t(`promptMaking.promptPreView`)}
-
+
+
{t(`promptMaking.promptPreView`)}
+
diff --git a/src/components/PromptMaking/PromptMakingSideBar/PromptMakingSideBar.jsx b/src/components/PromptMaking/PromptMakingSideBar/PromptMakingSideBar.jsx
index f1f6839..ca7adaf 100644
--- a/src/components/PromptMaking/PromptMakingSideBar/PromptMakingSideBar.jsx
+++ b/src/components/PromptMaking/PromptMakingSideBar/PromptMakingSideBar.jsx
@@ -1,12 +1,13 @@
-import React, {useEffect} from "react";
+import React, { useEffect } from "react";
import styles from "./PromptMakingSidebar.module.css";
import { H4 } from "../../../styles/font-styles";
import logo from "../../../assets/logos/promaLogoSmall.svg";
import { Link } from "react-router-dom";
import AiBlockSection from "./components/AiBlockSection";
import BlockSection from "./components/BlockSection";
-import {useSetRecoilState} from "recoil";
-import {userHistoryState} from "../../../recoil/prompt/promptRecoilState";
+import { useSetRecoilState } from "recoil";
+import { userHistoryState } from "../../../recoil/prompt/promptRecoilState";
+
const PromptMakingSidebar = () => {
const setUserHistory = useSetRecoilState(userHistoryState);
diff --git a/src/components/PromptMaking/PromptMakingSideBar/components/AiBlockSection.jsx b/src/components/PromptMaking/PromptMakingSideBar/components/AiBlockSection.jsx
index 4902b04..457ccc7 100644
--- a/src/components/PromptMaking/PromptMakingSideBar/components/AiBlockSection.jsx
+++ b/src/components/PromptMaking/PromptMakingSideBar/components/AiBlockSection.jsx
@@ -1,17 +1,24 @@
-import React, {useEffect} from 'react';
+import React, { useEffect } from "react";
import styles from "./AiBlockSection.module.css";
-import {B4, B5} from "../../../../styles/font-styles";
-import {Draggable, Droppable} from "react-beautiful-dnd";
+import { B4, B5 } from "../../../../styles/font-styles";
+import { Draggable, Droppable } from "react-beautiful-dnd";
import PromptValueBlock from "../../../common/Prompt/PromptValueBlock";
-import {t} from "i18next";
-import {useRecoilState, useRecoilValue} from "recoil";
+import { t } from "i18next";
+import { useRecoilState, useRecoilValue } from "recoil";
import {
- activeAiBlocksState, activeCategoryState, availableCategoriesState, blockDetailsState,
+ activeAiBlocksState,
+ activeCategoryState,
+ availableCategoriesState,
+ blockDetailsState,
categoryBlockShapesState,
- categoryColorsState, fetchAiBlocksState,
+ categoryColorsState,
+ fetchAiBlocksState,
} from "../../../../recoil/prompt/promptRecoilState";
-import {getLocalPromptCategory, getLocalPromptMethod} from "../../../../util/localStorage";
-import {usePromptHook} from "../../../../api/prompt/prompt";
+import {
+ getLocalPromptCategory,
+ getLocalPromptMethod,
+} from "../../../../util/localStorage";
+import { usePromptHook } from "../../../../api/prompt/prompt";
import promaAnimation from "../../../../assets/animation/promaAnimation.json";
import Lottie from "react-lottie";
@@ -21,8 +28,10 @@ function AiBlockSection() {
const localPromptMethod = getLocalPromptMethod();
const localPromptCategory = getLocalPromptCategory();
const { fetchAiBlocks } = usePromptHook();
- const [isLoading,setFetchAiBlocksState] = useRecoilState(fetchAiBlocksState);
- const [activeCategory, setActiveCategory] = useRecoilState(activeCategoryState);
+ const [isLoading, setFetchAiBlocksState] =
+ useRecoilState(fetchAiBlocksState);
+ const [activeCategory, setActiveCategory] =
+ useRecoilState(activeCategoryState);
const activeBlocks = useRecoilValue(activeAiBlocksState);
const categories = useRecoilValue(availableCategoriesState);
const blockDetails = useRecoilValue(blockDetailsState);
@@ -65,65 +74,69 @@ function AiBlockSection() {
))}
- {(isLoading) ?
-
- {(provided) => (
-
- {activeBlocks[activeCategory]?.map(
- (blockId, index) => {
- const block = blockDetails[blockId];
- return (
-
- {(provided) => (
-
-
+
+ {(provided) => (
+
+ {activeBlocks[activeCategory]?.map(
+ (blockId, index) => {
+ const block = blockDetails[blockId];
+ return (
+
+ {(provided) => (
+
- )}
-
- );
- },
- )}
- {provided.placeholder}
-
- )}
-
- :
+ }
+ value={
+ block.blockValue
+ }
+ variant={
+ categoryBlockShapes[
+ activeCategory
+ ]
+ }
+ size="medium"
+ />
+
+ )}
+
+ );
+ },
+ )}
+ {provided.placeholder}
+
+ )}
+
+
+ ) : (
-
- {t(`promptMaking.aiRecommend`)}
-
+ {t(`promptMaking.aiRecommend`)}
- }
+ )}
);
diff --git a/src/components/PromptMaking/PromptMakingSideBar/components/BlockSection.jsx b/src/components/PromptMaking/PromptMakingSideBar/components/BlockSection.jsx
index 688f4fc..7df137a 100644
--- a/src/components/PromptMaking/PromptMakingSideBar/components/BlockSection.jsx
+++ b/src/components/PromptMaking/PromptMakingSideBar/components/BlockSection.jsx
@@ -1,18 +1,21 @@
-import React, {useEffect, useState} from 'react';
+import React, { useEffect, useState } from "react";
import styles from "./BlockSection.module.css";
-import {B5} from "../../../../styles/font-styles";
-import {Draggable, Droppable} from "react-beautiful-dnd";
+import { B5 } from "../../../../styles/font-styles";
+import { Draggable, Droppable } from "react-beautiful-dnd";
import PromptValueBlock from "../../../common/Prompt/PromptValueBlock";
-import {t} from "i18next";
+import { t } from "i18next";
import CreateBlockModal from "../CreateBlockModal";
-import {useRecoilState, useRecoilValue} from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
import {
- activeBlocksState, activeCategoryState, availableCategoriesState, blockDetailsState,
+ activeBlocksState,
+ activeCategoryState,
+ availableCategoriesState,
+ blockDetailsState,
categoryBlockShapesState,
categoryColorsState,
} from "../../../../recoil/prompt/promptRecoilState";
-import {getLocalPromptMethod} from "../../../../util/localStorage";
-import {usePromptHook} from "../../../../api/prompt/prompt";
+import { getLocalPromptMethod } from "../../../../util/localStorage";
+import { usePromptHook } from "../../../../api/prompt/prompt";
function BlockSection() {
const categoryColors = useRecoilValue(categoryColorsState);
@@ -21,7 +24,8 @@ function BlockSection() {
const localPromptMethod = getLocalPromptMethod();
const { fetchBlocks } = usePromptHook();
- const [activeCategory, setActiveCategory] = useRecoilState(activeCategoryState);
+ const [activeCategory, setActiveCategory] =
+ useRecoilState(activeCategoryState);
const activeBlocks = useRecoilValue(activeBlocksState);
const categories = useRecoilValue(availableCategoriesState);
const blockDetails = useRecoilValue(blockDetailsState);
@@ -85,25 +89,25 @@ function BlockSection() {
>
)}
);
- },
+ },
)}
{provided.placeholder}
diff --git a/src/components/SideBar/SideBar.jsx b/src/components/SideBar/SideBar.jsx
index 7181740..2e9bb1b 100644
--- a/src/components/SideBar/SideBar.jsx
+++ b/src/components/SideBar/SideBar.jsx
@@ -32,7 +32,7 @@ function SideBar() {
) : (
diff --git a/src/components/SideBar/components/Prompt/Modal/CreatePromptModal.jsx b/src/components/SideBar/components/Prompt/Modal/CreatePromptModal.jsx
index 40e0d62..3326676 100644
--- a/src/components/SideBar/components/Prompt/Modal/CreatePromptModal.jsx
+++ b/src/components/SideBar/components/Prompt/Modal/CreatePromptModal.jsx
@@ -7,20 +7,30 @@ import characterIcon from "../../../../../assets/images/characterIcon.svg";
import taskIcon from "../../../../../assets/images/taskIcon.svg";
import freeIcon from "../../../../../assets/images/freeIcon.svg";
import { useNavigate } from "react-router-dom";
-import {useRecoilState} from "recoil";
+import { useRecoilState } from "recoil";
import { promptMethodState } from "../../../../../recoil/prompt/promptRecoilState";
-import {setLocalPromptCategory, setLocalPromptMethod} from "../../../../../util/localStorage";
-import {B5, H5} from "../../../../../styles/font-styles";
+import {
+ setLocalPromptCategory,
+ setLocalPromptMethod,
+} from "../../../../../util/localStorage";
+import { B5, H5 } from "../../../../../styles/font-styles";
import { t } from "i18next";
function CreatePromptModal({ isOpen, onClose }) {
const navigate = useNavigate();
const [promptMethod, setPromptMethod] = useRecoilState(promptMethodState);
- const allCategories = ["IT", "게임", "글쓰기", "건강", "교육", "예술", "기타"];
+ const allCategories = [
+ "IT",
+ "게임",
+ "글쓰기",
+ "건강",
+ "교육",
+ "예술",
+ "기타",
+ ];
const [promptCategory, setPromptCategory] = useState("IT");
-
if (!isOpen) return null;
const handleCreateClick = () => {
diff --git a/src/hooks/promptHook/usePromptMaking.jsx b/src/hooks/promptHook/usePromptMaking.jsx
index a8f0514..5a2539b 100644
--- a/src/hooks/promptHook/usePromptMaking.jsx
+++ b/src/hooks/promptHook/usePromptMaking.jsx
@@ -1,11 +1,12 @@
-import {useRecoilState, useRecoilValue} from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
import { enqueueSnackbar } from "notistack";
import {
activeBlocksState,
combinationsState,
blockDetailsState,
- activeCategoryState, activeAiBlocksState,
- userHistoryState
+ activeCategoryState,
+ activeAiBlocksState,
+ userHistoryState,
} from "../../recoil/prompt/promptRecoilState";
import { useEffect } from "react";
import { t } from "i18next";
@@ -14,7 +15,8 @@ import { usePromptHook } from "../../api/prompt/prompt";
export const usePromptMaking = () => {
const [combinations, setCombinations] = useRecoilState(combinationsState);
const [activeBlocks, setActiveBlocks] = useRecoilState(activeBlocksState);
- const [activeAiBlocks, setActiveAiBlocks] = useRecoilState(activeAiBlocksState);
+ const [activeAiBlocks, setActiveAiBlocks] =
+ useRecoilState(activeAiBlocksState);
const [userHistory, setUserHistoryState] = useRecoilState(userHistoryState);
const blockDetails = useRecoilValue(blockDetailsState);
const activeCategory = useRecoilValue(activeCategoryState);
@@ -100,7 +102,8 @@ export const usePromptMaking = () => {
isBlockDefault,
);
} else if (
- (source.droppableId === "sidebar" || source.droppableId === "sidebar_ai") &&
+ (source.droppableId === "sidebar" ||
+ source.droppableId === "sidebar_ai") &&
destination.droppableId !== "sidebar" &&
destination.droppableId !== "sidebar_ai"
) {
@@ -113,9 +116,14 @@ export const usePromptMaking = () => {
} else if (
source.droppableId !== "sidebar" &&
source.droppableId !== "sidebar_ai" &&
- (destination.droppableId === "sidebar" || destination.droppableId === "sidebar_ai")
+ (destination.droppableId === "sidebar" ||
+ destination.droppableId === "sidebar_ai")
) {
- handleCombinationAreaToSidebar(source.droppableId, numericBlockId, destination.droppableId);
+ handleCombinationAreaToSidebar(
+ source.droppableId,
+ numericBlockId,
+ destination.droppableId,
+ );
} else if (
source.droppableId !== "sidebar" &&
source.droppableId !== "sidebar_ai" &&
@@ -177,14 +185,18 @@ export const usePromptMaking = () => {
}));
setUserHistoryState((prev) => {
- const prevEntries = typeof prev === 'string' ? prev.split('\n') : [];
+ const prevEntries =
+ typeof prev === "string" ? prev.split("\n") : [];
const nextNumber = prevEntries.length + 1;
- const description = blockDetails[blockId]?.blockDescription || 'Description not found';
+ const description =
+ blockDetails[blockId]?.blockDescription ||
+ "Description not found";
const newEntry = `${nextNumber}. ${category}에서 ${description}을 선택했습니다`;
- return prevEntries.length > 0 ? `${prevEntries.join('\n')}\n${newEntry}` : newEntry;
+ return prevEntries.length > 0
+ ? `${prevEntries.join("\n")}\n${newEntry}`
+ : newEntry;
});
-
if (sourceDroppableId === "sidebar") {
setActiveBlocks((prev) => ({
...prev,
@@ -215,7 +227,11 @@ export const usePromptMaking = () => {
// }));
// };
- const handleCombinationAreaToSidebar = (category, blockId, destinationDroppableId) => {
+ const handleCombinationAreaToSidebar = (
+ category,
+ blockId,
+ destinationDroppableId,
+ ) => {
setCombinations((prev) => ({
...prev,
[category]: null,
diff --git a/src/recoil/prompt/promptRecoilState.js b/src/recoil/prompt/promptRecoilState.js
index 6097ec4..9033f10 100644
--- a/src/recoil/prompt/promptRecoilState.js
+++ b/src/recoil/prompt/promptRecoilState.js
@@ -240,7 +240,6 @@ export const userHistoryState = atom({
default: "",
});
-
// // 각종 상태 초기화 함수
// export const useResetCategoriesOnTypeChange = () => {
// return useRecoilCallback(({ snapshot, set }) => async () => {
diff --git a/src/util/localStorage.js b/src/util/localStorage.js
index 3e8110c..6708314 100644
--- a/src/util/localStorage.js
+++ b/src/util/localStorage.js
@@ -9,23 +9,23 @@ export const getLocalPromptMethod = () => {
export const getTourFinished = () => {
const tourFinished = localStorage.getItem("tourFinished");
- if (tourFinished === 'false') {
+ if (tourFinished === "false") {
return false;
} else {
return true;
}
-}
+};
export const setTourFinish = (tourFinished) => {
localStorage.setItem("tourFinished", tourFinished.toString());
-}
+};
export const getIsFirstVisited = () => {
- const hasVisited = localStorage.getItem('hasVisited');
- if (hasVisited === 'false') {
+ const hasVisited = localStorage.getItem("hasVisited");
+ if (hasVisited === "false") {
return false;
} else {
- localStorage.setItem("hasVisited", 'true');
+ localStorage.setItem("hasVisited", "true");
return true;
}
};