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; } };