🚑 fix: CI/CD 오류 해결

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,

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");

src/components/PromptMaking/CombinationArea/SavePromptModal.jsx

@@ -6,15 +6,16 @@ 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";
 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
         >
-             <div className={styles.formGroup}>
-                 <H5>{t(`promptMaking.promptPreView`)}</H5>
-                 <div className={styles.promptPreview}>
+            <div className={styles.formGroup}>
+                <H5>{t(`promptMaking.promptPreView`)}</H5>
+                <div className={styles.promptPreview}>
                     <RefinedPromptText />
                 </div>
             </div>

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

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,73 +74,77 @@ function AiBlockSection() {
                         </div>
                     ))}
                 </div>
-                {(isLoading) ? <div
-                    className={`${styles.blocksContainer} ${styles.tourTarget}`}
-                    style={{ "--active-color": getActiveColor() }}
-                >
-                    <Droppable droppableId="sidebar_ai">
-                        {(provided) => (
-                            <div
-                                {...provided.droppableProps}
-                                ref={provided.innerRef}
-                                className={styles.blocks}
-                                data-tour="blocks"
-                            >
-                                {activeBlocks[activeCategory]?.map(
-                                    (blockId, index) => {
-                                        const block = blockDetails[blockId];
-                                        return (
-                                            <Draggable
-                                                key={blockId}
-                                                draggableId={`${blockId}|${activeCategory}`}
-                                                index={index}
-                                            >
-                                                {(provided) => (
-                                                    <div
-                                                        ref={provided.innerRef}
-                                                        {...provided.draggableProps}
-                                                        {...provided.dragHandleProps}
-                                                        className={styles.block}
-                                                    >
-                                                        <PromptValueBlock
-                                                            color={
-                                                                categoryColors[
-                                                                    activeCategory
-                                                                    ]
+                {isLoading ? (
+                    <div
+                        className={`${styles.blocksContainer} ${styles.tourTarget}`}
+                        style={{ "--active-color": getActiveColor() }}
+                    >
+                        <Droppable droppableId="sidebar_ai">
+                            {(provided) => (
+                                <div
+                                    {...provided.droppableProps}
+                                    ref={provided.innerRef}
+                                    className={styles.blocks}
+                                    data-tour="blocks"
+                                >
+                                    {activeBlocks[activeCategory]?.map(
+                                        (blockId, index) => {
+                                            const block = blockDetails[blockId];
+                                            return (
+                                                <Draggable
+                                                    key={blockId}
+                                                    draggableId={`${blockId}|${activeCategory}`}
+                                                    index={index}
+                                                >
+                                                    {(provided) => (
+                                                        <div
+                                                            ref={
+                                                                provided.innerRef
                                                             }
-                                                            value={
-                                                                block.blockValue
+                                                            {...provided.draggableProps}
+                                                            {...provided.dragHandleProps}
+                                                            className={
+                                                                styles.block
                                                             }
-                                                            variant={
-                                                                categoryBlockShapes[
-                                                                    activeCategory
+                                                        >
+                                                            <PromptValueBlock
+                                                                color={
+                                                                    categoryColors[
+                                                                        activeCategory
                                                                     ]
-                                                            }
-                                                            size="medium"
-                                                        />
-                                                    </div>
-                                                )}
-                                            </Draggable>
-                                        );
-                                    },
-                                )}
-                                {provided.placeholder}
-                            </div>
-                        )}
-                    </Droppable>
-                </div> :
+                                                                }
+                                                                value={
+                                                                    block.blockValue
+                                                                }
+                                                                variant={
+                                                                    categoryBlockShapes[
+                                                                        activeCategory
+                                                                    ]
+                                                                }
+                                                                size="medium"
+                                                            />
+                                                        </div>
+                                                    )}
+                                                </Draggable>
+                                            );
+                                        },
+                                    )}
+                                    {provided.placeholder}
+                                </div>
+                            )}
+                        </Droppable>
+                    </div>
+                ) : (
                     <div className={styles.loadingSection}>
-                        <B4>
-                            {t(`promptMaking.aiRecommend`)}
-                        </B4>
+                        <B4>{t(`promptMaking.aiRecommend`)}</B4>
                         <Lottie
                             options={defaultOptions}
                             width={200}
                             height={200}
                             animationData={promaAnimation}
                         />
                     </div>
-                }
+                )}
             </div>
         </div>
     );